Objektorienteeritud programmeerimine (Narva Kolledž) - Kursused

Panes and UI controls

In graphical user interfaces, the layout of the elements is very important. Usually the container classes panes are used to automatically lay out the nodes into the desired location and size. In general, the nodes are placed inside the pane, and then the pane is placed onto the scene.

A node is a visual component such as a shape, an image view, a UI control, or a pane.
A shape refers to a text, a line, a circle, an ellipse, a rectangle, an arc, a polygon, a polyline etc.
A UI control refers to a label, a button, a check box, a radio button, a text field, a text area etc.

Useful link:

A full list of UI controls can be found here.

JavaFX provides a large number of panes for organizing nodes in the container:

Class	Description
`Pane`	A base class for layout panes. It contains `getChildren()` method for returning a list of nodes into the pane.
`StackPane`	Places the nodes on the top of each other in the center of the pane.
`FlowPane`	Places the nodes row-by-row horizontally or column-by-column vertically.
`GridPane`	Places the nodes in the cells in a two-dimensional grid.
`BorderPane`	Places the nodes on the top, right, bottom, left, and center regions.
`HBox`	Places the nodes in a single row.
`VBox`	Places the nodes in a single column.

Each pane contains a list for holding the nodes in the pane. This list is an instance of javafx.collections.ObservableList which can be obtained using pane’s getChildren() method. ObservableList behaves very much like an ArrayList; it stores a collection of elements. We can use add(node) method to add an element to the list or addAll(node1, node2, ...) to add several nodes to the pane.

The following example demonstrates a program that places a button on the pane.

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 {

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

    @Override // Override the start method of Application class
    public void start(Stage primaryStage) {
        // Create a scene and place a button on the scene
        StackPane pane = new StackPane();
        Button ok = new Button("OK");
        pane.getChildren().add(ok);
        Scene scene = new Scene(pane, 200, 50);
        primaryStage.setTitle("Button in a pane"); // set the stage title
        primaryStage.setScene(scene); // place the scene on the stage
        primaryStage.show(); // display the stage
    }
}

The program creates a StackPane (Line 16) and adds a button as a child of the pane (Line 18). The StackPane places the nodes in the center of the pane on top of each other. Note that there is only one node on the pane. The StackPane respects a node’s preferable size. So we can see the button displayed in its preferrable size.

One more example that uses BorderPane:

    public void start(Stage primaryStage) {
        // Create a border pane
        BorderPane bpane = new BorderPane();

        PasswordField password = new PasswordField();
        Slider slider = new Slider(0, 4, 0.5);
        Label label = new Label("Label");

        bpane.setTop(password); // add to the top
        bpane.setCenter(slider); // add to the center
        bpane.setBottom(label);   // add to the bottom

        Scene scene = new Scene(bpane, 400, 400, Color.SNOW);

        primaryStage.setTitle("ShowBorderPane");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

One more example

    public void start(Stage primaryStage) {
        FlowPane flow = new FlowPane();

        TextField text = new TextField("some text");
        flow.getChildren().add(text);

        ListView<String> list = new ListView<String>();
        ObservableList<String> items = FXCollections.observableArrayList (
                "First", "Second", "Third", "Fourth");
        list.setMaxHeight(100);
        list.setItems(items);
        flow.getChildren().add(list);

        BorderPane border = new BorderPane();
        border.setMinWidth(250);

        Button button1 = new Button("1");
        border.setLeft(button1);
        Button button2 = new Button("2");
        border.setRight(button2);

        HBox hbox = new HBox();
        Label label1 = new Label("Label1");
        Label label2 = new Label("Label2");
        hbox.getChildren().addAll(label1, label2);
        border.setCenter(hbox);

        flow.getChildren().add(border);

        Scene scene = new Scene(flow, 250, 150, Color.SNOW);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

The scene graph for this window is as follows:

Try out

Compile and run the codes above.

Add some more UI controls and layouts so that the elements inside the BorderPane (e.g. the center) would be arranged using GridPane class. Some examples can be found here .

Session 7

Objektorienteeritud programmeerimine (Narva Kolledž) 2017/18 kevad

Try out