Das Javascript Framework Enyo
Kommentare

Hinzufügen eines Buttons
Wir ersetzen jetzt das Mockup für den Hinzufügen-Button durch die Enyo-Komponenten. Dazu ersetzen wir die Zeile

{name: „mockUpAddButton“, content: „mockUpAddButton“},
durch

Hinzufügen eines Buttons

Wir ersetzen jetzt das Mockup für den Hinzufügen-Button durch die Enyo-Komponenten. Dazu ersetzen wir die Zeile

{name: "mockUpAddButton", content: "mockUpAddButton"},

durch die Zeilen

{kind: "FittableColumns", components: [
        {kind:"onyx.Button", content: "Hinzufügen", ontap:"addTodoEntry"}
]},

Weiterhin fügen wir hinter die create-Methode die Funktion addTodoEntry an.

create: function() {
        this.inherited(arguments);
},
addTodoEntry: function(inSender, inEvent) {
        this.$.contentPanels.setIndex(2);
        this.setIndex(1);
}

Die Funktion addTodoEntry verwendet das Kind contentPanels. Wir erstellen das Kind indem wir die Zeile

{name: "mockUpDisplayTodoEntry", content: "mockUpDisplayTodoEntry"}

durch die folgenden Zeilen ersetzen.

{kind: "Panels",
        name: "contentPanels",
        draggable: false,
        arrangerKind: "CardSlideInArranger",
        fit:true,
        realtimeFit: true,
        classes: "panels-sample-panels enyo-border-box",
        components: [
                {kind: "DisplayTodoEntry", name: "displayTodoEntry", fit: true},
                {kind: "EditTodoEntry", name: "editTodoEntry", fit: true},
                {kind: "CreateTodoEntry", name: "createTodoEntry", fit: true}
]}

Wir haben jetzt einen Button vom Typ onyx.Button hinzugefügt, welcher auf das Event ontap reagiert, indem er die Funktion addTodoEntry aufruft. Diese Funktion bringt das Panel mit dem Index 2, welches innerhalb des Kinds contentPanels definiert ist, in den Vordergrund. Die Reihenfolge der Panels definiert den Index. Gleiches geschieht bei der Anweisung this.setIndex(1), nur dass dieseauf das Kind mit dem Namen App, also sich selbst, angewandt wird. Das linke Panel erhält den Index 0, das rechte den Index 1.

Die Panels wiederum sind neu definierte Kinds, welche vom Kind Panels erben. Zur besseren Lesbarkeit lagern wir die neuen Kinds in eigene Javascript-Dateien aus. Diese Dateien müssen in der Datei package.js aufgelistet werden. Das prinzipielle Vorgehen bei der Implementierung eines neuen Kinds wird an der Todo Liste selbst erklärt.

Die Todo Liste

Die Todo Liste implementieren wir ebenso wie die Panels in einem eigenen Kind. Dabei gehen wir grundsätzlich wie folgt vor:

  1. Erstellen einer neuen Javascript-Datei TodoList.js

  2. Hinzufügen dieser zur Datei packages.js

  3. Erstellen eines neuen Kinds mit Hilfe der Methode enyo.kind(inProps) innerhalb der Datei TodoList.js

Zuerst ersetzen wir aber die Mockup-Komponente innerhalb der Datei App.js mit dem neuen Kind. Dazu ändern wir die Zeile

{name: "mockUpTodoListe", content: "mockUpTodoListe"}

in die Zeile

{kind: "TodoList", name: "todoList", onSelect: "todoEntrySelected", fit: true}

Wichtig ist an dieser Stelle, dass der Wert des Attributs kind mit dem Namen der neu implementierten Kind innerhalb der Datei TodoList.js übereinstimmt.

Anschließend erzeugen wir noch die Funktion todoEntrySelected.

todoEntrySelected: function(inSender, inEvent) {
        this.$.contentPanels.setIndex(0);
        var todoEntry =  TodoListModel.getTodoEntryByIndex(inEvent.index);
        this.$.displayTodoEntry.setTodoEntry(todoEntry);
        this.setIndex(1);
}

Jetzt erweitern wir die Datei packages.js um den Eintrag für die neu erzeugte Javascript Datei TodoList.js. Die Datei packages.js sollte jetzt folgenden Inhalt besitzen.

enyo.depends(
        "$lib/layout",
        "$lib/onyx",
        "App.css",
        "App.js",
        "DisplayTodoEntry.js",
        "EditTodoEntry.js",
        "CreateTodoEntry.js",
        "TodoList.js",
        "TodoListModel.js",
        "TodoListDAO.js"
);

In der Datei TodoList.js implementieren wir jetzt das Kind.

