app-menu

Ein universelles Menü für Webanwendungen.

Beschreibung

Das app-menu ist eine Liste von Auswahlpunkten für eine Webanwendung. Der Benutzer kann aus ihnen wählen um Funktionen auszuführen oder ein weiteres Menü aufzurufen. Eine große Anzahl von Funktionsaufrufen kann auf hierarchisch verschachtelte Menüs verteilt werden, deren Beschreibungen vom app-menu dynamisch geladen werden.

Menüinhalte werden während der Ausführung der Webanwendung aus Beschreibungen geformt, die in der JavaScript Object Notation (JSON) hinterlegt sind.

Die Gestaltung des Menüs wird über ein Cascading Stylesheet (CSS) bestimmt.

Einbau des app-menu in eine Webanwendung

Das app-menu wird wie folgt in eine Webanwendung eingebaut.

Hinzufügen des Ordners app-menu
Einbinden der Abhängigkeiten (jQuery und Mustache)
Einbinden der Stylesheets
Hinzufügen einer Menüschaltfläche
Herstellen der Menübeschreibungen
Aufruf der Funktion app_menu_init

Die obigen Schritte sind nachfolgend im Detail beschrieben.

Hinzufügen des Ordners `app-menu`

Damit eine Webanwendung das app-menu verwenden kann, muss der gesamte Ordner app-menu der Webanwendung mitgegeben werden. Für die weitere Beschreibung wird angenommen, dass der Ordner app-menu in einem Ordner jslib abgelegt wurde und dass eine Datei index.html den Einstiegspunkt in die Webanwendung bildet.

/webanwendung
  /jslib
    /app-menu
  /menu
  index.html
  ..

Die folgenden Schritte beschreiben die Ergänzungen in der Datei index.html für eine Verwendung des app-menu.

Einbinden der Abhängigkeiten

Das app-menu verwendet die JavaScript-Bibliotheken jQuery und Mustache. Sie werden einer Webanwendung hinzugefügt, indem ihre Skripte wie folgt eingebunden werden.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

Das obige Beispiel bindet jQuery und Mustache aus dem Content Delivery Network cdnjs ein. Stattdessen können die beiden JavaScript-Komponenten auch lokal ausgeliefert werden.

Einbinden der Stylesheets

Zur Regelung des Erscheinungsbildes von Menüs sowie der Schaltfläche zum ein- und ausblenden des Menüs werden zwei Stylesheets eingebunden.

<link rel="stylesheet" type="text/css" href="jslib/app-menu/nav-toggle.css">
<link rel="stylesheet" type="text/css" href="jslib/app-menu/app-menu.css">

Hinzufügen einer Menüschaltfläche

Das app-menu wird über eine Schaltfläche ein- und ausgeblendet, die vom app-menu selbst gesteuert wird. Sie wird in eine Webseite eingebaut, indem ein Element mit der id nav-toggle hinzugefügt wird wie z.B. mit

<a id="nav-toggle" href="#"></a>

Das app-menu zeigt dann an dieser Stelle die Schaltfläche zum ein- und ausblenden des Menüs an.

Einbinden des Skripts

Die Funktionen des app-menu sind im Skript app-menu.js enthalten.

<script src="jslib/app-menu/app-menu.js"></script>

Mit dem obigen Eintrag werden die Funktionen des app-menu der Webanwendung zugänglich gemacht.

Herstellen der Menübeschreibungen

Menüs werden vom app-menu während der Ausführung der Webanwendung dynamisch aus JSON-Strukturen erstellt. Eine Beschreibung sieht wie folgt aus

{
  "menue": {
    "menuetitel": "Hauptmenü",
    "wurzel": true,
    "vorgaenger": {
      "vtitel": "",
      "vverweis": ""
    },
    "inhalt":  [
      {
        "titel": "H Menüeintrag 1",
        "umenue": false,
        "funktion": "app_menu_test"
      },
      {
        "titel": "H Menüeintrag 2",
        "umenue": true,
        "verweis": "untermenue-1.json"
      },
      {
        "titel": "H Menüeintrag 3",
        "umenue": false,
        "funktion": "app_menu_test_2"
      }
    ]
  }
}

Der Schalter wurzel legt fest, ob noch ein übergeordnetes Menü dargestellt wird. Wenn ja (wurzel=false) wird in vorgaenger.vverweis der Name der Menübeschreibung und in vorgaenger.vtitel der Name, unter dem der Eintrag im Menü erscheinen soll angegeben. Der Schalter umenue legt fest, ob ein Menüeintrag auf ein Untermenü verweist. Ist umenue=true muss in verweis der Name der Menübeschreibung angegeben sein.

Im Element funktion eines Menüeintrages wird ein Funktionsname notiert. Die so benannte Funktion wird aufgerufen, wenn das Menü gewählt wird. Eine solche Funktion darf keine Parameter erwarten.

Für jedes Menü, das in der Webanwendung gezeigt werden soll, muss eine Beschreibung im oben angegebenen Format existieren. Menübeschreibungen können beispielsweise in einem Unterordner menu abgelegt und der Webanwendung beigegeben werden, wie es im Abschnitt Hinzufügen des Ordners app-menu weiter oben geschildert ist.

Aufruf des Menüs

Zu Beginn der Ausführung einer Webanwendung muss das app-menu mit folgendem Funktionsaufruf initialisiert werden.

app_menu_init("menu/", "hauptmenue.json", "jslib/app-menu/app-menu.tpl", ".west");

Die Funktion zur Initialisierung bewirkt, dass eine Menüschaltfläche zum Ein- und Ausblenden von Menüs an der Stelle des Elements nav-toggle erscheint. Beim Betätigen der Schaltfläche wird das Menü eingeblendet, das in der Beschreibung hauptmenue.json im Ordner menu beschrieben ist. Das Menü wird an der Stelle des Elements mit dem Klassennamen west dargestellt. NAchfolgend die Parameter der Funktion app_menu_init in der Übersicht.

Name des Unterverzeichnisses mit Menübeschreibungen
Name der Menübeschreibung, die zuerst angezeigt werden soll
Unterverzeichnis und Name der Vorlage für Mustache
Name des Selektors, der das Menü aufnehmen soll

Der dritte Parameter bezeichnet eine Vorlage, die mit Hilfe von Mustache während der Ausführung der Webanwendung Menübeschreibungen in JSON nach HTML umwandelt. Die so bezeichnete Vorlage kann genutzt werden, um das HTML, aus dem ein Menü besteht, zu verändern.