Key and Mouse Events
Below is a perfect 13-marks answer for JavaFX Layouts with clear explanation +
simple example code for each layout.
JavaFX Layouts (13 Marks Answer)
JavaFX provides several layout panes to arrange UI components in a structured way.
Each layout has its own rules for positioning children. Common layout panes include
FlowPane, HBox, VBox, BorderPane, StackPane and GridPane.
1. FlowPane
Explanation
FlowPane arranges components in a row, and when there is no space, it
automatically wraps to the next line.
It can be oriented horizontally or vertically.
Use Case
Useful for displaying dynamic items like buttons, images, tags, etc.
Simple Example
java
FlowPane root = new FlowPane();
[Link](10);
[Link](10);
Button b1 = new Button("One");
Button b2 = new Button("Two");
Button b3 = new Button("Three");
[Link]().addAll(b1, b2, b3);
2. HBox (Horizontal Box)
1/7
Explanation
HBox arranges nodes in a single horizontal row.
Spacing and padding can be set for neat alignment.
Use Case
Used for aligning controls horizontally, e.g., Username + TextField.
Example
java
HBox root = new HBox(15);
Button b1 = new Button("Button 1");
Button b2 = new Button("Button 2");
[Link]().addAll(b1, b2);
3. VBox (Vertical Box)
Explanation
VBox arranges nodes vertically (top to bottom).
It is useful for form-like UI layouts.
Use Case
Login forms, vertical menus, stacked labels.
Example
java
VBox root = new VBox(20);
Label l1 = new Label("Name:");
TextField tf = new TextField();
Button btn = new Button("Submit");
[Link]().addAll(l1, tf, btn);
2/7
4. BorderPane
Explanation
BorderPane divides the screen into five regions:
Top
Bottom
Left
Right
Center
Each region can hold one node.
Use Case
Used for building complete applications with menu at top, sidebar on left, content at
center.
Example
java
BorderPane root = new BorderPane();
[Link](new Label("Top Section"));
[Link](new Button("Left"));
[Link](new Label("Center Area"));
[Link](new Button("Right"));
[Link](new Label("Bottom Section"));
5. StackPane
Explanation
StackPane stacks components on top of each other like layers.
The last added node appears on top.
Use Case
Centering elements, overlay screens, image + text overlays.
3/7
Example
java
StackPane root = new StackPane();
Button btn = new Button("Click Me");
Label lbl = new Label("Overlay Text");
[Link]().addAll(btn, lbl); // lbl appears on top
6. GridPane
Explanation
GridPane arranges nodes in a grid of rows and columns.
Each cell can hold a component.
Use Case
Forms, calculator UI, keyboard layout, tables.
Example
java
GridPane root = new GridPane();
[Link](10);
[Link](10);
[Link](new Label("Name:"), 0, 0);
[Link](new TextField(), 1, 0);
[Link](new Label("Age:"), 0, 1);
[Link](new TextField(), 1, 1);
Complete Example Program (All Layouts Together)
(Useful if your examiner asks for 13 marks)
4/7
java
import [Link];
import [Link];
import [Link].*;
import [Link].*;
import [Link];
public class LayoutDemo extends Application {
@Override
public void start(Stage stage) {
// FlowPane
FlowPane flow = new FlowPane(10, 10);
[Link]().addAll(new Button("1"), new Button("2"), new Button("3"));
// HBox
HBox hbox = new HBox(15, new Button("A"), new Button("B"));
// VBox
VBox vbox = new VBox(15, new Label("Hello"), new Button("OK"));
// BorderPane
BorderPane border = new BorderPane();
[Link](new Label("Top"));
[Link](new Label("Center"));
[Link](new Button("Left"));
// StackPane
StackPane stack = new StackPane(new Label("Centered Text"));
// GridPane
GridPane grid = new GridPane();
[Link](10);
[Link](10);
[Link](new Label("Username:"), 0, 0);
[Link](new TextField(), 1, 0);
// Show any one layout
Scene scene = new Scene(flow, 400, 300);
[Link](scene);
[Link]("JavaFX Layout Demo");
5/7
[Link]();
}
public static void main(String[] args) {
launch();
}
}
13-Marks Summary Points (Perfect for Exam)
FlowPane
Arranges nodes in flow style (wraps automatically).
Horizontal/vertical orientation.
Example with buttons.
HBox
Horizontal arrangement (left to right).
Good for aligning fields.
Example with two buttons.
VBox
Vertical arrangement (top to bottom).
Useful for forms/menus.
Example with label + textfield + button.
BorderPane
Five regions: top, left, right, bottom, center.
Ideal for full application layouts.
Example with labeled regions.
StackPane
Stacks nodes on top of each other.
Centers nodes by default.
Example with button + label overlay.
GridPane
Table-like layout with rows and columns.
6/7
Best for forms and calculators.
Example with name/age input field.
If you want, I can also prepare a PDF version, diagram-based notes, or short 2-
marks summary.
1/2
7/7