Formularassistent - Layout
Modul Applikationen
Applikationsstruktur / Seite markieren
Hauptmenü Neu / Formularassistent
Über den Formular-Assistenten werden auf die umgebende Gruppierung
Styleklassen geschrieben, die Auswirkungen auf die Anordnung der
Elemente und der zugehörigen Titel in der Gruppierung haben. Im Dialog
sehen Sie rechts neben den vier möglichen Optionen jeweils eine Vorschau.
Option 1
In allen Ausgabegrößen (
SMALL, MEDIUM, LARGE)
werden die Titel ausgeblendet und – sofern vorhanden – Platzhalter angezeigt.
Die Einstellung
Titel in Kontrolle anzeigen,
die Sie in den
Eigenschaften
von Eingabelementen erreichen, wird dabei vom Formularassistent
automatisch gesetzt.
Hier die Ansicht im Web:
Option 2
In allen Ausgabegrößen werden Titel und Eingabeelemente in einer eigenen
Reihe untereinander dargestellt. Hier die Ansicht im Web:
Option 3
Auf kleinen Displays werden die Titel ausgeblendet und dafür wie in Option 1
Platzhalter angezeigt. Auf mittleren und großen Bildschirmen werden Titel und
Eingabeelement wie in Option 2 in jeweils eigenen Zeilen gerendert. Hier
die Ansicht im Web für eine kleine Bildschirmgröße:
Option 4
Auf kleinen Displays werden die Titel ausgeblendet und dafür eventuell
vorhandene Platzhalter angezeigt. Auf mittleren Bildschirmen werden Titel
und Eingabeelemente in eigenen Reihen angezeigt. Auf großen Bildschirmen
werden Titel und zugehöriges Eingabeelement nebeneinander dargestellt.
Hier die Ansicht im Web für große Bildschirme:
Ansichtsseiten
Auf Ansichtsseiten werden keine Platzhalter in den Ansichtselementen
angezeigt. Statt dessen werden hier die Titel ggfs. tatsächlich ausgeblendet.
Styleklassen
Weitere Kombinationen können durch manuelle Angabe der Styleklassen erzeugt
werden. Die folgenden Styleklassen sind für Eingabe- bzw. Ansichtselemente
innerhalb einer vom Formularassistenten erzeugten Gruppierung definiert.
Die Styleklasse
Container_ResponsiveForm, die
Ausgangsklasse für die Gruppierungen, muss vorhanden sein, damit die
ix-ViewPort-label-Position Klassen greifen.
- ix-small-label-inline
- ix-small-label-hidden
- ix-small-label-top
- ix-small-label-left
- ix-medium-label-inline
- ix-medium-label-hidden
- ix-medium-label-top
- ix-medium-label-left
- ix-large-label-inline
- ix-large-label-hidden
- ix-large-label-top
- ix-large-label-left
Die Styles vererben sich dabei von der kleineren zur größeren Displaygröße,
also von
SMALL nach
MEDIUM und von
MEDIUM nach
LARGE. Um z.B. Option 1 abzubilden, schreibt der Formularassistent
die Styleklasse
ix-small-label-inline auf
die
Container_Responsive Gruppierung, für
Option 3 wird zusätzlich noch
ix-medium-label-top
geschrieben, um die Einstellungen für mittlere und große Bildschirme wieder
zu überschreiben. Es wäre aber auch denkbar, z.B. mit der Klasse
Container_ResponsiveGroup ix-small-label-left
eine Gruppierung anzulegen, in der Titel und Eingabeelemente auf kleinen
Bildschirmen immer nebeneinander dargestellt werden.
Die zuletzt gewählte Layout-Option für den jeweiligen Typ (z.B. div-Layout
Eingabeseite) wird in der Datei
manager.properties
gespeichert.