Jugaccino

Gaming News | Gaming Opinion | Playstation 4 | Xbox One | PS Vita | Film | Media

JavaFX – FlowPane and TilePane


Shafkat Shahzad - Senior Technical Content ManagerThe article will provide a user with information on flowpane and tilepane. The nodes within a FlowPane layout pane are laid out consecutively and wrap at the boundary set for the pane. Nodes can flow vertically (in columns) or horizontally (in rows). A vertical flow pane wraps at the height boundary for the pane. A horizontal flow pane wraps at the width boundary for the pane
Please note that gap properties can be set to manage the spacing between the rows and columns. The padding property can be set to manage the distance between the nodes and the edges of the pane. Let’s see how to create a flowpane.

FlowPane flow = new FlowPane();
flow.setPadding(new Insets(5, 0, 5, 0));
flow.setVgap(4);
flow.setHgap(4);
flow.setPrefWrapLength(170); // preferred width allows for two columns
flow.setStyle(“-fx-background-color: DAE6F3″);

ImageView pages[] = new ImageView[8];
for (int i=0; i<8; i++) {
pages[i] = new ImageView(
new Image(LayoutSample.class.getResourceAsStream("graphics/chart_"+i+".png")));
flow.getChildren().add(pages[i]);
}

border.setRight(flow); // Add to BorderPane
The last line of code adds the flow pane to the right region of a border pane.

The flow pane changes as the window is resized. The nodes within the pane are resized according to their layout constraints.

TilePane
Let’s have a look at tilepane now. A tile pane is similar to a flow pane. The TilePane layout pane places all of the nodes in a grid in which each cell, or tile, is the same size. Nodes can be laid out horizontally (in rows) or vertically (in columns). Horizontal tiling wraps at the width boundary for the pane or as needed to honor the preferred number of columns. Vertical tiling wraps at the height boundary for the pane or as needed to honor the preferred number of rows. Gap properties can be set to manage the spacing between the rows and columns. The padding property can be set to manage the distance between the nodes and the edges of the pane.

Let’s see how to create a horizontal tile pane
TilePane tile = new TilePane();
tile.setPadding(new Insets(5, 0, 5, 0));
tile.setVgap(4);
tile.setHgap(4);
tile.setPrefColumns(2);
tile.setStyle(“-fx-background-color: DAE6F3″);

ImageView pages[] = new ImageView[8];
for (int i=0; i<8; i++) {
pages[i] = new ImageView(
new Image(LayoutSample.class.getResourceAsStream("graphics/chart_"+i+".png")));
tile.getChildren().add(pages[i]);
}
If a user has read this article then he/she would have learnt about flowpane and tilepane.

Be Sociable, Share!

Leave a Comment