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:
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:
https://github.com/juananpe/IconComponentFX
Let’s create a JAR of the IconComponent. In IntelliJ:
- Open Module Settings ⌘ ⬇️
- Click Artifacts
- Click the + Add button, point to JAR
- 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: