iSeries EGL

All things EGL for the iSeries / i5 / Power System

Archive for the ‘Rich UI’ Category

A Multi-Select Widget

leave a comment »

Introduction

This post illustrates how to create a new widget so that it can be included into a new project or existing project.

The Widget

The widget will present a list of items from which the user may select one, some or all to be included into a working list. As they are select from the original list to be added to the working list they are removed from the list on the left.

Shown here is the widget as it appears in the designer.

The Mulit-Select widget consists of 2 ListMulti widgets and a couple of buttons.

The widget includes several functions that allow the developer to establish short descriptions that appear above each list and to populate each ListMulti widget with values. The buttons are left as they appear and let the user move the selected items from one list to another.

Here is an example of the widget as it is used by the main application after it has been fully initialized.

A fully initialized Multi-Select widget running in an application.

Below is the source code for this very short web-page. The start function does all the work of initializing. In this case the list is filled with different types of aircraft. The user may select one or more from the list at the left and then select the button with the “>” arrow which moves the selected item(s) to the list shown on the right. Modifying the list of selected items (at right) is performed the same way; select the desired items from the list at right and select the button marked as “<" and the items are placed back into the list on the left.

package com.mig.selectwidget.client;

// RUI Handler

import org.eclipse.edt.rui.widgets.GridLayout;
import org.eclipse.edt.rui.widgets.GridLayoutData;

//
//

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

    ui GridLayout{columns = 3, rows = 3, cellPadding = 4, children = [ selectincludewidget]};
    selectIncludeWidget SelectIncludeWidget{ layoutData = new GridLayoutData{ row = 2, column = 2 }};

    function start()
    	
    	includeItems String[] = new String[8];
    	
     	includeItems[1] = "Piper Cub";       	
     	includeItems[2] = "North American T-6G";       
     	includeItems[3] = "North American T-28";     
     	includeItems[4] = "Lockheed T-33A";       
     	includeItems[5] = "Douglas C-47D";          	
    	includeItems[6] = "Cessna 152";
    	includeItems[7] = "Cessna 172";    	
     	includeItems[8] = "Piper Archer PA-28-181";  
      	     	
     	this.selectIncludeWidget.setSelectList(includeItems);
 
 		this.selectIncludeWidget.setSelectTextLabel("Selectable Aircraft");
 		this.selectIncludeWidget.setIncludeTextLabel("Included Aircraft");
		this.selectIncludeWidget.setListWidths(180);
		this.selectIncludeWidget.setListSizes(15);
		 
    end
    
end

Fig.1 – An example of an application using the widget.

Note the start function’s use of the widget’s functions that let the developer initialize the list entries, the short descriptions that appear above each in addition to the length and width of each list. The widget’s functions are listed here.

  • setSelectList(stringArray String[]) Sets the list of selectable items shown on the left side of the widget.
  • setSelectTextLabel(labelText String) Sets the text label appearing over the selection list shown at the left of the widget.
  • setIncludeTextLabel(stringArray String[]) Sets the text label appearing over the include list shown at the right of the widget.
  • setListWidths(widths int) Sets the widths of the list windows.
  • setListSizes(sizes int) Sets the sizes of the list windows in terms of the number of entries that are visible before a scroll bar is made visible.

Below is the full source listing for the widget. To use it, simply add the code to your project and then drag-n-drop it into your page.

package com.mig.selectwidget.client;

// RUI Widget

import org.eclipse.edt.rui.widgets.GridLayout;
import dojo.widgets.DojoComboBox;
import org.eclipse.edt.rui.widgets.GridLayoutData;
import dojo.widgets.DojoButton;
import org.eclipse.edt.rui.widgets.GridLayoutLib;
import org.eclipse.edt.rui.widgets.ListMulti;
import org.eclipse.edt.rui.widgets.TextLabel;

//
//

