CODEWITHSUNDEEP
javafxresizebind
Water
Water

Reputation: 3705

Layout for JavaFX with resizable component and bindings, is this proper? (image included)

I'm creating a 2x2 grid which will contain components inside of them. They will look like the following image:

enter image description here

I'm unsure what the proper layout should be for this. The problem is the bottom right isn't really aligned... so I'm guessing a grid layout won't work (or can it?). I figured I'd do a BorderPane and have the top contain the top two panes, and the bottom contain the bottom two, then do another BorderPane in those and go from there.

1) Is this a good way to approach this (border layout ignoring the center), or is there a better layout?

Next: The blue box will resize based on how large the full screen is. The problem I run into is that after growing large, when it's shrunk, the black boxes (which should always stay the same dimensions, excluding the ones that touch the blue sides which should resize)

2) Is there a way to make the black boxes adjust to the size of the blue box?

By this I mean: If the blue box grows vertically, the top right pane will have to extend vertically as well. Likewise, it also will have to shrink if the blue one does. Can this be done by binding both heights? Since the bottom rectangles won't expand, is there a way to bind it so if the height of the entire pane is x then the bound height that JavaFX will calculate for me will be x - bottomFixedHeight, yet also will not go smaller than lets say 128 (as an arbitrary example)?

Note: I'm not familiar with multiple bindings, I'm trying to google it though maybe an example could help.

Upvotes: 1

Views: 3490

Answers (1)

ItachiUchiha
ItachiUchiha

Reputation: 36782

Background

IMHO, BorderPane is the best Layout you can use for the above stated scenario.

The Javadoc for BorderPane says,

The top and bottom children will be resized to their preferred heights and extend the width of the border pane. The left and right children will be resized to their preferred widths and extend the length between the top and bottom nodes. And the center node will be resized to fill the available space in the middle.

enter image description here

So using TOP and BOTTOM is not a suitable scenario. I would suggest to go with CENTER and BOTTOM.

SOLUTION

Now that we have decided to use BorderPane, let us decide the Layout we can use for filling the four space.

  1. As we can see in the above picture, we can use the CENTER and RIGHT of the BorderPane to create the upper part. Let us add VBox to center and right space of the borderpane. The VBox on the right side must have a PREF_WIDTH and MAX_WIDTH specified so as to make sure it doesn't exceed a supplied WIDTH. If you want to have a MIN_WIDTH, you can supply that as well.
  2. For the BOTTOM, we can use a HBox, then add two VBox to it. For the first VBox, as we want it to exceed in Width, when re-sized, we will set the HBox.hgrow="ALWAYS". For the bottom right VBox, we will again set the width as we did for the top-right VBox and the HBox.hgrow="NEVER".

Note : You can replace VBox with your preferred layout. PREF_WIDTH and PREF_HEIGHT is used for the initial WIDTH and HEIGHT

I have created a sample using scenebuilder and the output is, as shown

enter image description here

FXML

<BorderPane minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <bottom>
      <HBox prefHeight="100.0" prefWidth="200.0" BorderPane.alignment="CENTER">
         <children>
            <VBox prefHeight="100.0" prefWidth="100.0" style="-fx-border-color: green;" HBox.hgrow="ALWAYS" />
            <VBox minWidth="70.0" prefHeight="200.0" prefWidth="70.0" style="-fx-border-color: black;" HBox.hgrow="NEVER" />
         </children>
      </HBox>
   </bottom>
   <right>
      <VBox minWidth="100.0" prefHeight="200.0" prefWidth="100.0" style="-fx-border-color: red;" BorderPane.alignment="CENTER" />
   </right>
   <center>
      <VBox prefHeight="200.0" prefWidth="100.0" style="-fx-border-color: blue;" BorderPane.alignment="CENTER" />
   </center>
</BorderPane>

Authors Note : Though I would not consider binding to be important here, you can anyway use it if you desire for better control.

Upvotes: 2

Related Questions