You can use the EGL editor to modify a Rich UI handler,
preview the runtime behavior of the handler, and develop services.
The following example shows an open file in the EGL editor:
The EGL editor includes three views for developing a Rich UI application:
- As shown in the example, the Design surface is a rectangular area
that shows the displayable content of the Rich UI handler. You can
drag widgets from the palette onto the Design surface or onto the
Outline view and then customize those widgets in the Properties view.
You can also change the placement of widgets by working in the Design
surface or in the Outline view.
- The Source view is a rectangular area where you update logic and
add or update widgets. The Design view and Source view are integrated:
changes to the Design view are reflected in the Source view; and,
if possible, changes to the Source view are reflected in the Design
view.
- The Preview view is a browser that is internal to the workbench.
You run your logic in this view or switch to an external browser.
When you develop a service, only the Source view is available.
Using the Design surface to create a DOM tree
When
you drag a widget from the palette to the Design surface, the areas
that can receive the widget are called potential drop locations;
by default, the color of those areas is yellow. When you hover over
a potential drop location, the area is called a selected drop
location; by default, the color of that area is green. You
can customize the colors in the workbench preferences.
When
you first drag a widget to the Design surface, the entire surface
is a selected drop location, and the effect of the drop is to declare
the widget and to identify it as the first element in the initialUI property
of the Rich UI handler. That property accepts an array of widgets
at development time. The array is ultimately used to create a DOM
tree, which is a runtime data structure that is described in "Understanding
how browsers handle a Web application." Specifically, the elements
in the initialUI array of the Rich UI handler become
children of the document element; the order of initialUI array
elements at development time is equivalent to the order of sibling
DOM elements at run time.
When you drag another widget to the
Design surface, you can make the following choices:
- You can place the widget next to widget that you first placed.
The effect on your source code is to declare the second widget and
to identify it as another element in the initialUI array.
Your placement of the new widget is either before or after the first
widget and indicates where the widget is placed in the array.
- If the widget that you first placed was a container—for example,
a box—you can place the second widget inside the first. The effect
on your source code is to add an element to the children property
of the container. The effect is ultimately to add a child element
to the DOM tree; specifically, to add a child element to the element
that represents the container.
As you continue to work, the DOM tree is built. You can
repeatedly use drag-and-drop operations, by which the placement of
a widget determines what array is affected and where the widget is
placed in the array. You can use the drag-and-drop operation instead
of writing a widget declaration and array assignment in the code itself.
New
widget declarations are added to the source code before the declarations
that were already there; the order of the statements is opposite to
the order of the drag-and-drop operations.
Using the Outline view to update the Design surface
When
you are using the Design surface, the Outline view has these features:
- You can drag a widget from the palette to a specific position
in the Outline view and to a specific position on the Design surface.
- Within the Outline view, you can complete these actions:
- Drag a widget to another position. If you select a widget that
has descendents, the widget and its descendents can be dragged to
another position.
- Delete a widget by right-clicking the widget and clicking Delete.
- Update details about the widget by right-clicking the widget,
clicking Properties, and following the procedure
in "Setting widget properties and events."
Understanding the transparency options
The
Design surface is composed of two layers. The bottom layer is the
Web browser, which displays widgets, including initial text values.
The top layer is an editing overlay, which includes angle brackets
at each corner of each widget.
The background of the top layer
can have any of the following characteristics: complete transparency,
a pattern of white and transparent dots, or (on Windows® platforms) a white layer with a varying
level of transparency. You can set those transparency options by setting
a workbench preference, as described in "Setting preferences for Rich
UI appearance." When you work in the editor, you can change the transparency
options that are in use for the editing session.