Ausschnitt aus der Datei TodoList.js
enyo.kind({
        name: "TodoList",
        kind: "Panels",
        realtimeFit: true,
        classes: "enyo-border-box",
        events: {
                onSelect: ""
        },
        components: [
        [..]
});
Das Backend

In der Datei packages.js sind zwei weitere Dateien aufgelistet. Die beiden Dateien TodoListModel.js und TodoListDAO.js bilden das Backend der Anwendung.

Die Datei TodoListModel.js enthält ein einfaches Modell der Todo Liste. Es stellt eine Reihe von Hilfsfunktionen wie zum Beispiel zum Hinzufügen oder Editieren zur Verfügung.

{kind: "FittableColumns", components: [
        {kind:"onyx.Button", content: "Hinzufügen", ontap:"addTodoEntry"}
]},

Die Datei TodoListDAO.js persistiert die Todo-Liste mit Hilfe der Web Storage API.

{kind: "FittableColumns", components: [
        {kind:"onyx.Button", content: "Hinzufügen", ontap:"addTodoEntry"}
]},
Layout

Es gibt zwei verschiedene Arten CSS-Eigenschaften zu definieren. Orientieren wir uns an folgender Komponente.

{kind: "FittableColumns", components: [
        {kind:"onyx.Button", content: "Hinzufügen", ontap:"addTodoEntry"}
]},

Diese erzeugt das folgende HTML-Markup.

{kind: "FittableColumns", components: [
        {kind:"onyx.Button", content: "Hinzufügen", ontap:"addTodoEntry"}
]},

Im Beispiel ist zu sehen, dass die CSS-Eigenschaften direkt in der Komponente mit Hilfe des Attributes style definiert werden.

Die zu bevorzugende Variante ist es allerdings, alle CSS-Anweisungen in eine eigene CSS-Datei auszulagern, um Quellcode und Layout voneinander zu trennen. Am besten selektieren lässt sich ein DOM Knoten anhand seiner id, welche sich aus der hierarchischen Anordnung der Namen der Kinds zusammensetzt. Es ist auch möglich den Knoten anhand der definierten CSS Klasse (classes-Attribut) zu selektieren.

Ausblick

Die Todo-Liste ist ein Einstiegsbeispiel, sodass die Umsetzung weiterer Funktionalitäten noch aussteht. Es ist zum Beispiel denkbar, für die Anwendung je nach Bildschirmgröße ein unterschiedliches Aussehen und Verhalten zu definieren. Eine Fallunterscheidung wäre mit

{kind: "FittableColumns", components: [
        {kind:"onyx.Button", content: "Hinzufügen", ontap:"addTodoEntry"}
]},

möglich. Weiterhin kann ein Button sehr hilfreich sein, der die Todo-Liste wieder sichtbar macht. Das würde die Usability auf den unterschiedlichen Geräten stark erhöhen. Eine weitere Verbesserung wäre die Erhöhung des Grades der Modularisierung. Auch die Persistierung könnte mit anderen Mitteln gelöst werden.

Zusätzlich kann die WebApp auf weiteren Plattformen angeboten werden. Eine Anpassung der WebApp ist dafür prinzipiell nicht nötig, sondern es kommen zusätzliche Frameworks zur Anwendung. Ein Beispiel ist das Framework AppJS. Mit diesem ist es möglich die WebApp als scheinbar native Desktop-Applikation anzubieten. Weiterhin gibt es Frameworks die aus WebApps scheinbar native Apps für verschiedene mobile Plattformen (webOS, Android, iOS, etc.) generieren. Mögliche Frameworks sind zum Beispiel PhoneGap oder MoSync.

Fazit

Dieser Artikel ist nur ein kurzer Einstieg in Enyo. Es gibt noch viele spannende Themen, wie zum Beispiel Signals oder Plugins.

Weiterhin wurde deutlich, wie schnell eine WebApp mit dem Framework entwickelt werden kann. Dazu besticht Enyo durch einen einfachen, schlanken und modularen Aufbau, sodass Entwickler in der Lage sind ebensolche Anwendungen zu erstellen. Ein weiterer Vorteil ist die aktive Community von deren Unterstützung die Entwickler partizipieren.

Björn Adelberg ist Diplominformatiker und arbeitet seit 2008 als Java-Entwickler im Bereich E-Learning. Er engagiert sich in der webOS-Community und ist Autor von verschiedenen mobilen Apps.
Für die Entwicklung von mobilen Apps unter webOS 3.0 sammelte er erste Erfahrungen mit dem Framework Enyo 1.0. Mit der Veröffentlichung der Version 2.0 des Frameworks unter einer Open Source Lizenz ergab sich die Möglichkeit, weitere Plattformen zu erreichen.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -