JavaFX offers an XML-based language to build user interfaces separate from the application logic of an application. This language is called FXML. To help simplify the creation of the FXML code when creating a graphical user interface a tool was created called Scene Builder. This is a stand alone tool which allows a developer to drag and drop controls on to an interface. When a control is placed and/or modified, the FXML file is automatically written with the correct FXML code to reflect the changes to the interface. This tutorial creates a JavaFX FXML hello world program using NetBeans and shows how SceneBuilder can be used to look at the user interface.
Note: JavaFX Scene Builder does not come as a standard part of the Java JDK. It needs to be downloaded from the Oracle downloads page. There are Windows and Mac OS X versions - installation instructions are there if needed. There is also a samples zip file available to download with some FXML examples.
Note: It's best to use the latest version of NetBeans for this tutorial as you'll need at least NetBeans v7.2 in order for Scene Builder to be integrated with the IDE.
Hello World FXML Style
To create the Hello World JavaFX FXML application, open NetBeans and go
Project. In the
pane choose JavaFX and in the
JavaFX FXML Application. Click
Name and Location window you can configure the project
differently if you wish but the first time just click
Once NetBeans has created the JavaFX FXML project you will see the
class in the main code pane. This is the beginning point of the
application. As you can see there is a main method which is still the
starting point of the application. What if does is to start the JavaFX
application lifecycle by launching the
The start method is where the JavaFX code is employed. As this is a
JavaFX application using an FXML file as a separate place for the user
interface code you will see that it loads the interface from an FXML file
Sample.fxml. If you look in the Projects pane to the
left you will see the
Sample.fxml file is one of three files
used for the JavaFX project.
If you right-click on the
Sample.fxml file name the FXML
code file will be shown in the main code pane. You'll see that it contains
xml-like tags at the top which determine the JavaFX packages that need to
be imported and below those the FXML tags needed to create the interface:
<?xml version="1.0" encoding="UTF-8"?> <?import java.lang.*?> <?import java.util.*?> <?import javafx.scene.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxapplication4.SampleController"> <children> <Button layoutX="126" layoutY="90" text="Click Me!" onAction="#handleButtonAction" fx:id="button" /> <Label layoutX="126" layoutY="120" minHeight="16" minWidth="69" fx:id="label" /> </children> </AnchorPane>
Note: Running an application in NetBeans is done by pressing the green 'play' button on the toolbar.
If you run the project you will see that you don't have to add any code
to make the Hello World program. A window will appear with a button called
"Click Me!". If you do
appears on the window and the message
" in the output window. The NetBeans JavaFX project
templates are set up to show simple example JavaFX code when a new project
Using Scene Builder
If you have Scene Builder installed you can double-click on the
file name in the projects pane and have Scene Builder launch with the
graphical design of the file. As it is a separate tool from NetBeans it
will appear in it's own application window. However you will see the
changes to the FXML code appear in the NetBeans code window.
For example, drag a button control from the
Library pane on the left hand side of Scene Builder
on to the Hello World form above the
button. Save the file by going to
File -> Save. The
Samples.fxml file will now automatically refresh in NetBeans - if you look
at the code you will see there is a new FXML tag for the button we just
dragged on to the interface.
Using Scene Builder and FXML code is an alternative way to create interfaces for JavaFX applications from the using of the JavaFX code as in the Hello World program created in Getting Started With JavaFX Using Netbeans