Einführung in den EGL Rich UI-Editor

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.

EGL Rich UI-Editor

Der Rich UI-Editor enthält drei Ansichten:

Entwurfsoberfläche zum Erstellen einer DOM-Baumstruktur verwenden

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.

Wenn Sie ein weiteres Widget auf die Entwurfsoberfläche ziehen, haben Sie folgende Auswahlmöglichkeiten:
  • Sie können das Widget neben dem zuerst platzierten Widget ablegen. Die Auswirkung für Ihren Quellcode besteht darin, dass das zweite Widget deklariert werden muss und als weiteres Element im Array initialUI angegeben werden muss. Die Platzierung Ihres neuen Widgets erfolgt vor oder nach der Platzierung des ersten Widgets und gibt an, an welcher Position das Widget in der Feldgruppe ist.
  • Wenn das zuerst platzierte Widget ein Container war (beispielsweise ein Kasten), können Sie das zweite Widget in das erste Widget setzen. Die Auswirkung für Ihren Quellcode besteht darin, dass ein Element zur Eigenschaft children des Containers hinzugefügt werden muss. Zunächst wird dadurch ein untergeordnetes Element zu dem Element hinzugefügt, das den Container darstellt; letztendlich wird dadurch jedoch ein untergeordnetes Element zur DOM-Baumstruktur hinzugefügt.

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.

Gliederungsansicht zum Aktualisieren der Entwurfsoberfläche verwenden

Wenn Sie die Entwurfsoberfläche verwenden, hat die Gliederungsansicht besondere Funktionen:
  • Sie können ein Widget von der Palette mithilfe einer Drag-and-drop-Operation an eine bestimmte Position in der Gliederungsansicht und so an eine bestimmte Position auf der Entwurfsoberfläche ziehen und dort ablegen.
  • In der Gliederungsansicht können Sie Folgendes ausführen:
    • Ein Widget von einer Position an eine andere ziehen und ablegen. (Wenn Sie ein Widget mit untergeordneten Elementen auswählen, können das Widget und die zugehörigen untergeordneten Elemente an eine andere Position gezogen und abgelegt werden.)
    • Ein Widget löschen, indem Sie mit der rechten Maustaste auf das Widget und anschließend auf Löschen klicken.
    • Details zu einem Widget aktualisieren, indem Sie mit der rechten Maustaste auf das Widget klicken, auf Eigenschaften klicken und das Verfahren befolgen, das in Widgeteigenschaften und -ereignisse festlegen beschrieben wird.

Transparenzoptionen verstehen

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.

EGL Rich UI-Editor und EGL-Editor kombinieren

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.

Kombination aus EGL Rich UI- und EGL-Editoren


Feedback