Das Beispiel Todo-Liste
Die Beispielanwendung SimpleTodoList soll eine einfache Todo Liste darstellen. Der Nutzer kann Aufgaben anlegen, bearbeiten und löschen. Zum Speichern bedienen wir uns der Web Storage API. Die API wird nur von modernen Browsern auf Desktop- sowie mobilen Systemen unterstützt.
Projekt vorbereiten
Im ersten Schritt erstellen wir mit Hilfe von bootplate ein Gerüst unserer Anwendung SimpleTodoList. Als Versionsverwaltungssystem wird git verwendet.
Zuerst klonen wir Bootplate von Github und initialisieren die Submodule enyo
, lib/onyx
und lib/layout
.
git clone https://github.com/enyojs/bootplate.git SimpleTodoList cd SimpleTodoList git submodule update --init
Damit später ein anderes Online-Repository genutzt werden kann, sind die Hinweise auf der Seite Dupliforking zu beachten.
Die Datei debug.html
kann jetzt in einem modernen Browser geöffnet werden. Wir haben somit eine fertige Enyo-Anwendung mit der Ausgabe Hello World vorliegen.
Projektstruktur der Anwendung HelloWorld
api assets enyo lib layout onyx source App.css App.js package.js tools [..] deploy.sh minify.sh .git .gitignore .gitmodules debug.html icon.png index.html README.md
Wichtig sind an dieser Stelle die Dateien unterhalb des source
-Verzeichnisses, die Shell-Scripte deploy.sh
und minify.sh
sowie die HTML-Dateien index.html
und debug.html
. Es gibt zwei HTML-Dateien, da jede einen anderen Zweck erfüllt. Die debug.html
wird während der Entwicklung genutzt und die index.html
wird in die minimierte und fertiggestellte Anwendung kopiert. Das erklärt gleichzeitig den Zweck der beiden Shellscripte minify.sh
und deploy.sh
. Der Aufruf von minify.sh
mit
cd tools sh minify.sh
minimiert die Anwendung und kopiert diese unterhalb des neu angelegten Ordners build
. Der Ordner enthält jetzt minimierte Versionen der Dateien apps.css
, app.js
, enyo.css
und enyo.js
. Durch ein anschließendes
sh deploy.sh
wird jetzt die komplette Anwendung inklusive des Ressourcen-Ordners assets
, einer Kopie des build
-Ordners, des App-Icons icon.png
, des lib
-Ordners und der index.html
erstellt. Das Skript legt zu diesem Zweck einen neuen Ordner deploy
an, indem wiederum je Aufruf ein Unterordner mit Zeitstempel zu finden ist.
Inhalt des deploy-Ordners
deploy SimpleTodoList-2012_09_23-10_24_02 assets build icon.png index.html lib
Das Resultat ist eine fertige Anwendung, die auf einem Server zum Einsatz kommen kann.
Jetzt sollte zunächst der Titel der Anwendung angepasst werden. Dazu ändern wir in den Dateien index.html
und debug.html
den Inhalt des HTML-Tags title von Enyo Bootplate App zu Todo Liste. Zur Kontrolle rufen wir im Browser wieder die Datei debug.html
auf und in der Titelleiste des Browsers sollte jetzt Todo Liste stehen.
Grundlayout der Enyo-Anwendung
Wie soll jetzt unsere Anwendung aussehen? Wie unterstützt uns Enyo bei der Gestaltung? Diese Fragen werden sehr gut auf der Enyo Samples Seite beantwortet. Für die Todo-Liste soll ein ähnliches Layout umgesetzt werden. Grundsätzlich wird das Layout in zwei Spalten aufgeteilt, wobei die rechte Spalte drei unterschiedliche Panels (Create-Panel, View-Panel, Edit-Panel) enthält. Auf mobilen Geräten soll nur die linke Spalte zu sehen sein. Wählt der Benutzer einen Eintrag aus, schiebt sich die rechte Spalte in den sichtbaren Bereich. Ein Wischen über die obere linke Ecke schiebt das Panel wieder zurück und die darunter liegende linke Spalte mit der Liste an Aufgaben kommt wieder zum Vorschein.
Wir öffnen jetzt die Datei App.js
.
Inhalt der Datei App.js
enyo.kind({ name: "App", fit: true, components:[ {name: "hello", content: "Hello World", allowHtml: true, ontap: "helloWorldTap"} ], helloWorldTap: function(inSender, inEvent) { this.$.hello.addContent(" hello control was tapped"); } });
In dieser Datei wird mit der Methode enyo.kind(inProps)
ein neues Kind erzeugt mit dem Namen App erzeugt. Dieses enthält eine Komponente mit dem Namen hello und dem Inhalt Hello World. Tippt der Nutzer auf die Komponente, hier also auf den Text Hello World, wird die Funktion helloWorldTap(inSender, inEvent)
aufgerufen. Diese hängt an die Komponente mit dem Namen hello die Zeichenkette
hello control was tapped an. Testen können wir dies, indem wir im Browser einfach auf den Text Hello World klicken. Bei jedem Klick wird der Text erneut angehangen.
Jetzt erstellen wir das zweispaltige Grundlayout der Anwendung. Dazu müssen die beiden Dateien App.css
und App.js
angepasst werden.
Die CSS Datei App.css
/* Put anything you reference with "url()" in ../assets/ This way, you can minify your application, and just remove the "source" folder for production */ #app { } .app > * { box-shadow: -4px -4px 4px rgba(0,0,0,0.3); background: #555; width: 320px; } .left { color: white; } .item { position: relative; border-bottom: 1px solid #0E0E0E; padding: 16px 12px; background-color: #333333; } .item.onyx-selected { background-color: #226B9A; } .panels { min-height: 320px; min-width: 320px; } .panels > * { border: 2px solid #333; font-size: 5em; text-align: center; } .wide > * { min-width: 50%; } .collapsible > * { min-width: 250px; }
Die Javascript Datei App.js
enyo.kind({ name: "App", kind: "Panels", classes: "app enyo-unselectable", fit: true, realtimeFit: true, arrangerKind: "CollapsingArranger", components:[ {kind: "FittableRows", classes: "left", components: [ {kind: "onyx.Toolbar", style: "overflow: initial;", components: [ {name: "title", content: "Todo Liste"} ]}, {name: "mockUpAddButton", content: "mockUpAddButton"}, {name: "mockUpTodoListe", content: "mockUpTodoListe"} ]}, {kind: "FittableRows", components: [ {kind: "FittableColumns", noStretch: true, classes: "onyx-toolbar onyx-toolbar-inline", components: [ {kind: "onyx.Grabber"} ]}, {name: "mockUpDisplayTodoEntry", content: "mockUpDisplayTodoEntry"} ]} ], create: function() { this.inherited(arguments); } });
Schauen wir uns den Inhalt der Datei App.js
etwas genauer an. Mit Hilfe der Methode enyo.kind(inProps)
wird ein neues Kind erstellt. Dieses erbt jetzt vom Kind Panels. Den Effekt des Hineinschiebens des rechten Panels über das linke Hauptpanel erreichen wir durch das Hinzufügen der CSS Klasse app und deren Definition in der Datei App.css
sowie das Setzen des Attributs arrangerKind auf CollapsingArranger.
Außerdem existieren zwei untergeordnete Kinds vom Typ FittableRows. Diese repräsentieren das linke und rechte Panel. FittableRows-Kinds ordnen ihre enthaltenen Komponenten in Form von Zeilen an. Das Gegenstück dazu ist das FittableColumns-Kind, welches seine untergeordneten Komponenten in Form von Spalten darstellt.
Weiterhin existieren verschiedene Mockup-Komponenten die wir später austauschen werden, sowie das Kind onyx.Toolbar.

Themen der letzten Seite:
- Hinzufügen eines Buttons
- Das Backend
- Layout
- Ausblick