Responsive Forms

Es ist möglich die Konfiguration der Forms Komponenten responsive zu gestalten. Dies bedeutet, dass die Konfiguration je nach Größe des Anzeigebereichs anders ausfallen kann. Dies ist z.B. bei Verwendung unterschiedlicher Geräte wie Desktop, Tablet und Smartphone möglich.

Die Konfiguration reagiert dynamisch auf Änderungen des Anzeigebereichs. So kann sich z.B. die Konfiguration beim Maximieren des Browserfensters ändern. Ein etwas komplexeres Beispiel, was dynamisch auf den Anzeigebereich reagiert ist hier zu finden.

Es ist zwar so möglich auf fast alle Konfigurationen Einfluss zu nehmen, aber sinnvollerweise sollte dies nur auf Konfigurationen angewendet werden, die das Layout bestimmen. Diese sind z.B. layout, minWidth, minHeight, width, height, maxWidth, maxHeight, flex und labelAlign.

Syntax

Um die Konfiguration von einzelnen Parametern responsiv zu gestalten, ist in der Komponente das Attribut responsiveConfiguration einzufügen. Als Wert wird ein Objekt angelegt, dass wiederum einzelne Bedingungen enthält und passend dazu weitere Komponenten Konfigurationen enthält.

Eine Bedingung besteht aus einem gültigen JavaScript Ausdruck. Dabei kann auf folgende Variablen zugegriffen werden:

landscape: Wahr, wenn das Gerät im Querformat ausgerichtet ist (auf Desktop-Geräten immer wahr).
portrait: Wahr, wenn das Gerät im Hochformat ausgerichtet ist (auf Desktop-Geräten immer falsch).
tall: Wahr, wenn Breite < Höhe, unabhängig vom Gerätetyp.
wide: Wahr, wenn Breite > Höhe, unabhängig vom Gerätetyp.
width: Die Breite des Ansichtsfensters in Pixeln.
height: Die Höhe des Ansichtsfensters in Pixeln.
phone: Wahr bei Smartphones.
tablet: Wahr bei Tablets.
desktop: Wahr bei Desktopgeräten.
touch: Wahr bei Geräten mit Touch-Support.
safari: Wahr bei Safari Browser.
chrome: Wahr bei Chrome Browser.
firefox: Wahr bei Firefox Browser.
ios: Wahr bei iPad, iPhone and iPod.
android: Wahr bei Android Betriebssystem.
windows: Wahr bei Windows Betriebssystem.
blackberry: Wahr bei Blackberry Betriebssystem.
tizen: Wahr bei Tizen Betriebssystem.

Beispiel für komplexe Bedingungen

 "responsiveConfiguration": {
     "desktop || width > 800": {
         "width": 400
     },

     "!(desktop || width > 800)": {
         "width": 300
     }
 }

In folgendem Beispiel wird das Layout des Containers abhängig von der verfügbaren Breite zwischen horizontal und vertical getauscht.

Beispiel

{
    "layout": "horizontal",
    "responsiveConfiguration": {
        "width >= 500": {
            "layout": "horizontal"
        },
        "width < 500": {
            "layout": "vertical"
        }
    },
    "components": [
        {
            "flex": 2,
            "id": "street",
            "label": {
                "de": "Straße",
                "en": "Street"
            },
            "type": "textfield",
            "value": "/data/street"
        },
        {
            "flex": 1,
            "id": "streetNumber",
            "label": {
                "de": "Nr.",
                "en": "No."
            },
            "type": "textfield",
            "value": "/data/streetNumber"
        }
    ],
    "type": "container",
    "maxWidth": 500
}

Weiterführende Informationen

Weitere Details können unter in der Dokumentation des eingesetzen Frameworks nachgeschlagen werden.

Die in der Dokumentation angegebene Konfiguration unter responsiveConfig muss, wie oben angegeben, unter responsiveConfiguration angegeben werden.

Keywords: