JavaFX Scene Builder Tutorial updated wth Using Scene Builder with NetBeans, Eclipse and IntelliJ

JavaFX Scene Builder (Scene Builder) enables you to quickly design JavaFX application user interfaces by dragging a UI component from a library of UI components and dropping it into a content view area. The FXML code for the UI layout that you create in the tool is automatically generated in the background. To learn more about Scene Builder's features, see to JavaFX Scene Builder User Guide.

Scene Builder can be used as a standalone design tool, but it can also be used in conjunction with Java IDEs, so that you can use the IDE to write, build, and run the controller source code that you use with your application's user interface.

The tutorial of Using JavaFX Scene Builder with Java IDEs in JavaFX Documentation updated with information about how to configure the NetBeans, Eclipse, or IntelliJ IDEs to use with Scene Builder.

Caused by: javafx.fxml.LoadException: ... is not a valid type.

It's a tips to include custom control(UI element) in FXML.

It's the FXML from the example "Embed WebView in FXML, to load OpenLayers with OpenStreetMap".

<?xml version="1.0" encoding="UTF-8"?>
 
<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafxml_web.*?>
 
<AnchorPane id="AnchorPane" prefHeight="500" prefWidth="660" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxml_web.Sample">
    <children>
        <MyBrowser id="mybrowser" layoutX="10" layoutY="10" prefHeight="460" prefWidth="620" fx:id="mybrowser" />
    </children>
</AnchorPane>

Where MyBrowser is a custom class defined in my package, javafxml_web. So, the statement <?import javafxml_web.*?> have to be added. Otherwise error will be reported, Caused by: javafx.fxml.LoadException: MyBrowser is not a valid type.

Set font of text using FXML vs JavaFX

Example to set font using FXML:

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxml_text.Sample">
    <children>

        <Text layoutX="10" layoutY="30" stroke="BLACK" text="Set Font in FXML">
            <font>
                <Font name="Arial Black" size="24.0" />
            </font>
        </Text>
        
    </children>
</AnchorPane>

Example to set font using JavaFX:

