iSeries EGL

All things EGL for the iSeries / i5 / Power System

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 ,

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: