Kotlinlearncs.online LogoJava

    JavaFX

    Graphical user interfaces (GUI) allow the user to interact with our program in different ways. Instead of our program following a linear path through the code, GUI programs respond to events initiated by the user. JavaFX provides classes to 1) provide a graphical layout and 2) trigger code to run when the user interacts with the graphical components of our program.

    JavaFX Overview
    JavaFX Overview

    JavaFX is a collection of packages that can be used to create programs with a graphical user interface. There are several important classes.

    Java provides multiple graphical libraries. The Abstract Windows Toolkit (AWT) provides an interface to native system graphical components for your operating system. Swing provides a pretty-much pure Java graphical user interface that is built on top of AWT. JavaFX is a more modern attempt at building a GUI framework for Java. We will be focusing on JavaFX here.

    Application
    Application

    To create a JavaFX application, we create a class that extends the Application class. The class contains an abstract method, start(Stage stage), which must be overridden. The Stage passed to the method is the primary stage that describes the UI for the application.

    The Application class has init() and stop() methods. These are concrete methods in the Application class, but they are empty (do nothing). The methods may be overridden to provide initial set-up and tear-down instructions. When an instance of the subclass of Application is instantiated, init() is called before calling start(Stage stage). When the application is finished (either with an explicit call to Platform.exit() (preferred over System.exit()) or when the last window is closed (provided Platform.implicitExit == true)), stop() is called.

    Stage
    Stage

    The Stage class is a JavaFX container that describes the UI for the application. The primary Stage object is created by the JVM and passed to the Application.start() method. A minimal JavaFX application is shown below:

    public class HelloWorld extends Application {
    @Override
    public void start(Stage stage) {
    Label hello = new Label("Hello World!");
    stage.setTitle("Title bar");
    stage.setScene(new Scene(hello));
    stage.show();
    }
    public static void main(String[] args) {
    Application.launch(args);
    }
    }

    This application will produce a window that displays “Hello World!” and contains “Title bar” in the title bar of the window.

    Note: modern versions (> 8) of Java require the JavaFX framework to be installed separately from Java. Once installed, we can import the appropriate javafx packages.

    Scene
    Scene

    The Scene class is the container for the graphical user interface content. The content is represented as a tree of nodes (called a scene graph where each node is either a branch or a leaf. When instantiated, the Scene is passed to the root node of the tree.

    Specifying the Layout with Panes
    Specifying the Layout with Panes

    In the very simple example above, we placed a control (message) directly onto the scene. In non-trivial GUI applications we will make use of Panes to organize the layout of our controls in the scene (read: on the window). There are several types of panes available for us to choose from. E.g., VBox, HBox, FlowPane, and GridPane.

    Controls
    Controls

    The Control class is the base class for all user interface controls. A control is a node in the scene graph which can be manipulated by the user. Since Control is a subclass of Region, they can be styled with CSS (Cascading Style Sheets).

    The Label class used in the above example is a specific type of control that is a non-editable text control that can be used to display text.

    There are many other types of controls available to use in JavaFX. For example, Button, TextField, ScrollPane, ListView, and many others.

    Solve: Practice with JavaFX

    Created By: Chris Taylor
    / Version: 2023.8.0

    Implement the void start(Stage stage) method that creates a JavaFX application that is 400 pixels wide, 300 pixels high and contains one label and one button on a StackPane. The window should be titled: "Simple GUI". The label should contain: "Here is some text". The button should be labeled: "Click Me".

    void start(Stage stage) {
    return; // You may need to remove this starter code
    }

    Conclusion
    Conclusion

    With these building blocks, we can create simple or ornate graphical user interfaces; however, they aren’t very useful without specifying how to respond to user-generated events, e.g., clicking on a button. We’ll take a look at how to do that in the Event Driven lesson.

    More Practice

    Need more practice? Head over to the practice page.