Sie können den EGL Rich UI-Editor verwenden, um einen Rich-UI-Handler zu ändern und das Laufzeitverhalten des Handlers in einer Vorschau anzuzeigen.
Nachfolgend ein Beispiel einer im Rich UI-Editor geöffneten Datei.

Wenn Sie ein Widget von der Palette auf die Entwurfsoberfläche ziehen, werden die Bereiche, die ein Widget aufnehmen können, als potentielle Ablegepositionen bezeichnet und die Farbe dieser Bereiche ist standardmäßig gelb. Wenn Sie die Maus über einer potenziellen Ablegeposition bewegen, wird der Bereich ausgewählte Ablegeposition genannt und die Farbe des Bereichs ist standardmäßig grün. Sie können die Farben in den Benutzervorgaben der Workbench anpassen.
Wenn Sie erstmals ein Widget auf die Entwurfsoberfläche ziehen, stellt die gesamte Oberfläche eine ausgewählte Ablegeposition dar und als Auswirkung des Ablegens wird das Widget deklariert und in der Eigenschaft initialUI des Rich-UI-Handlers als erstes Element angegeben. Diese Eigenschaft akzeptiert eine Feldgruppe von Widgets zur Entwicklungszeit. Die Feldgruppe wird schließlich zum Erstellen einer DOM-Baumstruktur verwendet, bei der es sich um eine Ausführungszeitdatenstruktur handelt, die im Abschnitt zum Verständnis der Handhabung von Webanwendungen durch Browser beschrieben wird. Insbesondere die Elemente in der Feldgruppe initialUI des Rich-UI-Handlers werden zu untergeordneten Elementen des Dokumentelements, wobei die Reihenfolge der Elemente der Feldgruppe initialUI zur Entwicklungszeit äquivalent zur Reihenfolge der gleichgeordneten DOM-Elemente zur Laufzeit ist.
Durch Ihre nachfolgende Arbeit fahren Sie fort, die DOM-Baumstruktur zu erstellen. Sie können wiederholt Drag-and-drag-Operationen ausführen, indem Sie Widgets platzieren und dadurch festlegen, welche Feldgruppe betroffen ist und an welcher Position das Widget in der Feldgruppe platziert wird. Die Drag-and-drop-Operation ist eine Alternative dazu, dass eine Widgetdeklaration und eine Feldgruppenzuordnung im Code selbst geschrieben werden müssen, entweder auf der Registerkarte Quelle des Rich UI-Editors oder im EGL-Editor.
Neue Widgetdeklarationen werden vor den Deklarationen, die bereits vorhanden waren, zum Quellcode hinzugefügt; dies bedeutet, dass die Reihenfolge der Anweisungen der Reihenfolge der Drag-and-drop-Operationen entgegengesetzt ist.
Die Entwurfsoberfläche besteht aus zwei Ebenen. Die untere Ebene ist der Web-Browser, der Widgets, einschließlich anfänglicher Textwerte, anzeigt. Die obere Ebene ist ein Overlay für die Bearbeitung, in dem an den Ecken der Widgets spitze Klammern enthalten sind.
Der Hintergrund der oberen Ebene kann eines der folgenden Merkmale aufweisen: Er kann transparent sein, ein Muster aus weißen und transparenten Punkten haben oder (auf Windows-Plattformen) es kann sich um eine weiße Oberfläche mit einer sich ändernden Transparenzstufe handeln. Sie können diese Transparenzoptionen festlegen, indem Sie eine Benutzervorgabe in der Workbench festlegen, wie in 'Benutzervorgaben für Rich UI-Darstellung definieren' beschrieben. Wenn Sie im Editor arbeiten, können Sie die Transparenzoptionen ändern, die in der aktuellen Bearbeitungssitzung verwendet werden.
Sie können die Funktionen im Rich UI-Editor ergänzen, indem Sie eine einzige Datei sowohl im EGL Rich UI-Editor als auch im EGL-Editor öffnen. Der folgende Screenshot zeigt beispielsweise die Datei 'GridDemo.egl' auf zwei Arten an. Oben befindet sich die Registerkarte 'Entwurf' des Rich UI-Editors zusammen mit einer Palette, die die verfügbaren Widgettypen auflistet. Unten befindet sich der EGL-Editor. Ihre Arbeit in jedem der Editoren hat Auswirkungen auf dieselbe Datei und wird durch den Inhalt wiedergegeben, der im jeweils anderen Editor angezeigt wird.
