Rich-UI-Widgets

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.

Widgettypen

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.

Tabelle 1. Widgettypen
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:
  • Spaltenmerkmale wie Breite, Höhe und Farbe.
  • Eine Feldgruppe von Datensätzen, deren Feldwerte in den entsprechenden Rasterspalten jeweils in einer Zeile pro Datensatz angezeigt werden.
  • Verhalten, das heißt, Felder, die jeweils eine Feldgruppe von Funktionsreferenzen akzeptieren. Mit den referenzierten Funktionen können Sie die Merkmale von Headerzeilen (Kopfzeilen), Hauptteilzeilen oder Zellen als Antwort auf das Anklicken einer Zelle durch den Benutzer aktualisieren.
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.

Widgetdeklarationen und Paketnamen

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.

Die erste Methode besteht darin, dem Namen des Widgettyps den Namen des Pakets voranzustellen. Das Format sieht wie folgt aus:
widgetName com.ibm.egl.rui.widgets.widgetTypName;
widgetName
Der Name des Widgets.
widgetTypName
Der Name des Widgettyps.

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.

Die zweite Methode zur Angabe des Pakets ist das Einfügen einer Anweisung import am Anfang des Quellcodes. Das Format sieht wie folgt aus, wobei anstelle von widgetTypName entweder ein Platzhalterzeichen (*) zur Angabe mehrerer Typen oder der Name eines bestimmten Typs erforderlich ist:
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.

Wenn Sie Quellcode schreiben, können Sie eine Anweisung import automatisch einfügen, nachdem Sie ein Widget deklariert haben:
  1. Halten Sie die Tasten Strg und Umschalt gedrückt und drücken Sie die Taste O.
  2. Wenn ein Dialog angezeigt wird, wählen Sie zwischen Widgettypen mit denselben Namen aus. Beispiel: Ein Widget 'Button' kann aus Dojo, Silverlight oder EGL Rich UI stammen.

Nullzeigerausnahme vermeiden

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{};

Zusätzliche Widgets erstellen

Sie können eigene Widgets durch zwei Methoden erstellen:
  • Sie können ein Rich-UI-Widget codieren, das heißt einen Rich-UI-Handler mit dem Stereotyp RUIWidget.
  • Sie können einen externen EGL-Typ schreiben, der auf JavaScript basiert. Die Möglichkeit zur Verwendung eines externen EGL-Typs ist nützlich, um auf bereits zuvor vorhandene JavaScript-Bibliotheken zugreifen zu können.

Details zur Erstellung von Widgets finden Sie im Abschnitt Rich-UI-Widgetgruppe erweitern.

Widgettyp verwenden

Der EGL-Widgettyp wird zum Definieren einer Funktion verwendet, die ein Widget akzeptiert, dessen bestimmter Typ bei der Entwicklung nicht bekannt ist. Das folgende (nicht realistische) Beispiel zeigt, wie eine solche Funktion die EGL-Operatoren isa und as verwenden kann, um typspezifische Eigenschaften und Funktionen verfügbar zu machen, wie zum Beispiel die Eigenschaft text vom Typ 'TextField':
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.


Feedback