Mit Responsive Design passen Sie Ihre Visualisierung an unterschiedlich große Bildschirme an. Jede Seite kann dazu bis zu drei Layouts haben: „Klein“, „Mittel“ und „Groß“. Zur Laufzeit zeigt der Viewer abhängig von der Fensterbreite das passende Layout. Das gilt für normale Seiten ebenso wie für Dialoge sowie Kopf- und Fußzeilen.
Layouts und Steuerelemente
Alle Layouts einer Seite teilen sich dieselben Steuerelemente. Ein Steuerelement, das Sie in einem Layout platzieren, gibt es auch in den anderen Layouts. Fast alle Eigenschaften haben aber je Layout einen eigenen Wert, zum Beispiel Position, Größe oder Visible. Brauchen Sie ein Steuerelement in einem Layout nicht, blenden Sie es dort über Visible aus oder verschieben es aus dem sichtbaren Bereich.
Für alle Layouts gleich sind bei Steuerelementen unter anderem Name und die CSS-Klassen, bei der Seite Name, IsDefault, ShowInNavigation, Title, Group, Header und Footer.
Löschen Sie ein Steuerelement auf einer Seite mit mehreren Layouts, weist der Editor darauf hin, dass es aus allen Layouts entfernt wird.
Layout wechseln
In der Leiste unter jeder Seite finden Sie links die „Layout-Auswahl“ mit je einem Symbol für das kleine, mittlere und große Layout. Das aktuell angezeigte Layout ist ausgefüllt und farbig hinterlegt, noch nicht angelegte Layouts erscheinen blass. Ein Klick auf ein Symbol wechselt zu diesem Layout.
Layout anlegen
Klicken Sie auf das Symbol eines noch nicht angelegten Layouts. Es öffnet sich das Fenster „Entwurfsgröße für neues Layout“:
- „Basis-Layout“: Aus diesem vorhandenen Layout übernimmt das neue Layout die Eigenschaftswerte der Seite und ihrer Steuerelemente, zum Beispiel Größen und Positionen.
- „Breite“ und „Höhe“: die Entwurfsgröße, also die Auflösung, in der Sie die Seite im Editor gestalten.
Mit „OK“ legen Sie das Layout an, mit „Abbrechen“ entsteht kein neues Layout. Welches Layout zur Laufzeit angezeigt wird, hängt nicht von der Entwurfsgröße ab, sondern von der Fensterbreite, siehe Welches Layout zur Laufzeit gilt.
Entwurfsgröße eines Layouts ändern
Wählen Sie das Layout aus und ändern Sie die Größe wie gewohnt über „Seitengröße ändern“, siehe Anlegen und verwalten. Die neue Größe gilt nur für das ausgewählte Layout.
Layout löschen
Klicken Sie mit der rechten Maustaste auf das Symbol des Layouts und wählen Sie „Löschen“. Nach einer Rückfrage wird das Layout entfernt, die Änderung lässt sich rückgängig machen. Das letzte Layout einer Seite lässt sich nicht löschen.
Welches Layout zur Laufzeit gilt
Maßgeblich ist die Breite des Fensters, in dem die Visualisierung läuft. In den Projekt Einstellungen legen Sie unter „Layout Grenzwerte (px)“ fest, ab welcher Fensterbreite ein Layout gilt. Voreingestellt sind Klein ab 200 px, Mittel ab 1000 px und Groß ab 1800 px. Das Zahnrad rechts neben der „Layout-Auswahl“ öffnet diese Einstellung direkt.
Der Viewer wählt das größte Layout, dessen Grenzwert die aktuelle Fensterbreite erreicht. Hat eine Seite dieses Layout nicht, zeigt sie ihr nächstkleineres Layout, gibt es keines, ihr nächstgrößeres. Beispiel: Eine Seite hat nur die Layouts Klein und Groß. Bei einer Fensterbreite von 1200 px gilt Mittel, die Seite zeigt deshalb ihr Layout Klein.
Ändert sich die Fensterbreite zur Laufzeit so, dass ein anderes Layout gilt, lädt der Viewer die Anzeige neu.
Eine Testseite, die die aktuelle Fensterbreite Ihres Geräts anzeigt, finden Sie hier: https://www.indi-an.com/de/quickhmi/responsive-breakpoints/
Responsive Design und „Fit“
Die Einstellung „Fit“ beim „Anfangszoomlevel“ in den Projekt Einstellungen verkleinert die angezeigte Seite, bis sie ins Fenster passt. Sie vergrößert die Seite aber nie und wirkt nicht auf Dialoge. Für Bildschirme, die sich stark in der Größe unterscheiden, sind eigene Layouts deshalb der bessere Weg, besonders bei Dialogen.
Lizenz
Mehrere Layouts setzen voraus, dass Ihre Lizenz Responsive Design enthält. Das ist bei den Editionen Community, Standard, Ultimate und Enterprise der Fall.
