Single Page App mit Tabs

Tabs zur Organisation des User Interface

Mit Tab Seiten kann die User-Schnittstelle zu mehreren Anwendungsfällen auf einer einzigen Seite dargestellt werden. Bei Bedarf kann der Anwender zu einem anderen Tab umschalten und dort weiterarbeiten, ohne den vorherigen Arbeitsablauf beenden zu müssen.

Accordion Screenshot aus dem Bootstrap-Tutorial
Aus dem Bootstrap-Tutorial

Eine Alternativen zu Tabs ist z.B. Bootstrap Accordion, bei dem die einzelnen <div> Elemente untereinander angeordnet sind und einzeln geöffnet werden können. Für die Beispiel-UI erscheint das nicht geeignet.

Voraussetzung für eine verlässliche Arbeit mit dieser UI ist, dass der Zustand der einzelnen Tabs bei Tab-Wechseln nicht geändert wird.

In der Beispiel UI muss dies unter drei Aspekten betrachtet werden.

  1. Inhalt der Formularfelder einer Tab Seite muss erhalten bleiben:
    Das ist unproblematisch, da die Seiten unabhängig voneinander im Browser angelegt sind und von der Bootstrab Tabs Implementierung nur jeweils sichtbar oder nicht sichtbar gemacht werden.
  2. Im Suchfeld sind je nach Anwendungsfall unterschiedliche Suchergebnisse zu finden. Der Inhalt muss also für jedes Tab erhalten bleiben und bei Tab-Wechsel entsprechend gesetzt werden:
    Das lässt sich mit JavaScript relativ leicht erreichen, indem das innere HTML des Suchfeldes für jeden Tab gespeichert und rekonstruiert wird. Dazu muss der Inhalt des Suchfeldes nicht interpretiert werden.
  3. Bearbeitungs-Konflikt wird angezeigt
    Bearbeitungs-Konflikt wird angezeigt

    Das gleiche Datenobjekt kann in verschiedenen Tabs verändert und dann gespeichert werden:
    Für die meisten Anwendungsfälle ist das bei einer sinnvollen Aufteilung der UI unwahrscheinlich. Es kann aber nicht völlig verhindert werden, ohne große Teile der fachlichen Logik im Browser nachzuimplementieren. Veränderungen am gleichen Objekt werden daher genauso behandelt, wie es in den langen Transaktionen beschrieben ist. Entstehende Konflikte werden im Browser dargestellt.

Implementierung der Tab Seiten

Die Implementierung verteilt sich auf ein Go Template und einigen JavaScript Code.

JavaScript Code

Der JavaScript Code wird erst vorgestellt, damit das Go Template verstanden werden kann. Er besteht aus drei Elementen:

  1. Globale Variablen:

    actTab, prevTab
    speichern den aktiven und vorherigen Tab
    searchFlag
    wird nur bei der Exmatrikulation benötigt
    bounceProtect
    verhindert mehrfaches Aufrufen des Tab Wechsel Handlers
    searchStates, finderValues
    Objekte speichern aktuellen Zustand des Suchbereichs für jeden Tab:
    Sie enthalten jeweils einen Eintrag für jedes Tab. In searchStates wird der Status für die Suchmaske gespeichert. In finderValues stehen Konfigurationswerte: die Server-URLs für die seitenspezifische Suche und für das Laden (.load( … )) eines selektierten Objekts in den Tab sowie die Id des <div> Elements, in das der HTML Code geladen werden soll.
  2. Handler Funktion, die beim Tab-Wechsel aufgerufen wird:

    55, 56
    Mit den von Bootstrap im Event bereitgestellten Werten (e.target, e.relatedTarget) lässt sich die Id des aktivierten und des vorherigen Tabs feststellen und in globalen Variablen abspeichern.
    57, 58
    Der Event Handler wird anscheinend bei einem Tab Wechsel mehrfach aufgerufen. Das wird hier abgefangen und der folgende Code pro Wechsel nur einmal ausgeführt.
    60, 62
    Speichere den Suchstatus des vorherigen Tabs ab, wenn er nicht leer war, und stelle den Suchstatus für den neu aktivierten Tab wieder her. Das assoziative Array (in Go Sprechweise die map) searchStates wird im Template work.go.html angelegt.
  3. JavaScript Konstruktor Funktion, die ein Objekt anlegt, mit dem man einen Tab Zustand speichern und wiederherstellen kann:

    93-95
    Konfigurationsvariablen speichern die Ids des <div> Elements und der <input> Elemente der Suche.
    96-99
    Diese Variablen speichern den HTML-Inhalt des <div> Elements, die values der <input> Elemente und den selektierten Index.
    100
    Die saveContent() Methode legt die aktuellen Werte in den Variablen ab.
    102
    Teste, dass es das Element mit dem jQuery Selektor $(selectid +' select')  gibt.
    108
    Die restoreContent() Methode lädt die gespeicherten Werte wieder in die Elemente. Die Bootstrap Selektoren und Funktionen machen es einfach, auf die richtigen Elemente zuzugreifen.
Go Template

Das Go Template verwendet diesen JavaScript Code und enthält zusätzliche JavaScript Anweisungen, mit denen der Tab Zustand gespeichert und wieder hergestellt wird.

Mit Bootstrap werden Tabs in 2 Schritten aufgebaut (s. Creating Dynamic Tabs via Data Attributes). Hier ist der prinzipielle Aufbau des HTML-Codes.

  1. Ein <ul> Element erzeugt die Tabs
  2. Ein <div> Element enthält weitere <div> Elemente für den Inhalt jeder einzelnen Tab Seite

Im Go Template work.go.html der Beispiel-App wird der gleiche Aufbau verwendet. Wegen der zusätzlichen Anforderungen an die Erhaltung des Status beim Seitenwechsel ist es etwas komplexer.

  1. Aufbau der Tabs

    98
    Es werden nur die Tabs angelegt, die für eine bestimmte Benutzerrolle sichtbar sein sollen.
    101-103, 105-107
    Konfigurationswerten für die jeweiligen Tabs werden in die Arrays geschrieben.
    109-111, 112-114 usw.
    Die Tab Reiter werden angelegt.
    119 ff.
    Hier geht es analog weiter für die nächste Benutzerrolle …
  2. Inhalt der Tabs

    166
    Hier werden für alle Tabs <div> Elemente angelegt, die als Seiteninhalt verwendet werden.
    167
    Die Inhalte müssenfür jede Benutzerrolle passend zu den Tab Reitern angelegt werden.
    169-171, 174-176
    Die meisten Tabs enthalten nur eine leere <div>, deren Id auch im Array finderValues steht. Hier hinein wird der HTML Code geladen, der mit .load( …) vom Server geholt wird.
    179-193
    Nur die Tab Seite für Exmatrikulationen (Cancellation) wird direkt hier im Template angelegt und nicht dynamisch vom Server nachgeladen.
    196 ff.
    Hier geht es analog weiter für die nächste Benutzerrolle …

Der Aufbau der Forms, die in die einzelnen Tabs geladen werden, wird auf einer eigenen Seite beschrieben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.