Alles eine Frage der Auslegung

Im vorherigen Teil dieser Reihe, rund um das Control SimpleForm, blieben noch einige Fragen offen. Eine dieser Fragen war das wichtige Attribut layout. Dieses Attribut steuert so viele Eigenschaften des Formulars, dass ich ihn nun einen eigenen Teil widmen möchte.
Unterstützt werden von der SimpleForm drei mögliche layout-Typen:

• GridLayout
• ResponsiveLayout
• ResponsiveGridLayout

Im Kern bringt jedes Layout eigene Regeln mit, nach denen die Elemente eines Formulares angeordnet und ggf. umgebrochen werden sollen. Ein ein ganz typischer Auslöser kann hier die Darstellung des Formulars auf einem mobilen Endgerät sein. Die folgenden Kapitel zeigen nun das Verhalten von jedem Typ auf Basis des unten gezeigten Formulars. Das Coding ist eine leicht erweiterte Version des Beispiels aus dem vorherigen Beitrag.

<core:FragmentDefinition xmlns="sap.m" xmlns:f="sap.ui.layout.form" 
  xmlns:core="sap.ui.core">
  <f:SimpleForm editable="true" >
   <f:content>
    <core:Title text="Besteller"/>
    <Label text="Vorname" design="Bold"/>
    <Input />
    <Label text="Nachname" design="Bold"/>
    <Input />
    <core:Title text="Adresse"/>
    <Label text="Straße, Nr," design="Bold"/>
    <Input />
    <Input />
    <Label text="Stadt" design="Bold"/>
    <Input />
 [...]

Ich werde also nur das Attribut layout ändern und jeweils zeigen, wie sich das Control zur Laufzeit bei unterschiedlichen Display-Größen verhalten wird.

[...]
 <f:SimpleForm editable="true" layout="Respon..." >
[...]

GridLayout

Das GridLayout behält die programmierte 2×2-Anordnung der Felder bei jeder Größe bei. Es eignet sich meiner Meinung nach für Fiori, die ein streng festgelegtes Aussehen beibehalten müssen oder nicht auf mobilen Geräten zum Einsatz kommen sollen. Die maximal gewünschte Anzahl von Spalten kann mit dem Attribut maxContainerCols festgelegt werden.

ResponsiveLayout

Das ResponsiveLayout beginnt ebenfalls mit der 2×2-Anordnung, wechselt aber bei abnehmender Größe in ein einspaltiges Layout. Nach Bedarf reduziert es zudem den horizontal genutzten Raum der Label Controls. Dieses Layout würde ich für Fiori einsetzen, die auf unterschiedlichen Gerätetypen zum Einsatz kommen und ich mich beim Anordnen der Felder ganz auf das SAPUI5 Framework verlassen darf.

ResponsiveGridLayout

Das ResponsiveGridLayout verhält sich anders, wie die beiden zuvor gezeigten. Ohne irgendwelche weiteren Einstellungen erhalte ich mit dieser Einstellungen folgendes Formular:

Die Idee des ResponsiveGridLayout kann mit “gesteuerte Flexibilität” beschrieben werden. Während das GridLayout seine Form beibehalten möchte und das ResponsiveLayout wiederum völlig frei die Felder anordnet, kann das ResponsiveGridLayout umfassend nach den Vorstellungen des Entwicklers konfiguriert werden. Dabei können zwischen kleinen, mittleren, großen und sehr großen Displays unterschieden werden. Ich erweitere mal das Demo-Coding um die Anweisung, bei mittleren Displays ein Zwei-Spalten-Layout zu versuchen. In Fall dieses Blogs entsprach das Display einer mittleren Größe, daher musste ich das Attribut columnsM setzen.

[...]
 <f:SimpleForm editable="true" layout="ResponsiveGridLayout" 
  columnsM="2" >
[...]

Sofort organisiert das ResponsiveGridLayout die Felder entsprechend um.

Wie reagiert das Control nun beim Ändern des Screens?

Beim Ändern der Größe tritt nun ebenfalls ein Wechseln auf, wenn die simulierte Größe der Anwendung zu gering wird. Auffällig ist, dass die zwei Felder für “Straße, Nr.” recht plump umgebrochen werden. Hier sind weitere Einstellungen notwendig, die ich aber lieber gesondert in einem eigenen Beitrag beschreiben möchte.

Alles oder Nichts

Zusammengefasst kann man ein SimpleForm mittels des layout-Attribut aus zwei Arten betreiben:

1. nahezu Konfigurationsfrei (Grid & Responsive)
2. nach Bedarf Konfiguriert (ResponsiveGrid)

Grid & Responsive versprechen schnelle Ergebnisse und ResponsiveGrid wiederum mehr Kontrolle für den Entwickler. Ein Blick in das SDK zeigt auch, dass die meisten Attribute des SimpleForm erst für den Typ ResponsiveGridLayout greifen. Genau hier, bei den umfassenden Einstellungsmöglichkeiten für das ResponsiveGridLayout, möchte ich nun einen Brake setzen und im kommenden Beitrag dieser Reihe behandeln c[_]

Du interessierst dich für Fiori und hast Lust coole Projekte mit uns zu machen? Wir suchen dich! Schau doch mal in unserer Stellenbeschreibung vorbei.