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:

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

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.
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.
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.