iSeries EGL

All things EGL for the iSeries / i5 / Power System

A Starting Template for a RichUI Handler

leave a comment »

Introduction

This post presents source code to be used as a starting point for coding a Rich UI handler. Presented are two variations giving a “minimalist” appearance based on the philosophy of “less is more”. The screens are not exposed to an internet based audience where flashy presentations designed to capture and keep the attention of the user is not a requirement. On the contrary, the screens are deliberately austere in appearance allowing the user to focus on the task at hand which is to enter and/or maintain information as it relates to the business where distractions impacting accuracy must be minimized.

Design Features

The source creates a header for a title and an area below it for a collection of menu items. The menu items are just place holders to indicate this is the area where they should reside and until logic is added they essentially do nothing. If the page design does not require menu options the developer should delete them but leave the bar in which they would normally reside.

Adding a menu option begins by right-clicking on the grid layout component and adding a new column within which the option will reside. (Click to enlarge.)


What remains below the menu bar constitutes the main body of the web page which is further divided into two sections. The first section is intended to contain widgets allowing for input of data to be provided by the user. The user data supplied is then used to retrieve information from the database to be presented in the second section that is presented below the first. If there are no business requirements that must allow the user to enter such data (i.e. part number, customer account number, policy number, etc.) then the first section should be deleted.

As mentioned above, the second section constitutes the main area where data is presented. More often than not the data presented here is retrieved using user-supplied data provided in widgets contained in the first section described above. If the application is a browse/select type where the user is allowed to see a list of data then a data grid would be presented in this section. As another example, if the first section allows for information to be entered for a new inventory item number, a customer account number or policy number, the second section would then be filled with the appropriate widgets or components to display the related data for the purpose of inquiry or maintenance.

Because the two sections are contained in a title pane the user can collapse them by selecting the downward pointing arrow at the left of each of the pane’s titles. The user may select the arrow after supplying select criteria or a policy number to retrieve the information related to minimize its space on the browser screen.

The Source Code

Presented below is source code for a Rich UI handler that acts as a template or starting point for all web applications. Using a template such as this will serve to ensure all web pages are presented with a uniform appearance and behavior. This in turn will minimize training time and expense and ensure the user’s understanding of screen behavior can be applied to the next application in the system without having to rely upon guessing.

Source Template for a Rich UI Handler – Variation 1

Presented below is the source code for the first variation of the overall look which can be best described as having a “minimalist” appearance.

package com.app.pagetemplate.client;

// RUI Handler

//Remove one of the following sets of imports as needed.

//************************************************
//*  Imports for Open Source Verion of EGL
//************************************************
import org.eclipse.edt.rui.widgets.GridLayout;
import org.eclipse.edt.rui.widgets.GridLayoutData;
import org.eclipse.edt.rui.widgets.TextLabel;
import org.eclipse.edt.rui.widgets.Image;
import org.eclipse.edt.rui.widgets.GridLayoutLib;
import org.eclipse.edt.rui.widgets.Box;
import dojo.widgets.DojoMenu;
import dojo.widgets.DojoMenuItem;
import dojo.widgets.DojoTitlePane;
import org.eclipse.edt.rui.widgets.Div;

//************************************************
//*  Imports for EGL RBD (RDi plugin)
//************************************************
import com.ibm.egl.rui.widgets.Div;
import com.ibm.egl.rui.widgets.GridLayout;
import com.ibm.egl.rui.widgets.GridLayoutData;
import com.ibm.egl.rui.widgets.GridLayoutLib;
import com.ibm.egl.rui.widgets.Image;
import com.ibm.egl.rui.widgets.TextLabel;
import egl.io.sql.column;
import egl.ui.color;
import dojo.widgets.DojoMenu;
import dojo.widgets.DojoMenuItem;
import dojo.widgets.DojoTitlePane;


//
//

