iSeries EGL

All things EGL for the iSeries / i5 / Power System

Archive for the ‘EGL Menu Item Icons’ Category

Using CSS to Assign a Menu Icon

leave a comment »


This post will show how to use EGL’s CSS Editor to create a class that will be used to assign an icon to a menu item


To begin, we’ll need a place to put our images used with the application. It is common to have an images directory under the WebContent directory, shown below. However, EGL already supplies an icons directory, so we’ll put our icons there.

The icons shown above are those for a back facing arrow (“back, and to the left”) and a right facing arrow (forward).


Use the CSS Editor to create Classes

The image below shows RDi’s Cascading Style Sheet editor. The last two classes i.e. .backArrow and .forwardArrow define references to the .PNG files in the icons directory.

The Cascading Style Sheet (CSS) editor

At the right of the editor you can see that the back-facing arrow has been selected as denoted by the blue horizontal bar. At the upper left of the editor widow the effect of the CSS class is displayed.


Referencing the CSS Class on a Menu Item

Show below is the EGL code for a menu item. It references the CSS class definition for the forward and backward facing arrows. This will result in the arrows being display at the left of each menu item.

    gotoMenu DojoMenu{ layoutData = new GridLayoutData{ row = 1, column = 3 }, text = "Go to", children = [
		new DojoMenuItem {
			text = "Back", iconClass = "dijitEditorIcon backArrow", onClick ::= onBack
		new DojoMenuItem {
			text = "Page1", iconClass = "dijitEditorIcon backArrow", onClick ::= onPage1
		new DojoMenuItem {
			text = "Page3", iconClass = "dijitEditorIcon forwardArrow", onClick ::= onPage3
		new DojoMenuItem {
			text = "The next item is a separator"
		new DojoMenuItem { },
		new DojoMenuItem {
			text = "Item 3, this one is disabled", disabled = true

Fig.1 – EGL code defining a menu and its items that reference a CSS class.


The Menu Items

The menu below shows the icons as they are presented next to each of the menu items described by the EGL code, above.

Menu Items with Icons described by Cascading Style Sheet classes.



This post shows how to use CSS to define style classes so they can be used to show icons for specific menu items. Defining CSS styles in this manner centralizes them in a single file. This allows the developer to make a single change that effects the whole look and feel of the application.


Written by iseriesadmin

August 7, 2012 at 7:13 pm