There are many options out there to make an application to look better. Icons are one of these options. As good looking icons may be there is a drawback if they are image based: the amount of memory used to load data and render them. This is probably the reason why modern applications, at least web ones, prefer to use font based glyphs to render icons. FontAwesome is perhaps the most well known of the bunch.
Applying FontAwesome to a desktop application is not that different from a web application. JavaFX makes it particularly easy, with the the griffon-fontawesome-plugin is even easier. Here's a short video of a simple application that can tweak some values such as color, size, and even drop shadow to a set of icons that rely on FontAwesome's webfont:
FontAwesome Icon sample application with Griffon 2.3.0 from Andres Almiray on Vimeo.
Let's see the code piece by piece. This little application makes use of FXML to define the UI, and it looks like this
Notice that the icon definitions make use of a new JavaFX node named FontAwesomeIcon. This little guy is in charge of resolving icon names to their corresponding icon. You can also tweak its size and color; it even accepts gradient paints as shown in the video. Notice also that all color buttons point to the same action (changeColor
).
Each one of the color buttons on the controls section is rendered using a custom CSS style. We'll use this style to obtain the paint that must be applied to all icons.
Now that we have covered the resources of this application is time to dive into the code. We only need two artifacts to make it happen: a model
that can keep track of common values, and the view
that realizes the FXML file and creates appropriate property bindings. Let's see the model
first.
There are two observable properties here: one that retains the current color to be applied to all icons, another that indicates whether a shadow should be applied to icons or not. We could have kept these properties in the view
for now as the application is very small, however keeping data separate from the view
helps in better structuring of an application, specially if it'll grow over time. We also keep track of these variables because we'd like to bind all icons to a single source of changes.
Let's turn to the view
now
The view
makes use of the @FXML
annotation to grab hold of all icons and controls (except for the color buttons). It uses standard JavaFX property bindings and listeners to arrange for icon properties to be updated given the controls and the model
s properties. Finally it defines the changeColor
action whose job is to update the model
s color property. Because all icons have their iconColor
property bound to the model
s color property it's enough to modify the color in one place an have all icons react immediately. The same is true for the shadow
property, which uses a ChangeListener
to define a converter.
FontAwesome is great but it's not the only game in town when it comes to icon based webfonts. The following is a list of all currently supported icon based webfonts plugins in Griffon:
It's worth saying that these icons work with both Swing and JavaFX applications, as long as you use Griffon of course
Keep on Groovying!