handler WebPageTemplate type RUIhandler{ initialUI =[ui
            ], onConstructionFunction = start, cssFile = "css/WebPageTemplateProject.css", title = "WebPageTemplate"}

    ui GridLayout{columns = 3, rows = 5, cellPadding = 4, children = [ BodyPane, ControlPane, MenuBar, GridLayout],
    	width = "1400",
    	position = "relative",
    	x = 50,
    	y = 10,
    	borderColor = "LightGrey",
    	borderWidth = 1,
    	borderStyle = "solid"};
    GridLayout GridLayout{ layoutData = new GridLayoutData{ row = 1, column = 2 }, cellPadding = 4, rows = 1, columns = 3,
    	children = [ Image, GridLayout1],
    	borderColor = "LightGrey",
    	borderStyle = "solid",
    	borderWidth = 1,
    	width = "1350" };
    MigDepartmentName TextLabel{ layoutData = new GridLayoutData{ row = 1, column = 1 }, text = "Department Name",
    	fontSize = "26",
    	fontWeight = "bold" };
    MigApplicationName TextLabel{ layoutData = new GridLayoutData{ row = 2, column = 1 }, text = "The Application Name",
    	fontSize = "18" };
    GridLayout1 GridLayout{ layoutData = new GridLayoutData{ row = 1, column = 2 }, cellPadding = 4, rows = 2, columns = 3,
    	children = [ MigApplicationName, MigDepartmentName] };
    Image Image{ layoutData = new GridLayoutData{ row = 1, column = 3,
    	horizontalAlignment = GridLayoutLib.ALIGN_RIGHT },
    	src = "MigLogo03.png"};
    MenuBar GridLayout{ layoutData = new GridLayoutData{ row = 2, column = 2,
    	cellPadding = 0 }, cellPadding = 4, rows = 1, columns = 3,
    	backgroundColor = "RGB(245,245,245)",
    	width = "1350",
    	children = [ InnerMenuLayout ],
    	padding = 0,
    	margin = 0,
    	height = "40" 
    	  };
    HelpMenu DojoMenu{ layoutData = new GridLayoutData{ row = 1, column = 3 }, text = "Help", children = [
		new DojoMenuItem {
			text = "Item 1, please set onClick", iconClass = "dijitEditorIcon dijitEditorIconCut"
		},
		new DojoMenuItem {
			text = "Item 2, please set iconClass", iconClass = "dijitEditorIcon dijitEditorIconCopy"
		},
		new DojoMenuItem {
			text = "The next item is a separator"
		},
		new DojoMenuItem { },
		new DojoMenuItem {
			text = "Item 3, this one is disabled", disabled = true
		}
	],
    	height = "22"};
    FileMenu DojoMenu{ layoutData = new GridLayoutData{ row = 1, column = 1 }, text = "File", children = [
		new DojoMenuItem {
			text = "Item 1, please set onClick", iconClass = "dijitEditorIcon dijitEditorIconCut"
		},
		new DojoMenuItem {
			text = "Item 2, please set iconClass", iconClass = "dijitEditorIcon dijitEditorIconCopy"
		},
		new DojoMenuItem {
			text = "The next item is a separator"
		},
		new DojoMenuItem { },
		new DojoMenuItem {
			text = "Item 3, this one is disabled", disabled = true
		}
	],
    	height = "22"};
    EditMenu DojoMenu{ layoutData = new GridLayoutData{ row = 1, column = 2 }, text = "Edit", children = [
		new DojoMenuItem {
			text = "Item 1, please set onClick", iconClass = "dijitEditorIcon dijitEditorIconCut"
		},
		new DojoMenuItem {
			text = "Item 2, please set iconClass", iconClass = "dijitEditorIcon dijitEditorIconCopy"
		},
		new DojoMenuItem {
			text = "The next item is a separator"
		},
		new DojoMenuItem { },
		new DojoMenuItem {
			text = "Item 3, this one is disabled", disabled = true
		}
	],
    	height = "22"};
    InnerMenuLayout GridLayout{ layoutData = new GridLayoutData{ row = 1, column = 1,
    	verticalAlignment = GridLayoutLib.VALIGN_MIDDLE,
    	horizontalAlignment = GridLayoutLib.ALIGN_LEFT }, cellPadding = 4, rows = 1, columns = 3,
    	children = [ HelpMenu, EditMenu, FileMenu],
    	height = "32" };
    ControlPane DojoTitlePane{ layoutData = new GridLayoutData{ row = 3, column = 2 }, title = "Control Pane", isOpen=true, duration=1000, width = "1350", children = [ new Div {
    	children = [ ControlPaneGridLayout ]
    } ] };
    ControlPaneGridLayout GridLayout{ cellPadding = 4, rows = 3, columns = 3 };
    BodyPane DojoTitlePane{ layoutData = new GridLayoutData{ row = 4, column = 2 }, title = "Main Data Pane", isOpen=true, duration=1000, width = "1350", children = [ new Div {
    	children = [ BodyPaneGridLayout ]
    } ] };
    BodyPaneGridLayout GridLayout{ cellPadding = 4, rows = 3, columns = 3 };


    function start()
    	
    	MigDepartmentName.text = "Information Technology";
       	MigApplicationName.text = "Application Name";
       	ControlPane.title = "Control Pane Title";
       	BodyPane.title = "Body Pane Title";
       	
       	//Startup Processing to get Runtime Environment and to read properties from XML file.
       	
       	
    end
