Easy Java desktop UI with JavaFX and gluon scene builder
Tags: java, javafx, gluon
Published: 2020-12-14 18:52:47

---
title: Easy Java desktop UI with JavaFX and gluon scene builder
published: true
date: 2020-12-13 06:00:00 UTC
tags: java,java,javafx,gluon
canonical_url: https://jsedano.dev/java/2020/12/13/easy-java-desktop-ui-with-javafx-and-gluon-scene-builder.html
---

If you need some `GUI` for your desktop Java application you can use the `scene builder` from Gluon to drag and drop controls and you can then export them into a `.fxml` file that you can load using `JavaFX`. In this example we are using Java 11 and maven.

You can find the code for this example here [JavaFX example](https://github.com/jsedano/examples/tree/main/javafx-example).

You just need these dependencies in your project pom:

```
  <dependency>
    <groupId>org.openjfx</groupId>
    <artifactId>javafx-controls</artifactId>
    <version>15.0.1</version>
  </dependency>
  <dependency>
    <groupId>org.openjfx</groupId>
    <artifactId>javafx-fxml</artifactId>
    <version>11.0.1</version>
  </dependency>
```

You will also need to add this plugin:

```
<plugin>
  <groupId>org.openjfx</groupId>
  <artifactId>javafx-maven-plugin</artifactId>
  <version>0.0.5</version>
  <configuration>
    <mainClass>dev.jsedano.example.App</mainClass>
  </configuration>
</plugin>
```

Where `dev.jsedano.example.App` is where you have your main class. Then you can load the scene like this:

```
package dev.jsedano.example;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.File;

public class App extends Application {

    public static void main( String[] args ){
        launch();
    }

    @Override
    public void start(Stage stage) throws Exception {
        File f = new File("src/main/resources/exampleui.fxml");
        Parent root = FXMLLoader.load(f.toURI().toURL());

        stage.setScene(new Scene(root));
        stage.show();
    }
}
```

In this example our `fxml file` is called `exampleui.fxml`

That’s pretty much it.

But how about actually creating the `fxml` file, download and install [Gluon scene builder](https://gluonhq.com/products/scene-builder/). In this example we will start with a `Basic Application`:

![basic application](https://jsedano.dev/assets/images/easy-java-desktop-ui-with-javafx-and-gluon-scene-builder/javafxexample_basic_application.png)

We will drag a `button` and a `label`. Select the `button` and we will change the text to `Press me!` on the `Properties` tab and in the `Code` tab we will set `On Action` to `buttonWasPressed`:

![adding action to button](https://jsedano.dev/assets/images/easy-java-desktop-ui-with-javafx-and-gluon-scene-builder/javafxexample_button_action.png)

For the `label` we will delete the text and set the `fx:id` to `myLabel`.

![adding id to label](https://jsedano.dev/assets/images/easy-java-desktop-ui-with-javafx-and-gluon-scene-builder/javafxexample_label_id.png)

Now we need to define the `controller`. On the left panel look for `Document` and then `Controller` and set the `Controller class` to what your controller will be named, on this example we will use `dev.jsedano.example.UIController` (this is the fully qualified class name).

![defining the controller](https://jsedano.dev/assets/images/easy-java-desktop-ui-with-javafx-and-gluon-scene-builder/javafxexample_setting_controller.png)

And then we can save the generated `fxml` directly into our project `resources` folder, in this example we save to `src/main/resources/exampleui.fxml`

Now create the controller on the project

```
package dev.jsedano.example;

import javafx.fxml.FXML;
import javafx.scene.control.Label;

public class UIController {

    @FXML
    private Label myLabel;

    @FXML
    private void buttonWasPressed(){
        myLabel.setText("button was pressed");
    }
}
```

We run the project using `mvn clean javafx:run`

And if everything was correct we should be seeing this when we press the button:

![button was pressed](https://jsedano.dev/assets/images/easy-java-desktop-ui-with-javafx-and-gluon-scene-builder/javafxexample_button_was_pressed.png)

From then on you can create anything you need, for documentation on JavaFX visit [https://openjfx.io](https://openjfx.io). Download the complete code from this example here [JavaFX example](https://github.com/jsedano/examples/tree/main/javafx-example).