Rich-UI-Handlerabschnitt

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.

Das folgende Beispiel zeigt einen Rich-UI-Handlerabschnitt:
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:

Beispielausgabe des RUI-Handlers

Dasselbe Beispiel wird zur Erläuterung der DOM-Baumstruktur verwendet. Details finden Sie im Abschnitt “Informationen zur Verarbeitung einer Rich-UI-Anwendung in Browsern”.

Die Eigenschaften in einem Rich-UI-Handlerabschnitt werden nur verwendet, wenn der Abschnitt als Handler der höchsten Ebene in der Rich-UI-Anwendung verwendet wird. Die folgenden Eigenschaften sind verfügbar und sind optional:
cssFile
Gibt ein Cascading Style Sheet (CSS-Datei) an, in der Anzeigemerkmale eines einzelnen Widgets oder einer Kategorie von Widgets festgelegt werden. Die Eigenschaft akzeptiert einen Pfad relativ zum Verzeichnis WebContent. Bei der Implementierung wird die CSS-Datei in einem Eintrag <link> angegeben, der der HTML-Datei hinzugefügt wird.
Das folgende Beispiel zeigt eine solche Einstellung:
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”.

includeFile
Gibt eine Datei für den Einschluss in die implementierte HTML-Datei an. Ebenso wie die Eigenschaft cssFile akzeptiert die Eigenschaft includeFile einen Pfad relativ zum Verzeichnis WebContent.
Das folgende Beispiel zeigt eine solche Einstellung:
Handler ButtonTest Type RUIHandler 
   { children = [ui], includeFile = "buttontest/coolblue.css" }
Die folgenden Details beziehen sich auf Dateitypen:
  • Eine Datei, die eine andere Erweiterung als 'css' oder 'html' hat, wird in einem Element <script> eingefügt:
    <script>
       <!-- Hier befindet sich der Dateiinhalt. -->
    </script>
  • Eine Datei, die die Erweiterung 'html' oder 'css' hat, wird unverändert eingefügt. Wenn die Datei die Erweiterung 'css' hat, müssen sich die Stilanweisungen in einem Element <style> befinden:
    <style type="text/css">  
       .EglRuiGridTable 
       { 	border: 3px solid black; }  
    
       .EglRuiGridHeader 
       {  color:yellow; 	
          background-color:red;	 }  
    
       .EglRuiGridCell 
       { 	color:black; 	
          background-color:aqua; } 
    </style>
    Wenn die Datei die Erweiterung 'html' hat, gilt Folgendes:
    • Wenn Sie in einem Rich-UI-Projekt arbeiten, zeigt das Projekt möglicherweise eine Warnung an, wenn Sie eine Datei anzeigen, die ein Attribut 'xref' enthält. Das folgende Beispiel zeigt den Inhalt der Datei MyIncludeFile.html, die sich während der Entwicklung im Ordner WebContent/MyFolder befindet:
      <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.

    • Der Einschluss einer HTML-Datei (in der Weise, dass ein Element <html> in die implementierte HTML-Datei eingefügt wird) ist zumindest in einigen Browsern gültig. Wenn Sie die Eigenschaft includeFile verwenden, testen Sie Ihre Anwendung in mehreren Browsern.
initialUI
Gibt an, welche Widgets untergeordnete Elemente des ursprünglichen Dokumentelements für die DOM-Baumstruktur sind. Wenn die Feldgruppe ein benanntes Widget mehrfach referenziert, wird nur die letzte Referenz verwendet und die übrigen ignoriert.
onConstructionFunction
Gibt die onConstruction-Funktion an, die eine Handlerfunktion ist, die zu Beginn der Ausführung des Handlers aufgerufen wird. Sie können den Wert von initialUI in der onConstruction-Funktion oder in einer Funktion, die (direkt oder indirekt) von dieser Funktion aufgerufen wird, neu festlegen. Nach Beendigung der onConstruction-Funktion ist der von initialUI jedoch eine Konstante.
theme
Ermöglicht eine einheitliche Anzeigegestaltung von Widgets für eine gesamte Anwendung. Sie können entweder das Motiv Claro oder das Motiv Tundra angeben. Der Standardwert ist Claro. Wenn Sie eine Anwendung codieren, die Dojo-Widgets enthält, sind außerdem die Motive Nihilo und Soria verfügbar, jedoch betrifft diese Angabe nur die Dojo-Widgets. Wenn ein Widget kein Motiv hat, ist die Darstellung für das Widget spezifisch.

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

title
Gibt den Wert für das HTML-Element <title> an. Der Standardwert ist der Handlername.

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.


Feedback