Fluid layouts

Despite all the listed practices, you can only shrink elements so much. So the next option will be to rearrange them once space becomes a bigger issue.

The easiest thing to adapt is text. It can be naturally split into words into separate lines saving width at the price of height. Most controls which contain text support wrapText property to control that behavior.

Default button behavior is to show ellipses (...) if the text is too long. It can be changed using wrapTextProperty() value:

For other nodes, similar behavior is provided by the FlowPane layout manager.

Note that it doesn't work ideally for all configurations and fluid UI structure may confuse users. Property pages are one convenient example, as shown in the following screenshot:

To create such a UI, we use FlowPane and populate it with properties:

// chapter7/resizing/FlowLayoutDemo.java
FlowPane root = new FlowPane();

root.setOrientation(Orientation.VERTICAL);

// generating "properties"
int rnd = 0;
for (String string : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt".split(" ")) {
TextField tf = new TextField("value " + rnd++);
HBox.setHgrow(tf, Priority.ALWAYS); // to make it look better
HBox hBox = new HBox(5, new Label(string), tf);
hBox.setPadding(new Insets(5));
root.getChildren().add(hBox);
}
primaryStage.setTitle("FlowPane Demo");
primaryStage.setScene(new Scene(root, 450, 250));
primaryStage.show();
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.225.255.187