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: https://github.com/Vuzi/twitter-c 

an implementation of a Twitter Client in JavaFX. 

The application uses different JavaFX views, being the main one TweetListView: https://github.com/Vuzi/twitter-c/blob/master/src/main/resources/fr/esgi/twitterc/view/TweetListView.fxml

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:

https://github.com/Vuzi/twitter-c/blob/master/src/main/resources/fr/esgi/twitterc/view/component/icon.fxml

used by TweetListView.fxml here:

https://github.com/Vuzi/twitter-c/blob/master/src/main/resources/fr/esgi/twitterc/view/TweetListView.fxml#L20

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

https://stackoverflow.com/questions/29444698/how-to-create-an-fxml-file-for-an-already-created-new-component-in-java-than-add

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:

https://github.com/juananpe/IconComponentFX

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.