Rich-UI-Rasterlayout

Ein Rich-UI-Rasterlayout enthält Zeilen und Spalten variabler Größe, in die untergeordnete Widgets eingebettet sind. Jedes untergeordnete Widget verfügt über eine Eigenschaft layoutData und Sie geben die Position des Widgets durch die Zuordnung eines Werts zu dieser Eigenschaft an. Über die Einstellungen für layoutData können Sie das Widget auch innerhalb der Position horizontal und vertikal ausrichten und festlegen, dass das Widget mehrere Zeilen und Spalten umfasst.

Ein Rasterlayout unterstützt die folgenden Eigenschaften:

Weitere unterstützte Eigenschaften und Funktionen werden im Abschnitt “Widgeteigenschaften und Widgetfunktionen” beschrieben.

Für die Verwendung des Rasterlayouts sind in der Regel die folgenden Anweisungen erforderlich:
import com.ibm.egl.rui.widgets.GridLayout;
import com.ibm.egl.rui.widgets.GridLayoutData;
import com.ibm.egl.rui.widgets.GridLayoutLib;
Die folgenden Details sind in der Eigenschaft layoutData eines untergeordneten Elements des Rasterlayouts enthalten.
Ein untergeordnetes Widget kann Auswirkungen auf das gesamte Layout haben:
Der Rich-UI-Editor unterstützt Sie beim Arbeiten mit einem Rasterlayout. Im Einzelnen können Sie die folgenden Aufgaben ausführen:
Details zu den oben aufgeführten Editorfunktionen können Sie den folgenden Themen entnehmen:

Beispiel

Betrachten Sie die folgende Benutzerschnittstelle:

Rich-UI-Rasterlayout - Beispiel

Anbei erhalten Sie einen kurzen Überblick über den Rich-UI-Handler, der die Schnittstelle formatiert:
handler SingleGridlayout type RUIhandler {initialUI = [ myGridLayout ]... }

   myGridLayout GridLayout{ 
      rows = 4, columns = 4, cellPadding = 4,
      children = [ Button3, Button1, Button2 ]
   };
   ...
end

Das Layout myGridLayout umfasst vier Zeilen, vier Spalten und eine 4-Pixel-Füllung um jede Zelle. Vier untergeordnete Elemente sind angegeben. Dabei ist die Reihenfolge, in der sie in der Feldgruppe children aufgelistet werden, nicht von Bedeutung. Wenn jedoch für mehrere Widgets layoutData-Werte angegeben sind, die den Widgets dieselbe Position zuweisen, wird das an erster Stelle in der Liste aufgeführte Widget angezeigt.

Für jedes Widget entspricht der Wert der Eigenschaft layoutData dem Typ ANY. Im Moment ist der Eigenschaft immer ein Datensatz des Typs GridLayoutData zugeordnet, der später beschrieben wird.

Der Datensatz myLayoutData ist der Eigenschaft layoutData der Schaltfläche Button1 zugeordnet. Hier die Datensatzdeklaration:
myLayoutData GridLayoutData{ row = 1, column = 2 };

Die für die Eigenschaft layoutData der Schaltflächen Button2 und Button3 erforderlichen Datensatzdeklarationen befinden sich in den Widgetdeklarationen. Es folgen die Deklarationen für alle drei Schaltflächen:

Button1 Button{ layoutData = myLayoutData, text = "Button1", onClick ::= respond };
Button2 Button{ layoutData = new GridLayoutData{ row = 2, column = 3 },
                text = "Button2" };
Button3 Button{ layoutData = new GridLayoutData{ row = 3, column = 4 },
                text = "Button3" };

Wenn ein Datensatz des Typs GridLayoutData der Eigenschaft layoutData eines Widgets zugeordnet ist, das in ein Rasterlayout eingebettet ist, müssen die Felder row und column des Datensatzes definiert sein und ihre Werte müssen für das Layout geeignet sein. Sie können jedoch der Eigenschaft layoutData den Wert null zuordnen. Dann wird das eingebettete Widget nicht angezeigt und nicht in die Berechnung von Breite und Höhe einbezogen, mit der das gesamte Layout angepasst wird.

Laufzeitaktualisierungen des Layouts

Sie können das Layout dynamisch aktualisieren. Beispiel: Durch das Klicken auf Button1 soll Folgendes angezeigt werden:

Rich-UI-Rasterlayout - Beispiel 2

Folgendes ist die Funktion, durch die diese Anzeige aufgerufen wird, wenn der Benutzer auf Button1 klickt:
function respond(e Event in)
   Button2.layoutData = null;
end	

Nachdem die Funktion respond ausgeführt wurde, umfasst die Höhe der zweiten Zeile und die Breite der zweiten Spalte nur die in der Definition des Rasterlayouts angegebene Füllung. Die dritte Schaltfläche Button3) wird nach oben links verschoben, aber ihre Position relativ zu Button1 bleibt unverändert.

Alternativ können Sie festlegen, dass durch das Klicken auf Button1 Folgendes angezeigt wird:

Rich-UI-Rasterlayout - Beispiel 3

Hier eine überarbeitete Funktion respond:
function respond(e Event in)
   myLabel TextLabel {text="replace button 2"};
   myLabel.layoutData = new GridLayoutData {row=2, column=3};
   Button2.layoutData = null;
   myGridLayout.appendChild(myLabel);
end	

