Lesson 7: JavaFX FlowPane Layout Tutorial

Lesson 7: JavaFX FlowPane Layout Tutorial
1- FlowPane Layout
2- FlowPane example
3- Design FlowPane on Scene Builder


1- FlowPane Layout

FlowPane is a container. It arranges the consecutive subcomponents on a row, and
 automatically pushes the subcomponents down to next line if the current row is filled up.


2- FlowPane example


FlowPaneDemo.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
package org.o7planning.javafx.flowpane;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.RadioButton;
import javafx.scene.control.TextField;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;
public class FlowPaneDemo extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        FlowPane root = new FlowPane();
        
        root.setHgap(10);
        root.setVgap(20);
        root.setPadding(new Insets(15,15,15,15));
        
        // Button 1
        Button button1= new Button("Button1");
        root.getChildren().add(button1);
        
        
        // Button 2
        Button button2 = new Button("Button2");
        button2.setPrefSize(100, 100);
        root.getChildren().add(button2);
        
        // TextField
        TextField textField = new TextField("Text Field");
        textField.setPrefWidth(110);
          
        
        root.getChildren().add(textField);
        
        // CheckBox
        CheckBox checkBox = new CheckBox("Check Box");
          
        root.getChildren().add(checkBox);
        
        // RadioButton
        RadioButton radioButton = new RadioButton("Radio Button");
        root.getChildren().add(radioButton);
        
        Scene scene = new Scene(root, 550, 250);
        primaryStage.setTitle("FlowPane Layout Demo");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
    
}
Running the example:

3- Design FlowPane on Scene Builder

It is easy for you to design the interface by using JavaFX Scane Builder. This below illustration
 shows the  FlowPane design with Scane Builder.
  • File/New/Other..
Open with Scene Builder:
Add Nodes to FlowPane.
Setting Vgap, Hgap and padding.
Preferred width, Preferred height


Row Valignment & Column Halignment.

Comments

Post a Comment

Popular posts from this blog

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

Download and Install Autodesk Inventor 2018

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