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..

Comments

Post a Comment

Popular posts from this blog

460 Free Online Programming & Computer Science Courses - Giúp Bạn Thành Công

Image
Nguồn sưu tầm:  medium.freecodecamp.org Bài viết này mình giới thiệu tới các bạn những khóa học miễn phí nhưng cực kỳ chất lượng. Tất cả các khóa học này đều được biên soạn và giảng dạy tại những trường đại học hàng đầu thế giới như  MIT hay Stanford,... Có rất nhiều nội dung cực kỳ hay như Machine Vision, Machine learning,  Artificial Intelligence,  Advanced Modeling for Discrete Optimization, etc. Nội dung chia làm các cấp độ từ dễ tới khó:  ---------------------------------- Five years ago, universities like MIT and Stanford first opened up free online courses to the public. Today, more than 700 schools around the world have created thousands of free online courses. ------------------ BEGINNER (34) An Introduction to Interactive Programming in Python (Part 1) Rice University via Coursera ★★★★★ ( 2966 ratings ) | 24th Jul, 2017 Introduction to Programming with MATLAB Vanderbilt University via Coursera ★★★★★ ( 181 ratings ) | 3rd Ju...
Read more

Download and Install Autodesk Inventor 2018

Image
How to install Autodesk Inventor 2018 ------------------------- Link download inventor profestional 2018: Part 1:  Download    | Part 2:  Download    | Part 3:  Download    | Part 4:  Download   | Part 5:  Download    | Part 6:  Download || Active file for Students and Researchers:   Crack:  Download ------------------------- 1.  System requirements for Autodesk Inventor 2018 Please make sure that you are installing the appropriate version of Autodesk Inventor software for your operating system. Inventor 2018 is only supported on 64-bit operating systems and cannot be installed on a 32-bit system. Solution: System Requirements for Autodesk Inventor 2018 Operating System ¹ 64-bit Microsoft® Windows® 10 64-bit Microsoft Windows 8.1 with Update  KB2919355 64-bit Microsoft Windows 7 SP1 CPU Type ² Recommended: Intel® Xeon® E3 or Core i7 or equivalent, 3.0 GHz or greater ...
Read more

[Free DownLoad] - Books for CATIA V5/6 for Mechanical Engineer Part 1

Image
[Free DownLoad] - Books for CATIA V5/6 for Mechanical Engineer Part 1 --------------------- 1. CATIA V5 - kurz und bündig: Grundlagen für Einsteiger Book Description: - Language: German. Dieses Buch ermöglicht dem Anfänger der 3D-Modellierung einen effektiven Einstieg in die Arbeit mit CATIA V5 mit praktischen Übungsbeispielen. Die wichtigsten Befehle und Abläufe werden anschaulich dargestellt und erläutert. Der Schwerpunkt liegt dabei auf den grundlegenden Funktionen zur Modellierung von Einzelteilen und Baugruppen sowie zur Erstellung technischer Zeichnungen. Durch den Aufbau des Textes in Tabellenform kann das Buch nicht nur als Schritt-für-Schritt-Anleitung, sondern auch als Referenz für die tägliche Arbeit mit der Software genutzt werden. Aufgrund des didaktischen Konzepts ist es für das Selbststudium sehr gut geeignet. Link download:  PDF --------------------- 2. Tutorials And Examples for Beginners to CATIA Version 5 Book Description: ...
Read more