package javafx_text;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFX_Text extends Application {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {

        Text text = new Text();
        text.setText("Text Font in JavaFX");
        text.setFont(Font.font("Arial Black", 24.0));

        StackPane root = new StackPane();
        root.getChildren().add(text);
        
        Scene scene = new Scene(root, 300, 250);
        
        primaryStage.setTitle("java-buddy.blogspot.com");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

Drop shadow on text, using FXML

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.effect.*?>

<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxml_text.Sample">
    <children>

        <Text layoutX="126" layoutY="30" stroke="BLACK" text="Text with Shadow (using FXML)">
            <effect>
                <DropShadow color="GRAY" offsetX="5.0" offsetY="5.0" />
            </effect>
        </Text>
        
    </children>
</AnchorPane>

Compare:
- Drop shadow on text, using JavaFX

Embed WebView in FXML, to load OpenLayers with OpenStreetMap.

Last article demonstrate how to "Embed OpenLayers with OpenStreetMap in JavaFX WebView". This article demonstrate how to do it in FXML.

New a JavaFX FXML Application in NetBeans.

Copy openstreetmap.html from last article.

Create MyBrowser.java, extends Region.

package javafxml_web;

import java.net.URL;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class MyBrowser extends Region{
        HBox toolbar;

        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        
        public MyBrowser(){
            
            final URL urlGoogleMaps = getClass().getResource("openstreetmap.html");
            webEngine.load(urlGoogleMaps.toExternalForm());
            
            getChildren().add(webView);
        
        }
}

Modify Sample.fxml to add MyBrowser, and remove un-used elements.

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

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafxml_web.*?>

<AnchorPane id="AnchorPane" prefHeight="500" prefWidth="660" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxml_web.Sample">
    <children>
        <MyBrowser id="mybrowser" layoutX="10" layoutY="10" prefHeight="460" prefWidth="620" fx:id="mybrowser" />
    </children>
</AnchorPane>

Modify Sample.java to remove un-used code.

package javafxml_web;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class Sample implements Initializable {
    
    @FXML
    private MyBrowser mybrowser;
    
    @FXML
    private void handleButtonAction(ActionEvent event) {

    }
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    
    
}

Create PieChart using JavaFX and FXML

New a JavaFX FXML Application in NetBeans, modify Sample.fxml to add <PieChart> in FXML, and modify Sample.java to fill-in the ObservableList of PieChart.Data.

Sample.fxml

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

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.chart.*?>

<AnchorPane id="AnchorPane" prefHeight="520" prefWidth="520" xmlns:fx="http://javafx.com/fxml" fx:controller="javafxml_charts.Sample">
    <children>
        <Button id="button1" layoutX="10" layoutY="10" text="Click to load PieChart 1" onAction="#handleButton1Action" fx:id="button1" />
        <Button id="button2" layoutX="10" layoutY="40" text="Click to load PieChart 2" onAction="#handleButton2Action" fx:id="button2" />
        <Button id="buttonclear" layoutX="10" layoutY="70" text="Clear PieChart" onAction="#handleButtonClearAction" fx:id="buttonclear" />
        
        <PieChart id="piechart" fx:id="piechart" layoutX="10" layoutY="110" />
        
    </children>
</AnchorPane>

Sample.java

package javafxml_charts;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.chart.PieChart;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class Sample implements Initializable {

    @FXML
    private PieChart piechart;
    
    @FXML
    private void handleButton1Action(ActionEvent event) {
        ObservableList<PieChart.Data> pieChartData = 
                FXCollections.observableArrayList(
                    new PieChart.Data("January", 100),
                    new PieChart.Data("February", 200),
                    new PieChart.Data("March", 50),
                    new PieChart.Data("April", 75),
                    new PieChart.Data("May", 110),
                    new PieChart.Data("June", 300),
                    new PieChart.Data("July", 111),
                    new PieChart.Data("August", 30),
                    new PieChart.Data("September", 75),
                    new PieChart.Data("October", 55),
                    new PieChart.Data("November", 225),
                    new PieChart.Data("December", 99));
        
        piechart.setTitle("Monthly Record");
        piechart.setData(pieChartData);
    }
    
    @FXML
    private void handleButton2Action(ActionEvent event) {
        ObservableList<PieChart.Data> pieChartData = 
                FXCollections.observableArrayList(
                    new PieChart.Data("Sunday", 30),
                    new PieChart.Data("Monday", 45),
                    new PieChart.Data("Tuesday", 70),
                    new PieChart.Data("Wednesday", 97),
                    new PieChart.Data("Thursday", 100),
                    new PieChart.Data("Friday", 80),
                    new PieChart.Data("Saturday", 10));
        
        piechart.setTitle("Weekly Record");
        piechart.setData(pieChartData);
    }
    
    @FXML
    private void handleButtonClearAction(ActionEvent event) {
        ObservableList<PieChart.Data> pieChartData = 
                FXCollections.observableArrayList();
        piechart.setTitle("");
        piechart.setData(pieChartData);
    }
        
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    
}

Create TilePane using FXML

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

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.*?>

<TilePane fx:controller="javafxml.Sample" xmlns:fx="http://javafx.com/fxml"
    prefHeight="200" prefWidth="300" >
        
        <ImageView>
            <image>
                <Image url="http://goo.gl/kYEQl"/>        
            </image>
        </ImageView>
        <ImageView>
            <image>
                <Image url="http://goo.gl/kYEQl"/>        
            </image>
        </ImageView>
        <ImageView>
            <image>
                <Image url="http://goo.gl/kYEQl"/>        
            </image>
        </ImageView>
        <ImageView>
            <image>
                <Image url="http://goo.gl/kYEQl"/>        
            </image>
        </ImageView>
        <ImageView>
            <image>
                <Image url="http://goo.gl/kYEQl"/>        
            </image>
        </ImageView>
        <ImageView>
            <image>
                <Image url="http://goo.gl/kYEQl"/>        
            </image>
        </ImageView>
        
</TilePane>

Related:
- Create TilePane using Java code
- TilePane in vertical

Create StackPane using FXML

javafx.scene.layout.StackPane lays out its children in a back-to-front stack.

The z-order of the children is defined by the order of the children list with the 0th child being the bottom and last child on top. If a border and/or padding have been set, the children will be layed out within those insets.

The stackpane will attempt to resize each child to fill its content area. If the child could not be sized to fill the stackpane (either because it was not resizable or its max size prevented it) then it will be aligned within the area using the alignment property, which defaults to Pos.CENTER.

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

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.textfield.*?>

<StackPane fx:controller="javafxml.Sample" xmlns:fx="http://javafx.com/fxml"
    prefHeight="200" prefWidth="400" >
        
        <Button text="Bottom Button" />
        <Button text="Button" />
        <Text text="Text"/>
        
</StackPane>

Compare to create StackPane using Java code.

Create AnchorPane using FXML

javafx.scene.layout.AnchorPane allows the edges of child nodes to be anchored to an offset from the anchorpane's edges. If the anchorpane has a border and/or padding set, the offsets will be measured from the inside edge of those insets.

Modify Sample.fxml in the last article "Create GridPane using FXML" to replace GridPane with AnchorPane.

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

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.textfield.*?>

<AnchorPane fx:controller="javafxml.Sample" xmlns:fx="http://javafx.com/fxml"
    prefHeight="200" prefWidth="400" >

        <Text text="java-Buddy" AnchorPane.topAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"/>
        <Label text="Who are you?" AnchorPane.topAnchor="25.0" AnchorPane.leftAnchor="0.0"/>
        <TextField id="textfield" fx:id="textfield" AnchorPane.topAnchor="25.0" AnchorPane.rightAnchor="0.0"/>
        <Button id="button"  text="Click Me!"
            onAction="#handleButtonAction" fx:id="button" 
            AnchorPane.topAnchor="50.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"/>
        <Label id="label" fx:id="label" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"/>
        
</AnchorPane>

Create FlowPane using FXML

javafx.scene.layout.FlowPane lays out its children in a flow that wraps at the flowpane's boundary.

Modify Sample.fxml in the last article "Create GridPane using FXML" to replace GridPane with FlowPane. Default orientation in "horizontal".

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

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.textfield.*?>

<FlowPane fx:controller="javafxml.Sample" xmlns:fx="http://javafx.com/fxml" 
    prefHeight="200" prefWidth="200">
        
        <Text text="java-Buddy"/>
        <Label text="Who are you?"/>
        <TextField id="textfield" fx:id="textfield"/>
        <Button id="button"  text="Click Me!" 
            onAction="#handleButtonAction" fx:id="button"/>
        <Label id="label" fx:id="label"/>

</FlowPane>

FlowPane with orientation in "vertical".

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

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.textfield.*?>

<FlowPane fx:controller="javafxml.Sample" xmlns:fx="http://javafx.com/fxml" 
    prefHeight="70" prefWidth="350" orientation="vertical">
        
        <Text text="java-Buddy"/>
        <Label text="Who are you?"/>
        <TextField id="textfield" fx:id="textfield"/>
        <Button id="button"  text="Click Me!" 
            onAction="#handleButtonAction" fx:id="button"/>
        <Label id="label" fx:id="label"/>

</FlowPane>

Create BorderPane using FXML

javafx.scene.layout.BorderPane lays out children in top, left, right, bottom, and center positions.

By using FXML, we can change the visual view without touch the Java code.

Modify Sample.fxml in the last article "Create GridPane using FXML" to replace GridPane with BorderPane.

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

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.textfield.*?>

<BorderPane fx:controller="javafxml.Sample" xmlns:fx="http://javafx.com/fxml" 
    prefHeight="200" prefWidth="320">
        
    <top>
        <Text text="java-Buddy"/>
    </top>
    <left>
        <Label text="Who are you?"/>
    </left>
    <center>
        <TextField id="textfield" fx:id="textfield"/>
    </center>
    <right>
        <Button id="button"  text="Click Me!" 
            onAction="#handleButtonAction" fx:id="button"/>
    </right>
    <bottom>
        <Label id="label" fx:id="label"/>
    </bottom>

</BorderPane>

Create GridPane using FXML

javafx.scene.layout.GridPane lays out its children within a flexible grid of rows and columns.

Modify Sample.fxml and Sample.java from the auto generated files described in the article "JavaFX FXML Application".

Sample.fxml

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

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.textfield.*?>

<GridPane fx:controller="javafxml.Sample" xmlns:fx="http://javafx.com/fxml" 
    prefHeight="200" prefWidth="320"
    alignment="center" hgap="10" vgap="10">

        <Text text="java-Buddy"
            GridPane.columnIndex="0" GridPane.rowIndex="0"
            GridPane.columnSpan="2"/>
        
        <Label text="Who are you?"
            GridPane.columnIndex="0" GridPane.rowIndex="1"/>
            
        <TextField id="textfield" fx:id="textfield"
            GridPane.columnIndex="1" GridPane.rowIndex="1"/>
 
        <Button id="button"  text="Click Me!" 
            onAction="#handleButtonAction" fx:id="button"
            GridPane.columnIndex="0" GridPane.rowIndex="2"/>
 
        <Label id="label" fx:id="label"
            GridPane.columnIndex="1" GridPane.rowIndex="2"/>
        

</GridPane>

Sample.java

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package javafxml;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

/**
 *
 * @web http://java-buddy.blogspot.com/
 */
public class Sample implements Initializable {
    
    @FXML
    private Label label;
    @FXML
    private TextField textfield;
    
    @FXML
    private void handleButtonAction(ActionEvent event) {
        System.out.println("You clicked me!");
        label.setText("Hello  " + textfield.getText());
    }
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    
}

Related:
- Create BorderPane using FXML
- Create FlowPane using FXML
- Create AnchorPane using FXML

Introduce JavaFX Scene Builder

JavaFX Scene Builder is a design tool that enables you to drag and drop graphical user interface (GUI) components onto a JavaFX scene. It can help you to quickly prototype interactive applications that connect GUI components to the application logic. It automatically generates the FXML source code as you define the GUI layout for your application.

Before you can use the JavaFX Scene Builder. You also need to install the NetBeans IDE 7.2 Beta, which is used in this tutorial. See the JavaFX Scene Builder Installation Guide for more details.

The Getting Started with JavaFX Scene Builder document presents the step-by-step creation of a simple issue-tracking application. It shows how quickly you can build the GUI for a JavaFX application by using JavaFX Scene Builder and connect it to the source code that handles the interaction between the data and the user interface.

JavaFX FXML Application

FXML is a scriptable, XML-based markup language for constructing Java object graphs. It provides a convenient alternative to constructing such graphs in procedural code, and is ideally suited to defining the user interface of a JavaFX application, since the hierarchical structure of an XML document closely parallels the structure of the JavaFX scene graph.

- To creates a JavaFX FXML-enabled application in a standard IDE project: Click File -> New Project... in NetBeans IDE.

- Select Categories of JavaFX, and Projects of JavaFX FXML Application, then click Next.

- Enter name and location of the project, then click Finish.

Three Files under Source Packages will be created:

• Sample.fxml: The FXML source file to define the UI.
• Sample.java: The controller file to handle user input of mouse and keyboard.
• helloFXML.java: The main Java code.

Now, try to run the auto-generated JavaFX FXML Application.