iSeries EGL

All things EGL for the iSeries / i5 / Power System

Using CSS to Assign a Menu Icon

leave a comment »

Introduction

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

Images

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.

 

Summary

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.

 
 

Advertisements

Written by iseriesadmin

August 7, 2012 at 7:13 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: