Show TOC

FormLayoutLocate this document in the navigation structure

Verwendung

Ein FormLayout kann aus mehreren "Zeitungsseiten" bestehen, wie dieses Beispiel mit zwei "Seiten" zeigt:

FormLayout

Diese "Zeitungsseiten" werden nebeneinander angezeigt. Falls Sie mit der Tab-Taste durch das FormLayout navigieren, werden zuerst von oben nach unten die UI-Elemente einer "Seite" durchlaufen und dann diejenigen der rechts davon befindlichen "Seite" usw.

Falls Sie eine neue "Seite" beginnen möchten, hängen Sie einfach an ein UI-Element ein FormTopData als LayoutData an (im obigen Beispiel ist das der Fall für die SectionHeader mit dem text General Data und Processing Data). In jede dieser "Seiten" existiert ein festes unsichtbares Gitter, dessen Spaltenanzahl durch die Eigenschaft FormTopData.colCount bestimmt wird. Es ähnelt daher dem GridLayout. Ähnlich wie dort können Sie durch die Eigenschaft FormData.colSpan für jede Layoutzelle bestimmen, wie breit sie ist, und zwar wird die Breite in Vielfachen von Spaltenbreiten angegegeben. Anders als beim GridLayout- und ähnlich wie beim MatrixLayout- wird eine neue Zeile durch das Benutzen des Layoutdatums FormHeadData angefangen (z.B. ist dies der Fall für das Label Purchase Or… im obigen Beispiel).

Standardmäßig besitzt ein FormLayout den Stil 8:1, d.h. es gibt eine Hauptspalte mit 8 untergeordneten Spalten. Im Gegensatz zu anderen Layouts, werden im FormLayout Inhalte, die größer als die Layoutzellen sind, abgeschnitten. Mehr Informationen dazu finden Sie unter Abschneiden von Inhalten im FormLayout.

Abschneiden von Inhalten

Bei Labels im FormLayout wird je nach Größe des Browser-Fensters und abhängig vom verwendeten Browser der Text abgeschnitten (Truncation) bzw es werden Auslassungspunkte (Ellipsis) angezeigt.

Hinweis

Wenn in einem FormLayout bei einem Label vor einem UI-Element der required-Stern (Eigenschaft state.required) auf der rechten Seite vom Label steht und das Browser-Fenster zu klein (zu schmal) ist, wird im Rahmen des Abschneiden der Inhalte auch der required-Stern "abgeschnitten". Daher empfehlen wir, im FormLayout den required-Stern mit Hilfe des URL-Parameters WDUIGUIDELINE=GL20 auf die linke Seite des Label zu verschieben.

Da Texte im FormLayout abgeschnitten werden können, ist es besonders wichtig, die Tooltips zu pflegen. Es empfiehlt sich hier, den Text z.B. nochmals als Tooltip anzuzeigen.

Weitere Informationen: Abschneiden von Inhalten im FormLayout

Einschränkungen

  • Beachten Sie, dass zur Zeit lediglich die Layout-Varianten 8:1, 16:1 und 16:2 unterstützt werden.

  • Beachten Sie, insbesondere bei der dynamischen Programmierung, dass die Breite (Eigenschaft width) der UI-Elemente im FormLayout immer 100% sein soll. 100% ist auch der Standardwert für UI-Elemente im FormLayout. Nur in Ausnahmefällen, wie z.B. bei Bildern, kann es Sinn machen, den Standardwert zu verändern.

  • Es werden keine aktiven UI-Elemente im FormLayout unterstützt, d.h. keine UI-Elemente, die von AbstractActiveComponent, AbstractApplet oder AbstractGenericActiveCompoment erben.

  • Achten Sie darauf, in der vertikalen Ausrichtung ( vAlign) kein baseline zu verwenden. Der Standardwert ist top und sollte nicht verändert werden.

  • Achten Sie darauf, in einem FormLayout keinen Container mit FlowLayout einzubetten. In dieser Kombination ist ein automatischer Zeilenumbruch nicht unterstützt.

Achtung

Beachten Sie, insbesondere bei der dynamischen Programmierung, dass das erste UI-Element in einem FormLayout immer vom Typ FormTopData sein muss. Ist dies nicht der Fall, kommt es zu einem Kurzdump.

Berechnung der Spaltenverteilung

