In many cases, the Rich UI widgets are EGL handler parts, stereotype RUIWidget. Exceptions include Tooltip, DataGridTooltip, and TreeTooltip, all of which are stereotype RUIHandler, and the Dojo widgets, each of which is based on an external type.
Always use dot syntax to access a given function or property; for example, myWidget.myFunction() or myWidget.myProperty.
Most EGL properties are available only to EGL system code and are not available at run time. However, widget properties are fields; they are available to your code at run time.
Style-related properties such as class and style are available for all IBM-supplied widgets. For details on styles, see “Widget styles.”
If the widget (for example, a box) corresponds to a DOM subtree rather than to a specific DOM element, the ID is for the topmost DOM element in the subtree. For an introduction to the DOM, see “Understanding how browsers handle a Rich UI application.”
The default tab order is browser specific.
You can place a widget outside of its parent and even outside of the viewable area.
For example, in relation to the child of a box, the parent property refers, not the box, but to a DOM TD element within a DOM Table element. However, the logicalParent property refers to the DOM Div element that represents the box and is the parent of the DOM Table element.
parent is for Widget-type development and provides access to a parent DOM element. For an introduction to the DOM, see “Understanding how browsers handle a Rich UI application.”In most cases, the setting "Visual" is appropriate for Arabic or Hebrew content derived from a machine that runs z/OS® or IBM® i.
The ariaLive value is a quoted string ("off", "polite". "assertive", or "rude"), each of which is described in the specification's section on property: live.
The ariaRole value is a quoted string such as "button" or "listbox", each of which is described in the specification's section on Roles.
fadeIn (duration int in, callback EffectCallback)
fadeOut (duration int in, callback EffectCallback)
myButton.fadeOut(1000, null);
focus()
For example, a button in focus is highlighted, and the user's pressing the ENTER key is equivalent to the user's clicking the button. Similarly, a text field in focus (if not read only) includes a cursor so that the user enters data by typing a printable character without first tabbing to the field.
The user can press TAB repeatedly to cycle through the available fields. With each keypress, the focus moves either to the next application field or to a field on the browser; for example, to the web address field.
myButton.focus();
morph (duration int in, callback EffectCallback, morphFunction MorphFunction )
myButton.morph(1000, null, myCustomMorphFunction);
resize (width int in, height int in,
duration int, callback EffectCallback)
myButton.resize(100, 100, 1000, myFunction);
myInTextField TextField{};
myButton Button{ text = "Input to Output", onClick ::= click };
myOutTextField TextField{};
myBox Box{ columns = 3,
children = [ myInTextField, myButton, myOutTextField ]};
If the array references a named widget multiple times, only the last reference is used, and the other references are ignored.
myInTextField TextField{};
myTextOutField TextField{};
myBox box{columns=3,
children=[myInTextField,
new Button{ text = "Input to Output", onClick ::= click},
myOutTextField]};
In general, if the value of columns is n, the widget at position n+1 of the array is displayed in the first column of a new row. If you do not specify a columns value, the children of the Box widget extend to the right.
Div widgets that are children of another widget are displayed vertically, one underneath the previous.
myBox.children = [myInTextField, myButton02, myOutTextField];
Function myFirstFunction(){}
myBox.appendChild(myOtherButton);
myBox.appendChildren([myOtherTextField, myOtherButton02]);
myBox.removeChild(myOtherButton);
myBox.removeChildren();
end
document.body.appendChild(myOtherButton);
document.body.appendChildren([myOtherTextField, myOtherButton02]);
document.body.removeChild(myOtherButton);
document.body.removeChildren();
The functions appendChild and removeChild each accepts a single widget; appendChildren accepts an array of widgets; and removeChildren takes no arguments. In the case of appendChild or appendChildren, the widget declarations can be anonymous or named. In the case of removeChild, the widget declarations must be named.
A specific widget can be the child of only one other widget (or of the document body, as shown in a later example). If a widget has a parent, you can cause the widget to be the child of a different parent. We refer to the reassignment as re-parenting the child widget.
myTopBox Box{padding = 8, columns = 1, backgroundColor = "Aqua",
children =[myBox02, myBox03 ]};
handler MyTest type RUIhandler{initialUI =[myBox03]}
At run time, the assignment to initialUI is handled after the declaration of myTopBox. The effect is that myBox03 is re-parented to the document body, leaving myTopBox with only one child, myBox02.
import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.Button;
import com.ibm.egl.rui.widgets.TextField;
import egl.ui.rui.Event;
handler MyTest type RUIhandler{initialUI =[myBox03]}
myTopBox Box{padding = 8, columns = 1, backgroundColor = "Aqua",
children =[myBox02, myBox03 ]};
myBox02 Box{padding = 8, columns = 2, backgroundColor = "DarkGray",
children =[myHelloField ]};
myBox03 Box{padding = 8, columns = 3, backgroundColor = "CadetBlue",
children =[myInTextField, myButton, myOutTextField] };
myHelloField TextField{readOnly = true, text = "Hello"};
myInTextField TextField{};
myButton Button{text = "Input to Output", onClick ::= click};
myOutTextField TextField{};
function click(e EVENT in)
document.body.appendChildren([myTopBox]);
end
end
document.body.removeChildren();
document.body.removeChild(myBox);