scenebuilder fx id

  • Simple sample program in zip file which is created by NetBeans 12.0 and modified to include the sebipom.

    • NetBeans 12.0 has been released on the 4th of June 2020. It is a Long Term Stable release.

    • To get the fxample working, enable the fx profile in netbeans of add -P fx to the maven command line, e.g. mvn -P fx javafx:run.+

    • It uses sebiprom version 2.3.9, which is adapted to be compatible with what NetBeans creates.

    • The pom file only needs to mention the actual dependencies, javafx-controls javafx-fxml in this simple program.

    • You can package it as an application-images with mvn -P fx compile javafx:jlink, which you run as
      target/image/bin/java -m fxample/fxample.App.

    • Of special interest are the fxml files and the way they can be viewd and modified with SceneBuilder. As an example observe how the fx:id of the controllers is visible in SceneBuilder. You may want to study on how fx:controller fx:ids and the methods and fields in an fxml file relate to each other.

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

<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>

<VBox alignment="CENTER" spacing="20.0" xmlns=""
      fx:controller="fxample.PrimaryController"> <!-- 1 -->
      <Label text="Primary View" />
      <Button fx:id="primaryButton" text="Switch to Secondary View" onAction="#switchToSecondary"/> <!-- 2 -->
      <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
1 This is the fxmp file of the controller
2 The button has fx:id primaryButton, which is important when used with the @FXML annotations.
also, the controller method switchToSecondary is invoked on button clicked (the action of the button).
The primaryController class
package fxample;

import javafx.fxml.FXML;

public class PrimaryController {

    private void switchToSecondary() throws IOException { (1)
1 The method invoked on teh button action. Note the use of the annotation and matching method name in the fxml file and this java source file.

2. Scene Builder Demo

Scenebuilder is a nice tool to graphically design your UI and integrates rather well in NetBeans. You can download it for your platform at Gluon HQ Scenebuilder download .

Creating a first App in Scene Builder

3. Wire Frame

Wire frames are the traditional name for GUI lookalikes in the analysis phase of a project. The picture and possibly the navigation is there, but the functionality is not. You use such model to present the prototype to the customer in an early phase.

There are tools to make such wire frames, but we want to minimise the number of new tools in this project. That’s why we want you to use SceneBuilder to design your GUI prototypes. The rationale is that you gain experience with this tool and the technology.

3.1. Prototype only, no coding yet.

Mind that you do not use this as an excuse to start hacking. You should not yet start programming in Java, or at least keep the controllers to a minimum. Actually you do not need to write any Java at all. The fxml files are just sufficient.

To get you started, we have provided a small example project in a zip file called This does not imply that you should make a tabbed pane GUI implementation, but just to show the technology.

fxml include example snippet
  <Tab text="Beasty">
        <fx:include fx:id="beast"
            source="beast/Beast.fxml" />
Note that example uses sebipom, the super pom as given on the website of PRC2 topic, week 2. When using it to build JavaFX projects, make sure to activate the fx-profile, which will creates a executable jar with all the dependencies include, so you can run it everywhere where you have a Java virtual machine available.

You can find SceneBuilder (current is 8.5.0) at the GluonHQ website

GluonHQ sponsors SceneBuilder

3.2. Demo on how to use multiple controllers

Multiple controllers with JavaFX