In diesem Fall ist die Angabe von null für die Eigenschaft layoutData der Schaltfläche Button2 erforderlich, um den aktuellen Inhalt in Zeile 2, Spalte 3 zu ersetzen. Der neue Inhalt ist breiter und kürzer als Button2 und die dritte Schaltfläche wird nach oben rechts verschoben.

Geben Sie grundsätzlich immer null für die Eigenschaft layoutData eines Widgets an, das von dem Rasterlayout ausgeschlossen werden soll. Wenn Sie ein untergeordnetes Widget ersetzen, dass Spalten oder Zeilen umfasst, kann durch die Angabe von null für dieses Widget ein Laufzeitfehler verhindert werden.

Beispiel für mehrere Zeilen und Spalten umfassende Widgets und Ausrichtung

Betrachten Sie die folgende Benutzerschnittstelle:

Rich-UI-Rasterlayout - Beispiel 4 - Vorschau

Wie auf die Registerkarte 'Entwurf' des Rich-UI-Editors dargestellt, umfasst das Rasterlayout vier Zeilen und drei Spalten:

Rich-UI-Rasterlayout - Beispiel 4 - Entwurf

Betrachten Sie die folgenden Aspekte der Schnittstelle:
  • In Zeile 1 befindet sich die Bezeichnung in der ersten Spalte und das Textfeld erstreckt sich horizontal über die zweite und die dritte Spalte.
  • In Zeile 2 befindet sich das Kontrollkästchen in der zweiten Spalte, erstreckt sich jedoch vertikal bis zur dritten Zeile.
  • In Zeile 3 erstreckt sich die Schaltfläche horizontal von der ersten bis zur zweiten Spalte und ist mittig in diesen beiden Spalten ausgerichtet.
Hier der Rich-UI-Handler, der die Schnittstelle formatiert:
handler SingleGridlayout type RUIhandler {initialUI = [ myGridLayout ]... }

  myGridLayout GridLayout{ 
      rows = 4, columns = 3, cellPadding = 4,
      children = [ myLabel, myTextField, myCheckBox, myButton ]
   };

  myLabel TextLabel{ layoutData = new GridLayoutData{ row = 1, column=1},
                     text = "Label: " };

  myTextField TextField{ layoutData = new GridLayoutData{ row = 1, column = 2,
                         horizontalSpan = 2 }, text = "Text field"};
	
  myCheckBox CheckBox{ layoutData = new GridLayoutData{ row = 2, column = 2, 
                       verticalSpan = 2 }, text="Check box" };

  myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1,
                       horizontalSpan = 2, 
                       horizontalAlignment = GridLayoutLib.Align_Center }, 
                       text="Button" };
end

Im nächsten Abschnitt erhalten Sie Details zu den Feldern von GridLayoutData.

GridLayoutData

GridLayoutData enthält folgende Felder:
column
Eine ganze Zahl, die die Spalte angibt, die sich am weitesten links befindet und die die Widgets enthält.
cellPadding
Eine ganze Zahl, die die Anzahl der Pixel angibt, die sich am oberen, unteren, linken und rechten Rand des Bereichs befinden, den das Widget für sich reserviert hat.
heightHint
Eine ganze Zahl, die die Anzahl der Pixel in der Höhe des Bereichs angibt, den das Widget für sich reserviert. Der Wert dient als Hinweis für den Browser, der möglicherweise einen anderen Wert erzwingt. Beispielsweise wird in den folgenden Fällen ein höherer Bereich bereitgestellt:
  • Die Höhe des Widgets ist größer als der Wert von heightHint; oder
  • Die Höhe des Layoutrasters ist größer als die vorgeschlagene Höhe der Zeilen.
horizontalAlignment
Die horizontale Position des Widgets innerhalb der Spalten, die das Widget für sich reserviert. Einer der folgenden Werte:
GridLayoutLib.ALIGN_LEFT
An der linken Seite der Spalten.
GridLayoutLib.ALIGN_CENTER
In der Mitte der Spalten.
GridLayoutLib.ALIGN_RIGHT
An der rechten Seite der Spalten.
horizontalSpan
Die Anzahl der Spalten, die das Widget umfasst, einschließlich der im Feld column angegebenen Spalte.
row
Eine ganze Zahl, die die oberste Zeile des Layouts angibt, in der sich das Widget befindet.
verticalAlignment
Die vertikale Position des Widgets innerhalb der Zeilen, die das Widget für sich reserviert. Einer der folgenden Werte:
GridLayoutLib.VALIGN_TOP
Oben an den Zeilen.
GridLayoutLib.VALIGN_MIDDLE
In der Mitte der Zeilen.
GridLayoutLib.VALIGN_BOTTOM
Unten an den Zeilen.
verticalSpan
Die Anzahl der Zeilen, die das Widget umfasst, einschließlich der im Feld row angegebenen Zeile.
widthHint
Eine ganze Zahl, die die Anzahl der Pixel in der Breite des Bereichs angibt, den das Widget für sich reserviert. Der Wert dient als Hinweis für den Browser, der möglicherweise einen anderen Wert erzwingt. Beispielsweise wird in den folgenden Fällen ein breiterer Bereich bereitgestellt:
  • Die Breite des Widgets ist größer als der Wert von widthHint; oder
  • Die Breite des Layoutrasters ist größer als die vorgeschlagene Breite der Zeilen.

Feedback