Anwendungsbeispiel To-Do-Liste

Das Javascript Framework Enyo
Kommentare

Dieser Artikel beinhaltet eine Einführung in das Javascript Framework Enyo anhand einer Beispiel-Anwendung Todo-Liste, welche auf GitHub verfügbar ist. Es werden Grundbegriffe erläutert, der Projektaufbau beschrieben, die Community vorgestellt und wichtige Komponenten erklärt.

Das Javascript Framework Enyo ermöglicht die Entwicklung von WebApps für Desktop und mobile Systeme. Es verwendet das Programmierparadigma der Objektorientierung. Somit lassen sich leicht einzelne Komponenten der Anwendung kapseln, was einen höheren Grad der Wiederverwendung erlaubt. Enyo selbst ist ein schlankes Framework, welches durch seinen modularen Aufbau leicht erweiterbar ist. Lizenziert ist das Framework unter der Open Source Apache 2.0 Lizenz und der Quellcode ist auf GitHub einsehbar.

Einführung

Im Umfeld der Web-Programmierung existieren verschiedene Möglichkeiten, Benutzeroberflächen auf Clientseite zu implementieren. Hauptsächlich kommen zu diesem Zweck HTML, Javascript und CSS zum Einsatz. Die Verwendung von CSS für die Umsetzung des Layouts ist fest definiert. Anders sieht es bei HTML und Javascript aus. Auf Javascript kann sowohl vollständig verzichtet, als auch hauptsächlich gesetzt werden. In der Praxis ist häufig der Mittelweg zu finden, indem HTML die Struktur einer Webseite definiert und Javascript zum Beispiel bei der Validierung von Formularen oder für einzelne Widgets verwendet wird.

Das Framework Enyo setzt hauptsächlich auf Javascript und CSS. HTML spielt für den Entwickler eher eine untergeordnete Rolle. Der Browser rendert zur Darstellung zwar HTML, aber erst nachdem das Enyo das entsprechende Document Object Model (DOM) aufgebaut hat. Der Enyo Entwickler setzt seine Anwendung aus verschiedenen Komponenten zusammen und weist diesen optional CSS-Eigenschaften zu. Er definiert Events und bestimmt, welche Reaktionen durch diese oder durch bestimmte Signale ausgelöst werden.

Das Grundkonzept von Enyo

Der wichtigste Begriff innerhalb des Frameworks Enyo ist Kind. Vorstellen sollte man sich ein Kind als eine Art Klasse oder Komponente, aus denen Enyo-Anwendungen zusammengesetzt werden. Weitere grundlegende Begriffe sind Component und Control, die im folgenden erläutert werden.

Component

Das Objekt enyo.Component ist der Grundbaustein jeder Enyo-Anwendung. Es besitzt sowohl Eigenschaften und Events, als auch andere Komponenten. Eine Enyo-Komponente besitzt eine Anzahl von Komponenten, welche den Inhalt dieser repräsentieren sowie Schnittstellen die nach innen (Setter-Methoden) und außen (Events, Getter-Methoden) wirken. Am Ende übersetzt Enyo eine Komponente in eine bestimmte Anzahl von DOM-Knoten.

Beispiel einer Komponente
enyo.kind({
        name: "MeineKomponente",
        kind: enyo.Component,
        myProperty1: 10,
        published: {
                publishedProperty1: 15,
                publishedProperty2: 20
        },
        events: {
                onChange: ""
        },
        create: {
                this.inherited(arguments);
        },
        components: [
                {name: "title", tag: "h1", content: "Mein Titel"},
                {name: "paragraph", tag: "p", content: "Mein Inhalt."}
        ]
})

Das obige Beispiel zeigt wie mit Hilfe der Methode enyo.kind ein Kind, welches das Objekt enyo.Component erweitert, angelegt wird. Dabei werden eine Reihe von Eigenschaften definiert.

  • name: Name des neu erstellten Kind.
  • kind: Von diesem Objekt oder Kind wird abgeleitet.
  • published: Eigenschaften, die in diesem Block definiert werden, müssen eine Standardbelegung vorweisen und sind von außen automatisch ansprechbar über getter, setter und change Methoden.
  • events: In diesem Block können Events definiert werden. Ein Event onChange wird ausgelöst mit dem Aufruf von this.doChange().
  • components: Enthält eine Liste von weiteren Komponenten bzw. Kinds.
  • myProperty1: Beschreibt eine Eigenschaft des Kind. Es existieren dazu keine getter, setter oder change Methode. Nachträglich können diese aber selbst implementiert werden.

Im obigen Beispiel enthält das neue Kind zwei weitere Komponenten. Das Attribut tag ist in diesem Zusammenhang besonders interessant. Ein einfaches Beispiel könnte wie folgt aussehen:

{ tag: "p", content: "Hello World!"}

Enyo erzeugt aus dieser Komponente das folgende HTML Markup:

Hello World!

Control

Das Objekt enyo.Control erweitert enyo.Component um eine Beschreibung eines Knoten im DOM. Eine Besonderheit ist, dass es DOM-Events und DOM-ähnlich Events unterstützt.

Kind

Kinds sind die Bausteine einer Enyo-Anwendung. Erzeugt werden sie mit Hilfe der Enyo-Framework Methode enyo.kind(inProps).

Projektaufbau

Im Prinzip sind für die Umsetzung einer Enyo-Anwendung nur die HTML-Datei index.html, die Enyo- und Onyx-Bibliotheken, ein Ordner assets sowie die Datei packages.js notwendig. Der Ordner assets enthält beliebige Ressourcen der Anwendung, zum Beispiel Bilder oder Videos. In der Datei packages.js ist dagegen eine Auflistung der Quelldateien der Anwendung zu finden.

Der bevorzugte Weg geht aber über bootplate. Dieses stellt ein Skelett einer Enyo-Anwendung bereit, inklusive nützlicher Tools zum Minimieren und Bereitstellen der Anwendung.

Community

Die wichtigste Quelle für Informationen und Beispiele ist die Webseite enyojs.com. Diese führt weiter zu Anleitungen, zur API-Dokumentation und der Community Seite. Sehr zu empfehlen ist hier das englisch-sprachige Forum. Weiterhin lohnt ein Blick in die Community Gallery.


Themen der folgenden Seiten:

  • Das Beispiel Todo-Liste
  • Grundlayout der Enyo-Anwendung
  • Hinzufügen eines Buttons
  • Das Backend
  • Layout
  • Ausblick
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -