JavaFX: FlowPane

 

FlowPane lays out its children in a flow that wraps at the flowpane's boundary.

 

FlowPane class provides following constructors to get an instance of FlowPane.

 

 

There are two different types of flowplane.

a.   Horizontal flowpane

b.   Vertical flowpane

 

Horizontal flowpane

A horizontal flowpane (the default) will layout nodes in rows, wrapping at the flowpane's width.

 

Example

FlowPane horizontalFlowPane = new FlowPane();

horizontalFlowPane.setOrientation(Orientation.HORIZONTAL);

 

Vertical flowpane

A vertical flowpane lays out nodes in columns, wrapping at the flowpane's height.

 

Example

FlowPane verticalFlowPane = new FlowPane();

verticalFlowPane.setOrientation(Orientation.VERTICAL);

 

public FlowPane()

public FlowPane(Orientation orientation)

public FlowPane(double hgap, double vgap)

public FlowPane(Orientation orientation, double hgap, double vgap)

public FlowPane(Node... children)

public FlowPane(Orientation orientation, Node... children)

public FlowPane(double hgap, double vgap, Node... children)

public FlowPane(Orientation orientation, double hgap, double vgap, Node... children)

orientation: specifies the direction the tiles should flow & wrap

hgap: specifies the amount of horizontal space between each tile

vgap: specifies the amount of vertical space between each tile

children: specifies the initial set of children for this pane.

 

Horizontal flowpane demo

 

horizontalFlowPane.fxml 

<?import javafx.scene.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.effect.*?>

<FlowPane xmlns:fx="http://javafx.com/fxml" fx:controller="com.sample.app.layout.controller.HorizontalFlowPaneController"
	fx:id="flowPane1" orientation="horizontal" hgap="20" vgap="20">

	<Rectangle fx:id="rectangle1" 
		fill="salmon"
		width="60" height="60" 
	 />
	 
	 <Rectangle fx:id="rectangle1" 
		fill="green"
		width="60" height="60" 
	 />
	 
	 <Rectangle fx:id="rectangle1" 
		fill="blue"
		width="60" height="60" 
	 />

		
	<Circle fx:id="circle1" 
		radius="40" 
		fill="salmon"/>
		
	<Circle fx:id="circle1" 
		radius="40" 
		fill="green"/>
		
	<Circle fx:id="circle1" 
		radius="40" 
		fill="blue"/>
		
	
	<Ellipse fx:id="ellipse1" 
		radiusX ="60" radiusY="40" 
		fill="salmon"/>
		
	<Ellipse fx:id="ellipse1" 
		radiusX ="60" radiusY="40" 
		fill="green"/>
		
	<Ellipse fx:id="ellipse1" 
		radiusX ="60" radiusY="40" 
		fill="blue"/>
	
</FlowPane>

 

HorizontalFlowPaneController.java

package com.sample.app.layout.controller;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.FlowPane;
import javafx.scene.paint.Color;

public class HorizontalFlowPaneController implements Initializable {

	@FXML
	private FlowPane flowPane1;

	@Override
	public void initialize(URL location, ResourceBundle resources) {
		DropShadow dropShadow = new DropShadow();
		dropShadow.setOffsetX(5);
		dropShadow.setOffsetY(5);
		dropShadow.setColor(Color.GRAY);

		flowPane1.setEffect(dropShadow);
		flowPane1.setAlignment(Pos.TOP_CENTER);
		flowPane1.setPadding(new Insets(20, 20, 20, 20));
	}

}

 

HorizontalFlowPaneDemo.java

package com.sample.app.layout;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class HorizontalFlowPaneDemo extends Application {

	private static final String FXML_FILE = "/horizontalFlowPane.fxml";
	private static final String STAGE_TITLE = "Horizontal flow pane demo";

	public static void main(String args[]) {
		launch(args);

	}

	@Override
	public void start(Stage primaryStage) throws Exception {

		Parent root = (Parent) FXMLLoader.load(this.getClass().getResource(FXML_FILE));

		Scene scene = new Scene(root, 500, 400, Color.WHITE);

		primaryStage.setTitle(STAGE_TITLE);
		primaryStage.setScene(scene);
		primaryStage.show();
	}

}

 

Output

 

When you resize the window horizontally, Flowpane reposition the UI components to fit in the window.

Since this is a horizontal flow pane, when you resize the window vertically, you can observe UI components remain centered.

 

 

Previous                                                    Next                                                    Home