JavaFX layout alignment, equivalent to GridBagLayout

Question

I'm wondering if anyone has much experience with JavaFX 8. I'm doing some form layouts and need to align them (i'm abit OCD with this stuff). I know in Swing I could use GridBagLayout, but this isn't applicable anymore, where I could set weights and what not, but I don't think I can do that with GridPane, is there any equivalent to this in JavaFX?

I can't post images, so I've linked it, to what it looks like at the moment, and highlighted some areas that aren't what I want.

https://gyazo.com/c112ab623ffd66e6f723eb9be1fcaea9

The code is also available before

    public class ControlsPanel extends GridPane {
    private TextField[] buttons;
    private TextField[] miscTextFields;

    private Label[] labels;

    private Button startSimBtn;

    private TabPane tabPane;
    private Tab cooperatorTab, defectorTab;
    private final int PADDING = 5;
    private final String[] v = 
        {
            "C_A_N", "C_A_PD", 
            "C_A_PN", "C_N_N", 
            "C_N_PD", "C_N_PN", 
            "D_A_N", "D_A_PD",
            "D_A_PN", "D_N_N",
            "D_N_PD", "D_N_PN"
        };
    private final String[] miscTfLabelValues = 
    {
            "Apology cost: ", "Noise level: ", "Punishmment Cost: ", "Punished Cost: "
    };

    public ControlsPanel() 
    {
        buttons = new TextField[12];
        labels = new Label[buttons.length];
        miscTextFields = new TextField[miscTfLabelValues.length];

        for(int k = 0; k < miscTfLabelValues.length; k++) 
        {
            miscTextFields[k] = new TextField();
        }

        for(int j = 0; j < buttons.length; j++) 
        {
            buttons[j] = new TextField();
        }

        for(int i = 0; i < v.length; i++)
        {
            labels[i] = new Label(v[i]);
        }

        tabPane = new TabPane();
        startSimBtn = new Button("Start");

        cooperatorTab = new Tab("Cooperator");
        defectorTab = new Tab("Defector");

        layoutComponents();
    }

    private void layoutComponents() 
    {
        setAlignment(Pos.TOP_LEFT);

        cooperatorTab.setContent(layoutCooperatorTab());
        cooperatorTab.setClosable(false);
        defectorTab.setContent(layoutDefectorTab());
        defectorTab.setClosable(false);

        tabPane.getTabs().addAll(cooperatorTab, defectorTab);

        getColumnConstraints().add(new ColumnConstraints(Values.SCREEN_WIDTH));

        add(tabPane, 0, 0);

        add(layoutMiscPane(), 0, 1);
    }

    private GridPane layoutMiscPane() 
    {
        GridPane pane = new GridPane();

        pane.setAlignment(Pos.TOP_LEFT);
        pane.setHgap(10);
        pane.setVgap(10);
        pane.setPadding(new Insets(PADDING,PADDING,PADDING, 15));


        pane.setPadding(new Insets(0, 75, 15, 15));
        pane.add(new Label(miscTfLabelValues[0]), 0, 1);

        pane.add(miscTextFields[0], 1, 1);

        pane.setPadding(new Insets(0, -100, 0, 0));
        pane.add(new Label(miscTfLabelValues[1]), 0, 2);

        pane.add(miscTextFields[1], 1, 2);

        //
        pane.add(new Label(miscTfLabelValues[2]), 0, 3);

        pane.add(miscTextFields[2], 1, 3);

        //
        pane.add(new Label(miscTfLabelValues[3]), 0, 4);

        pane.add(miscTextFields[3], 1, 4);

        return pane;

    }
    private GridPane layoutCooperatorTab()
    {

        GridPane pane = new GridPane();

        pane.setAlignment(Pos.TOP_LEFT);
        pane.setHgap(10);
        pane.setVgap(10);
        pane.setPadding(new Insets(PADDING,PADDING,PADDING, 15));

        pane.add(labels[0], 0, 1);

        pane.add(buttons[0], 1, 1);

        pane.add(labels[1], 0, 2);

        pane.add(buttons[1], 1, 2);

        //
        pane.add(labels[2], 0, 3);

        pane.add(buttons[2], 1, 3);

        //
        pane.add(labels[3], 0, 4);

        pane.add(buttons[3], 1, 4);


        //
        pane.add(labels[4], 0, 5);

        pane.add(buttons[4], 1, 5);

        //
        pane.add(labels[5], 0, 6);

        pane.add(buttons[5], 1, 6);

        return pane;
    }
    private GridPane layoutDefectorTab() 
    {
        GridPane pane = new GridPane();

        pane.setAlignment(Pos.TOP_LEFT);
        pane.setHgap(10);
        pane.setVgap(10);
        pane.setPadding(new Insets(PADDING,PADDING,PADDING,15));

        pane.add(labels[6], 0, 1);

        pane.add(buttons[6], 1, 1);

        pane.add(labels[7], 0, 2);

        pane.add(buttons[7], 1, 2);

        //
        pane.add(labels[8], 0, 3);

        pane.add(buttons[8], 1, 3);

        //
        pane.add(labels[9], 0, 4);

        pane.add(buttons[9], 1, 4);


        //
        pane.add(labels[10], 0, 5);

        pane.add(buttons[10], 1, 5);

        //
        pane.add(labels[11], 0, 6);

        pane.add(buttons[11], 1, 6);

        return pane;
    }
}

James_D · Accepted Answer

GridPane is indeed the closest equivalent in JavaFX to Swing's GridBagLayout. You get a lot of control over the allocation of space to columns and rows by using ColumnConstraints and RowConstraints objects. These can allocate absolute min/pref/max sizes (width for columns and height for rows), or can allocate a percentage of the total width/height. You can also allocate priorities for growing, if the GridPane grows larger than the preferred size, and alignment properties for if a cell contains more space than its node uses.

Additionally, there are static methods in GridPane that can set properties on nodes; this allows for controlling alignment and grow priorities on a node-by-node basis, and also allows you to specify margins for each node.

For example, in your layoutMiscPane() method, you might do

ColumnConstraints leftCol = new ColumnConstraints();
leftCol.setHalignment(HPos.RIGHT);
ColumnConstraints rightCol = new ColumnConstraints();
rightCol.setHgrow(Priority.ALWAYS);
rightCol.setfillWidth(true);

pane.getColumnConstraints().addAll(leftCol, rightCol);

See the documentation for GridPane and also for ColumnConstraints and RowConstraints.

JavaFX layout alignment, equivalent to GridBagLayout

Answers (2)

Related Questions