| commit | author | age | ||
| 175e83 | 1 | # App-Vorlage |
| 08bce7 | 2 | |
| 175e83 | 3 | Das [radio-ui](README.md) ist in verschiedener Hinsicht eine Vorlage für Webanwendungen. |
| U | 4 | |
| 5 | + Es veranschaulicht die Nutzung des app-layout | |
| 6 | + Es zeigt, wie Vorlagen in einer Webapp zur Vereinfachung eingesetzt werden können | |
| 7 | + Es nutzt das app-menu und zeigt damit, wie es für eine Steuerung von WEbapps eingesetzt wird | |
| 8 | + Es implementiert den Client-Teil eines CRUD-Musters (Create, Read, Update, Delete) | |
| 9 | ||
| 10 | Die oben aufgezählten Teile sind nachfolgend erläutert. | |
| 08bce7 | 11 | |
| U | 12 | ## app-layout |
| 13 | ||
| 14 | Das radio-ui verwendet das [app-layout](/gitblit/docs/web!app-layout.git), das mit Hilfe von HTML und CSS die Grundlage einer für Webanwendungen geeigneten Bedienoberfläche schafft. | |
| 15 | ||
| 16 | ## Nutzung von Vorlagen | |
| 17 | ||
| 18 | Die Datei `index.html` definiert Bereiche einer HTML-Seite als `div`-Elemente, die während der Ausführung des Programmes dynamisch mit wechselnden Inhalten gefüllt werden. | |
| 19 | ||
| 20 | Inhalte werden dabei mit Hilfe von [Mustache](https://github.com/janl/mustache.js) aus einer Vorlage und einer Inhaltsbeschreibung in [JSON](https://de.wikipedia.org/wiki/JavaScript_Object_Notation) zu [HTML](https://de.wikipedia.org/wiki/Hypertext_Markup_Language) zusammengesetzt. | |
| 21 | ||
| 22 | Durch die Nutzung von Vorlagen lassen sich dynamische und statische Inhalte sowie deren Gestaltung und Struktur optimal und frei von Redundanzen zusammenführen. | |
| 23 | ||
| 24 | ## app-menu | |
| 25 | ||
| 26 | Das [app-menu](/gitblit/docs/web!app-menu.git) setzt auf die Nutzung von Vorlagen auf und fügt dem radio-ui ein Menü zur Bedienung der Anwendung hinzu. Es ist zudem eingebettet in die Funktion des app-layout. Das radio-ui zeigt so den Einsatz des app-menu und mithin das Zusammenspiel von Vorlagen, app-layout und Menü am praktischen Beispiel. | |
| 27 | ||
| 28 | ## CRUD-Muster | |
| 29 | ||
| 30 | CRUD (Create, Read, Update, Delete) ist ein häufig vorkommendes Nutzungsmuster von Anwendungen, Daten werden erzeugt, gelesen, bearbeitet und gelöscht. Bei Webanwendungen zerfällt es in einen Teil, der auf dem Server ausgeführt wird und einen, der im Browser abläuft (Bedienoberfläche). | |
| 31 | ||
| 32 | Allein bezogen auf den Umgang mit den Daten auf der Serverseite ist das CRUD-Muster schnell umgesetzt. Eine Datenstruktur wird erzeugt, gelesen, gespeichert und gelöscht. Eine Bedienoberfläche zur Ausführung dieser Operationen erfordert allerdings mehr als nur den Anstoß der jeweiligen Operation. | |
| 33 | ||
| 34 | Beim radio-ui wird beispielsweise mit den Daten der Radiosender auf diese Weise umgegangen. Die folgende Tabelle veranschaulicht die benötigten Funktionen. | |
| 35 | ||
| 36 | | Operation | Bedienoberfläche (radio-ui) | Server | | |
| 37 | | ------------- |-------------| -----| | |
| 38 | | Create | Funktion zum Auslösen der Erstellung eines neuen Senders, Dialog zur Eingabe der Daten, Funktion zum Senden der neuen Daten | Speichern eines neuen Senders | | |
| 39 | | Read | Funktion zum Abruf der Senderliste, Lesen der Senderliste, Darstellen der Liste als Kacheln | Ausgeben einer Liste von Sendern | | |
| 40 | | Update | Funktion zum Auslösen der Änderung an einem Sender, Funktion zur Auswahl eines Senders aus einer Liste, Darstellen der Daten des gewählten Senders in einem Dialog zum Bearbeiten, Funktion zum Senden der Änderungen | Speichern von Änderungen an einem bestehenden Sender | | |
| 41 | | Delete | Funktion zum Auslösen der Löschfunktion, Funktion zur Auswahl eines Senders oder mehrerer Sender aus einer Liste, Funktion zum Senden einer Liste zu löschender Sender, Funktion zur Absicherung gegenüber versehentlichem Löschen | Löschen eines Senders oder mehrerer Sender | | |
| 42 | ||
| 43 | Die Tabelle läßt ahnen, dass der größere Aufwand zur Herstellung eines CRUD-Musters auf die Bedienoberfläche entfällt. | |
| 44 | ||
| 45 | Mit seinen Menüfunktionen und der Art, wie mit Daten als Liste und als einzelnem Datensatz umgegangen wird sowie der Kombination dieser Funktionen mit der Verwendung von Vorlagen zeigt das radio-ui einen generischen Lösungsansatz, der sich für die Wiederverwendung in anderen Anwendungen eignet und dabei wenige Abhängigkeiten erfordert. | |
