Modern Domino: Icons

www.redpilldevelopment.comlearn. do. dream.

Modern DominoIcons


Embedded Icons

• Early versions of Notes supported the pasting of icons as images into various design element such as forms.• The age of this feature can be seen by

the format of the graphic files supported. Graphic formats such as BMP, CGM, PIC, and PCX. Today formats such as JPG, PNG, and EPS are more widely used.• In the absence of design elements or

libraries to store these icons gave rise to the Icon Library database that many organizations used to share icons for use in Notes application.


Image Resources

• Image Resources were supported as a design element as part of Notes R5 allowing icons to be shared across design element and applications.

• The formats originally supported for image resources were GIF and JPG, with PNG being added in later releases.

• Image resources work equally well for both Notes client and Domino web development.

• When developing for mobile web applications pay close attention to image sizes as download times for large image files can cause performance issues.


Glyphicons• Lotus originally developed a a series of view

and action icons for use with Notes client development.

• IBM has not been as forthcoming in providing and out of the box library of web icons for web and mobile applications. As a result, Domino developers need to develop their own icons or source them externally.

• Made popular by their inclusion as part of Twitter Bootstrap, glyphicons are a library of monochromatic icons and symbols that Domino developers should consider making use of.

• A free icon library is available for those not using bootstrap and a number of additional libraries can be purchased for Web development.


Image Sprites

• As the number of icons (or graphics) used in an application grows we need to consider the performance impact of downloading many image files.• One of the most widely adopted

solutions has been image (aka CSS) sprites in which all the icons are combined in a single image file.• Using CSS it is then possible to display

a specific portion of the sprite image representing the required icon.• Tools are available to build a sprite file

from a collection of icons.


Iconic Fonts

• We are now seeing the emergence of iconic fonts as the latest “modern” way to add icons to applications.• In 1990 Microsoft developed the

Wingdings font allowing commonly used icons to be displayed as an alternative for text.• Iconic fonts were largely forgotten

for a while but we are now seeing a resurgence of their use as an alternative way to implement icons within Web applications.


Iconic Fonts: Advantages

• Fonts are stored in a vector format so they can be displayed in a range of sizes without distortion.

• As a font, icons can be styled using standard CSS to create wide range of effects:-– Color– Background color– Drop Shadow– Rotation– Animation

• A single icon can be used in a large number of ways across an application and can also be combined with other icons to generate an ever wider range of options.


Font Awesome

• Font Awesome has become one of the more popular iconic fonts thanks to its adoption within a number of Bootstrap themes.• Font Awesome (currently) consists of

a library of 361 icons offered as part of an open source project on Github.• Version 4.0 of Font Awesome was

release in October 2013. The latest release includes:-– A complete renaming of icons to be

consistent with emerging standards for icon-font usage.

– Addition of 11 new icons


Adding Font Awesome to Modern Domino

Instructions:1. Download the latest version from fontawesome.io.2. Using Package Explorer, place the content of the

downloaded zip file in a new folder under the WebContent/css folder.

3. Add the stylesheet as a resource to your XPage.

Note: Russel Maher (XPages Tips) has a great blog article (Five Minutes To Font Awesome Icons) covering this. An nsf containing the fonts and examples of their use is included.


Using Iconic Fonts via Attributes

• Iconic fonts are typically inserted by adding a style class to a HTML component that then uses the CSS :before selector to insert the text and assign the font.

• Some of the IBM XPages mobile controls such as the RoundedRectListItem do not support the output of class tags in the HTML via the styleClass attribute.

• To place iconic fonts inside these controls we can use the dojo attribute property as an alternative.

• In our css we must change all the references to the icon font to match on comparable icon fonts designated via a dojo attribute.

CSS

XSP

Technology

Modern Domino: Icons