Getting Started with JavaFX

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.


  • 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.


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


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


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.


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.


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.


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.


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


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.


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.


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.


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


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


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.


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


For more information about layout design, you should visit here and (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.


Then, add to MenuBar into TOP slot.

21-02-2016 00-32-10

RootLayout’s final design is shown below.


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.


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.


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.


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.



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


Database Operations in JavaFX

By Onur Baskirt / Apr 1, 2016 / 56 Comments
Before started this section, please check the first article and learn How to Start JAVAFX! At first, part of JavaFX tutorial series, we created a sample JavaFX project, designed the draft version of the UI and set up an...

How to Write Smart XPath Locators

By Onur Baskirt / Sep 24, 2017 / 5 Comments
Hi all, in this tutorial, I will describe you how to write smart and non-brittle XPath locators. When we write our test scripts, we generally prefer to use id, name, class, etc. these kinds of locators. However, sometimes we could not...

How to Write Effective CSS Locators

By Onur Baskirt / Oct 1, 2017 / 0 Comments
Hi all, in this tutorial, I will describe you how to write effective CSS locators to interrogate web elements for your automation projects. As a rule of thumb, your interrogation strategy should be in below order: First try to use...
rest assured

REST API Testing with Rest Assured

By Onur Baskirt / Mar 8, 2016 / 32 Comments
Outline In this post, I will explain what is API and API testing, what is the difference between SOAP and REST services, and how to test REST APIs with Rest Assured Library. What is API? API stands for Application Programming...

Getting Started with JavaFX

By Onur Baskirt / Mar 25, 2016 / 0 Comments
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...

Selenium-1: Quick Start to Automation with Selenium WebDriver & JAVA & JUnit & Maven & IntelliJ

By Onur Baskirt / Sep 8, 2015 / 26 Comments
Outline Selenium Webdriver is the most popular open source web test automation framework across the wide range of browsers and platforms. In this tutorial, you will learn how to do web test automation with Selenium Webdriver and the related tools....

Selenium-11: Execute JavaScript with JavascriptExecutor

By Onur Baskirt / Jan 27, 2016 / 15 Comments
Outline Sometimes we cannot handle some conditions or problems with Webdriver, web controls don't react well against selenium commands. In this kind of situations, we use Javascript. It is useful for custom synchronizations, hide or show the web elements, change...
page object model

Page Object Model with C#

By Ege Aksoz / Jun 18, 2017 / 8 Comments
In the previous tutorial, we’ve taken the initial steps and entered the world of automated testing. We also wrote our first automated test. From this point on, since we are not just going to write one test, we need to...

How to Select a Date From DatePicker Using Selenium

By Onur Baskirt / Aug 13, 2016 / 6 Comments
When you need to automate a airway, hotel, or similar websites you need to deal with Datepickers and some times it is a little bit cumbersome to select a specific date on the Datepicker or calendar.  In this post, I...

Getting Started with RobotFramework on Windows

By Onur Baskirt / Apr 25, 2016 / 12 Comments
What is RobotFramework? RobotFramework is a GENERIC test automation framework for acceptance testing and acceptance test-driven development (ATTD). What it means that you can do web, mobile, desktop and other test automation activities with related test libraries. These libraries can...
By | 2017-10-22T02:13:26+00:00 March 25th, 2016|Java, JavaFX|0 Comments

About the Author:

Onur Baskirt
Onur Baskirt is a senior IT professional with 10+ years of experience. He worked at Bahçesehir University, ST Microelectronics, Huawei and Ericsson as research assistant, design verification engineer and software test leader. Also, he worked as software test leader and software operations manager at Turkey's biggest technology retailer, Teknosa. Now, he is working as Head of Software Testing and Manager of two Development Teams at His current research areas are technical software testing, programming, and computer science. Formerly, he has several research works and papers on digital chip design & verification. His hobbies are sport, dancing, traveling, and nutrition. You can find detailed information about him on his linked-in page.

Leave A Comment