JavaFX: Making the previous example simpler

This entry is part 11 of 55 in the series JavaFX

We have a HBox and a VBox in the previous example. Let’s take away the Hbox and look at how we set up the list for display.

In line 21, we create an object border with a size of 500 x 400.

In line 33, we have a VBox method addVbox that help us to set up a vbox object as shown in line 35.

In the addVbox method, we have a list with the stated items and note how the items have to be added to the list using

list.setItems(items);

Once the list has been set up with the items, we have to add the list to the vbox using

vbox.getChildren().add(list);
VBox with List
package javafxapplication9;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.control.ListView;
import javafx.stage.Stage;

public class JavaFXApplication9 extends Application {

    @Override
    public void start(Stage stage) {

        BorderPane border = new BorderPane();

        border.setPrefSize(500, 400);

        border.setRight(addVBox());

        Scene scene = new Scene(border);
        stage.setScene(scene);
        stage.setTitle("Layout Sample");
        stage.show();
    }

    private VBox addVBox() {

        VBox vbox = new VBox();
        vbox.setPadding(new Insets(10)); // Set all sides to 10
        vbox.setSpacing(8);              // Gap between nodes

        Text title = new Text("Top 5 Rock Albums");
        title.setFont(Font.font("Arial", FontWeight.BOLD, 14));
        vbox.getChildren().add(title);

        ListView<String> list = new ListView<String>();
        ObservableList<String> items = FXCollections.observableArrayList(
                "Like A Rolling Stone", "Archtung Baby", "Help!", "Smell Like Teen Spirit", "Hotel California");
        list.setItems(items);

        vbox.getChildren().add(list);

        return vbox;
    }

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

vbox2

JavaFX: BorderPane and VBox

This entry is part 10 of 55 in the series JavaFX

VBox in BorderPane will layout the nodes in a vertical column.  It is good for displaying a list of items.

Here, I create a list using a ListView class.  This is a list created from an observable list.  Observable lists are usually lists that are updated constantly.  We will talk about observable list in our later posts.

package javafxapplication9;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.control.ListView;
import javafx.stage.Stage;

public class JavaFXApplication9 extends Application {

    @Override
    public void start(Stage stage) {

        BorderPane border = new BorderPane();

        border.setPrefSize(500, 400);

        HBox hbox = addHorizontalBox();
        border.setTop(hbox);
        border.setLeft(addVBox());

        Scene scene = new Scene(border);
        stage.setScene(scene);
        stage.setTitle("Layout Sample");
        stage.show();
    }

    private VBox addVBox() {

        VBox vbox = new VBox();
        vbox.setPadding(new Insets(10)); // Set all sides to 10
        vbox.setSpacing(8);              // Gap between nodes

        Text title = new Text("Top 5 Rock Albums");
        title.setFont(Font.font("Arial", FontWeight.BOLD, 14));
        vbox.getChildren().add(title);

        ListView<String> list = new ListView<String>();
        ObservableList<String> items = FXCollections.observableArrayList(
                "Like A Rolling Stone", "Archtung Baby", "Help!", "Smell Like Teen Spirit");
        list.setItems(items);

        vbox.getChildren().add(list);
        
        return vbox;
    }

    private HBox addHorizontalBox() {

        HBox hbox = new HBox();
        hbox.setPadding(new Insets(15, 12, 15, 12));
        hbox.setSpacing(10);   // Gap between nodes
        hbox.setStyle("-fx-background-color: blue;");

        Button buttonAccept = new Button("Accept");
        buttonAccept.setPrefSize(100, 20);

        Button buttonNext = new Button("Next");
        buttonNext.setPrefSize(100, 20);

        hbox.getChildren().addAll(buttonAccept, buttonNext);

        return hbox;
    }

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

vbox

 

We have the above display as we have this line in line 29:

border.setLeft(addVBox());

We could modify it to have a display that take the entire column.

border.setCenter(addVBox());

vbox1

JavaFX: BorderPane class

This entry is part 9 of 55 in the series JavaFX

BorderPane lays out children in the scene in top, left, right, bottom, and center positions similar to the illustration in the screenshot below.

borderpane

 

There are a few panes commonly used in JavaFX in laying out the boxes in the scene.  In the screenshot above, we have the Top pane and to place items in the Top pane, we can use the HBox pane class.

Consider the example below, the addHorizontalBox method basically set up the 2 buttons for display in the top panel.

package javafxapplication9;
 
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
 
public class JavaFXApplication9 extends Application {
 
    @Override
    public void start(Stage stage) {
 
        BorderPane border = new BorderPane();
        
        border.setPrefSize(500,400);
        
        HBox hbox = addHorizontalBox();
        border.setTop(hbox);

        Scene scene = new Scene(border);
        stage.setScene(scene);
        stage.setTitle("Layout Sample");
        stage.show();
    }
    
    private HBox addHorizontalBox() {

        HBox hbox = new HBox();
        hbox.setPadding(new Insets(15, 12, 15, 12));
        hbox.setSpacing(10);   // Gap between nodes
        hbox.setStyle("-fx-background-color: blue;");

        Button buttonAccept = new Button("Accept");
        buttonAccept.setPrefSize(100, 20);

        Button buttonNext = new Button("Next");
        buttonNext.setPrefSize(100, 20);
        
        hbox.getChildren().addAll(buttonAccept, buttonNext);
        
        return hbox;
    }
 
    public static void main(String[] args) {
        launch(args);
    }
    
}

borderpane1