FXML
Wiki ▸ Documentation ▸ FXML
The type safe builders of TornadoFX provide a fast, easy and declarative way to construct your UI and is for most cases your best choice. JavaFX does however also support an XML-based language that can do the same thing.
With FXML it is very easy to separate your UI logic code from the code that constructs the UI. While this separation is just as achievable with the type safe builders by utilising the MVP pattern or similar, some programmers find that by using FXML they are forced to maintain this separation and prefer it for exactly that reason.
The FXML files can also be processed by Scene Builder, a visual layout tool that lets you build your user interface with drag and drop and immediately see the result in a WYSIWYG editor.
If you're converting an existing JavaFX application to TornadoFX, chances are your UI is already constructed with FXML, and you might want to keep it that way instead of converting the code to use the type safe builders.
If you are unfamiliar with FXML and want to stick with the builders, feel free to skip this chapter or take a look at the official FXML documentation to learn more about it.
As you have seen earlier, the root property of a View represents the hierarchy of Nodes that build up the user interface. When you work with FXML, you don't instantiate this root node directly, but instead asks TornadoFX to load it from a corresponding FXML file. By default, TornadoFX will look for a file with the same name as your view with the .fxml file ending, in the same package as your View class. You can also override the FXML location with a parameter if you want to put all your FXML files in a single folder or arrange them some other way that does not directly correspond to your View location.
Let's create a basic user interface that presents you with a label and a button. We will add functionality to this view so that when the button is clicked, the label will update with the number of times the button has been clicked.
Create a file named CounterView.fxml with the following content:
<BorderPane xmlns="http://javafx.com/javafx/null" xmlns:fx="http://javafx.com/fxml/1">
<padding>
<Insets top="20" right="20" bottom="20" left="20"/>
</padding>
<center>
<VBox alignment="CENTER" spacing="10">
<Label text="0">
<font>
<Font size="20"/>
</font>
</Label>
<Button text="Click to increment" />
</VBox>
</center>
</BorderPane>If you load this file in Scene Builder you will see the following result:
The Scene Builder tool was created by Oracle/Sun but is now maintained by Gluon, an innovative company that invests heavily in JavaFX technology, especially for the mobile market.
Next: Application Startup