Some days ago I blogged about the availability of web based font icons for Griffon applications. Adding icons to a Griffon application is quite easy as shown in that entry. Today I'm going to show how JavaFX can make it plain simple to create composite icons.
Fontawesome defines a couple of CSS classes that can be used to create stacked icons. Unfortunately those CSS classes cannot be used with JavaFX directly, however you can create stacked icons given the right container is used. It turns out JavaFX provides a node container named StackPane. It lays out its children based on the order in which they are added to the container. We can use this knowledge and the fact that any JavaFX Node that exposes a graphic property accepts a Node as its value, to our advantage. Let me show you what we want to accomplish:
The screenshot is an exact replica of the stacked example found at Fontawesome. So how do we make it happen? There are several options, but it all boils down to the following:
- create a
StackPane. - add instances of
FontawesomeIconwith the right settings in the correct order. - set the
StackPaneinstance as the value of thegraphicproperty of a button.
We can do all these things with FXML alone, here's how to do it
As you can see, FXML makes it pretty straightforward to follow the steps needed to create stacked icons. You may notice there are no text-danger or fa-stack-2x CSS classes in use for this particular demonstration. Instead, icon sizes and colors are set directly on the icons. Of course someone could create an appropriate CSS stylesheet that goes along with the settings provided by fontawesome.css in order to minimize XML code.
This trick will work pretty much the same with the rest of web font based Griffon plugins listed at the bottom of the previous blog entry.
Keep on Groovying!
