Lesson 2: Meet the Rich UI widgets and handlers

The elements in an EGL Rich UI page are called widgets. Widgets work with a type of program called an EGL Rich UI Handler.
Now that you have a family tree for the target Web page that you are designing, you can add some information about the way the individual elements, also known as nodes, should behave.

Widget properties

In this tutorial, widget means "window gadget." In EGL Rich UI, a widget is a reusable user interface component such as a button, a text input field, or a box. The elements in your target Web page are all widgets in the standard Rich UI palette.

In EGL, properties describe the behavior of elements in a program. A property is a name-value pair; in the code, the properties are enclosed in braces:
outerBox com.ibm.egl.rui.widgets.Box{ padding=8,
	children = [ upperBox, lowerBox ],
	columns = 1 };

In this example, padding, children, and columns are properties.

All widgets have properties, though the properties that are available depend on the specific widget. This tutorial uses the following properties that are associated with a box widget:
backgroundColor
Specifies a color to be applied to the background of a box.
borderColor
Specifies a color for a decorative border around the box.
borderStyle
Specifies the shape of the border.
borderWidth
Specifies the width of the decorative border, in pixels.
children
Lists all of the elements that appear inside the box. This might include buttons, text, entry fields, or other boxes.
class
References a class in a cascading style sheet (CSS) that determines the formatting of elements within the box, such as the style of a font.
columns
Specifies the number of columns that divide the box, as an integer. You use columns to align elements.
padding
Specifies a distance, in pixels, between the contents and the border of a box.
Other properties specify further information about the box, such as:
  • its location
  • its ID
  • its visibility

Essential widgets

In addition to the box widget, you will use the following widgets in this tutorial:
TextLabel
Defines a string that the user cannot change. You need the following TextLabel property for this tutorial:
text
Specifies the string to be displayed.
TextField
Defines a text box in which a user can type a single line of input. (For lengthy input, Rich UI provides a TextArea widget.) You will not need any TextField properties for this tutorial.
PasswordTextField
Defines a text box where a user can type a single line of input. The value of the field is displayed as a string of bullet characters (•). You will not need any PasswordTextField properties for this tutorial.
Button
You can bind a function to a button; when the user clicks the button, the bound function is called. You need the following Button property for this tutorial:
text
A string to be displayed on the button.

The Rich UI Handler

In EGL, a handler is a special kind of program with functions that are tied to specific events that occur when someone uses an interface. Technically, a Rich UI Handler is an EGL Handler part with the RUIHandler stereotype. In a Rich UI Handler, the widgets typically provide the events that are bound to the handler functions. The Rich UI Handler has the following properties:
initialUI
Specifies an array of widgets that makes up the initial display for the Web page.
onConstructionFunction
Specifies a function to call when the interface is first created.
cssFile
Specifies a cascading style sheet (CSS) to assign to the file. By default, EGL creates a CSS with the same name as the project. To customize the appearance of the page, you can modify this file or assign a different one to the cssFile property.
The widget code that is included with EGL describes a set of abstract entities, which are like blueprints for controls on a page. To create the actual control, declare a variable that has the type of the widget you want to create. These declarations go in the Rich UI Handler. For example, if you create a Box widget, you must assign a name to it, such as topBox. The declaration for this widget is included in the Rich UI Handler:
topBox com.ibm.egl.rui.widgets.Box;

You can create a Rich UI program by coding a Rich UI Handler one line at a time, or you can drag visual elements onto a representation of the Web page using the EGL editor. That editor is the subject of the next lesson, in which you begin to build a working interface.

Lesson checkpoint

In this lesson, you learned about widgets and handlers. This is the last section of the tutorial that focuses on the concepts of Rich UI.
You learned the following concepts:
  • What a widget is
  • The important properties of each widget
  • The types of widgets you will use in the tutorial and their important properties
  • What a Rich UI Handler does

Feedback