Single Page Application Keyvisual

Single Page Applikationen

Mit OpenText Web Site Management und AngularJS einfach zu erstellen

Single Page Webanwendungen

Vortrag von Mirka Santur auf der OpenText Usergroup

Single Page Applikationen und Open Text Web Site Management, geht das überhaupt? Dies war eine Fragestellung eines Proof of Concepts, den wir vor kurzem durchgeführt haben.

AngularJS Logo

Was ist überhaupt eine Single Page Applikation?

Hier kann man Wikipedia gut zitieren: "Als Single-Page-Webanwendung [...] wird eine Webanwendung bezeichnet, die aus einem einzigen HTML-Dokument besteht und deren Inhalte dynamisch nachgeladen werden. ... Diese Webseite wird lediglich zur Laufzeit der Applikation dynamisch erweitert. ...", unter https://de.wikipedia.org/wiki/Single-Page-Webanwendung (abgerufen am 22.02.2017).

Eine Single Page Applikation baut sehr stark auf JavaScript auf und lädt alle Inhalte per AJAX nach. Trotzdem möchte man die Usability nicht einschränken und dem Nutzer ermöglichen, direkt auf bestimmte Seiten zuzugreifen und sich auch Bookmarks setzen zu können.

Um beiden Anforderungen gerecht zu werden, können AngularJS v1.2.13 und UI Router v0.2.8 genutzt werden. Diese zwei Frameworks bzw. Erweiterungen habe ich auch für den PoC genutzt.

Einzelne Arbeitsschritte beim PoC

Klick-Dummy Single Page Applikation

Den Klick-Dummy habe ich für meine Zwecke sehr übersichtlich gehalten. Nach dem der Rahmen erstellt ist, kommt nur noch ein DIV in das HTML

DIV in NTML

Der Rest wird über das JavaScript gelöst:

JavaScript SinglePage

Wie man hier sieht, sind zwei Seiten definiert. Bei Klick auf den gewünschten Navigationspunkt wird die im Parameter templateUrl definierte Seite in das DIV geladen.

Klick auf Navigationspunkt

Einbauen ins CMS

Die erste Schwierigkeit im Zusammenhang mit dem CMS besteht darin, dass das CMS darauf ausgelegt ist, komplette Webseiten darzustellen. Hier muss man von diesem Konzept abweichen und die Masterpage nur noch mit dem Inhalt bestücken, welcher in dem DIV dargestellt wird. Zusätzlich dazu benötigt man dann eine Rahmen-Seite, die das HTML-Body-Tag zu Verfügung stellt.

Bei den Masterpage Instanzen kann man wie gewohnt mit dem Navigation Manager das Projekt strukturieren. Somit bleiben noch drei Herausforderungen die gelöst werden müssen:

  • Erstellung der JavaScript-Datei
  • Seiten-Vorschau mit Navigationsmöglichkeiten
  • Bearbeitung der Seiten mit SmartEdit

Erstellung der JavaScript-Datei

Als erstes ist zu beachten, dass der Name jedes Navigationspunktes eineindeutig sein muss. Für den PoC habe ich es mir an der Stelle einfach gemacht und habe mich entschieden, hier die GUID zu verwenden. Da das JavaScript im Grunde die Navigation wiederspiegelt, fiel die Entscheidung sehr schnell, diese komplett über RenderTags schreiben zu lassen.

RenderTags

Hier ist nur zu beachten, dass die JavaScript-Datei selbst nicht in der Navigationsstruktur hängt und somit über den Parameter pageguid der Startpunkt der Navigation festgelegt werden muss.

pageguid

Seiten-Vorschau mit Navigationsmöglichkeiten

Wenn man die einzelnen Seiten aufruft, bekommt man nur den Content angezeigt. Dies ist ja nicht gewünscht, und es sollte auch möglich sein in der Seiten-Vorschau den Auftritt komplett durchnavigieren zu können. Hierfür machen wir uns zu Nutze, dass mit UI Router mit der #-Notation ein direkter Sprung zu jeder beliebigen Seite möglich ist und bauen in die Masterpage folgenden Script-Tag ein.

Script Tag

Die hier aufgerufene Page ist die Instanz im Projekt mit dem HTML-Body. Damit hat der Aufruf der gewünschten Seite in dem vollständigen Rahmen einwandfrei funktioniert. Bei der Navigation gab es noch eine Schwierigkeit, die URLs im CMS sind mit sehr vielen Übergabeparameter versehen.

Übergabeparameter

Das & verträgt sich nicht mit dem templateUrl-Aufruf im JavaScript. Deshalb ist hier noch eine Erweiterung des Navigation-Templates erforderlich:

Template URL

Bearbeitung der Seiten mit SmartEdit

Hier verfolgen wir bei all unseren Projekten den Ansatz, dass die Redakteure sich komplett auf ihre Arbeit konzentrieren sollen und Inhalte, die nicht bearbeitet werden können, weggeblendet werden. Was ja in diesem Fall die Navigation und der HTML-Body wären. Navigiert wird über den Strukturbereich im SmartEdit. Hier ist jede Seite durch den Redakteur erreichbar und er muss sich nicht im Bearbeitungsbereich durch die gesamte Webseite durchklicken, um zu der einen Seite zu gelangen, die er bearbeiten möchte.

Trotzdem sollte die Seite im WYSIWYG-Modus dargestellt werden. Dafür wird im SmartEdit-Modus in jede Seite ein HTML-Body eingefügt und auch das StyleSheet geladen.