Font Icons for Eclipse Scout

Today, web pages and web applications start to rely more and more on font icons. As clean and modern icons can help an application to get a professional look and feel we went through the little exercise to demonstrate how to use font icons in Eclipse Scout applications.

One of the most prominently used icon font on many web pages is Font Awesome. As the font contains hundreds of icons that are free to use even in commercial applications, it is ideally suited for demonstration purposes as well as productive use.

The reminder of the article describes the usage of such fonts for icons with Eclipse Scout.

To demonstrate the usage we added an icons and font icons form to the Scout Widget Application.

In the text below we will first talk about the general usage of icons in Scout application, and discuss how icons are provided to the application through icon provider services. Then the font icon provider services is introduced that allows to create Scout icons for individual characters from any true type font files.

How To Use Icons in Scout

Icons can be used for a number of UI components in Scout applications. They may be used for buttons, image fields, for smart fields entries, tree nodes and for table rows. To identify individual icons, its icon name/id can be used. The simplest way to figure out how to use icons in Scout applications is to follow the code of the Scout widget application.

For a concrete example we will look at the implementation for the button with the white arrow pointing to the right that is implemented in the icons form of the Scout widget application.

To find the corresponding code in the widget application, open the IconsForm and drill down to the ExamplesBox group box and locate the IconButton class. In method getConfiguredIconId the desired icon is specified as shown below. 

1
2
3
4
5
6
7
8
9
10
11
@Order(4000.0)
public class IconButton extends AbstractButton {
  ...
 
  @Override
  protected String getConfiguredIconId() {
    return AbstractIcons.WizardNextButton;
  }
 
  ....
}

From this example we can see that a few icons come out of the box with the Scout framework. As every application has its own special needs, additional application specific icons may be located in the client plugin of the application. In the default case the corresponding image files may be placed in folder resources/icons of the client plugin. In the example of the Scout widget application the icon “star_yellow” is backed by image file star_yellow.png in the icon resource folder. This represents the simplest way to add your own icons to your application. Just put your icon image files into the folder resources/icons of the client plugin as in the case of the yellow_star icon.

However, designing good looking icons is time consuming and to get started quickly having a large amount of icons out of the box would be helpful. To take advantage of the fact that with the Font Awesome toolkit such a collection of high quality icons is available in the public domain, we can also write a specific icon provider that consumes the available icons from the Fontawesome true type font file at runtime.

The Font Icon Provider Service

Before we discuss the font icon provider service let us look at the general concept of icon provider service of the Scout framework. In Scout, icons are provided to the application through icon provider services. When a UI component needs to display an icon specified by its name, the Scout framework checks with the registered icon provider services to access the necessary image content.

At runtime, the icon name is fed into method getIconSpec of the first available service that implements the IIconProviderService interface. If the method returns null, the framework consults the next icon provider. This mechanism allows for the implementation of application specific icon provider services. There is one additional thing. To avoid the repeated generation of the image content, generated Icons are cached by the Scout framework. Instead of asking the icon provider services to create the content every time an icon is used, the framework first checks its cache, if an icon is already available from the cache, it will directly use this cached icon.

By writing a specific FontIconProviderService that converts characters from a true type font to Scout icons on the fly, font icons can be used along the traditional icons. To use font icons in the demo application only a few things are needed:

  • The font’s true type file (e.g. fontawesome-webfont.ttf) is located in folder resources/fonts of the client plugin
  • The alias information for the needed icons is specified in the icons.properties file (in folder resources/fonts)
  • The FontIconProvierService itself and its registration in the client’s plugin.xml

At startup of the FontIconProviderService, method initializeFonts is called through method initializeService that then loads the available true type fonts and properties file mentioned above. Using this information the icon provider service then returns the created font icons in method getIconSpec. The icon alias (IconId in the screenshot above) defined in the icons.properties file can either be used on its own or amended with various additional attributes:

  • Color (icon color, or icon background color if a background type is selected)
  • Size (true type font characters may be scaled to arbitrary sizes)
  • Background (to create inverted icons with a square or round background image)

In the example shown in the screenshot above, the icon specification is encoded into the string font:plane!#FAA635!128;fontawesome-webfont. This results in the search of alias “plane;fontawesome-webfont” in the properties file leading to the font’s character f072 that is then scaled to 128 pixels and colored using #FAA635.

To play around with the available options click on button “Sample Content” in the icons form of the widget demo application. There, you can change the icon id, the color, size and the background shape. When you switch the font from “fontawesome-webfont” to “cour”, you can also try to create an icon from a single letter (e.g. with the icon name “font:X!128;cour”).

Conclusion

In this post we have provided a quick introduction to the usage of icons in Scout applications and demonstrated how to use font icons in your own Scout applications. Using the provided FontIconProviderService you can now either use the discussed Fontawesome or use your own true type font files to extract font icons for your applications.

Project HomeForumWikiTwitter