JavaFX: Padding and Spacing

This entry is part 15 of 55 in the series JavaFX

Padding and Spacing are commonly used in HTML/CSS design to layout the elements in a page.

When it comes to JavaFX, we use padding and spacing just as we were using them in HTML/CSS.

Consider the earlier example where we have the 2 lines below.

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

When we apply padding and spacing to Vbox, we are actually applying them to all elements in the Vbox.

In the below example, we are applying them to both the title and the list.

The best way for us to see the difference is to modify the values on both of the statements.

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.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(16);              // 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);
    }
}

padding

 

JavaFX: Introduction

This entry is part 1 of 55 in the series JavaFX

JavaFX is a set of Graphical UI tools that allow us to develop applications that run across multiple platforms.

Some of those common UI tools or elements are the button, stack panel, drop down boxes etc.

Before, we have been using Java Swing to implement the different sets of Graphical components in our applications.

JavaFX is a super set of Java Swing.  The main features implemented in JavaFX are developing UI elements using XML or CSS.

The XML markup language used in JavaFX is called FXML and I believe this is how JavaFX name is derived.

When you are learning JavaFX, you are in a way also learning Java Swing!

 

JavaFX Videos: Getting Started with JavaFX Scene Builder

This entry is part 4 of 5 in the series JavaFX Video Tutorials

JavaFX Scene Builder is a design tool for the JavaFX platform.

It allows for the simple drag and drop of graphical user interface (GUI) components onto a JavaFX scene.

As you build the scene, the FXML code for the designed application interface is automatically generated.

This video will show you how to get started with the Scene Builder.