Layouts and Containers

📘 JavaFX Tutorial: Layouts & Containers

🎯 Goal

In this tutorial, you will learn:

• What containers (layouts) are
• How JavaFX arranges UI elements
• The most commonly used layout types

📦 What is a Container?

A container (also called a layout) is a special node that:

• Holds other UI elements (buttons, labels, etc.)
• Controls how they are positioned and sized

👉 Think of it like a box that organizes its children.

🧠 Why Containers Matter

Without layouts, you would have to manually set:

• X and Y position
• Width and height

❌ This is hard and not responsive ✅ Layouts automatically arrange elements for you

⚙️ How Layout System Works

JavaFX uses a hierarchical structure (tree):

Stage (window)
 └── Scene
      └── Layout (VBox, HBox, etc.)
           ├── Button
           ├── Label
           └── TextField

💡 Key Idea

• Each container decides how to arrange its children
• Children do not control their own position

📐 Common Layout Containers

1️⃣ VBox (Vertical Box)

Arranges elements vertically (top → bottom)

<VBox spacing="10" alignment="CENTER">
    <Button text="Button 1"/>
    <Button text="Button 2"/>
</VBox>

🧠 Behavior

• Items stacked vertically

• Controlled by:

  • spacing → space between elements
  • alignment → position inside container

2️⃣ HBox (Horizontal Box)

Arranges elements horizontally (left → right)

<HBox spacing="10" alignment="CENTER">
    <Button text="Yes"/>
    <Button text="No"/>
</HBox>

🧠 Behavior

• Items placed in a row
• Same properties as VBox

3️⃣ BorderPane

Divides the layout into 5 regions:

Top
Left  Center  Right
Bottom

<BorderPane>
    <top><Label text="Top"/></top>
    <center><Button text="Center"/></center>
</BorderPane>

🧠 Behavior

• Each area has a fixed position
• Center expands to fill space

4️⃣ GridPane

Creates a grid (rows & columns)

<GridPane hgap="10" vgap="10">
    <Button text="1" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
    <Button text="2" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
</GridPane>

🧠 Behavior

• Like a table
• You control position using row/column index

5️⃣ StackPane

Stacks elements on top of each other

<StackPane>
    <Label text="Background"/>
    <Button text="On Top"/>
</StackPane>

🧠 Behavior

• Last element is on top
• Useful for overlays

📏 Important Layout Properties

🔹 Spacing

Controls space between children

<VBox spacing="15">

🔹 Padding

Controls space inside the container

<VBox>
    <padding>
        <Insets top="10" right="10" bottom="10" left="10"/>
    </padding>
</VBox>

🔹 Alignment

Controls position of children

<VBox alignment="CENTER">

Common values:

• CENTER
• TOP_LEFT
• BOTTOM_RIGHT

🔄 Nested Layouts (Very Important)

You can combine layouts:

<VBox spacing="10">
    <Label text="Login"/>

    <HBox spacing="10">
        <Label text="Username:"/>
        <TextField/>
    </HBox>

    <Button text="Submit"/>
</VBox>

💡 Idea

• Use multiple containers to build complex UI
• Each layout handles a small part

⚠️ Common Mistakes

• ❌ Using wrong layout type (VBox instead of HBox)
• ❌ Forgetting spacing → UI looks crowded
• ❌ Not using nested layouts
• ❌ Trying to manually position elements

🧪 Summary

• Containers = layout managers
• They control position + size
• JavaFX UI = tree of containers + nodes
• Use the right layout for the job