Start Building a GUI Application in JavaFX | JavaFX Tutorials and How-To's

How-To's > How do I start building a GUI application?

You can create a simple GUI application with a few lines of code in the JavaFX Script programming language, and this topic shows you how to work with the basic elements of a JavaFX application.

Elements of a JavaFX Application

A typical JavaFX Script application contains the following components:

Import statements
Declaration of script variables
Stage and Scene instantiation
Inclusion of content objects in the scene graph

Of course you can build much more powerful JavaFX applications:

You can create custom classes and custom nodes.
You can integrate Java, JavaScript, and Swing code into your application.
You can link to web services on the back end.

Browse the how-to topics for these more advanced aspects of JavaFX applications. This topic focuses on the basic elements.

Import Statements

The JavaFX Script programming language has an API, with classes that you import into your application. If you use the NetBeans or Eclipse IDE, you can create the import statements automatically. See the related links at the end of this topic for the API documentation. For a good description of how to select a development environment, see Learning the JavaFX Script Programming Language - Tutorial Overview Lesson 1: Getting Started with JavaFX Script.

Declaration of Script Variables

In the JavaFX Script programming language, script variables refer to the variables that are declared at the top level of the application. These variables are often used to enhance the structure of the application and would nearly always be present in a reasonably complex application, but they are not necessary in the simplest form of a JavaFX application. See the example code in this topic for a simple application with and without script variables.

Note that variables can occur in other locations in the code. For a description of the various types of variables in the JavaFX Script Programming Language, and other aspects of the syntax, see the JavaFX Language Reference and the syntax tutorial entitled Learn the JavaFX Script Programming Language.

`Stage` and `Scene` Instantiation

Simply put, the stage is the window in which a GUI application runs, with or without window decorations. The scene is the main portion contained in the stage in which the content appears.

In technical terms, the stage is the top-level container in a JavaFX application. It is created with an instance of the Stage class. For platforms that support window decorations , the stage can have any of the following styles:

Decorated – A standard style with window chrome and a white background
Undecorated – A solid white background with no chrome
Transparent – A transparent background and no chrome

The scene is a container for the visual elements, also known as content objects, that are displayed on the screen. It is created with an instance of the Scene class.

The stage and scene dimensions, if not set, are inferred from the object content at runtime, or you can set the stage and scene dimensions manually. The preferred method is set the dimensions for the scene, because then the stage sizes itself to handle the presence or absence of window decorations.

In some cases you need to set the stage dimensions, which enables the scene to automatically size itself. For example, you cannot bind the Scene.width and Scene.height variables, so when scene height and width depend on some other variable's value, the height and width must be set for the stage.

Inclusion of Content Objects in the Scene Graph

Each content object that is displayed in the scene is called a "node." Nodes are organized in a content model with a hierarchical structure called the "scene graph." All of the content objects in the API that inherit from the Node class are themselves called "nodes." For more information about nodes, see the topic How do I use nodes?

Example Code 1: Single-Node GUI Without Script Variables

The following example code shows a simple application that displays a GUI with a single node. This application is written without any script variables. The circle node is defined directly in the Scene instance.

Simple code to display a circle

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;

Stage { 
    scene : Scene { 
        width : 200 
        height : 200
        content: [
            Circle {
                centerX: 100, 
                centerY: 100
                radius: 90
                fill:  Color.web("#3B8DED")
            }
        ]
    }
}

Example Code 2: Single-Node GUI With Script Variables

As applications become more complex, it is a good idea to declare script variables that define the objects. The following code produces a result identical to the previous code, but the circle node is assigned to a script variable.

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;

var circle: Circle = Circle {
                centerX: 100, 
                centerY: 100
                radius: 90
                fill:  Color.web("#3B8DED")
            }
            
Stage { 
    scene : Scene { 
        width : 200
        height : 200
        content: [
            circle
        ]
    }
}

Above and Beyond These Simple Applications

More complex applications can contain custom classes and custom nodes, which are beyond the scope of these how-to's. It is a good practice to use a standard architectural pattern, such as Model-View-Controller, to design complex JavaFX applications.

FX