When I started to work in my current position, one of my task is to do manual operations for campaign products  every week. After the second week, I thought that I have to automate this task using a GUI based desktop program instead of using some DB scripts manually. Then, I started to search which solution I should choose. Finally, I ended up my decision with JavaFX. This is the starting point of my JavaFX journey. In my JavaFX post series, I will try to describe how to create a JavaFX application, how to use its core components, how to communicate with DB and so on.

Before starting JavaFX post series, I want to thank Marko Jakob. I learned a lot stuff from his tutorial series and I suggest that check that tutorial series.

Let’s get started!

What is JavaFX?

It is a next generation GUI toolkit and you can create rich GUI applications with JavaFX. You can also customize style using CSS and edit them with XML. Also, it includes a drag and drop design editor that is called as SceneBuilder. It is much easier to design GUIs with SceneBuilder. You can drag and drop GUI elements and then modify their style with CSS or edit them with XML. For more details please visit here.

Prerequisites

  • Install latest JAVA JDK 8 from here.
  • Install IntelliJ, Eclipse or Netbeans IDE (I prefer IntelliJ)
  • Install Scene Builder from here.
  • Install Oracle Express Edition from here.

Create a JavaFX Project

Open IntelliJ and click File ->> New Project and then click Java FX and click Next button.

javafx

Type “First_JavaFX_Project” as Project name and set your Project Location as you want and click Finish button.

JavaFX

Thanks to IntelliJ, it automatically creates a JavaFX project structure and put a sample Hello World code into Main class.

javafx

We are going to write our code based on MVC (Model-View-Controller) principle. Thus, I used three (plus one “util” package) packages. These are controller, model, and view. We should move .fxml files into view package and controller classes in controller package. Also, I added one extra package and called it as util. It is for utility classes such as DBUtil for database connection operations. “model” package comprises “model” and “DataAccessObject”  classes. A sample application structure is shown below figure.

javafx_4_

Also, we need to set SceneBuilder path. To do this, go to File ->> Settings, type “JavaFX” in the search bar. Then, copy and paste SceneBuilder path as shown below and click OK. Also, please check this link.

javafx_5

After setting the SceneBuilder path, go into sample.fxml file and right click, then you will see “Open in SceneBuilder” option. When you click this option, the selected fxml file will open in SceneBuilder. You can also check here.

javafx

We have almost finished our setup. For our first example, we will use Oracle DB and default HR schema. In second post, we will do some DML (Database Manipulation) operations such as Create, Read, Update, Delete, Insert, etc. I also explained how to install and use Oracle Express at the end of this post.

Now, let’s go to our project’s view folder and create EmployeeOperations.fxml and RootLayout.fxml files manually. To do this, right click your mouse and create a new empty text file and changed its name as EmployeeOperations.fxml (in next post, I will change its name as EmployeeView.fxml) . Do the same for the RootLayout.fxml. If you want, you can do this with SceneBuilder. Finally, in view folder we will have these two .fxml files.

javafx_7

Go to Windows Start and type SceneBuilder and then press Enter, then SceneBuilder will open.

javafx_8

After that, click “File ->> Open” and open EmployeeOperations.fxml file.

Actually, there are two ways to design user interface. One of them is using IntelliJ to manipulate .fxml file or using SceneBuilder to design the UI. Using SceneBuilder when creating and designing UI at the first time is much easier and reasonable. I generally use intelliJ for manipulating UI at later stages.

First, open EmployeeOperations.fxml file and drag and drop Anchor Pane into the middle pane of SceneBuilder.

20-02-2016 23-49-24

Then, if you want you can modify its properties by using right pane.

properties

You can use left pane’s Controls section to add TextField, Label, TextArea, and button to design your UI as shown below. The below figure is the draft version of the UI, not the final version.

javafx_11

You can also group UI elements. Select the UI elements that you want to group then go to “Arrange > Wrap in” then click the appropriate choice. If elements are vertically listed, then chose VBox. If they are horizontally listed, then chose HBox.

javafx_12

After grouping those elements, you can change spaces of elements by using right pane Layout section’s Spacing option.

javafx_13

Then, in order to use these components in the code, you should set fx:id values on the right pane as shown below.

javafx_14

If you want to set prompt text and default text you can use the Properties section on the right pane. You can change Prompt Text and Text values as shown below.

javafx_15

While designing UI, you can check its status by typing Ctrl + P.

javafx_16

For more information about layout design, you should visit here and https://dzone.com/refcardz/javafx-8-1 (I suggest you to visit DZone. They explained layout design very well.)

Now, let’s design RootLayout. Open RootLayout.fxml with SceneBuilder.

This time drag and drop BorderPane.

javafx_17

Then, add to MenuBar into TOP slot.

21-02-2016 00-32-10

RootLayout’s final design is shown below.

javafx_19

Our aim is to show EmployeeOperations.fxml into RootLayout.fxml. Now, I want to explain JavaFX application structure briefly. Our generated Main class code is shown below.

This is the default (generated) Main class and it extends Application class. It has start and main methods. The key method is here start method. It is automatically called with stage parameter when application launched as you can see in main method.

As you can see below figure, the main container is Stage and it consists of a scene and scene comprises all kinds of JavaFX elements such as text field, button, etc. All JavaFX applications structure is like that. You can find more information here.

javafx-hierarchy

If we change main class code as shown below, we can open Employee Operations view inside of the RootLayout Border Pane. I tried to add comments and make the code more understandable.

Result:

21-02-2016 01-24-52

Note: Above UI design is the draft version and in next post, we will change and finalize it. In this post, I do not want to focus the final design of our UI.

When you click any .fxml file in IntelliJ, you can see its content as shown below.

javafx_20

Before start to coding, I want to explain how to install Oracle Express Database

First, you should visit this link and install Oracle Database Express Edition 11g Release 2.

oracle express

After you installing Oracle Express, please go to this link and UNLOCK HR sample user account. In this tutorial, we will use HR schema and its tables.

Then, try to connect database with TOAD or Oracle SQL Developer. (I prefer TOAD)

You can see how to connect DB with TOAD in below figure.

toad

employees

Now, we are ready to start coding. In next post, we will use DAO (Data Access Object) Design Pattern and create EmployeeController controller (Business Class), Employee model (Employee Model), EmployeeDAO (Data Access Class) classes, and DBUtil class (DB Connection Utility) for DB connection operations.

Java FX Tutorial Series

JavaFX – Part 1: Getting Started with JavaFX (This post)

JavaFX – Part 2: JavaFX Database Operations

Java 8 and JavaFX References

Java 8 API – JavaDoc for the standard Java classes

JavaFX 8 API – JavaDoc for JavaFX classes

ControlsFX API – JavaDoc for the ControlsFX project for additional JavaFX controls

Oracle’s JavaFX Tutorials – Official JavaFX Tutorials by Oracle