Rich UI widgets

Rich UI handler parts include widgets. Each is a customized, on-screen control, but the term widget also refers to the variable declaration that creates the control. A widget can contain business data and can respond to events.

For a list of widget types and details on each, see the EGL Language Reference entries for the following packages:
Also, you can get details on the widget-specific fields and functions by inspecting the project files that contain the widget code.
When you want to use a widget of a specific type, use content assist:
  1. Type the widget name and a period.
  2. Press Ctrl-Space.
Note: Do not use widgets from both the dojo.widgets and dojo.mobile.widgets in a single application. Use dojo.widgets for the web, dojo.mobile.widgets for mobile applications.

Widget declarations and package names

When you wish to declare a widget, EGL provides two ways to identify the package in which the widget resides. Although those two ways are available when you declare any EGL variable, special automation is available in relation to widgets.

First, you can precede the name of the widget type with the name of the package. Here is the format:
widgetName packageName.widgetTypeName;
widgetName
Name of the widget
packageName
Name of the package.
widgetTypeName
Name of the widget type
The second way to identify the package is to include an import statement early in the source code. Here is the format, which requires, in place of widgetTypeName, either a wild card (*) to reference multiple types or the name of a specific type:
import packageName.widgetTypeName;

Use of a wild card in place of widgetTypeName adds unnecessary code to the generated JavaScriptâ„¢ output and is not recommended.

Avoiding a null pointer exception

A widget is an EGL reference variable. When declaring a widget statically (without the new operator), remember to specify a set-values block ({}), as in the following example:

myButton Button{};

Creating additional widgets

You can create your own widgets in either of two ways:
  • You can code a Rich UI widget; that is, a Rich UI handler, stereotype RUIWidget.
  • You can write an EGL external type that is based on JavaScript. The ability to use EGL external types is useful for accessing preexisting JavaScript libraries.

Using the Widget type

The EGL Widget type is used when defining a function that accepts a widget whose specific type is not known at development time. The following (unrealistic) example shows how such a function can use the EGL operators isa and as to make available type-specific properties and functions; for example, the text property of the TextField type:
import com.ibm.egl.rui.widgets.TextField;

handler MyHandlerPart type RUIhandler{onConstructionFunction = initialization}

   myHelloField TextField{readOnly = true, text = "Hello"};

   function initialization()
      	myInternalFunction(myHelloField);
   end

   function myInternalFunction(theWidget widget in)
     
      case 
         when (theWidget isa TextField)
            myTextField TextField = theWidget as TextField;
            myString STRING = myTextField.text + " World";
            sysLib.writeStdOut(myString);
         when (theWidget isa Button)
            ;
       	 otherwise
       	    ;
      end
   end
end

The handler displays Hello world.

A variable of type Widget must be declared before the widget is referenced in a property; in particular, before the widget is referenced in an initialUI or children property. (That rule does not apply to variables of specific widget types such as Button or TextField.)

A variable of type Widget is compatible with both Rich UI widgets and external-type widgets.