| | |
|---|
| | | # app-menu |
|---|
| | | |
|---|
| | | Ein universelles Menü für Webanwendungen. |
|---|
| | | Ein Menü für Webanwendungen. |
|---|
| | | |
|---|
| | | ## Beschreibung |
|---|
| | | |
|---|
| | | Das app-menu ist eine Liste von Auswahlpunkten für eine Webanwendung. Der Benutzer kann aus ihnen auswählen um Funktionen auszuführen oder ein weiteres Menü aufzurufen. Eine große Anzahl von Funktionsaufrufen kann auf hierarchisch verschachtelte Menüs verteilt werden. |
|---|
| | | 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 aus einer Beschreibung in der JavaScript Object Notation (JSON) geformt, die während |
|---|
| | | 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. |
|---|
| | | |
|---|
| | | Die Gestaltung des Menüs wird über ein Cascading Stylesheet (CSS) bestimmt. |
|---|
| | | Mit der [Demo-Anwendung](/data/ulrich/demo/app-vorlage/) kann das app-menu direkt im Browser ausprobiert werden. |
|---|
| | | |
|---|
| | | Die Auswahlpunkte des Menüs sind entweder Funktionen, die bei der Auswahl des Punkts ausgeführt werden oder Verweise auf ein weiteres Menü. Verweise auf ein anderes Menü können entweder zu einem über- oder einem untergeordneten Menü weisen. |
|---|
| | | ## Einbau des app-menu in eine Webanwendung |
|---|
| | | |
|---|
| | | ## Anwendung |
|---|
| | | Das app-menu wird wie folgt in eine Webanwendung eingebaut. |
|---|
| | | |
|---|
| | | Das app-menu wird wie folgt in eigene Webanwendungen eingebaut. |
|---|
| | | 1. Hinzufügen des Ordners `app-menu` |
|---|
| | | 1. Einbinden von Mustache |
|---|
| | | 1. Einbinden des Stylesheets |
|---|
| | | 1. Herstellen der Menübeschreibungen |
|---|
| | | 1. Aufruf der Funktion `app_menu_init` |
|---|
| | | |
|---|
| | | 1. Einbinden der Abhängigkeiten (jQuery und Mustache) |
|---|
| | | 2. Einbinden der Stylesheets |
|---|
| | | 3. Weitere Schritte |
|---|
| | | Die obigen Schritte sind nachfolgend im Detail beschrieben. |
|---|
| | | |
|---|
| | | Weiterer Text |
|---|
| | | ### <a name="add-folder"></a>Hinzufügen des Ordners `app-menu` |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | ## Einbinden von jQuery und Mustache |
|---|
| | | |
|---|
| | | |
|---|
| | | Damit eine Webanwendung das app-menu verwenden kann, wird der Inhalt des Ordners `app-menu` der Webanwendung zugänglich gemacht. 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. |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
|---|
| | | /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-Bibliothek [Mustache](https://github.com/janl/mustache.js). Sie wird einer Webanwendung hinzugefügt, indem ihr Skript wie folgt eingebunden wird. |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | <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](https://cdnjs.com/) ein. Stattdessen können die beiden JavaScript-Komponenten auch lokal ausgeliefert werden. |
|---|
| | | Das obige Beispiel bindet Mustache aus dem Content Delivery Network [cdnjs](https://cdnjs.com/) ein. Stattdessen kann die JavaScript-Komponente auch lokal ausgeliefert werden. |
|---|
| | | |
|---|
| | | ## Einbinden des Stylesheets |
|---|
| | | ### Einbinden des Stylesheets |
|---|
| | | |
|---|
| | | |
|---|
| | | Zur Regelung des Erscheinungsbildes von Menüs wird das Stylesheet eingebunden. |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | <link rel="stylesheet" type="text/css" href="applib/app-menu/nav-toggle.css"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="applib/app-menu/app-menu.css"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="jslib/app-menu/app-menu.css"> |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | ### Einbinden des Skripts |
|---|
| | | |
|---|
| | | #### Einbinden des Skripts |
|---|
| | | Die Funktionen des app-menu sind im Skript `app-menu.js` enthalten. |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | <script src="applib/app-menu/app-menu.js"></script> |
|---|
| | | <script src="jslib/app-menu/app-menu.js"></script> |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | #### Aufruf des Menüs |
|---|
| | | ``` |
|---|
| | | app_menu_init("menu/", "hauptmenue.json", "applib/app-menu/app-menu.tpl", ".west"); |
|---|
| | | ``` |
|---|
| | | Mit dem obigen Eintrag werden die Funktionen des app-menu der Webanwendung zugänglich gemacht. |
|---|
| | | |
|---|
| | | Parameter 1: Name des Unterverzeichnisses mit Menübeschreibungen |
|---|
| | | Parameter 2: Name der Menübeschreibung, die zuerst angezeigt werden soll |
|---|
| | | Parameter 3: Unterverzeichnis und Name der Menüvorlage für Mustache |
|---|
| | | Parameter 4: Name des Selektors, der das Menü aufnehmen soll |
|---|
| | | ### Herstellen der Menübeschreibungen |
|---|
| | | |
|---|
| | | ### Menüvorlage |
|---|
| | | |
|---|
| | | Im Verzeichnis `applib/app-menu` befindet sich eine Vorlage für ein dynamisches Menü, das ein- und ausgeblendet werden kann und seine Inhalte von Beschreibungen in JSON erhält. Menüs werden dynamisch aus JSON-Strukturen erstellt, die ein Menü beschreiben. In dieser Form sind die Menübeschreibungen gut mit einem Serverdienst zu ersetzen. Eine Beschreibung sieht wie folgt aus |
|---|
| | | Menüs werden vom app-menu während der Ausführung der Webanwendung dynamisch aus JSON-Strukturen erstellt. Eine Beschreibung sieht wie folgt aus |
|---|
| | | |
|---|
| | | ``` |
|---|
| | | { |
|---|
| | |
|---|
| | | } |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 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. Ebenso legt der Schalter `umenue` fest, ob ein Untermenue dargestellt wird. Dann muss in `verweis` der Name der Menübeschreibung angegeben sein. |
|---|
| | | 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. |
|---|
| | | 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 und muss im Javascript existieren, das die betreffende Web-App begleitet. |
|---|
| | | |
|---|
| | | 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 weiter oben geschildert ist. |
|---|
| | | |
|---|
| | | Beispiele für Menübeschreibungen finden sich im [Code der Demo-Anwendung](/gitblit/tree/web!app-vorlage.git/master). |
|---|
| | | |
|---|
| | | ## 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", "5em"); |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | Der Aufruf der Funktion `app_menu_init` bewirkt, dass die Vorlage `jslib/app-menu/app-menu.tpl` zur Darstellung |
|---|
| | | des Menüs geladen und das Menü gezeigt wird, das mit der JSON-Struktur `hauptmenue.json` 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. |
|---|
| | | |
|---|
| | | 1. Name des Unterverzeichnisses mit Menübeschreibungen |
|---|
| | | 1. Name der Menübeschreibung, die zuerst angezeigt werden soll |
|---|
| | | 1. Unterverzeichnis und Name der Vorlage für Mustache |
|---|
| | | 1. Name des HTML-Elements, das das Menü aufnehmen soll |
|---|
| | | 1. Breite des Menüs |
|---|
| | | |
|---|
| | | 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 fungiert als Bindung zwischen den Menübeschreibungen im JSON-Format und dem HTML, das aus den JSON-Beschreibungen entstehen soll. Die Vorlage kann genutzt werden, um das HTML, aus dem ein Menü bestehen soll, nach eigenen Wünschen zu verändern. |
|---|
