Creating a web interface in the Rich UI editor

This topic describes how to add, select, move, and delete widgets in the EGL Rich UI editor. In each case, you work on the Design surface, which you access by clicking on the Design tab.

To learn the implication of the actions described here, see “Introduction to the EGL Rich UI editor.”

Adding a widget

Add a widget to a Rich UI handler:
  1. Click a Widget type in the palette and hold the left mouse button
  2. Drag the widget to the Design surface
  3. Use the widget-placement guide to help identify where to drop the widget
  4. At the selected drop location, release the mouse button

Changing the grid layout

The grid layout is a widget that is provided for you automatically when you use the workbench to create a Rich UI editor. To insert or delete cells quickly from the grid layout, do as follows:
  1. Click a cell in the grid layout.
  2. Right click that cell.
  3. If you want to insert cells, click Insert and then the option of interest: Row above, Row below, Column to the left, or Column to the right.
  4. If you want to delete cells, click Delete and then the option of interest: Row or Column.

For details on coding the grid layout, see “Rich UI GridLayout.”

Selecting a widget when multiple widgets overlap

When multiple widgets overlap a given area, click the area repeatedly to cycle through the available widgets, making each one the current one in turn. You can move or delete the current widget as described in the next sections.

Moving a widget

Move a widget from one location to another:
  1. Click a widget on the Design surface and hold the left mouse button
  2. Drag the widget to the preferred location
  3. Use the widget-placement guide to help identify where to drop the widget
  4. At the selected drop location, release the mouse button

Deleting a widget

Delete a widget:
  • Click the widget and press the Delete key; or
  • Right-click the widget and, at the popup menu, select Delete.

The deletion removes the reference to the widget in the handler-specific initialUI property or in the container-widget-specific children property, but does not remove the widget declaration from the Rich UI handler.