Example app

Hello, Java

A small styled interface with a name field, greeting and reset.

Run this example

Stop the app and save your current Main and helpers outside src/. Copy the files shown below into the listed destinations in your standalone starter, creating resource folders when needed. Replace Main and the listed helpers. Keep the zero/ framework folder and build files. If an older downloaded kit does not have these examples, use the source shown here.

examples/hello-app/Main.java → src/main/java/Main.java
examples/hello-app/theme.css → src/main/resources/hello-app/theme.css

Run App to rebuild. These examples run in VS Code, in a separate JavaFX window.

Open beginner toolkit

Read the source

hello-app/Main.java

import javafx.geometry.Insets;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import zero.SimpleApp;

/** A small interface built with ordinary JavaFX controls. */
public class Main extends SimpleApp {
    private TextField name;
    private Label feedback;

    @Override
    public void settings() {
        title("Hello, Java");
        size(480, 340);
    }

    @Override
    public void setup() {
        Label heading = new Label("Hello, Java");
        heading.getStyleClass().add("heading");
        Label instructions = new Label("Write your name, then say hello.");
        instructions.setWrapText(true);

        name = new TextField();
        name.setPromptText("Your name");
        name.setOnAction(event -> greet()); // Enter works too.

        Button hello = new Button("Say hello");
        hello.getStyleClass().add("primary");
        hello.setOnAction(event -> greet());
        Button reset = new Button("Start again");
        reset.setOnAction(event -> restart());

        feedback = new Label("Your greeting will appear here.");
        feedback.setWrapText(true);
        HBox actions = new HBox(12, hello, reset);
        VBox screen = new VBox(16, heading, instructions, name, actions, feedback);
        screen.setPadding(new Insets(28));
        screen.getStyleClass().add("screen");

        var stylesheet = getClass().getResource("/hello-app/theme.css");
        if (stylesheet == null) {
            throw new IllegalStateException("Copy theme.css to src/main/resources/hello-app/theme.css.");
        }
        screen.getStylesheets().add(stylesheet.toExternalForm());
        show(screen);
    }

    private void greet() {
        String enteredName = name.getText().trim();
        if (enteredName.isEmpty()) {
            feedback.setText("Please write your name first.");
        } else {
            feedback.setText("Hello, " + enteredName + "!");
        }
    }

    private void restart() {
        name.setText("");
        feedback.setText("Your greeting will appear here.");
        name.requestFocus();
    }

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

hello-app/theme.css

/* Change these colours, sizes and spacing to make the app your own. */
.screen {
    -fx-background-color: #f6f5ff;
    -fx-font-family: "System";
    -fx-font-size: 16px;
}
.label { -fx-text-fill: #22213b; }
.heading {
    -fx-font-size: 32px;
    -fx-font-weight: bold;
}
.text-field {
    -fx-background-color: white;
    -fx-text-fill: #22213b;
    -fx-prompt-text-fill: #626078;
    -fx-background-radius: 10;
    -fx-border-radius: 10;
    -fx-border-color: #aaa6c5;
    -fx-border-width: 2;
    -fx-padding: 10 12;
}
.button {
    -fx-background-color: #e5e2f5;
    -fx-text-fill: #22213b;
    -fx-background-radius: 10;
    -fx-border-radius: 10;
    -fx-border-color: transparent;
    -fx-border-width: 2;
    -fx-padding: 10 16;
}
.button:hover { -fx-background-color: #d6d1ee; }
.button:pressed { -fx-background-color: #c8c1e7; }
.button.primary {
    -fx-background-color: #6457e8;
    -fx-text-fill: white;
    -fx-font-weight: bold;
}
.button.primary:hover { -fx-background-color: #5344cf; }
.button.primary:pressed { -fx-background-color: #4435b3; }
.button:focused, .text-field:focused { -fx-border-color: #22213b; }
.button:disabled { -fx-opacity: 0.55; }