end

Fig.1 – Source template for a Rich UI handler

 

Shown below is a screen shot for the above source code.

 
 

Source Template for a Rich UI Handler – Variation 2

Presented below is the source code for the second variation of the overall look. The only difference is the header section containing the title which has been filled with a blue color ( backgroundColor = “RGB(40,95,175)” ) with a white color for the title font.

package com.app.pagetemplate.client;

// RUI Handler

//Remove one of the following sets of imports as needed.

//************************************************
//*  Imports for EGL CE
//************************************************
import org.eclipse.edt.rui.widgets.GridLayout;
import org.eclipse.edt.rui.widgets.GridLayoutData;
import org.eclipse.edt.rui.widgets.TextLabel;
import org.eclipse.edt.rui.widgets.Image;
import org.eclipse.edt.rui.widgets.GridLayoutLib;
import org.eclipse.edt.rui.widgets.Box;
import dojo.widgets.DojoMenu;
import dojo.widgets.DojoMenuItem;
import dojo.widgets.DojoTitlePane;
import org.eclipse.edt.rui.widgets.Div;

//************************************************
//*  Imports for EGL RBD (RDi plugin)
//************************************************
import com.ibm.egl.rui.widgets.Div;
import com.ibm.egl.rui.widgets.GridLayout;
import com.ibm.egl.rui.widgets.GridLayoutData;
import com.ibm.egl.rui.widgets.GridLayoutLib;
import com.ibm.egl.rui.widgets.Image;
import com.ibm.egl.rui.widgets.TextLabel;
import egl.io.sql.column;
import egl.ui.color;
import dojo.widgets.DojoMenu;
import dojo.widgets.DojoMenuItem;
import dojo.widgets.DojoTitlePane;
//
//

