<img alt="" src="https://secure.leadforensics.com/150446.png " style="display:none;">
Go to top icon

JavaFX 2.0 Resizing of UI Controls

Nitin Gupta Feb 15, 2012

javafx 2.0 Technology java desktop development

Resizing of the Root

Everything that extends Region or Control and is set as the root will automatically fit to the Scene. Anything that extends Group will not.

If you do not want the application to resize with the scene, add a Group as the root.

Resizing of Child Nodes

The size of a resizable node (Region, Control, WebView) will depend on two things:

  1. It's own min/pref/max size preferences
  2. The sizing policy of its parent

Following is a brief description of how the various nodes will be resized if the following are the Parent containers:

FlowPane: FlowPane will always resize nodes to their preferred sizes. This means controls added to a flowpane won’t resize if you resize the application window. FlowPane should contain only those controls for which resizing is not required.

StackPane: StackPane will attempt to resize its children to fill its area (up to the child's max size limits).This means that a node’s default MAX size has everything to do with how its resize.

All Layout panes and most of the controls have an unbounded max size, which means a StackPane will stretch them out. The exceptions:

  • Label, Buttons, Hyperlink, Slider, ProgressBar returns pref size for max (so they don't stretch by default)
  • MenuBar, TextBox return pref for max height (width is unbounded)

If you don't want a GridPane to be stretched beyond its preferred size, just clamp it:
gridpane.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);

If you want a Button's width to be flexible:
button.setMaxWidth(Double.MAX_VALUE);

GridPane:

The sizing of rows and columns in a GridPane will depend on the percentage width set for the CoulmnConstraints and percentage height set for the RowContraints. The code below sets the percentage with for column 1 and 2 and percentage height of rows 1 to 4

ColumnConstraints column1 = new ColumnConstraints();

column1.setPercentWidth(50);

ColumnConstraints column2 = new ColumnConstraints();

column2.setPercentWidth(50);

configurationPane.getColumnConstraints().addAll(column1, column2);

RowConstraints rowConstraints1=new RowConstraints();

rowConstraints1.setPercentHeight(30);

RowConstraints rowConstraints2=new RowConstraints();

rowConstraints2.setPercentHeight(30);

RowConstraints rowConstraints3=new RowConstraints();

rowConstraints3.setPercentHeight(30);

RowConstraints rowConstraints4=new RowConstraints();

rowConstraints4.setPercentHeight(10);

configurationPane.getRowConstraints().

addAll(rowConstraints1,rowConstraints2,rowConstraints3,rowConstraints4);

Once the rows and columns of Grid are resized the sizing of the nodes within each of them would behave based on the resizing policy of the controls as discussed under stack pane.

VBox:

The setVgrow method sets the vertical grow priority for the child when contained by an VBox. If set, the VBox will use the priority to allocate additional space if the VBox is resized larger than its preferred height. If multiple VBox children have the same vertical grow priority, then the extra space will be split evening between them. If no vertical grow priority is set on a child, the VBox will never allocate it additional vertical space if available. Setting the value to null will remove the constraint.

HBox:

The setHgrow method sets the horizontal grow priority for the child when contained by an HBox. If set, the HBox will use the priority to allocate additional space if the HBox is resized larger than its preferred width. If multiple HBox children have the same horizontal grow priority, then the extra space will be split evening between them. If no horizontal grow priority is set on a child, the HBox will never allocate it additional horizontal space if available. Setting the value to null will remove the constraint

BorderPane:

Border Pane again uses the resizing policy of the nodes as discussed under stack pane to resize the nodes.

Left Node: If the node placed on the left edge of the border pane is resizable, it will be resized to its preferred width and the height will span the height of the border pane between the top and bottom nodes. If the node cannot be resized to fill the left space (it's not resizable or its max size prevents it) then it will be aligned top-left within the space unless the child's alignment constraint has been set.

Right Node: If the node placed on the right edge of this border pane is resizable, it will be resized to its preferred width and its height will span the height of the border pane between the top and bottom nodes. If the node cannot be resized to fill the right space (it's not resizable or its max size prevents it) then it will be aligned top-right within the space unless the child's alignment constraint has been set.

Top Node: If the node placed on the top edge of this border pane is resizable, it will be resized to its preferred height and its width will span the width of the border pane. If the node cannot be resized to fill the top space (it's not resizable or its max size prevents it) then it will be aligned top-left within the space unless the child's alignment constraint has been set.

Bottom Node: If the node placed on the bottom edge of the border pane is resizable, it will be resized to its preferred height and its width will span the width of the border pane. If the node cannot be resized to fill the bottom space (it's not resizable or its max size prevents it) then it will be aligned bottom-left within the space unless the child's alignment constraint has been set.

References:

JavaFX JavaDocs: http://download.oracle.com/javafx/2.0/api/index.html

Similar Blog

One of the very interesting features of JavaFX is its ability to have gradients (Linear or Radial) to the background color of the ...

By Sai Dandem Jul 19, 2012

JavaFX 2.x has many fascinating and useful controls. Among them “TabPane” is also one of the control. Here I am not going in ...

By Sai Dandem Jun 13, 2012

This post simply explains, development of JavaFX 2 application using FXML.

By Amol Hingmire May 23, 2012

We at e-Zest are working on JavaFX 2.0 for more than a year and are amongst the few early adopters of the technology. Based on ...

By Nitin Gupta May 07, 2012

e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.