1
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class ButtonInPane extends Application {
@Override 
// Override the start method in the Application class

public void start(Stage primaryStage) {
// Create a scene and place a button in the scene

StackPane pane = new StackPane();
pane.getChildren().add(new Button("OK"));
Scene scene = new Scene(pane, 200, 50);
primaryStage.setTitle("Button in a pane"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
}

public static void main(String[] args) {
launch(args);
}
}

The above code creates a graphical user interface with a button on it. But I don't understand what a pane is and why we need it. I also don't understand why we need to call getChildren method when we add the button to it, such as

"pane.getChildren().add(new Button("OK"));".
1
  • 1
    A Pane is a UI element ("Node") that contains other UI elements ("child nodes") and manages the layout of those nodes within the Pane. There are several predefined Pane types (subclasses of Pane) that differ in how they lay out their child nodes.
    – James_D
    Feb 2, 2017 at 2:01

1 Answer 1

10

From the layout manual:

A JavaFX application can manually lay out the UI by setting the position and size properties for each UI element. However, an easier option is to make use of layout panes. The JavaFX SDK provides several layout panes for the easy setup and management of classic layouts such as rows, columns, stacks, tiles, and others. As a window is resized, the layout pane automatically repositions and resizes the nodes that it contains according to the properties for the nodes.

There are 6 Panels in javaFX such as: BorderPane, StackPane, GridPane, FlowPane,TilePane and AnchorPane.

StackPane

Stack pane allows you to place many nodes one on top of an other.

StackPane root = new StackPane();
Button btn1 = new Button(" 1 ");
Button btn2 = new Button("22222222");
root.getChildren().addAll(btn2, btn1);
root.setStyle("-fx-background-color: #87CEFA;");

GridPane

GridPane allows you to create a flexible grid of rows and columns and position each node in exact place.

 GridPane grid = new GridPane();
grid.setPadding(new Insets(10, 10, 10, 10));
grid.setMinSize(300, 300);
grid.setVgap(5);
grid.setHgap(5);

Text username = new Text("Username:");
grid.add(username, 0, 0);

TextField text = new TextField();
text.setPrefColumnCount(10);
grid.add(text, 1, 0);

Text password = new Text("Password:");
grid.add(password, 0, 1);

TextField text2 = new TextField();
text2.setPrefColumnCount(10);
grid.add(text2, 1, 1);
grid.setStyle("-fx-background-color: #D8BFD8");

FlowPane

Flow Pane lays all nodes one after an other in the order they were added.

FlowPane flow = new FlowPane();
flow.setPadding(new Insets(10, 10, 10, 10));
flow.setStyle("-fx-background-color: DAE6F3;");
flow.setHgap(5);
flow.getChildren().addAll(left, center);

TilePane

TilePane is similar to the flow pane. All nodes are placed in a grid in the same order they were added.

TilePane tile = new TilePane();
tile.setPadding(new Insets(10, 10, 10, 10));
tile.setPrefColumns(2);
tile.setStyle("-fx-background-color: #CD5C5C;");
HBox hbox2 = new HBox(8); // spacing = 8
hbox2.getChildren().addAll(top, left, center);
tile.getChildren().add(hbox2);

AnchorPane

AnchorPane allows you to position nodes in the top, bottom, left side, right side, or center of the pane.

AnchorPane anchorpane = new AnchorPane();
Button buttonSave = new Button("Save");
Button buttonCancel = new Button("Cancel");
anchorpane.setStyle("-fx-background-color: #A9A9A9;");
HBox hb = new HBox();
hb.getChildren().addAll(buttonSave, buttonCancel);
anchorpane.getChildren().addAll(hb);
anchorpane.setMinSize(300, 100);
AnchorPane.setRightAnchor(hb, 10.0);

BorderPane

BorderPane splits the scene in five regions such as: top, bottom, left, right, and center. Where you can adjust added nodes. BorderPane also allows you to add different panes in each region as shown in my example. However you cannot use the same pane more than once.

 BorderPane pane = new BorderPane();
pane.setLeft(anchorpane);
pane.setCenter(root);
pane.setRight(grid);
pane.setTop(flow);
pane.setBottom(tile);

Scene scene = new Scene(pane, 300, 250);
2
  • So, is it that a pane is just an area in a scene that resizes itself as the window is resized?
    – Rongeegee
    Jan 26, 2017 at 23:35
  • Yes it is kind of container for control which holds them together. Jan 27, 2017 at 1:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.