• Home
  • Events
  • About
  • Griffon: stacking webfont icons

    August 29th, 2015

    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:

    Stacked Fontawesome Icons

    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 FontawesomeIcon with the right settings in the correct order.
    • set the StackPane instance as the value of the graphic property 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!

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    Griffon: Webfont Icons on Desktop apps? You betcha!

    August 19th, 2015

    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 models properties. Finally it defines the changeColor action whose job is to update the models color property. Because all icons have their iconColor property bound to the models 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!

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    css.php