Layouts, Sichten, Konfiguration und Navigation

Neben der klassischen Variante, eine Oberfläche aus untereinander verketteten Vollbildern aufzubauen, unterstützt PROCON-WEB ein Konzept, bei dem eine allgemeingültige Bildstruktur in Form eines Layouts vordefiniert wird, dessen Bereiche als Container die eigentlichen Bildinhalte aufnehmen. Dabei werden die Bilder nicht einzeln definiert und untereinander verkettet, sondern nur Bildinhalte angelegt und mittels einer Navigationstabelle die gewünschten Bildkonstellationen zusammengestellt.

Die Abbildung zeigt das Konzept zu Layout und Container mit konfigurierter Navigation: Für jeden Gerätetyp (die größtenteils automatisch erkannt werden können) wird ein oder mehrere Layouts angelegt. Diese strukturieren den Bildaufbau, ähnlich wie man es von einer Website kennt.

Die Struktur des Layouts ergibt sich über die dort eingebrachten Container, die entweder Bild- oder Navigationsbereiche kennzeichnen und später die dazu passenden Elemente aufnehmen können.

In das Layoutbild können direkt Bildelemente z.B. für eine Statuszeile – die für alle Bilder gleich sein sollen – eingebracht werden.

Über die Navigationstabelle werden jetzt viele Bilder (Sichten) festgelegt, die jeweils eines der gerätespezifischen Layouts nutzen, die zur Selektion des Bildes notwendigen Navigationselemente benennen und dann den zugehörigen Inhalt für die Navigationscontainer festlegen.

Was ist der Nutzen dieser Vorgehensweise, die verwaltungstechnisch aufwändiger als herkömmlich verlinkte Einzelbilder ist?

Im ganzen Projekt wird ein einheitlicher Bildaufbau verwendet

Durch die Trennung von Bildinhalten und Navigation können bestehende Bilder in unterschiedlichen Kontexten und für unterschiedliche Endgeräte (weil Container skalieren) genutzt werden

Die Erstellung einer neuen Maschinenvariante mit einigen wenigen abweichenden Bilder ist viel leichter durchzuführen, weil nur die Einträge in der Navigationstabelle anzupassen sind und die komplette Navigation ist aktualisiert

Allgemeines

Die Layouts, auch Layout-Varianten genannt, werden für eine Navigation benötigt. Sie stellen zusammen mit den Containern eine grundlegende Struktur für die Sichten dar.

In der Konfiguration der Sichten wird definiert, wie das spätere Gesamtbild aus den einzelnen Elementen aufgebaut wird. Das Anwählen der Sichten in der Laufzeit geschieht über die Navigation.

Important

Ist im Projekt eine Smartphone Ansicht konfiguriert worden, kann diese auch auf dem PC ohne Smartphone kontrolliert werden. Zu der Smartphone Ansicht gelangt man über folgenden Link: http://localhost/index\_smartphone.htm

Layouts und Container

Layouts stellen die Basis für das Sichten- und Navigationskonzept dar. Ein Layout definiert u.a. über Container wo die Teilbilder im Gesamtbild positioniert werden.

Ein Layoutbild kann mehrere Layouts enthalten, ein Container kann mehreren Layouts zugewiesen werden. So muss man z.B. ein Container für eine Statusleiste nur einmal definieren und kann diesen in mehreren Layouts benutzen.

Important

Sobald ein Bild einen Container enthält wandert es im Projektbaum unter den Knoten Start -/ Layoutbilder. Wird ein Container in ein Bild gezogen, so wird automatisch auch eine Layout-Variante erstellt, falls in dem Bild noch keine vorhanden ist. Wird ein Container in ein Bild gezogen, wird dieser automatisch dem ersten Layout zugeordnet.

Konfiguration & Navigation

Unter „Konfiguration & Navigation“ wird die Navigation und somit auch die Konfiguration der Sichten des Projektes festgelegt.

Die Navigation lässt sich global für alle Endgeräte, oder bei Bedarf getrennt nach Geräteklassen bzw. für ein bestimmtes Gerät erstellen. Hierbei können auch unterschiedliche Sichten für eine normale oder gedrehte Ausrichtung des Gerätes angelegt werden.

Neben dem Anlegen der Sichten im Navigations-Grid erlaubt die Vorschau oben rechts auch eine visuelle Navigation durch das Projekt. D.h. durch klicken auf die Navigations-Elemente im Bild wird die entsprechende Navigation durchgeführt und die Sicht umgeschaltet. Beim Klick ins Bild wird ebenfalls der entsprechende Container im Grid markiert.

Ein Doppelklick auf eine Stelle in der Vorschau öffnet das darunterliegende Bild in der Bildmontage. Ist die Option „Highlight Container“ aktiviert, so wird in der Vorschau der aktuell im Grid ausgewählte Container farblich hervorgehoben.

Layout - Projektierungsbeispiel

Anlegen von Containern

Ein Container wird über den Ribbon-Tab „Bildbearbeitung“ angelegt.

Der erste Container soll beispielsweise ein vertikaler Navigationscontainer werden. Der Container wird nun entsprechend benannt und auf die linke Seite gezogen. Es soll die erste Navigationsebene darstellen, das heißt es ist die Hauptnavigation.

Im Klassendialog wird der Container-Typ hierfür auf „Navigation“ umgestellt und in die Navigationsebene wird eine 1 eingetragen.

Über den Abstand lässt sich der Abstand der Navigationselemente zueinander im Container bestimmen. Jetzt wird ein zweiter Container mit dem Container-Typ „Navigation“ erstellt und als zweite Navigationsebene im horizontalen Bereich rechts oben neben der vertikalen Navigation angeordnet. Diese zweite Navigation wird ihren angezeigten Inhalt je nach Auswahl in der 1. Navigationsebene ändern können.

Zuletzt wird noch ein Bildcontainer angelegt, der seinen Inhalt je nach Auswahl in den Navigationen ändern kann. Dieser füllt die Fläche unterhalb der horizontalen Navigation aus. Dafür wird im Container-Typ „Bild“ ausgewählt. Für den Bild-Container wird die „Anordnung“ „Gefüllt“ gewählt, da das Bild in seiner vollen Größe in dem Container zu sehen sein soll.

Das Bild mit den Containern und evtl. ein Logo in der oberen Linken Ecke könnte dann folgendermaßen aussehen:

Anlegen eines neuen Layouts

Oft kann es notwendig sein, den auf dem Bildschirm dargestellten Inhalt für verschiedene Sichten anders zu unterteilen. Um dies zu bewerkstelligen, kann man weitere Layout-Varianten definieren.

Hierzu werden zunächst weitere Bildcontainer definiert, wie im vorherigen Kapitel beschrieben. In unserem Beispiel werden zwei zusätzliche Bildcontainer erstellt, die nebeneinander liegen und jeweils halb so breit sind wie der erste Bildcontainer.

Das Erstellen, Löschen oder Kopieren von Layout-Varianten geschieht über das Kontextmenü auf dem Bild.

Wenn dies geschehen ist, kann dem Layout über das Eigenschaftsfenster ein anderer Namen vergeben werden.

Über den Dialog des Feldes „Instanzwert“ können nun die Container ausgewählt und dem Layout hinzugefügt werden.

Rechts in der Toolbox lassen sich über den Tab Layouts die einzelnen Layouts sichtbar und unsichtbar schalten um diese besser überprüfen zu können.

Anlegen von Bildern

Bevor man nun endgültig mit der Definition der Navigation beginnen kann, müssen noch einige Bilder angelegt werden die später die Container befüllen.

Es werden hier im Beispiel möglichst einfache Bilder angelegt um das Prinzip der Navigation darzustellen. Zunächst werden zwei Navigationselement (Bilder) für die Hauptnavigation und zwei Navigationselemente für die Subnavigation angelegt. Diese haben jeweils die Große 100x100 mit einem statischen Text in der Mitte.

Anschließend werden noch die Bilder für die Bildcontainer in der entsprechenden Größe angelegt.

Anlegen einer Navigation

Um eine neue Navigation anlegen zu können, muss zunächst „Konfiguration & Navigation“ im Projektbaum geöffnet werden. Dieser Bereich ist so aufgeteilt, dass man für verschiedene Gerätetypen (Standard, Tablet, Smartphone, …) jeweils eine eigene Navigation anlegen kann, die für dieses Gerät angepasst ist. Lediglich für den Gerätetyp Standard, hat man die Möglichkeit, eine Touch-Eingabe zu konfigurieren. Zudem lassen sich die Layouts getrennt nach „normal“ und „gedreht“ definieren.

Die verschiedenen Gerätetypen lassen sich im oberen linken Bereich definieren und anpassen.

Auf der oberen rechten Seite wird die Vorschau der gewählten Sicht der Navigation angezeigt.

In der unteren Tabelle wird die eigentliche Navigation definiert.

Über das Kontextmenü der ersten Zeile im unteren Bereich lässt sich eine neue Navigation anlegen

Ist in dem gewählten Startbild für den Gerätetyp ein Layout definiert, wird im nächsten Schritt ein Layout ausgewählt.

Anschließend wird das untere Grid anhand der im Layout gefunden Informationen und Containern aufgebaut. So werden u.a. die Namen der Container als Spaltenüberschrift eingetragen.

Im nächsten Schritt werden nun die Container „C_NE“, und „C_Content“ mit den entsprechenden Bildern gefüllt. Für jede Sicht wird hierbei eine eigene Zeile über „Neue Navigation“ definiert.

Die Vorschau oben rechts wird entsprechende der gewählten Sicht und befüllten Containern aktualisiert. In unserem Beispiel werden nun drei Sichten mit den verschiedenen Layouts definiert und befüllt. Das Ergebnis könnte anschließend so aussehen:

Die Reihenfolge wird durch den Index der Navigationselemente bestimmt und somit auch das Aussehen der Sichten. Änderungen an der Reihenfolgen können durch verschieben per Kontextmenü, oder durch verschieben der kompletten Zeile in der Tabelle erreicht werden.

Note

Wichtig bei der Verwendung von verschiedenen Navigationen für spezielle Gerätetypen ist, dass das jeweilige Gerät auch als solches erkannt wird. Beispielsweise beim Typ „Tablet“, muss das Endgerät auch als Tablet identifiziert werden können und nich als Standardbrowser. Dies ist in den jeweiligen Einstellungen des Gerätes dzu prüfen.

Anlegen einer neuen Geräteklasse

Um gerätespezifisch Layouts zuweisen zu können, muss eine eigene Geräteklasse hierfür definiert werden über die dann die Geräte identifiziert werden können, die dieses Layout erhalten sollen.

Zur eindeutigen Identifikation muss das Feld „Gerätespezifischer Text“ so gefüllt werden, dass eine entsprechende Zuordnung erfolgen kann. Dies ist über den so genannten UserAgent des Browsers möglich. Dementsprechend können Layouts in Abhängigkeit eines Browsers ausgewählt werden.

Hierfür muss als gerätespezifischer Text der Browsername eingetragen werden.

Der eigene UserAgent kann über diverse Internetseiten ausgelesen werden. Hier einige Beispiele:

Firefox: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:81.0) Gecko/20100101 Firefox/81.0

Chrome: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36

Edge: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36 Edg/86.0.622.38

Da sowohl beim Chrome, wie auch beim Edge-Browser der Begriff „Chrome“ enthalten ist, wird dieses zugewiesene Layout bei beiden Browsern verwendet. Bei Firefox oder Opera würde die Default-Klasse verwendet werden. Soll nur bei Chrome und nicht bei Edge, muss über einen so genannten regulären Ausdruck, der Edge ausgeschlossen werden: „(Chrome)(?!*(Edge))“

Navigation mit Strukturen

Im Designer können bei der Navigation auch Strukturen mit angegeben werden. Standartmäßig werden die Strukturspalten in der Navigation nicht angezeigt, außer im Projekt sind bereits Navigationen mit Strukturen vorhanden. Die Strukturnavigation kann bei der Tabellenansicht aktiviert bzw. deaktiviert werden.

Hinweis: Das aktivieren bzw. deaktivieren der Strukturnavigation hat nur einen Einfluss darauf ob die Spalten im Designer angezeigt werden oder nicht. Zur Laufzeit ändert sich nichts.

Pro Navigationsebene kann für jede Struktur eine Instanz angegeben werden. Die zugewiesenen Instanzen werden auf die unterliegenden Navigationsebenen vererbt. Wird auf unterschiedlichen Ebenen für dieselbe Struktur unterschiedliche Instanzen zugewiesen, so wird immer nur die untere Instanz berücksichtigt.

Hierbei ist ebenfalls zu berücksichtigen, dass es zwar möglich ist, dasselbe Bild für die gesamte Navigation zu verwenden, die Kombination von Struktur und Instanz muss jedoch einmalig sein. Deshalb ist es sinnvoll, für jeden Navigationscontainer ein eigenes Bild zu verwenden, dass dann innerhalb des Containers mehrfach verwendet wird.

Es können auch auf den Inhaltsseiten direkt Instanzen zugewiesen werden. Diese erben automatisch die Instanzen der Navigation. Wenn für eine Struktur sowohl eine Instanz in der Navigation und eine andere Instanz im Inhalt festgelegt ist, so wird nur die Instanz auf der Inhaltseite berücksichtigt.

Die Instanzen werden dann den AOs auf den Navigations- bzw. Inhaltsseiten zugewiesen, wenn in den eine AOs dynamische Instanzzuweisung aktiviert ist. Die zugewiesenen Strukturen können auch in Bild- bzw. in Ereignis Skripten an Bilder bzw. AOs mit dynamischer Zuweisung verwendet werden.

Partielle Navigation

Die Partielle Navigation wird unter Konfiguration -> Projekt -> Client (Benutzeroberfläche) -> Partielle Navigation (global) aktiviert. Auch wird dann die dazugehörige Systemvariable __Navigation_Partial auf „true“ gesetzt.

Damit is es möglich, sich mithilfe der mehrstufigen Navigation erst bis zur gewünschten letzten Navigationsebene zu klicken und dann erst bei Auwswahl dieser zu öffnen. Hierfür darf in der Konfiguration beim Oberpunkt kein Inhalt hinterlegt sein. Hat ein Oberpunkt in der Navigation einen Inhalt hinterlegt, so wird dieser angezeigt und die entsprechende Sichtnummer gesetzt.

Hier ein Beispiel einer Konfiguration im Designer:

Auch wird dann bei Nutzung der Zurück-Funktion das tatsächlich zuvor angezeigte Bild aufgerufen und nicht das Bild des übergeordneten Navigationspunktes.