App Layout

Das App Layout dient als Basis-Layout für Mate-Anwendungen.

Overview

Intro

Das App Layout dient als Basis-Layout für Mate-Anwendungen. Es stellt feste Bereiche für Global Header, Application Bar, Navigation Panel und die eigentliche Content Area der Anwendungen zur Verfügung. Es ist nicht dafür gedacht, innerhalb anderer Elemente platziert zu werden.

WARNING

Das App Layout ersetzt den ehemaligen SYNNeo AWR (siehe Dokumentation in Confluence ).

Technische Grundlage

Das App Layout besteht aus <vaadin-app-layout> und wird um das Mate-Addon <mate-app-layout-addon> ergänzt. Das Addon fügt die Mate-spezifischen Bestandteile hinzu: AKDB Logo, den Bereich für die Application Bar, die Icons zum Auf- und Zuklappen des Navigation Panels sowie die Leiste zum Verstellen seiner Breite.

Das Addon setzt voraus, dass es direkt innerhalb eines <vaadin-app-layout> platziert ist. Außerhalb dieses Elements bleibt es wirkungslos. Ohne das Addon fehlen alle genannten Bestandteile.

Verwendung

Das App Layout wird als äußerster Rahmen jeder Mate-Anwendung eingesetzt und umschließt alle weiteren Inhalte. Es wird pro Anwendung genau einmal verwendet und nicht innerhalb anderer Elemente platziert. Für die Aufteilung von Inhalten innerhalb des Inhaltsbereichs sind andere Layouts vorgesehen (siehe Split Layout und Master Detail Layout ).

Bereiche App Layout

Das App Layout besteht aus folgenden Bereichen:

• Global Header
• Application Bar
• Navigation Panel
• Content Area (Inhaltsbereich, in dem Anwendungsinhalte angezeigt werden können)

broken_image

Figma

App Layout

Guidelines

Aufbau

Das App Layout stellt die vier oben genannten Bereiche als feste Positionen bereit. Die Bereiche sind nicht frei anordenbar: Der Global Header liegt oben über die gesamte Breite, die Application Bar darunter am linken Rand, das Navigation Panel rechts neben der Application Bar und der Inhaltsbereich füllt die verbleibende Fläche.

Keiner dieser Bereiche ist ein fertiges, für sich lieferbares Element. Das App Layout ist die Kompositionswurzel: Es gibt vor, wo etwas liegt, und die Anwendung füllt die Bereiche mit Inhalten.

Zusammenspiel der Bereiche

Die folgende Übersicht ordnet für jeden Bereich zu, was aus dem Vaadin App Layout kommt, was das Mate Addon ergänzt und was die Anwendung selbst umsetzen muss.

Bereich	Vaadin App Layout	Mate App Layout Addon	Eigenleistung der Anwendung
Global Header (Bereich "navbar")	Stellt den Bereich bereit und positioniert ihn oben über die gesamte Breite.	Fügt das AKDB Logo und das Icon zum Auf- und Zuklappen des Navigation Panels ein. Das Logo ist austauschbar.	Anwendungs-, Modul- und Mandantenangabe sowie alle Icon-Tasten inklusive Application Switcher.
Application Bar	Nicht enthalten.	Stellt den Bereich bereit, positioniert ihn unter dem Global Header am linken Rand und legt seine Breite fest.	Der Inhalt des Bereichs: Tabs in der Theme-Variante "application-bar" mit vertikaler Ausrichtung, inklusive Icons und Modulzuordnung.
Navigation Panel (Bereich "drawer")	Stellt den Bereich bereit, verwaltet den Auf-/Zuklapp-Zustand und schaltet auf kleinen Bildschirmen in die überlagernde Darstellung um.	Ergänzt die Icons zum Auf- und Zuklappen und die Leiste zum Verstellen der Breite.	Der Inhalt des Bereichs: Modulname, Suchfeld und Menübaum. Siehe Navigation Panel - das Navigation Panel ist ein Muster, keine Komponente.
Content Area	Stellt den Bereich bereit und verschiebt bzw. staucht ihn passend zum Navigation Panel.	Keine Ergänzung.	Alle Anwendungsinhalte.

Eigenständige Nutzung und Abhängigkeiten

Bereich	Optional	Eigenständig nutzbar
Global Header	Ja. Ohne Inhalt im Bereich "navbar" entfällt der Global Header.	Nein. Nur als Bereich des App Layouts verwendbar.
Application Bar	Ja. Sie wird nur bei Anwendungen mit mehreren Modulen eingesetzt.	Nein. Nur als Bereich des App Layouts verwendbar.
Navigation Panel	Ja. Ohne Inhalt im Bereich "drawer" entfällt das Navigation Panel.	Nein. Als Muster nur im App Layout sinnvoll. Sein Menüteil, die Side Nav , ist dagegen eine eigenständige Komponente.
Content Area	Nein.	Nein.

Info für Dev

