Lesson 13: JavaFX StackPane Layout Tutorial

Lesson 13: JavaFX StackPane Layout Tutorial
1- StackPane Layout
2- StackPane example

3- Design StackPanel with Scene Builder

1- StackPane Layout

StackPane is a container which can contain different interface components, subcomponents stacked up to others, and at a certain moment, you can only see the subcomponent lying on the top of Stack

.

These subcomponents which are newly added will lie on the top of Stack

?

1 2 3

// Add component to Stack. stackPane.getChildren().add(newChild);

You can put a certain subcomponent in front of Stack via method named toFront(), or put the subcomponent in the bottom of Stack via method named toBack().

?

1 2 3 4 5 6 7 8

// All Child components of StackPane ObservableList<Node> childs = stackPane.getChildren(); if (childs.size() > 1) {    // Top Component    Node topNode = childs.get(childs.size()-1);    topNode.toBack(); }

2- StackPane example

StackPaneDemo.java

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

package org.o7planning.javafx.stackpane; import javafx.application.Application; import javafx.collections.ObservableList; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Node; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.CheckBox; import javafx.scene.control.Label; import javafx.scene.layout.StackPane; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class StackPaneDemo extends Application {     private StackPane stackPane;     @Override     public void start(Stage primaryStage) throws Exception {         VBox root = new VBox();         // StackPane         stackPane = new StackPane();                  // Add Label to StackPane         Label label = new Label("I'm a Label");         label.setStyle("-fx-background-color:yellow");         label.setPadding(new Insets(5,5,5,5));           stackPane.getChildren().add(label);                  // Add Button to StackPane           Button button = new Button("I'm a Button");               button.setStyle("-fx-background-color: cyan");         button.setPadding(new Insets(5,5,5,5));         stackPane.getChildren().add(button);                  // Add CheckBox to StackPane         CheckBox checkBox = new CheckBox("I'm a CheckBox");         checkBox.setOpacity(1);         checkBox.setStyle("-fx-background-color:olive");         checkBox.setPadding(new Insets(5,5,5,5));                  stackPane.getChildren().add(checkBox);                           //         stackPane.setPrefSize(300, 150);         stackPane.setStyle("-fx-background-color: Gainsboro; -fx-border-color: blue;");         //         root.getChildren().add(stackPane);         Button controlButton = new Button("Change Top");         root.getChildren().add(controlButton);         root.setAlignment(Pos.CENTER);         VBox.setMargin(stackPane, new Insets(10, 10, 10, 10));         VBox.setMargin(controlButton, new Insets(10, 10, 10, 10));         //         Scene scene = new Scene(root, 550, 250);         primaryStage.setTitle("StackPane Layout Demo");         primaryStage.setScene(scene);         controlButton.setOnAction(new EventHandler<ActionEvent>() {             @Override             public void handle(ActionEvent event) {                 changeTop();             }         });         primaryStage.show();     }     private void changeTop() {         ObservableList<Node> childs = this.stackPane.getChildren();         if (childs.size() > 1) {             //             Node topNode = childs.get(childs.size()-1);             topNode.toBack();         }     }     public static void main(String[] args) {         launch(args);     } }

Running the example:

Normally, you only display the subcomponent on the top of StackPane and hide other subcomponents. Using the Node.setVisible(visible) method. Let's see the illustrative example:

StackPaneDemo2.java

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114

package org.o7planning.javafx.stackpane; import javafx.application.Application; import javafx.collections.ObservableList; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Node; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.CheckBox; import javafx.scene.control.Label; import javafx.scene.layout.StackPane; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class StackPaneDemo2 extends Application {    private StackPane stackPane;    @Override    public void start(Stage primaryStage) throws Exception {        VBox root = new VBox();        // StackPane        stackPane = new StackPane();               // Add Label to StackPane        Label label = new Label("I'm a Label");        label.setStyle("-fx-background-color:yellow");        label.setPadding(new Insets(5,5,5,5));        // Hide this label.        label.setVisible(false);               stackPane.getChildren().add(label);                      // Add Button to StackPane         Button button = new Button("I'm a Button");             button.setStyle("-fx-background-color: cyan");        button.setPadding(new Insets(5,5,5,5));        // Hide this button.        button.setVisible(false);               stackPane.getChildren().add(button);                      // Add CheckBox to StackPane        CheckBox checkBox = new CheckBox("I'm a CheckBox");        checkBox.setOpacity(1);        checkBox.setStyle("-fx-background-color:olive");        checkBox.setPadding(new Insets(5,5,5,5));        // Show this checkBox (default).        checkBox.setVisible(true);               stackPane.getChildren().add(checkBox);                      //        stackPane.setPrefSize(300, 150);        stackPane.setStyle("-fx-background-color: Gainsboro; -fx-border-color: blue;");        //        root.getChildren().add(stackPane);        Button controlButton = new Button("Change Top");        root.getChildren().add(controlButton);        root.setAlignment(Pos.CENTER);        VBox.setMargin(stackPane, new Insets(10, 10, 10, 10));        VBox.setMargin(controlButton, new Insets(10, 10, 10, 10));        //        Scene scene = new Scene(root, 550, 250);        primaryStage.setTitle("StackPane Layout Demo 2");        primaryStage.setScene(scene);        controlButton.setOnAction(new EventHandler<ActionEvent>() {            @Override            public void handle(ActionEvent event) {                changeTop();            }        });        primaryStage.show();    }    private void changeTop() {        ObservableList<Node> childs = this.stackPane.getChildren();        if (childs.size() > 1) {            //            Node topNode = childs.get(childs.size()-1);                       // This node will be brought to the front            Node newTopNode = childs.get(childs.size()-2);                               topNode.setVisible(false);            topNode.toBack();                       newTopNode.setVisible(true);        }    }    public static void main(String[] args) {        launch(args);    } }

Running the example:

3- Design StackPanel with Scene Builder

• File/New/Other..