handler WebPageTemplate type RUIhandler{ initialUI =[ui
            ], onConstructionFunction = start, cssFile = "css/WebPageTemplateProject.css", title = "WebPageTemplate"}

    ui GridLayout{columns = 3, rows = 5, cellPadding = 4, children = [ BodyPane, ControlPane, MenuBar, GridLayout],
    	width = "1400",
    	position = "relative",
    	x = 50,
    	y = 10,
    	borderColor = "LightGrey",
    	borderWidth = 1,
    	borderStyle = "solid"};
    GridLayout GridLayout{ layoutData = new GridLayoutData{ row = 1, column = 2 }, cellPadding = 4, rows = 1, columns = 3,
    	children = [ Image, GridLayout1],
    	borderColor = "LightGrey",
    	borderStyle = "solid",
    	borderWidth = 1,
    	width = "1350",
    	backgroundColor = "RGB(40,95,175)" };
    MigDepartmentName TextLabel{ layoutData = new GridLayoutData{ row = 1, column = 1 }, text = "Department Name",
    	fontSize = "26",
    	fontWeight = "bold",
    	color = "White" };
    MigApplicationName TextLabel{ layoutData = new GridLayoutData{ row = 2, column = 1 }, text = "The Application Name",
    	fontSize = "18",
    	color = "White" };
    GridLayout1 GridLayout{ layoutData = new GridLayoutData{ row = 1, column = 2 }, cellPadding = 4, rows = 2, columns = 3,
    	children = [ MigApplicationName, MigDepartmentName] };
    Image Image{ layoutData = new GridLayoutData{ row = 1, column = 3,
    	horizontalAlignment = GridLayoutLib.ALIGN_RIGHT },
    	src = "MigLogo04.png"};
    MenuBar GridLayout{ layoutData = new GridLayoutData{ row = 2, column = 2,
    	cellPadding = 0 }, cellPadding = 4, rows = 1, columns = 3,
    	backgroundColor = "RGB(245,245,245)",
    	width = "1350",
    	children = [ InnerMenuLayout ],
    	padding = 0,
    	margin = 0,
    	height = "40" 
    	  };
    HelpMenu DojoMenu{ layoutData = new GridLayoutData{ row = 1, column = 3 }, text = "Help", children = [
		new DojoMenuItem {
			text = "Item 1, please set onClick", iconClass = "dijitEditorIcon dijitEditorIconCut"
		},
		new DojoMenuItem {
			text = "Item 2, please set iconClass", iconClass = "dijitEditorIcon dijitEditorIconCopy"
		},
		new DojoMenuItem {
			text = "The next item is a separator"
		},
		new DojoMenuItem { },
		new DojoMenuItem {
			text = "Item 3, this one is disabled", disabled = true
		}
	],
    	height = "22"};
    FileMenu DojoMenu{ layoutData = new GridLayoutData{ row = 1, column = 1 }, text = "File", children = [
		new DojoMenuItem {
			text = "Item 1, please set onClick", iconClass = "dijitEditorIcon dijitEditorIconCut"
		},
		new DojoMenuItem {
			text = "Item 2, please set iconClass", iconClass = "dijitEditorIcon dijitEditorIconCopy"
		},
		new DojoMenuItem {
			text = "The next item is a separator"
		},
		new DojoMenuItem { },
		new DojoMenuItem {
			text = "Item 3, this one is disabled", disabled = true
		}
	],
    	height = "22"};
    EditMenu DojoMenu{ layoutData = new GridLayoutData{ row = 1, column = 2 }, text = "Edit", children = [
		new DojoMenuItem {
			text = "Item 1, please set onClick", iconClass = "dijitEditorIcon dijitEditorIconCut"
		},
		new DojoMenuItem {
			text = "Item 2, please set iconClass", iconClass = "dijitEditorIcon dijitEditorIconCopy"
		},
		new DojoMenuItem {
			text = "The next item is a separator"
		},
		new DojoMenuItem { },
		new DojoMenuItem {
			text = "Item 3, this one is disabled", disabled = true
		}
	],
    	height = "22"};
    InnerMenuLayout GridLayout{ layoutData = new GridLayoutData{ row = 1, column = 1,
    	verticalAlignment = GridLayoutLib.VALIGN_MIDDLE,
    	horizontalAlignment = GridLayoutLib.ALIGN_LEFT }, cellPadding = 4, rows = 1, columns = 3,
    	children = [ HelpMenu, EditMenu, FileMenu],
    	height = "32" };
    ControlPane DojoTitlePane{ layoutData = new GridLayoutData{ row = 3, column = 2 }, title = "Control Pane", isOpen=true, duration=1000, width = "1350", children = [ new Div {
    	children = [ ControlPaneGridLayout ]
    } ] };
    ControlPaneGridLayout GridLayout{ cellPadding = 4, rows = 3, columns = 3 };
    BodyPane DojoTitlePane{ layoutData = new GridLayoutData{ row = 4, column = 2 }, title = "Main Data Pane", isOpen=true, duration=1000, width = "1350", children = [ new Div {
    	children = [ BodyPaneGridLayout ]
    } ] };
    BodyPaneGridLayout GridLayout{ cellPadding = 4, rows = 3, columns = 3 };


    function start()
    	
    	MigDepartmentName.text = "Information Technology";
       	MigApplicationName.text = "Application Name";
       	ControlPane.title = "Control Pane Title";
       	BodyPane.title = "Body Pane Title";
       	
       	//Startup Processing to get Runtime Environment and to read properties from XML file.
       	
       	
    end
end



Fig.2 – Source template for a Rich UI handler

 

Shown below is a screen shot for the above source code.

Variation 2

 
 

Advertisements

Written by iseriesadmin

July 13, 2012 at 9:45 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: