JavaFX: TilePane

 

TilePane lays out its children in a grid of uniformly sized "tiles". Each shape or UI component in TilePane is inside a tile. In tile plane, the size of each tile is uniform and determined by the size of largest child node.

 

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

 

public TilePane()

public TilePane(Orientation orientation)

public TilePane(double hgap, double vgap)

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

public TilePane(Node... children)

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

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

public TilePane(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.

 

Different types of TilePanes

There are two types of tile panes.

a.   Horizontal TilePane

b.   Vertical TilePane

 

Horizontal TilePane

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

 

Example

TilePane horizontalTilePane = new TilePane();

horizontalTilePane.setOrientation(Orientation.HORIZONTAL);

                 

Vertical TilePane

A vertical tilepane will tile nodes in columns, wrapping at the tilepane's height.

 

Example

TilePane verticalTilePane = new TilePane();

verticalTilePane.setOrientation(Orientation.VERTICAL);

 

Find the below working application.

 

horizontalTilePane.fxml

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

<TilePane xmlns:fx="http://javafx.com/fxml" fx:controller="com.sample.app.layout.controller.HorizontalTilePaneController"
	fx:id="tilePane1" 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"/>
	
</TilePane>

 

HorizontalTilePaneController.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.TilePane;
import javafx.scene.paint.Color;

public class HorizontalTilePaneController  implements Initializable {

	@FXML
	private TilePane tilePane1;

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

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

}

 

HorizontalTilePaneDemo.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 HorizontalTilePaneDemo extends Application {

	private static final String FXML_FILE = "/horizontalTilePane.fxml";
	private static final String STAGE_TITLE = "Horizontal tile 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

 

As you see the above screen, you can observe that the size of each tile is uniform and determined by the size of largest child node. In our case, the largest child node is an ellipse.

 

Since it is vertical tile pane, when you resize the window vertically, you can observe UI components remain centered.

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

 

 

 

Previous                                                    Next                                                    Home