Die Verteilung der Spalten im FormLayout geschieht auf der Grundlage der folgenden Berechnungsformeln. Als Beispiel steht die Compoment WDR_TEST_FORM_LAYOUT im System zur Verfügung.

In diesem Beispiel ist der Bildschirm in zwei Gruppen aufgeteilt: links die Gruppe Visibility und rechts davon das 8 zu 1 FormLayout. Über die CheckBox es links können Sie die Sichtbarkeit der UI-Elemente rechts steuern. Das zu testende FormLayout rechts ist in 8 Spalten eingeteilt Die Verteilung der Spalten basiert auf den folgenden Berechnungen.

Grundregel bei 8 zu 1:

  • Label s werden die drei ersten Spalten zugeordnet.

  • Die restlichen fünf Spalten werden auf die weiteren UI-Elemente (hier: InputField s) verteilt.

Detailregeln bei 8 zu 1:

Wenn bei der Division der restlichen fünf Spalten durch die Anzahl der UI-Elemente (hier: InputField s) ein Rest bleibt, dann wird jedem UI-Element auf jeden Fall die Größe des ganzzahligen Teils der Division zugeordnet. Zusätzlich wird der Rest gleichmäßig auf die UI-Elemente von links nach rechts verteilt, wobei jedes UI-Element eine zusätzliche Spalte erhält.

Beispiel

WDR_TEST_FORM_LAYOUT:

  • Erste Zeile:

    Label1= 3 Spalten   -> 8 Spalten - 3 Spalten = 5 Spalten

    5 Spalten / 1 UI-Element = 5 Spalten für UI-Element

    => Label1 bekommt 3 Spalten und InputField1 bekommt 5 Spalten.

  • Zweite Zeile:

    Label2= 3 Spalten   -> 8 Spalten - 3 Spalten = 5 Spalten

    5 Spalten / 2 UI-Elemente = 2 Spalten pro UI-Element + 1 Spalte Rest

    InputField2= 2 Spalten + 1 Spalte Rest (also insgesamt 3 Spalten)  -> Rest = 0

    InputField3= 2 Spalten

    => Label2 bekommt 3 Spalten und InputField2 bekommt 3 Spalten und InputField3 bekommt 2 Spalten.

  • Dritte Zeile:

    Label3= 3 Spalten   -> 8 Spalten - 3 Spalten = 5 Spalten

    5 Spalten / 3 UI-Elemente = 1 Spalte pro UI-Element + 2 Spalten Rest

    InputField4= 1 Spalte + 1 Spalte Rest (also insgesamt 2 Spalten)  -> Rest = 1

    InputField5= 1 Spalte + 1 Spalte Rest (also insgesamt 2 Spalten)  -> Rest = 0

    InputField6= 1 Spalte

    => Label3 bekommt 3 Spalten und InputField4 und InputField5 bekommen jeweils 2 Spalten und InputField6 bekommt 1 Spalte.

  • Wenn Label3 ausgeblendet wird ( visible = none), dann ist die Berechnung folgendermaßen:

    8 Spalten / 3 UI-Elemente = 2 Spalten pro UI-Element + 2 Spalten Rest

    InputField4= 2 Spalten + 1 Spalte Rest (also insgesamt 3 Spalten)  -> Rest = 1

    InputField5= 2 Spalten + 1 Spalte Rest (also insgesamt 3 Spalten)  -> Rest = 0

    InputField6= 2 Spalten

    => InputField4 und InputField5 bekommen jeweils 3 Spalten und InputField6 bekommt 2 Spalten.

Implementierungsdetails

Laufzeit-Klasse

CL_WD_FORM_LAYOUT

Name

Typ

Anfangswert

Bindbar

id

STRING

(automatisch)

nein

Weitere Eigenschaften, die über Vererbung zur Verfügung stehen, sind in den dazugehörigen übergeordneten Klassen definiert. Die dazugehörigen Oberflächenelemente sind:

Dynamische Programmierung

Für die dynamische Programmierung stehen dieselben Eigenschaften, Ereignisse und Aggregationen zur Verfügung wie im View Designer. Beachten Sie dabei die unterschiedlichen Schreibweisen.

Beispiel

Sie finden ein Beispiel zum Testen im System in der Component WDR_TEST_FORM_LAYOUT sowie in der Component DEMO_HRMNZDUI_EDIT_PAGE.