Janik von Rotz

4 min read

Superb Java development with Gradle, Hibernate, FlywayDB, JavaFX and Eclipse – Part 2

As promised here’s the sequel to my last tutorial: Part 1

This time we create a basic rich application with JavaFX. It will be quite simple, but still a good example to show how you can structure a complex project according to MVC.


We will start with a refresh of the file structure. The picture below shows yellow marked the new packages and directories. On the right side is a preview of the application window labeled with the type of each component.

Updated IssueMan Filestructure


<mapping class="ch.hslu.issueman.model.Person"/>


To create the visual layout I’ve used JavaFX Scene Builder. Please install this tool, we will need to edit the Home.fxml file.

Coding - Controller

To connect the view with the Person Controller we have to provide scene builder objects and methods. I assume you’ve completed the first tutorial and will only show the changes to file.

PersonController.java - begin

import java.net.URL;
import java.util.List;
import java.util.ResourceBundle;
import javafx.collections.FXCollections;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.TextField;
import javafx.scene.control.cell.PropertyValueFactory;
import ch.hslu.issueman.model.Person;

A lot of new dependencies required by JavaFX.

At the end of the file before the closing } inser the following snippets.

	private Button btAdd;
	private Button btUpdate;
	private Button btDelete;
	private TextField txName;
	private TableView<Person> tvPerson;
	private TableColumn<Person, Integer> tcId;
	private TableColumn<Person, String> tcName;

These objects allows us to set and get values from the application interface.

	public void initialize(URL arg0, ResourceBundle arg1) {
		tcId.setCellValueFactory(new PropertyValueFactory<Person, Integer>("id"));		
		tcName.setCellValueFactory(new PropertyValueFactory<Person, String>("name"));

Whenever the application is startet the initialize method will be called. In this function we tell the table view column which value of the person it has to display and also call the refreshPersonTable method which is added next.

	public void refreshPersonTable(){

In this method we feed the table view with a person array.

	public void clickTableView(){

As you can see there’s a FXML-Annotation as well. This tag allows us to connect an event added by the scene build with a function in the controller. Whenever a row is clicked in the table view we load the content to the form part (if you have got more than one field its recommanded to store the chosen object in a temporary variable).

	public void clickAdd(){
		controller.persist(new Person(txName.getText()));
	public void clickUpdate(){
		Person p = tvPerson.getSelectionModel().getSelectedItem();
	public void clickDelete(){

Some more event methods for the buttons.


Designing the user interface is very easy.

Scene Builder Issue Manager

If you don’t know how to accomplish that yet you can copy the fxml definitions below.


<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.image.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.text.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="300.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ch.hslu.issueman.controller.PersonController">
      <Glow />
      <TableView fx:id="tvPerson" onMouseClicked="#clickTableView" prefHeight="307.0" prefWidth="187.0">
            <TableColumn fx:id="tcId" prefWidth="50.0" text="ID" />
            <TableColumn fx:id="tcName" prefWidth="135.0" text="Name" />
      <Button fx:id="btAdd" layoutX="200.0" layoutY="99.0" mnemonicParsing="false" onMouseClicked="#clickAdd" text="Add" />
      <Button fx:id="btUpdate" layoutX="248.0" layoutY="99.0" mnemonicParsing="false" onMouseClicked="#clickUpdate" text="Update" />
      <Button fx:id="btDelete" layoutX="317.0" layoutY="99.0" mnemonicParsing="false" onMouseClicked="#clickDelete" text="Delete" />
      <TextField fx:id="txName" layoutX="196.0" layoutY="61.0" />

And we are almost done.

Coding - Application

To launch the whole scene we have to update the App.java code as showed below.


package ch.hslu.issueman;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Scene;

public class App extends Application {
	public void start(Stage primaryStage) {
		try {
			primaryStage.setTitle("Issue Manager");
			primaryStage.setScene(new Scene(FXMLLoader.load(getClass().getResource("view/Home.fxml"))));
		} catch(Exception e) {
	public static void main(String[] args) {

Hurray! We are done! You can run the application now and should be able to add, edit and delete people from the list all whilst they are stored in the MySQL database.


You can download the source code of the project here: https://github.com/janikvonrotz/issue-manager/releases/tag/1.1

Categories: Software development
Tags: application , fxml , hibernate , java , javafx , tutorial
Improve this page
Show statistic for this page