1. Computing

JavaFX With FXML Using SceneBuilder and NetBeans

By

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 File -> New Project. In the Categories pane choose JavaFX and in the Projects pane choose JavaFX FXML Application. Click Next. In the Name and Location window you can configure the project differently if you wish but the first time just click Finish.

Once NetBeans has created the JavaFX FXML project you will see the Application 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 start method.

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 called 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 "Hello World!" appears on the window and the message "You clicked me !" in the output window. The NetBeans JavaFX project templates are set up to show simple example JavaFX code when a new project is created.

Using Scene Builder

If you have Scene Builder installed you can double-click on the Sample.fxml 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 Controls menu in the Library pane on the left hand side of Scene Builder on to the Hello World form above the Click Me! 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

  1. About.com
  2. Computing
  3. Java
  4. Create User Interfaces
  5. JavaFX
  6. JavaFX With FXML Using Scene Builder and NetBeans

©2014 About.com. All rights reserved.