Gluon Scene Builder Documentation

repository·master·Indexed 21 days ago

https://github.com/gluonhq/scenebuilder

A drag-and-drop UI designer for JavaFX applications supporting desktop and mobile development. The tool separates UI design from application logic and consists of the Scene Builder App, the Scene Builder Kit core engine, and a Gluon plugin for mobile controls and themes. Documentation covers installation, building from source using Maven, integrating the Scene Builder Kit API, and managing custom JavaFX controls via the Library Manager.

Tokens
3.1K
Snippets
6
Records
20
Agent score
24%

What's inside Gluon Scene Builder

  1. How Scene Builder components work together

    master

    The project is divided into three main modules:

    1. Scene Builder App: The main JavaFX application that embeds the Kit. It provides the menus, preferences, and dialogs for user interaction.
    2. Scene Builder Kit: The core engine. It manages the Library (controls/hierarchy), the Workspace (FXML display), and the Inspector (properties/events). The Kit provides an API for embedding Scene Builder functionality into other applications or IDEs.
    3. Gluon plugin: An extension that allows adding Gluon Mobile controls and applying Gluon themes/swatch colors to FXML layouts.
  2. Change Library view between List and Sections

    master

    You can change how components are displayed in the Library panel using two options in the Library Manager menu:

    1. View as List: Displays all components (both built-in and custom) in a single, flat list.
    2. View as Sections (Default): Uses an Accordion container with TiledPanes to organize components into logical sections.
  3. How Scene Builder identifies custom controls

    master

    When you add JARs or files to the Library Manager, Scene Builder scans them to extract valid custom controls. To be considered a candidate, a *.class file must meet these criteria:

    1. Package Filtering: The package name must not start with any of the following:
      • java.
      • javax.
      • javafx.
      • com.oracle.javafx.scenebuilder.
      • com.javafx.
      • module-info
      • com.gluonhq.charm.glisten
    2. Loading: The classLoader must be able to load the class.
    3. Visibility: The class must be public or protected, and it cannot be abstract or package-private.
    4. FXML Validation: FXMLLoader must successfully load a simple FXML file that references the class.

    If a control is imported but exhibits errors (e.g., related to properties), you can use the Jar Analyzer report to find insights into the cause.

  4. Create a custom control from an existing FXML selection

    master

    You can quickly turn a portion of an existing FXML file into a reusable custom control using the Import Selection option:

    1. Select a part of the current FXML layout in Scene Builder.
    2. Use the Import Selection menu item.
    3. Scene Builder will create a new, simple FXML file representing that selection, which can then be reused in other FXML files.
  5. Import custom controls from a build output folder

    master
    When developing new controls, you can avoid the packaging step by using the *Add root folder with .class files option. Point Scene Builder to the output folder containing your compiled .class files; it will find and import the custom controls directly, just as it would with a JAR file.
  6. Implement custom controls for Scene Builder

    master

    To create a custom control that Scene Builder can recognize and manipulate in the Inspector, implement a standard JavaFX Control with a custom Skin.

    FXML Annotations for Custom Controls

    Use these annotations to ensure your control works seamlessly with FXMLLoader:

    • @DefaultProperty: Specifies a property that child elements are added to or set when no explicit property is provided.
    • @NamedArg: Allows FXMLLoader to instantiate a class that lacks a zero-argument constructor by mapping FXML attributes to constructor parameters.

    Example: Popup Custom Control

    A complete implementation includes the Control class, the Skin class, and a CSS file for styling. Once added to Scene Builder, the control's properties appear in the Inspector area for user interaction.

    package popup;
    
    import javafx.beans.NamedArg;
    import javafx.beans.DefaultProperty;
    import javafx.scene.control.Control;
    
    @DefaultProperty("content")
    public class Popup extends Control {
        
        // Use @NamedArg to allow instantiation without a no-arg constructor
        public Popup(@NamedArg("message") String message) {
            setContent(message);
        }
        
        // Standard JavaFX property pattern
        private final StringProperty content = new SimpleStringProperty(this, "content", "Default Message");
        public final String getContent() { return content.get(); }
        public final void setContent(String value) { content.set(value); }
        public final StringProperty contentProperty() { return content; }
    
        @Override
        protected Skin<?> createDefaultSkin() {
            return new PopupSkin(this);
        }
    }
  7. Build Scene Builder from source

    master

    If you wish to fork and build your own version of Scene Builder, follow these steps.

    Requisites

    • For the master branch: JDK 23 or later.
    • For the 8u-dev branch: JDK 8.

    Build Steps

    Scene Builder uses the Maven Wrapper (./mvnw on Linux/macOS, mvnw on Windows).

    1. Install dependencies locally:

      ./mvnw install
    2. Build the services: Running the following command creates a partial shadow cross-platform jar (excluding JavaFX dependencies) at app/target/lib/scenebuilder-$version-all.jar:

      ./mvnw clean package
    3. Run the application via Maven:

      ./mvnw javafx:run -f app
    ./mvnw clean package
  8. Add custom controls from the local file system

    master

    To use local files, use the Add Library/FXML from file system option:

    1. Select the option to open a file chooser.
    2. Locate and select a .jar or .fxml file.
    3. Scene Builder will extract the custom controls from the selected file and add them to the Custom section.
  9. Access the Library Manager

    master
    The Library Manager allows you to manage custom JavaFX controls that are not part of the built-in set. To open the Library Manager dialog, locate the Library panel on the left side of the Scene Builder interface and click the MenuButton (represented by a cog icon) located at the top of the panel.
  10. Import custom controls from remote repositories

    master

    You can search for and install libraries from remote repositories (like Maven Central or private Nexus instances) using the Search repositories option:

    1. Open the Library Manager and select Search repositories.
    2. Enter a library name, part of a groupId, or part of an artifactId.
    3. Select a result from the list. Scene Builder will download the latest release, install it to your local .m2, and scan the JAR for custom controls.
    4. A preview dialog will appear. Select the specific components you want to import.
    5. Click Import Components to add them to the Custom section of the Library panel.