Single Page App: Benutzerschnittstelle

Überblick

Die Beispielapplikation hat ein Single Page Interface für die Immatrikulation, Bearbeitung der Stammdaten und Erfassung von Testergebnissen für Studienbewerber. Ohne einen neuen Seitenaufbau können

  • die Daten des nächsten Bewerbers geladen und bearbeitet sowie
  • zwischen unterschiedlichen Anwendungsfällen bei der Bearbeitung gewechselt werden.

Für die Realisierung der Benutzerschnittstelle werden in erster Linie die Frameworks

  • Bootstrap Version 3 für die Darstellung einer responsiven GUI,
  • jQuery 3.1.1 für die Arbeit mit dem Document Object Model (DOM),
  • Go http.template für die Bereitstellung der HTML Seiten genutzt.

Die fachliche Logik wird serverseitig in Go programmiert.

Quellen

Es gibt viele hervorragende Tutorials und Dokumentationen zu JavaScript, Bootstrap und jQuery. Mit denen will dieses Tutorial nicht konkurrieren. Hier liegt der Fokus auf der Anwendung dieser Technologien für Go Web Applikationen. Die folgenden Quellen wurden bei der Entwicklung der Beispielapplikation intensiv genutzt:

  • Details über HTML Tags, CSS, JavaScript Schlüsselworte und vieles mehr findet man im SELFHTML-Wiki.
  • Für JavaScript, insbesondere für objektorientiertes Programmieren mit JavaScript, orientiere ich mich an dem Buch „JavaScript: The Good Parts“ von Douglas Crockford, das man auch als PDF im Internet findet.
  • Für Bootstrap schaue ich in das Bootstrap 3 Tutorial von Tutorials Republic.
  • Auch von Tutorials Republic habe ich das jQuery Tutorial intensiv verwendet. Die letzte Klarheit erhält man allerdings erst in der hervorragend aufbereiteten jQuery API Documentation.

 

Aufbau des User Interface

Für Bewerber gibt es ein einfaches Formular, das als Go Template realisiert ist und keine Single Page Funktionalität hat. Es enthält Felder zur Erfassung und Bearbeitung der Bewerber-Stammdaten. Daher wird es als Komponente zur späteren Aktualisierung dieser Daten auch in viele andere Formulare eingebettet. Der Aufbau dieses und anderer Formulare aus einzelnen konfigurierbaren Templates wird auf den folgenden Seiten behandelt.

Leere Arbeitsumgebung
Der Administrator hat Zugriff auf alle Tabs

Das umfangreichere User Interface für die Nutzer aus der Universität ist mehrstufig aufgebaut. Auf der obersten Ebene gibt es eine Seite mit Suchfeld und Tabulatoren, die jeweils die Arbeitsumgebungen für die verschiedenen Anwendungsfälle enthalten. Ein Nutzer sieht nur die Tab-Seiten, für deren Nutzung er autorisiert ist.

Über das Suchfeld können jetzt Datensätze zur Bearbeitung in aktiven Tab ausgewählt werden. Der erste gefundene Datensatz wird in die aktive Arbeitsumgebung geladen und kann bearbeitet werden.

Immatrikulationsformular

Ein Wechsel auf einen anderen Tab ist jederzeit möglich. Dabei hat jeder Tab seinen eigenen Such- und Arbeitskontext. D. h., in jedem Tab kann nach anderen Datensätzen mit unterschiedlichen Suchkriterien gesucht werden. Sowohl die Suchergebnisse als auch der Bearbeitungsstand des aktuell angezeigten Datensatzes bleiben beim Tabwechsel erhalten und können bei der Rückkehr auf den Tab weiter bearbeitet werden.

 

Die oberste Ebene des UI ist in der Datei Work.go.html implementiert, die mehrere Go Templates enthält. Das äußerste Template enthält den HTML Header  und bindet die beiden zentralen Templates für das Suchfeld und den Tab-Bereich ein (Zeilen 41 und 43). Die Funktionalität erfordert einige JavaScript Programmierung. Der größte Teil des JavaScript Codes ist in der Datei work.js zusammengefasst (Zeile 38). Einige Skripte sind darüber hinaus in die Go Templates eingebettet.

Die Implementierung der Suche und der Tabs erfolgt im Zusammenspiel von Go Templates und den verwendeten JavaScript Bibliotheken. Die genauere Beschreibung erfolgt in eigenen Seiten.

Schreibe einen Kommentar

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