Layout Panes in JavaFX 2.0

Creating a graphical user interface that looks nice and that provides a good usability is a very common task in software development. Fortunately JavaFX 2.0 offers great support in that area.

What is a layout manager and why do we need them?

Layout managers are regions or areas that follow individual rules to (re)arrange and to (re)size all their children in relation to their own size. Generally, it is also possible to specify a fixed position of your components in an application window. But how should the window know what to do when you resize your application window? Should it leave the new available space blank? Should some components “vanish” if you make the window smaller? Should it resize some components? If yes, which one and how?

These questions show, why layout managers are necessary in software development.

Facts about layout managers in JavaFX 2.0

• In JavaFX 2.0 layout managers are called “panes”
• Every layout pane extends the Region class
• To create your own layout pane, it is highly recommended to extend Region yourself
• Types of layout panes in JavaFX 2.0
  • HBox (lays out its children in a horizontal row)
  • VBox (lays out its children in a single vertical column)
  • Border Pane (lays out its children in five different regions: Top, Right, Bottom, Left and Center)
  • Anchor Pane (similar to a Border Pane, differences will be covered in detail)
  • Flow Pane (lays out its children censecutively one after another)
  • Tile Pane (similar to a Flow Pane, differences will be covered in detail)
  • Stack Pane (lays out its children by putting them on top of each other on one single stack)
  • Grid Pane (lays out its children in a grid of columns and rows)
• There are some “false friends” in JavaFX 2.0 regarding layout panes:
  • Tab Pane, Titled Pane and Split Pane. These extend Control and not Region. These are no layout managers/panes, as they do not (re)arrange or (re)size their children.
• Every layout pane provides a setPadding method defined in the Region class. With this method you can tell a pane to layout its children with the specified padding around them.
• Almost every layout pane (AnchorPane being the only exception) provides a setAlignment method. This method specifies how the layout pane aligns and arranges all children inside the layout pane.
• Almost every layout pane (AnchorPane again being the only exception) provides a static setMargin method. With this method you can give one or more certain nodes inside the pane a specific margin that the parent will keep around it when layouting its children.

In the next few posts I´ll give 1 or 2 examples for every layout pane in JavaFX 2.0.