Java FX – GUIs
TOPIC 01 – FIRST GUI APPLICATION

LESSON NOTE

INTRO

These lessons regarding to Java FX will include several examples that will hopefully guide you through your own application. It is important that you understand the basic organization of a Java FX application so make sure to read the explanations associated with the examples.

SETTING UP ECLIPSE

If the IDE that you are using is Eclipse, then you will likely have to configure it to make it work well with Java FX. You can find instructions for this in Topic 00 of this unit.

EXAMPLE 1 – EMPTY WINDOW

Here is a simple window generated using Java FX:

The code to create the above window is shown below:

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.layout.FlowPane;

import javafx.stage.Stage;

public class EmptyWindow extends Application

{

@Override

public void start(Stage primaryStage) throws Exception

{

FlowPane layout = new FlowPane();

Scene scene = new Scene(layout,500,400);

primaryStage.setScene(scene);

primaryStage.setTitle("Empty Window Application");

primaryStage.show();

}

public static void main(String[] args)

{

Application.launch(args);

}

}

CODE EXPLANATION – IMPORT STATEMENTS

First, you probably notice all of the import statements at the top. Thankfully, most IDEs (including Eclipse) help us fill in the import statements whenever we use an unknown class. However, one common error is that students are given more than one choice for importing and they choose a class that is not part of Java FX. Take a good look at the import statements. They all start with "javafx". So should all of yours.

CODE EXPLANATION – EXTENDING APPLICATION

The line that declares the class will always include "extends Application". This means that our class inherits all of the functionality of the Application class in Java FX. As a consequence to extending Application, we are forced to implement the method:

public void start(Stage primaryStage)

This method is automatically called whenever we run an application using Java FX. So, it is in this method that we will place our statements.

CODE EXPLANATION – MAIN FUNCTION

Most IDEs can run Java FX applications without a main function included. However, to make sure that your program would run in all IDEs, it is a good idea to include a basic main function that will simply launch the Java FX application.

In Eclipse, we need the main function to let Eclipse know which class to run. However, after running the application once, we can actually get rid of the main function all together.

The main function looks like this:

public static void main(String[] args)

{

Application.launch(args);

}

The launch function in Application does some advanced stuff to get the start method to run. We won't focus on the "how" of this. We just care that it works at this point.

CODE EXPLANATION – ORGANIZATION INSIDE THE START METHOD

The entire window is referred to as a stage. The section that contains the content of the window is called a scene.

Here is the start method from above:

public void start(Stage primaryStage) throws Exception

{

FlowPane layout = new FlowPane();

Scene scene = new Scene(layout,500,400);

primaryStage.setScene(scene);

primaryStage.setTitle("Empty Window Application");

primaryStage.show();

}

The start method automatically provides us with a reference to the stage. Our job is to insert the scene that we want onto that stage. The stage will mold with the scene's size.

A scene needs to include some form of organization for its content. In the example above, we are using a FlowPane layout to force any content added to the scene to flow one piece after the other. More on this later. Just know that you need some form of a layout object to create the scene. Also, many examples call this object root instead of layout as it is the root to a tree of other objects.

So,after we create the FlowPane layout, we use it to create the scene. Then, we set the scene on the primary stage. We also set the title of the window and finally make the window visible using primaryStage.show();

ADDING USER INTERFACE CONTROLS (COMPONENTS)

We can add components (or UI controls) such as Buttons or TextFields to our window. The example below will add three buttons to a window.

EXAMPLE 2 – BUTTONS IN A WINDOW

In this example, we add a few lines of code to include buttons.

NEW CODE EXPLANATION

To add the buttons, we simply create three button objects and add them to the children of our layout object. The following six lines of code are placed under the line that creates the FlowPane object called layout:

Button b1 = new Button("Patrick");

layout.getChildren().add(b1);

Button b2 = new Button("Omer");

layout.getChildren().add(b2);

Button b3 = new Button("Campeau");

layout.getChildren().add(b3);

To add the lines above, we will also have to include a new import statement to import the Button class.

FULL CODE

Below is the full code. The new lines are shown in yellow.

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.layout.FlowPane;

import javafx.stage.Stage;

public class EmptyWindow extends Application

{

@Override

public void start(Stage primaryStage) throws Exception

{

FlowPane layout = new FlowPane();

Button b1 = new Button("Patrick");

layout.getChildren().add(b1);

Button b2 = new Button("Omer");

layout.getChildren().add(b2);

Button b3 = new Button("Campeau");

layout.getChildren().add(b3);

Scene scene = new Scene(layout,310,200);

primaryStage.setScene(scene);

primaryStage.setTitle("Empty Window Application");

primaryStage.show();

}

public static void main(String[] args)

{

Application.launch(args);

}

}

OTHER CONTROLS

Java FX comes with many different controls that can be used. The next example will look at a few of the simpler ones

EXAMPLE 3 – MORE CONTROLS

We can create a window with different controls.

NEW CODE EXPLANATION

Instead of creating 3 buttons and adding them to the layout, we now create five different controls. The code is fairly simple to understand (except the ChoiceBox constructor call). Here it is:

Button b1 = new Button("This is Button");

layout.getChildren().add(b1);

TextField t1 = new TextField("This is TextField");

layout.getChildren().add(t1);

Label l1 = new Label("This is Label");

layout.getChildren().add(l1);

CheckBox cb1 = new CheckBox("This is CheckBox");

layout.getChildren().add(cb1);

ChoiceBox cho = new ChoiceBox(FXCollections.observableArrayList(

"This", "is", "ChoiceBox"));

FULL CODE

Here is the full code:

import javafx.application.Application;

import javafx.collections.FXCollections;

import javafx.scene.Scene;

import javafx.scene.control.Button;

import javafx.scene.control.CheckBox;

import javafx.scene.control.ChoiceBox;

import javafx.scene.control.Label;

import javafx.scene.control.TextField;

import javafx.scene.layout.FlowPane;

import javafx.stage.Stage;

public class EmptyWindow extends Application

{

@Override

public void start(Stage primaryStage) throws Exception

{

FlowPane layout = new FlowPane();

Button b1 = new Button("This is Button");

layout.getChildren().add(b1);

TextField t1 = new TextField("This is TextField");

layout.getChildren().add(t1);

Label l1 = new Label("This is Label");

layout.getChildren().add(l1);

CheckBox cb1 = new CheckBox("This is CheckBox");

layout.getChildren().add(cb1);

ChoiceBox cho = new ChoiceBox(FXCollections.observableArrayList(

"This", "is", "ChoiceBox"));

layout.getChildren().add(cho);

Scene scene = new Scene(layout,310,200);

primaryStage.setScene(scene);

primaryStage.setTitle("Empty Window Application");

primaryStage.show();

}

public static void main(String[] args)

{

Application.launch(args);

}

}