Custom JavaFX components in SceneBuilder

So you want to open a JavaFXML with a custom component in SceneBuilder?

This week I have been playing with this project: 

an implementation of a Twitter Client in JavaFX. 

The application uses different JavaFX views, being the main one TweetListView:

When running, the TweetListView displays a lot of elements (look at those pretty buttons, they are using the FontAwesomeFX library)

I wanted to open the FXML in SceneBuilder and inspect it. But on first try, it failed with a ClassNotFoundException:

That view.component.Icon is a custom component:

used by TweetListView.fxml here:

So, going through GitHub I found that, in order to edit that FXML in SB first we need to import a JAR file with the component in the Jar Manager of SB

But wait, how do we create the JAR file? I’m using IntelliJ so my explanations will be based on this IDE.

First, I isolated the component into a single repository:

Let’s create a JAR of the IconComponent. In IntelliJ:

  1. Open Module Settings ⌘ ⬇️
  2. Click Artifacts
  3. Click the + Add button, point to JAR
  4. Select: From modules with dependencies…

In the next Window, Just click OK 

To generate the JAR, click on Build / Build artifacts / Build

IntelliJ will generate the jar file and place it in the out/artifacts folder

Now, let’s import the JAR of the IconComponent in  SceneBuilder

Open the JAR/FXML Manager

Click on Add Library from FileSystem

Click on Import Components.

And finally, we will be able to open without errors the TweeListView FXML in SceneBuilder:

See these references for more info:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.