Griffon Framework: Building UI using JavaFX FXML

with No Comments

JavaFX FXML is an XML-based language that provides the structure for building a user interface separate from the application logic of your code. This separation of the presentation and application logic is attractive to web developers because they can assemble a user interface that leverages Java components without mastering the code for fetching and filling in the data.

Just as some developers prefer to work directly in the XML code, others tend to use a particular tool. The best solution is JavaFX Scene Builder, the tool that generates the FXML source code as you define the user interface for your application. For more information, see Gluon Scene Builder.

So, let’s start. As the source code we take a project created in a previous article, where the UI was created with the use of GroovyFX. First, we need to create a file with the extension *.fxml and place it within the application’s classpath. It is recommended to place these files in the griffon-app/resources directory. Here is a typical example of fxml file:

Information about fxml tags you can find here or you may address the tutorial “Mastering FXML”. Here I explain only some of the attributes. fx:controller is used to associate a controller class with the document; fx:id creates a variable in the document’s namespace that can later be referred to by id ‘clickLabel’; JavaFXUtils.griffonActionId=”click targets the button for a particular action of the controller.

Now consider View component that renders fxml view. Here is an example of it:

where @FXML injects FXML element by fx:id; Language is a POJO that defines the data model for the table ‘tableView’. Here is a code of it:

Controller component contains additional action for closing a project. Here is an example of it:

Model component remains unchanged. Run project ./gradlew run.

fxml article image view tab

fxml article table view tab

fxml article web view tab

fxml article default view tab

Almost the entire user interface has been created using Scene Builder tool, without writing any code, so development of the UI via FXML and Scene Builder makes the process more easier and faster.

Leave a Reply