Das Javascript Framework Enyo

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.