From making your High school level programs look cool to many professional applications, Java Fx provides a professional and simple GUI implementation in JAVA. I recently used JavaFX for a Java based web crawler game i am working on to build its UI. Through this tutorial you would have the basic knowledge to create a working UI.

Basic Concept UI Components Layouts

Basic Concept

JavaFX took Shakespear’s phrase “All the worlds a stage” to heart. Every window that you see in JavaFX is called a Primary Stage. All the components and other windows are bound inside this Stage. The components of a window are represented in a Scene. As multiple scenes can take place on a stage, they do so in JavaFX as well. You navigate between the Scenes with the help of events. These events can be as simple as a button click by the user to go to another section of the UI. UI Components such as Buttons and Text Area or Layouts are called Nodes.

Stage →Scene →Nodes [Layouts, UI(Buttons, Text Fields, Text Area), Geometric Objects]

A basic startup for any JavaFX application

To make a JavaFX Application we first extend the Application class to use its functions. Then we Override the start() function. This is where most of our code would be. Now as all java classes run main. We use the launch(args) function in the main to call our start function. This is a basic framework for the rest of our JavaFX projects.

Lets first create a basic window like this:

Code to set up a blank window

A blank window

We first create a Stage(The main window) for the entire program. we can use the variable primaryStage but it’s more clear to name it as its function i.e. window.

Then we set the title of the new blank window using the .setTitle(“”); function.

Now we can right away display the basic window with window.show() itself but there are no components in it.

Next we create a layout and scene as well to create a functioning blank window.

We next initialize a new object of HBox(Horizontal box) by HBox hbox1 = new HBox(); here i have already initialized a lot of the variables globally. This is a form of Layout for all the components in the scene. Different types of layouts are described in detail later.

Next we initialize a new Scene and set our layout to the scene.

Scene scene = new Scene(hbox1, 500,500). This also describes the Width and Height of the particular scene.

In the end we set our window(primaryStage) to the new scene and display it using

window.setScene(scene);

window.show();

UI Components

UI(User-interface) components such as Labels, Buttons and Text Fields are important building blocks of an application.

Labels — are text placers which normally direct or alert the user with text.

Label l1 = new Label(“This is a message”);

Text Fields — are input boxes where the user can type in text and. This input is recorded and processed by the program.

TextField txt = new TextField();

Buttons — work as event changers as they normally bring about change scene and used to record or pass data.

Button btn = new Button(); → Initialize the Button object named btn.

btn.setText(“Go to next page”); → Set the text in the button.

Layouts

After creating nodes/ UI components, it is often important to arrange them in a format for a good looking and well designed UI. Here are multiple layouts and how to implement them.

Layouts — HBox, VBox, Border Pane, Grid Pane.

HBox layout with 3 components

HBox(Horizontal Box) — here all the nodes(components) are arranged in a single horizontal row.

HBox Hlayout = new HBox(); → Initialize the HBox layout object.

Hlayout.getChildren().addAll(label1,button1,button2); → add the nodes in the layout container. use only .add() if there is only one node in the entire layout.

This creates a basic Layout with all the nodes inside. But all the components stick very close and all placed in a corner. To combat this we employ few more functions on the layout.

Hlayout.setSpacing(20); → Sets the space between each node by 20 pixels.

Hlayout.setMargin(label1, new Insets(30,30,30,30)); → Sets the margin of the Particular node in the layout by 30 pixels on all sides.

Hlayout.setAlignment(Pos.CENTER)→ Sets the total layout according to the Pos specified(has multiple options).

VBox layout with 3 components

VBox(Vertical Box) — here all the nodes are arranged in a single vertical row.

VBox Vlayout = new VBox(); → Initialize the VBox layout object.

The rest of the methods are exactly like the HBox().

Border Pane (image from- https://docs.oracle.com/javafx/2/layout/builtin_layouts.htm)

BorderPane — This layout provides 5 main areas, where nodes, groups of nodes or even other layouts can be placed.

BorderPane bp = new BorderPane(); → Initialize the Border Pane layout object.

bp.setTop(hbox1); → Set a HBox layout at the top of the Border Pane layout.

bp.setLeft(vbox1); → Set a VBox layout at the top of the Border Pane layout.

Grids in a Grid Pane layout

GridPane — In this layout all the nodes are added in a flexible grid of rows and columns.

GridPane gp = new GridPane(); → Initialize the GridPane layout object.

gp.setVgap(10); → Set the Vertical gap between each column.

gp.setHgap(10); → Set the Horizontal gap between each row.

gp.add(label, 0,0); → Add a node(label) in a grid position, where row position = 0 and column position = 0.

gp.add(button,4,5); → Add a node(button) in a grid position, where row position = 4 and column position = 5.

In the following parts of this tutorial I’ll cover more details such as Event changing functions, windows-inside-windows confirmation boxes and more. Using examples and trying to recreate more important functions.