Verständnis der Vorgehensweise, wie Browser eine Rich UI-Anwendung handhaben

In diesem Thema finden Sie Details dazu, wie Browser eine Rich UI-Anwendung zur Ausführungszeit handhaben. Es werden zwei Ziele erreicht:

Wenn ein Benutzer eine Webadresse in einen Browser eingibt, überträgt der Browser eine Anforderung an einen Web-Server, der sich in der Regel auf einer zweiten Maschine befindet. Die Adresse identifiziert einen bestimmten Server und gibt an, welcher Inhalt an den Browser zurückzugeben ist. Wenn Sie beispielsweise die Adresse http://www.ibm.com eingeben, antwortet ein IBM® Server mit einer Nachricht, die der Browser zum Anzeigen der IBM Startseite verwendet. Interessant ist nun die Frage, in welcher Weise der Browser die Nachricht verwendet.

Der Browser setzt Teile der Nachricht in eine interne Gruppe von Datenbereichen. Der Browser verwendet die Werte in diesen Datenbereichen anschließend dazu, um Steuerelemente anzuzeigen, die üblicherweise als Widgets bezeichnet werden. Beispiele für Widgets sind Schaltflächen und Textfelder.

Betrachten Sie den folgenden Webseiteninhalt:

Beispiel für eine Webseite

Es werden sieben Widgets angezeigt:

Die vom Browser verwendeten internen Datenbereiche werden als eine umgekehrte Baumstruktur dargestellt:

Beispiel für eine DOM-Baumstruktur

Die Baumstruktur besteht aus einem Stammelement mit dem Namen Dokument und einer Gruppe von Elementen, bei denen es sich um Informationseinheiten handelt. Das oberste Ihnen zur Verfügung stehende Element hat die Bezeichnung Hauptteil. Die 'Hauptteil' untergeordneten Elemente sind für Ihre Anwendung spezifisch.

Eine Gruppe von Regeln beschreibt sowohl die Baumstruktur als auch den Zugriff auf die Daten, die von der Baumstruktur dargestellt werden. Diese Gruppe von Regeln wird als Document Object Model (DOM) bezeichnet. Die Baumstruktur wird als die DOM-Baumstruktur bezeichnet und die Beziehungen zwischen den DOM-Elementen werden durch Begriffe aus Verwandtschaftsgraden bezeichnet:
Im einfachsten Fall (wie in unserem Beispiel) gibt ein Widget die Informationen in einem einzigen DOM-Element wieder. In anderen Fällen gibt ein Widget die Informationen in einer untergeordneten Baumstruktur aus mehreren Elementen wieder. In allen Fällen gibt die räumliche Beziehung zwischen den angezeigten Widgets den Aufbau der DOM-Baumstruktur wieder, zumindest in gewissem Maße. Folgende Regeln beschreiben das Standardverhalten:

Es wird häufig eine technische Kurzform verwendet, die die Hauptidee kommuniziert, ohne zwischen den angezeigten Widgets und den DOM-Elementen zu unterscheiden. Anstatt der oben stehenden Liste wird möglicherweise verwendet: 'Ein Widget ist in seinem übergeordneten Element (Elter) enthalten und ein gleichgeordnetes Element (Geschwister) wird unter oder rechts eines vorausgegangenen gleichgeordneten Elements (Geschwister) angezeigt.'

Der Aufbau der DOM-Baumstruktur beschreibt nicht vollständig, wie Widgets angeordnet werden. Ein übergeordnetes Element kann ein Detail enthalten, das dazu führt, dass die untergeordneten Widgets auf eine der beiden folgenden Arten angeordnet werden: gleichgeordnete Elemente werden untereinander oder rechts voneinander aufgeführt. Die Anzeige kann auch durch Besonderheiten des Browsers beeinflusst werden, beispielsweise durch die Größe des Browserfensters, die der Benutzer in der Regel während der Ausführungszeit aktualisieren kann. Schließlich kann die Anzeige durch die in einem Cascading Style Sheet enthaltenen Einstellungen beeinflusst werden.

Beim Entwickeln einer Webseite mit Rich UI werden Widgets ähnlich wie Ganzzahlen deklariert. Widgets sind jedoch nur anzeigbar, wenn diese Widgets durch Ihren Code zur DOM-Baumstruktur hinzugefügt werden. Mit Ihrem Code kann die Baumstruktur als Antwort auf Laufzeitereignisse, beispielsweise der Benutzer klickt auf eine Schaltfläche, auch aktualisiert werden (Hinzufügen, Ändern und Entfernen von Widgets). Der wichtigste Punkt lautet wie folgt: Ihre Hauptaufgabe bei der Entwicklung von Webseiten ist die Erstellung und Aktualisierung einer DOM-Baumstruktur.

Wenn Sie auf der Registerkarte Design im Rich UI-Editor arbeiten, werden einige für die anfängliche Erstellung der DOM-Baumstruktur erforderlichen Tasks während einer Drag-and-drop-Operation automatisch für Sie erledigt. Wenn Sie auf der Registerkarte Quelle im Rich UI-Editor oder im EGL-Editor arbeiten, können Sie Code direkt schreiben und auch explizit auf DOM-Elemente verweisen.

In der Regel erstellen und aktualisieren Sie eine DOM-Baumstruktur in drei Schritten:
  1. Sie deklarieren Widgets, die bestimmte Typen aufweisen ('Button' für Schaltflächen, 'TextField' für Textfelder usw.), und passen die Widgeteigenschaften an. Sie können beispielsweise als Text für eine Schaltfläche 'Input to Output' (Eingabe zu Ausgabe) festlegen, wie im Beispiel.
  2. Fügen Sie zur anfänglichen DOM-Baumstruktur Widgets hinzu.
  3. Ändern Sie die DOM-Baumstruktur durch Hinzufügen, Ändern und Entfernen von Widgets an diesen Stellen im Code, wenn Sie möchten, dass die Änderungen anzeigbar sind.

Ein Widget oder die zugehörigen Änderungen werden als 'anzeigbar' und nicht als 'angezeigt' bezeichnet, da ein Widget in einer DOM-Baumstruktur ausgeblendet sein kann.

Zu einem bestimmten Punkt in der Laufzeitverarbeitung kann ein untergeordnetes Element nur ein einziges übergeordnetes Element aufweisen.

Anmerkung: Details zu diesem möglicherweise wichtigen Thema finden Sie in 'Rich UI-Speicherverwaltung'.

Feedback