Die Hauptkomponente einer Rich-UI-Anwendung ist ein Rich-UI-Handlerabschnitt, das heißt, ein Handler mit dem Stereotyp RUIHandler. Der Handlerabschnitt platziert Widgets auf einer Webseite und verarbeitet Ereignisse wie zum Beispiel das Klicken eines Benutzers auf eine Schaltfläche. Die Widgets und Funktionen, die sich in einem Handlerabschnitt befinden, können für andere Handlerabschnitte verfügbar gemacht werden, wie dies im Abschnitt “Rich-UI-Anwendung mit mehreren Handlern erstellen” beschrieben wird.
import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.Button;
import com.ibm.egl.rui.widgets.TextField;
import egl.ui.rui.Event;
handler ButtonTest01 type RUIhandler {initialUI = [ myTopBox ],
onConstructionFunction = initialization}
myHelloField TextField
{ readOnly = true, text = "Hello" };
myInTextField TextField{};
myButton Button{ text = "Input to Output", onClick ::= click };
myOutTextField TextField{};
myBox03 Box{ padding=8, columns = 3,
children = [ myInTextField, myButton, myOutTextField ],
backgroundColor = "CadetBlue" };
myBox02 Box{ padding=8, columns = 2, children = [myHelloField],
backgroundColor = "DarkGray"};
myTopBox Box{ padding=8, children = [ myBox02, myBox03 ],
columns = 1, backgroundColor = "Aqua" };
function initialization()
end
function click(e EVENT in)
myOutTextField.text = myHelloField.text + " " + myInTextField.text;
end
end
Wenn der Benutzer das Wort World im linken unteren Textfeld eingibt und auf die Schaltfläche klickt, sieht die Benutzerschnittstelle wie folgt aus:

Dasselbe Beispiel wird zur Erläuterung der DOM-Baumstruktur verwendet. Details finden Sie im Abschnitt “Informationen zur Verarbeitung einer Rich-UI-Anwendung in Browsern”.
Handler ButtonTest Type RUIHandler
{ children = [ui], cssFile = "buttontest/coolblue.css" }
Das folgende Beispiel
zeigt eine mögliche CSS-Datei: .EglRuiGridTable
{ border: 3px solid black; }
.EglRuiGridHeader
{ color:yellow;
background-color:red; }
.EglRuiGridCell
{ color:black;
background-color:aqua; }
Wenn sowohl die Eigenschaft cssFile als auch die Eigenschaft includeFile angegeben wird, hat der CSS-Inhalt Vorrang, der durch die Eigenschaft cssFile referenziert wird. Dieser Inhalt hat Vorrang, weil der <link>-Eintrag in der implementierten HTML-Datei nach dem Inhalt eingefügt wird, der durch die Eigenschaft includeFile referenziert wird.
Weitere Details zur Rich-UI-Unterstützung für Stile (Darstellungen) finden Sie in “Widgetstile”.
Handler ButtonTest Type RUIHandler
{ children = [ui], includeFile = "buttontest/coolblue.css" }
<script>
<!-- Hier befindet sich der Dateiinhalt. -->
</script>
<style type="text/css">
.EglRuiGridTable
{ border: 3px solid black; }
.EglRuiGridHeader
{ color:yellow;
background-color:red; }
.EglRuiGridCell
{ color:black;
background-color:aqua; }
</style>
<link REL="STYLESHEET" TYPE="text/css" href="css/dashboard.css">
In diesem Beispiel weist eine Warnung darauf hin, dass der href-Wert nicht auf eine vorhandene Datei verweist. Die Warnung erfolgt, weil der während der Entwicklung verwendete Editor die Datei WebContent/MyFolder/css/dashboard.css sucht und nicht die tatsächliche Datei, die WebContent/css/dashboard.css heißt. Stellen Sie sicher, dass der Wert des Tags <href> einen Pfad relativ zum Verzeichnis WebContent enthält und ignorieren Sie Warnungen, die besagen, dass ein anderer Pfad erforderlich ist.
Während der Ausführung können Sie ein neues Motiv durch Aufrufen der Funktion ruiLib.setTheme() festlegen und den Namen des zurzeit verwendeten Motivs durch Aufrufen der Funktion ruiLib.getTheme() abrufen.
Zur Verwendung eines Motivs müssen Sie Anweisungen codieren, durch die die erforderlichen CSS-Dateien in Ihre CSS-Datei importiert werden. Details finden Sie im Abschnitt “Motive für die Verwendung mit der Rich-UI-Anwendung”.
Während der Ausführung können Sie einen neuen Titel durch Aufrufen der Funktion ruiLib.setTitle() festlegen und den Namen des Titels durch Aufrufen der Funktion ruiLib.getTitle() abrufen.
Wie gezeigt, enthält die Widgets vom Typ 'Box' verschiedene Eigenschaften, insbesondere die Eigenschaft children. Diese Eigenschaft ist die Methode, durch die der Handler untergeordnete Elemente und andere Nachkommen an die Widgets anhängt, die in der Feldgruppe initialUI angegeben sind.