handler SelectIncludeWidget type RUIWidget{targetWidget = ui, onConstructionFunction = start, cssFile = "css/SelectIncludeProject.css", @VEWidget{category = "Custom"}}
    ui GridLayout{columns = 3, rows = 6, cellPadding = 0, children = [ excludeSelectedButton, selectSelectedButton, includeTextLabel, selectTextLabel, selectListMulti, includeListMulti],
    	padding = 0,
    	marginLeft = 0};
    selectSelectedButton DojoButton{ layoutData = new GridLayoutData{ row = 3, column = 2,
    	horizontalAlignment = GridLayoutLib.ALIGN_CENTER,
    	verticalAlignment = GridLayoutLib.VALIGN_MIDDLE }, text = ">", onClick ::= selectSelectedButton_onClick };
    excludeSelectedButton DojoButton{ layoutData = new GridLayoutData{ row = 5, column = 2,
    	horizontalAlignment = GridLayoutLib.ALIGN_CENTER,
    	cellPadding = 0 }, text = "<", onClick ::= exludeSelectedButton_onClick };
    	
    selectListMulti ListMulti{ layoutData = new GridLayoutData{ row = 2, column = 1,
    	verticalSpan = 5 }, values = ["selectListMulti"], size = 10,
    	width = "120"  };
    includeListMulti ListMulti{ layoutData = new GridLayoutData{ row = 2, column = 3,
    	verticalSpan = 5 }, values = ["includeListMulti1"], size = 10,
    	width = "120" };


	//This will be used to preserve the developer-defined list of initial values from which
	//the user selects entries to be included in the list seen at the right of the widget.
	preserveSelectValues String[] ;
	selectTextLabel TextLabel{ layoutData = new GridLayoutData{ row = 1, column = 1 }, text="TextLabel" };
	includeTextLabel TextLabel{ layoutData = new GridLayoutData{ row = 1, column = 3 }, text="TextLabel" };
	
	
    function start()
    	includeListMulti.values = new String[];
    end
    
    function setListWidths(value int in)
    	selectListMulti.width = value;
    	includeListMulti.width = value;
    end	
    
    function setListSizes(value int in)
    	selectListMulti.size = value;
        includeListMulti.size = value;
    end
    
    function setSelectTextLabel(value String)
    	selectTextLabel.text = value;
    end
    
    function setSelectList(values String[])
    	selectListMulti.values = values;
    	
    	size int = values.getSize();
    	preserveSelectValues = new String[ ];
    	preserveSelectValues.appendAll(values);
    	
    end
     
    function setIncludeTextLabel(value String)
    	includeTextLabel.text = value;
    end   
    
    
    function getIncudedList() returns(String[])
    	return(includeListMulti.values);
    end
    
    //**********************************************************************
    //
    //
    function selectSelectedButton_onClick(event Event in)
    	    	
        //Isolate the values which are remaining in the selectListMulto to update the list.
        workSelectableValues String[]  = selectListMulti.values;
        

    	//Isolate the values which may already be in includeListMulti to preserve the list.
    	workIncludedValues String[]  = includeListMulti.values;
    	
  	
    	//Get the number of selections available in selectListMulti.
    	numberOfSelections int = selectListMulti.selection.getSize();
 
    	if (numberOfSelections > 0)
    		
    		//Iterate through the item numbers 
    		for(idx int from 1 to numberOfSelections)
    			selectEntryIndex int = selectListMulti.selection[idx];
    			selectedEntryValue string = selectListMulti.values[selectEntryIndex];
    			workIncludedValues.appendElement( selectedEntryValue );  	 
    		end
    		
    		//Process in reverse order to properly remove the entries
    		for(idx int from numberOfSelections to 1 decrement by 1)
    		  selectEntryIndex int = selectListMulti.selection[idx];	
    		  workSelectableValues.removeElement(selectEntryIndex);	
    		end
    		
    		//Update the ListMulti widgets
    		selectListMulti.values = workSelectableValues;
 			includeListMulti.values = workIncludedValues;
 			
 
 			
    	end
    end
    


    //**********************************************************************
    //
    //    
    function exludeSelectedButton_onClick(event Event in)
                
        //Isolate the values which are remaining in the selectListMulto to update the list.
        workSelectableValues String[]  = selectListMulti.values;
 
        //Isolate the values which may already be in includeListMulti to preserve the list.
        workIncludedValues String[]  = includeListMulti.values;
        
    
        //Get the number of entries available in includeListMulti.
        numberOfIncluded int = includeListMulti.selection.getSize();
 
        if (numberOfIncluded > 0)
            
            //Iterate through the item numbers 
            for(idx int from 1 to numberOfIncluded)
                includedEntryIndex int = includeListMulti.selection[idx];
                includedEntryValue string = includeListMulti.values[includedEntryIndex];
                workSelectableValues.appendElement( includedEntryValue );      
            end
            
            // Process in reverse order to properly remove the entries
            for(idx int from numberOfIncluded to 1 decrement by 1)
              selectEntryIndex int = includeListMulti.selection[idx];    
              workIncludedValues.removeElement(selectEntryIndex); 
            end
            
            //Update the ListMulti widgets
            selectListMulti.values = workSelectableValues;
            includeListMulti.values = workIncludedValues;
            
        end    	
    end
   
end

Fig.2 – The full source for the widget.

Summary

This post showed how custom widgets can be used and re-used across difference applications. Designing EGL applications in this manner can result in productivity gains by reducing development and testing times.
 
 

Advertisements

Written by iseriesadmin

July 29, 2012 at 5:13 pm

Posted in EGL Widgets, Rich UI

Tagged with ,

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

 
 

Written by iseriesadmin

July 13, 2012 at 9:45 pm