EGL editor for Rich UI

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:

EGL editor

The EGL editor includes three views for developing a Rich UI application:

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.


Feedback