Rich-UI-Handlerabschnitte enthalten Widgets. Jedes Widget ist ein angepasstes Steuerelement auf der Anzeige. Die Bezeichnung Widget bezieht sich jedoch auch auf die Variablendeklaration, durch die das Steuerelement erstellt wird. Ein Widget kann Geschäftsdaten enthalten und auf Ereignisse reagieren.
Das Produkt stellt eine Kerngruppe von Widgettypen bereit, mit denen Sie Widgets deklarieren. In der folgenden Tabelle sind die Haupttypen aufgeführt. Die Tabelle enthält jedoch nicht die verfügbaren Dojo-Widgets, die in einem anderen Abschnitt aufgelistet werden.
| Kategorie | Typ | Zweck |
|---|---|---|
| Container | Box | Dient zum Definieren eines Felds, das in den meisten Fällen selbst weitere
Widgets enthält. Ein Feld war die primäre Art von Container in früheren Versionen von Rich-UI. Ein Container
vom Typ 'GridLayout' ist jedoch flexibler, wie im Abschnitt zu 'GridLayout' beschrieben wird. Sie können angeben, wie viele Spalten in einem Feld enthalten sind. Wenn die Anzahl der Spalten zum Beispiel 3 ist, befinden sich die ersten drei eingebetteten Widgets in der ersten Zeile im Feld, die Widgets vier bis sechs befinden sich in der zweiten Zeile usw. Wenn die Anzahl der Spalten 1 ist, werden alle eingebetteten Widgets vertikal angeordnet. In jedem Fall entspricht die Breite einer Spalte der Breite des größten Widgets in der Spalte. Sie können angeben, ob die eingebetteten Widgets in einer bestimmten Spalte zentriert, rechts oder links ausgerichtet werden. Wenn Sie leere Zellen anzeigen wollen, schließen Sie als untergeordnete Elemente des Felds Textbezeichnungen ('TextLabel') ohne Text mit ein. Vertikale und horizontale Schiebeleisten werden bei Bedarf eingeblendet, um den Zugriff auf Widgets zu ermöglichen, die sich außerhalb des sichtbaren Bereichs befinden. |
| Div | Dient zur Definition einer Teilung (Division, HTML-Tag 'DIV') auf der Webseite unterhalb des vorhergehenden Inhalts. Das Widget 'Div' kann als übergeordnetes Element der Widgets 'FloatLeft' und 'FloatRight' verwendet werden, um dem Webseitendesign Flexibilität zu verleihen. | |
| FloatLeft | Dient zur Definition einer Teilung (HTML-Tag 'DIV') auf der Webseite, in den meisten Fällen als untergeordnetes Element eines Widgets 'Div', 'FloatLeft' oder 'FloatRight'. Das Widget verwendet das CSS-Element 'float:left'. | |
| FloatRight | Dient zur Definition einer Teilung (HTML-Tag 'DIV') auf der Webseite, zum Beispiel als untergeordnetes Element eines Widgets 'Div', 'FloatLeft' oder 'FloatRight'. Das Widget verwendet das CSS-Element 'float:right'. | |
| GridLayout | Dient zur Definition eines Containers mit Zeilen und Spalten mit variablen Abständen, in denen untergeordnete Widgets eingebettet werden. Jedes untergeordnete Widget verfügt über eine Eigenschaft layoutData und Sie geben die Position des Widgets an, indem Sie dieser Eigenschaft einen Wert zuordnen. | |
| Grouping | Dient zum Anzeigen einer Widgetgruppe in einem umrahmten Feld. Sie können einen Text zuordnen, der im oberen Teil des Rahmens eingefügt wird. | |
| Information | DataGrid | Dient zum Definieren einer Feldgruppe von Werten in einem Tabellenformat.
Das Widget ermöglicht die Angabe der folgenden Details:
|
| Grid | Dient zum Definieren einer Feldgruppe von Werten in einem Tabellenformat. Verwenden Sie für Neuentwicklungen den Widgettyp 'DataGrid', der über eine bessere Leistung und Funktionalität verfügt. | |
| HTML | Dient zum Darstellen eines HTML-Fragments, das zum Beispiel durch einen Service bereitgestellt wird. Der HTML-Code wird in einem umrahmten Bereich und bei Bedarf mit einer Schiebeleiste wiedergegeben. | |
| Image | Dient zum Anzeigen einer Grafik oder eines Alternativtexts. | |
| Shadow | Dient zum Erstellen eines Schattierungseffekts für Widgets, die untergeordnete Elemente eines angegebenen Widgets 'Div' sind. | |
| Span | Dient zum Anzeigen einer Zeichenfolge, die der Benutzer nicht ändern kann. Die Zeichenfolge kann HTML-Segmente enthalten (z. B.: <b>dies ist fett hervorgehobener Code</b>). | |
| TextLabel | Dient zum Anzeigen einer Zeichenfolge, die der Benutzer nicht ändern kann. Das Widget unterscheidet sich vom Widget 'Span', weil bei Einschluss eines HTML-Segments (z. B. <b>dieser Code</b>) das Segment so wie es angegeben wird, einschließlich der spitzen Klammern, angezeigt wird. | |
| Tree | Dient zum Definieren einer Baumstruktur mit anzeigbaren Knoten. | |
| Interactive | BidiTextArea | Dient zum Definieren eines Rechtecks, das eine oder mehrere Zeilen mit bidirektionalem Text enthält. |
| BidiTextField | Dient zum Definieren eines Textfelds, das eine einzelne Zeile mit bidirektionalem Text enthält. | |
| Button | Dient zum Definieren einer Schaltfläche, die einen Benutzerklick empfangen kann und auf diesen Klick mit dem Aufruf einer Funktion antwortet. | |
| Checkbox | Dient zum Definieren eines Kontrollkästchens, das eine Wahr/Falsch-Option ('true-false') anzeigt und auf eine Benutzereingabe mit dem Aufruf einer Funktion antwortet. | |
| Combo | Dient zum Definieren eines Kombinationsfelds, das eine von mehreren auswählbaren Optionen darstellt und dem Benutzer die Möglichkeit gibt, eine Dropdown-Liste zur Auswahl einer anderen Option zu öffnen. | |
| Hyperlink | Dient zum Definieren eines Webseitenlinks, der bei Anklicken die entsprechende Seite im Browser anzeigt. Die Seitenanzeige ist nicht durch ein Layout gebunden. | |
| List | Dient zum Definieren einer Liste, aus der der Benutzer einen einzelnen Eintrag auswählen kann. | |
| Listmulti | Dient zum Definieren einer Liste, aus der der Benutzer mehrere Einträge auswählen kann. | |
| Menu | Dient zum Definieren eines Menüleisteneintrags. | |
| PasswordTextField | Dient zum Definieren eines Eingabetextfelds, dessen Wert durch Punkte angezeigt wird, wie dies für die Eingabe eines Kennworts geeignet ist. | |
| RadioGroup | Dient zum Festlegen von Optionsfeldern (Radioknöpfen), die jeweils auf einen Klick antworten, indem sie die anderen Optionsfelder derselben Gruppe abwählen und (im Regelfall) eine Funktion aufrufen. | |
| TextArea | Dient zum Definieren eines Rechtecks, das eine oder mehrere Zeilen mit Text enthält. | |
| TextField | Dient zum Definieren eines Textfelds, das eine einzelne Zeile mit Text enthält. | |
| Hover | GridTooltip | Dient zum Definieren einer speziellen Kurzinfo (QuickInfo, Raster-Tooltip), die jeweils aus einem oder mehreren Widgets besteht, die angezeigt werden, wenn der Benutzer den Mauszeiger über ein Grid-Widget bewegt. |
| Tooltip | Dient zum Definieren einer Kurzinfo, die aus einem oder mehreren Widgets besteht, die angezeigt werden, wenn der Benutzer den Mauszeiger über ein Widget bewegt. | |
| TreeTooltip | Dient zum Definieren einer speziellen Kurzinfo (QuickInfo), die aus einem oder mehreren Widgets besteht, die angezeigt werden, wenn der Benutzer den Mauszeiger über ein Tree-Widget bewegt. |
Obwohl die QuickInfo-Typen (ToolTip, GridToolTip und TreeToolTip) in der Widgetliste aufgeführt werden, ist jeder QuickInfo-Typ technisch gesehen ein Rich-UI-Handler (EGL-Handlerabschnitt, Stereotyp RUIHandler). In diesem Fall stellt der Handler-Code eine Funktionalität ähnlich der eines Rich-UI-Widgets bereit. Allerdings sind die Funktionen und Felder, die für alle Widgets verfügbar sind, nicht für QuickInfos (Tooltips) verfügbar. Details zu den allgemein verfügbaren Feldern und Funktionen finden Sie im Abschnitt Widgeteigenschaften und Widgetfunktionen.
Wenn Sie ein Widget deklarieren wollen, bietet EGL zwei Möglichkeiten, das Paket anzugeben, in dem sich das Widget befindet. Obwohl diese beiden Möglichkeiten verfügbar sind, wenn Sie eine beliebige EGL-Variable deklarieren, ist für Widgets eine besondere Automatisierung verfügbar.
widgetName com.ibm.egl.rui.widgets.widgetTypName;
Der EGL-Rich-UI-Editor verwendet das Format mit der Voranstellung für die Widgetdeklarationsanweisung, wenn Sie ein Widget von der Palette auf die Entwurfsoberfläche gezogen haben. Eine Übersicht finden Sie im Abschnitt Einführung in den EGL Rich UI-Editor.
import com.ibm.egl.rui.widgets.widgetTypName;
Die Verwendung eines Platzhalters anstelle von widgetTypName fügt unnötigen Code zur generierten JavaScript-Ausgabe hinzu und wird nicht empfohlen.
Ein Widget ist eine EGL-Referenzvariable. Wenn Sie ein Widget statisch (ohne den Operator new deklarieren), denken Sie daran, einen Block zum Festlegen von Werten ({}) wie im folgenden Beispiel anzugeben:
myButton Button{};
Details zur Erstellung von Widgets finden Sie im Abschnitt Rich-UI-Widgetgruppe erweitern.
import com.ibm.egl.rui.widgets.TextField;
handler MyHandlerPart type RUIhandler{onConstructionFunction = initialization}
myHelloField TextField{readOnly = true, text = "Hello"};
function initialization()
myInternalFunction(myHelloField);
end
function myInternalFunction(theWidget widget in)
case
when (theWidget isa TextField)
myTextField TextField = theWidget as TextField;
myString STRING = myTextField.text + " World";
sysLib.writeStdOut(myString);
when (theWidget isa Button)
;
otherwise
;
end
end
end
Der Handler zeigt die Zeichenfolge Hello world an.
Eine Variable vom Typ 'Widget' muss deklariert werden, bevor das Widget in einer Eigenschaft referenziert wird, insbesondere bevor das Widget in einer Eigenschaft initialUI oder children referenziert wird. (Diese Regel gilt nicht für Variablen bestimmter Widgettypen wie 'Button' oder 'TextField'.)
Eine Variable vom Typ 'Widget' ist sowohl mit Rich-UI-Widgets als auch mit Widgets eines externen Typs kompatibel.