Das App Layout erkennt selbst, ob im Bereich "application-bar" Inhalt vorhanden ist, und stellt die Bedienung des Navigation Panels darauf um. Es ist also nicht nötig, dies zusätzlich zu konfigurieren.

Die Beschriftungen der Icons zum Auf- und Zuklappen für Screenreader werden nicht automatisch gesetzt. Sie müssen über die Internationalisierung des Mate App Layout Addons befüllt werden.

Vaadin bietet für das App Layout darüber hinaus einen zweiten, für Touch-Geräte optimierten Navigationsbereich am unteren Bildschirmrand sowie die Möglichkeit, den Bereich "navbar" neben statt über dem Bereich "drawer" anzuordnen. Beides wird vom Mate App Layout Addon nicht verwendet; im Design System sind dafür keine Muster definiert.

Verhalten

Auf- und Zuklappen des Navigation Panels

Wo das Navigation Panel auf- und zugeklappt wird, hängt davon ab, ob eine Application Bar vorhanden ist:

• Mit Application Bar: Im geöffneten Navigation Panel befindet sich unten ein Icon zum Zuklappen. Ist das Panel zugeklappt, erscheint das Icon zum Aufklappen unten am rechten Rand der Application Bar. Das Icon im Global Header wird nicht angezeigt.
• Ohne Application Bar: Das Navigation Panel wird über das Icon im Global Header ein- und ausgeblendet. Es wechselt dabei zwischen dem Hamburger- und dem Schließen-Symbol. Die Icons im Panel selbst werden nicht angezeigt.

Breite des Navigation Panels

Zwischen Navigation Panel und Inhaltsbereich liegt eine Leiste, mit der die Breite des Panels durch Ziehen mit der Maus verstellt werden kann. Die Leiste wird nur angezeigt, solange das Navigation Panel geöffnet ist. Während des Ziehens wird sie farblich hervorgehoben.

Die eingestellte Breite wird nicht dauerhaft gespeichert. Sie gilt nur für die aktuelle Ansicht.

States

Navigation Panel geöffnet

Das Navigation Panel liegt links neben dem Inhaltsbereich und verschiebt diesen nach rechts. Die Leiste zum Verstellen der Breite ist sichtbar.

Navigation Panel zugeklappt

Der Inhaltsbereich nimmt die gesamte Breite ein. Ist eine Application Bar vorhanden, bleibt diese sichtbar.

Überlagernde Darstellung

Auf kleinen Bildschirmen legt sich das Navigation Panel über den Inhaltsbereich und wird mit einem Schatten sowie einer Abdunklung des Hintergrunds dargestellt.

Responsives Verhalten

Auf kleineren Bildschirmen (z.B. Tablet-Größe) wechselt das Navigation Panel in eine überlagernde Darstellung: Es wird nur temporär eingeblendet und legt sich über den Inhaltsbereich, statt ihn zu verschieben. Die Leiste zum Verstellen der Breite bleibt dabei verfügbar, solange das Panel geöffnet ist.

Die Umschaltung nimmt das App Layout anhand der verfügbaren Breite selbst vor; sie muss von der Anwendung nicht ausgelöst werden. Ein konkreter Umschaltpunkt ist im Design System nicht festgelegt.

Das responsive Verhalten des Global Headers ist beim Global Header beschrieben.

Barrierefreiheit

Tastaturbedienung

Die Bereiche des App Layouts werden in ihrer Reihenfolge über die Tabulatortaste ("Tab") und Hochstell- und Tabulatortaste ("Shift" + "Tab") erreicht. Die Icons zum Auf- und Zuklappen des Navigation Panels sind fokussierbar und können mit Eingabetaste ("Enter") oder Leerzeichentaste ("Space") ausgelöst werden.

Die Leiste zum Verstellen der Breite des Navigation Panels ist nur mit der Maus bedienbar. Eine Bedienung über die Tastatur ist im Design System dafür aktuell nicht vorgesehen.

Über eine Fokusfalle in der überlagernden Darstellung und über das Zuklappen des Navigation Panels mit der Escape-Taste liegen im Design System keine gesicherten Informationen vor.

Gründe für das Design

Argumente

Warum sind Global Header, Application Bar und Navigation Panel keine eigenständigen Komponenten, sondern Bereiche des App Layouts?

Argumente für die Lösung

* Die Bereiche sind voneinander abhängig. Ob eine Application Bar vorhanden ist, bestimmt die Position des Bedienelements für das Navigation Panel und die Breite des Panels. Diese Abhängigkeiten lassen sich nur an einer Stelle konsistent auflösen. * Die Anwendungen unterscheiden sich stark in dem, was in diesen Bereichen steht - Anzahl der Icon-Tasten, Modulstruktur, Menübaum. Vorgegeben wird deshalb die Position, nicht der Inhalt. * Eine Anwendung hat genau ein App Layout. Eigenständige Komponenten für Bereiche, die nur einmal und nur an einer festen Position vorkommen, hätten keinen zusätzlichen Nutzen.