The goal of this tutorial is to learn how to create graphical user interfaces with JavaFX 2 and Scene Builder. We will cover many features of JavaFX 2 by creating an Address Application and enhancing it step-by-step.
Topics in Part I
- Getting to know JavaFX 2
- Creating and starting a JavaFX Project
- Using Scene Builder to design the user interface
- Basic application structure using the Model View Controller (MVC) pattern
Other Tutorial Parts
- Part I - Scene Builder
- Part II - Model and TableView
- Part III - Interacting with the User
- Part IV - CSS Styling
- Part V - Storing Data as XML
- Part VI - Statistics Chart
- Part VII - Deployment with e(fx)clipse
- Latest Java JDK 7 that includes JavaFX 2.2 or greater.
- Eclipse 4.2 or greater with e(fx)clipse plugin. The easiest way is to download the preconfigured distro from the e(fx)clipse website. As an alternative you can use an update site for your Eclipse installation.
- Scene Builder 1.1 or greater
Preparation and Helpful Links
Play around with the JavaFX widgets in the JavaFX Ensemble (Under Downloads, go to JavaFX Demos and Samples Downloads, unzip the samples and click on Ensemble.jar):
- JavaFX Ensemble is a gallery of over 100 sample applications that use a wide range of JavaFX features.
- Contains source code for each sample.
- Contains links to API documentation (JavaDoc).
Some other helpful links:
- JavaFX Tutorials - Official Tutorials by Oracle
- JavaFX 2 API - JavaDoc for JavaFX classes
- Java 7 API - JavaDoc for the standard Java classes
Now, let’s get started!
Create a new JavaFX Project
In Eclipse (with e(fx)clipse installed) go to File | New | Other… and choose JavaFX Project. Specify the Name of the project (i.e. AddressApp).
Create the Packages
Right from the start we will follow good software design principles. One very important principle is that of Model-View-Controller (MVC). According to this we divide our code into three units and create a package for each (Right-click on the src-folder, New… | Package):
- For the controller classes:
- For the view classes:
- For the model classes:
Create the FXML Layout File
There are two ways to create the user interface. Either using an XML file or programming everything in Java. Looking around the internet you will encounter both. We will use XML (ending in .fxml) for most parts. I find it a cleaner way to keep the controller and model separated from each other. Further, we can use the graphical Scene Builder to edit the XML. That means we will almost never have to directly work with XML.
Right-click on the view package and create a new FXML Document called
Design with Scene Builder
Note: If you get stuck somewhere, watch the Getting Started with JavaFX Scene Builder YouTube Film. This helps a lot!
PersonOverview.fxml and choose Open with Scene Builder. Now you should see the Scene Builder with just an AncherPane (visible under Hierarchy on the left).
Select the Anchor Pane in your Hierarchy and adjust the size under Layout (right side):
Add a Split Pane (Horizontal Flow) by dragging it from the Library into the main area. Right-click and select Fit to Parent.
Add a TableView into the left side. Select the TableView (not a Column) and set the following layout constraints. Inside an AnchorPane you can always set anchors to the four borders (more information on Layouts).
Go to the menu Preview | Preview in Window to see, whether it behaves right. Try resizing the window. The TableView should always keep the 10px distance to the surrounding border.
Change the column text (under Properties) to “First Name” and “Last Name” and adjust the sizes.
Add a Label on the right side with the text “Person Details”. Adjust it’s Layout using anchors.
Add a GridPane on the right side, select it and adjust it’s Layout.
Add some rows (under Layout | GridPane Rows). Add labels to the cells.
Add the three buttons at the bottom. Tipp: Select all of them, right-click and call Wrap In | HBox. This groups them together. You might need to specify a Spacing inside the HBox.
Now you should see something like the following. Please test it using the Preview Menu.
Creating the Main Application
We need another FXML for our root layout which will contain a menu bar and wraps the just created
Create another FXML Document inside the view package called
RootLayout.fxml. This time, choose BorderPane as the root element.
Open it in the Scene Builder.
Resize the BorderPane with Pref Width set to 600 and Pref Height set to 400.
Add a MenuBar into the TOP Slot. We will not implement the menu functionality at the moment.
Now, we need to create the Main Java that starts up our application with the
RootLayout.fxmland adds the
PersonOverview.fxmlin the center.
Right-click on the controller package, New | Other… and choose JavaFX Main Class. We’ll call it
Understanding the JavaFX Main class
MainApp.java class extends from
Application and contains two methods. This is the basic structure that we need to start a JavaFX Application. The most important part for us is the
start(Stage primaryStage) method. It is automatically called when we run the application.
As you see, the
start(...) method receives a
Stage as parameter. It’s good to understand the basic concept of a graphical application with JavaFX:
Image Source: http://www.oracle.com/
It’s like a theater play: The Stage is the main container which is usually a Window with a border and the typical minimize, maximize and close buttons. Inside the Stage you add a Scene which can, of course, be switched out by another Scene. Inside the Scene the actual JavaFX nodes like AnchorPane, TextBox, etc. are added.
MainApp.java and replace the code with the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
Try to understand the code. The various comments should give you some hints about what’s going on.
If you run the application now, you should see something like the screenshot at the beginning of this post.
In Tutorial Part II we will add some data and functionality to our AddressApp.
Source of Tutorial Part I as Eclipse Project