How-To's > How do I lay out my UI page?

You can lay out your scene in any of three ways:

• Use an application-managed layout system
• Use a container-managed layout system
• Create custom containers

Use an Application-Managed Layout System

Use x, y, or translateX, translateY to specify coordinates. You can also use layoutX and layoutY variables in the Node class. Use binding for dynamic behavior. The following code shows a simple example of application-managed layout:

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;

def colors = ["DARKGREEN", "FORESTGREEN", "LIMEGREEN"];

Stage {
    title: "Application-based layout"
    scene: Scene {
    width: 200
    height: 200
        content: [
            for (color in colors)
                Rectangle {           
                    x: 10 + (50*indexof color)           
                    y: 10           
                    height: 20           
                    width: 30
                    fill:Color.web(color)     
               }
         ]
     }
 }
  

Use a Container-Managed Layout System

You can put nodes inside any of the following concrete containers: HBox, VBox, Flow, Stack, and Tile. The following code shows an HBox layout that produces the same result as the previous code for application-managed layout:

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.layout.HBox;

var colors = ["DARKGREEN", "FORESTGREEN", "LIMEGREEN"];

Stage {
    title: "Container-based layout"
    scene: Scene {
    width: 200
    height: 200
        content: [  
            HBox{ spacing: 20 content: for (color in colors)
                Rectangle {
                    translateX: 10
                    translateY: 10
                    height: 20
                    width: 30
                    fill:Color.web(color)
                }
            }
        ]
     }
 }
 

Create Custom Containers

You can create custom containers in either of two ways:

• Create a subclass of the Container class and use the following convenience functions:
  • getManaged(content:Node[]):Node[]
  • getNodePrefWidth(node)
  • getNodePrefHeight(node)
  • positionNode(node, x, y)
  • resizeNode(node, width, height)
  • layoutNode(node, areaX, areaY, areaWidth, areaHeight, hpos, vpos)
  
  
• Use the Panel class to attach container behaviors to an object literal by using the following function variables:
  • maxWidth:function():Number
maxHeight:function():Number
    Calculates the maximum width and height of the panel.
  • minWidth():function():Number
minHeight:function():Number
    Calculates the minimum width and height of the panel.
  • prefWidth:function(height:Number):Number
prefHeight:function(width:Number):Number
    Calculates the preferred width and height of the panel.
  • onLayout:function():Void
    By default, points to the resizeContent() function, which sets all of the resizable child nodes to their preferred sizes.

Examples

• Creating Flying Letters
  This sample shows the use of a custom layout that uses the Panel class.
• Building GUI Applications With JavaFX, Lesson 3: Presenting UI Objects in a Graphical Scene
  This tutorial chapter provides a basic introduction to laying out nodes in a scene graph that uses application-managed layout.
• Building GUI Applications With JavaFX, Lesson 6: Laying Out GUI Elements
  This tutorial chapter provides a basic introduction to container-managed layout that uses VBox, HBox, and Tile.
• WhiteOut: A Fun Puzzle Game
  This sample uses the Tile class to place UI controls for the game vertically in landscape mode and horizontally in portrait mode.
• Using Layout Containers
  This article discusses the layout mechanisms supported in JavaFX SDK 1.3, considers resizing components, and suggests tips for improving the dynamic layout behavior of your application.

API Documentation

• VBox
• HBox
• Stack
• Flow
• Tile
• Panel
• Container

Last Updated: April 2010
[Return to How-To's Home]

---