Spike: JavaFX Layouts

[jsarabia]

Compare and contrast the following layouts: Pane, Region, Hbox/Vbox, Flowpane, Borderpane, Anchorpane

For each layout: Can you align child nodes? Can you resize? If yes, how?

What is reflow and how does it affect the UI?

[KJoslyn]

Region is the base class for all Node-based UI controls.

1. You cannot directly add children to a region since Region only has an unmodifiable list of children via the public API. However, it looks like tornadofx makes it possible to add children using the extension method add on EventTarget, or by adding children via tornadofx's lambda builder style.
2. Yes, Region can be resized by using prefWidth, prefHeight, or prefSize, etc. Interestingly, if using hgrow = Priority.ALWAYS, the height defaults to 0 if there are no children.

Pane extends Region and is the base class of all layouts in JavaFX.

1. Child nodes can be added by using pane.getChildren().add() or addAll().
2. The parent will resize the pane within the pane's resizable range (you can easily set the preferred size by setPrefSize(X,Y). Pane also has a minimum, preferred, and maximum width and height. Inset sizes determine the minimum dimensions. Preferred width height is calculated by taking: Inset sizes + min width/height required to encompass each child at its x/y location and preferred width/height

HBox/VBox extends Pane.

New features beyond Pane:

• HBox adds children horizontally with an optional horizontal spacing between the children
• VBox adds children vertically with an optional vertical spacing between the children
• alignment property determines the alignment of the contents within the pane's width/height. (defaults to Pos.TOP_LEFT)
  1. Children are added the same way as Pane. However, now each child can have an hgrow (for HBox ONLY)/vgrow (for VBox ONLY) priority set. If multiple children are set to the same priority, they get equal amounts of space up to their max width/height. Children can also have an optional margin constraint of type Insets; this is the margin space around the outside of the child.
  2. The parent will resize the HBox/VBox within its resizable range. fillHeight for an HBox and fillWidth for VBox determines whether the HBox/VBox should resize its children to fill its own height/width or keep their heights/widths to their preferred values. It DOES NOT impact the height/width of the HBox/VBox itself. The preferred width of an HBox is calculated by taking left/right insets + sum(child preferred widths) + spacing b/t each child. Preferred height = top/bottom insets + max(children preferred heights)

Important: alignment and isFillHeight/isFillWidth affect the layout of the children in the HBox/VBox, while min/pref/maxWidth/Height set the HBox/VBox size. vgrow/hgrow are settings on the individual children.

FlowPane extends Pane. Need to specify an orientation (vertical or horizontal).

1. Children are added in a flow that wraps either vertically or horizontally at the flowpane boundary
2. FlowPane's parent can resize the FlowPane. For a horizontal FlowPane, prefWidth = left/right insets + prefWrapLength; prefHeight = top/bottom insets + height required to display all children at their preferred heights when wrapped at a specified width.

• vgap is the amount of vertical space between each node in a vertical flowpane or the space between rows in a horizontal flowpane
• hgap is the amount of horizontal space between each node in a horizontal flowpane or the space between columns in a vertical flowpane.

BorderPane extends Pane.

1. Child nodes are added by adding them to regions inside the BorderPane (top, left, right, bottom, center)
2. BorderPane can be resized by the parent. It is often used as the root of a Scene- in this case, its size = the size of the scene. Otherwise, the parent resizes the borderpane.

• Top and Bottom are resized to their preferred heights and extend the width of the borderpane.
• Left and Right are resized to their preferred widths and extend between Top and Bottom.
• Center is resized to fill available space in the middle.
• Similar to HBox/VBox, BorderPane has alignment and margin optional constraints for the children. Now, the alignment only applies to the specific area within the borderpane that the child is added to.

AnchorPane extends Pane. It allows the edges of child nodes to be anchored to an offset from the pane's edges.

1. Children are added by setting anchor points for the children (can set one or more of: topAnchor, leftAnchor, bottomAnchor, rightAnchor).
2. The parent can resize the anchorpane according to the anchorpane's contents.
   • If there is a border or padding set, offsets are measured from the inside edge of the insets.
   • If anchors are provided on opposite sides (and the child is resizable), the child will be resized to maintain the offsets; otherwise the anchor pane will resize the child to its preferred size.

Reflow is the re-calculation of positions and dimensions of all elements. Commonly, if the user resizes the window, UI elements may be either resized or moved to better accommodate the new window size. For example, if the screen width decreases, elements may be stacked vertically on top of eachother; if the screen width increases, elements may move next to each other horizontally in rows.

Other reflow triggers are:

• Adding/removing/changing visibility of DOM elements
• Animations
• CSS style changes that alter the layout
• Other user actions such as hovers or text entry

Reflow can be expensive and blocks the UI thread. To mitigate reflow,

• Use less CSS Rules
• Use CSS Rules with simple selectors
• Reduce depth of the DOM tree etc.....