FX

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.
• JavaFX1.2: Layout
  This article discusses all types of layout in-depth, with examples.
• Using Layout Containers
  This article demonstrates an application that uses all of the types of concrete layout containers: VBox, HBox, Stack, Flow, Tile, and Panel. It also provides an example of how to the use the Panel class for custom layout.
• 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.

API Documentation

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

Last Updated: November 2009
[Return to How-To's Home]

---

Do you have comments about this article? We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.