Ein kleines Einstiegsprojekt

Für den Anfang sei das vom Enyo-Team angebotene Template "Bootplate" unter enyojs.com heruntergeladen und in einen Ordner der Wahl entpackt. Dabei handelt es sich um ein Gerüst eines Projekts, das sich als Vorlage für eigene Entwicklungen verwenden lässt. Neben dem Framework Enyo und der Bibliothek Onyx enthält Bootplate Tools zum Minimieren und Bereitstellen der Webanwendung.

Beim ersten Kontakt mit dem Framework ist es sinnvoll, diese Werkzeuge und alle theoretisch nicht benötigten Ordner und Dateien aus Bootplate zu löschen. Somit hat der Anwender anschließend eine größere Übersicht über die Projektstruktur.

Die Ordner api, assets, build, deploy und tools können beseitigt werden; die index.html ebenfalls, da sie sich auf den bereits gelöschten Ordner "build" bezieht. Da die mitgelieferten Tools hier nicht verwendet und die Anwendung nicht installiert werden, geht auch das Entfernen dieser Ordner in Ordnung.

Bootplate sollte nun nur noch die Ordner enyo, lib und source sowie die debug.html enthalten. Im Ordner enyo befindet sich der Quellcode des Frameworks. Unter lib gibt es die Bibliotheken, also Onyx. Der Ordner source enthält die Quelldateien App.js und package.js. Auf die CSS-Datei ließe sich theoretisch auch verzichten.

Nun ist die Datei package.js in einem Editor der Wahl zu öffnen. In der Datei befindet sich die Methode enyo.depends(). Als Übergabeparameter gibt es dort verschiedene Dateipfade. Das sind die relativenPfade zu den Bibliotheken und den Quelldateien. package.js bleibt im Projekt unverändert.

Die Datei App.js wird vollständig neu geschrieben. Wie gelernt definiert der Entwickler ein neues Kind durch die Methode enyo.kind(inProps). Es bekommt einen Namen und ein Array:

enyo.kind({
  name: "App",
  components: [], 
});

Die Onyx-Bibliothek

Anschließend befüllt man noch das leere Array mit einigen Komponenten. Für das Projekt sind nur die Widgets onyx.Button, onyx.Input und onyx.InputDecorator von Bedeutung. Alle Widgets der Onyx-Bibliothek sind bereits mit CSS ansprechend verschönert. Soll das Kind eine bestimmte CSS-Klasse verwenden, lässt sich diese über die Eigenschaft "classes" angeben. Alternativ kann man auch CSS-Code direkt in einem Kind verwenden, wie es beim Beispiel-Button der Fall ist.

{
  kind: "onyx.Button", 
  ontap: "sayHello", // ontap-Event
  content: "Let's go!", 
  style: "background-color:orange; color:white; margin-bottom:12px;" // CSS
},

Der onyx.Button ist ein Kind vom Typ enyo.Button. Der Quellcode kommt in das Array components und beschreibt das Steuerelement. Klickt ein Benutzer auf den Button, wird die Funktion sayHello ausgeführt. Diese muss der Entwickler natürlich später erst noch implementieren.

Bevor das Eingabefeld an die Reihe ist, muss noch ein br-tag an dieser Stelle hinzukommen. Das geschieht durch { tag: "br" }. Achtung: Dabei darf man nicht das Komma zwischen Button und br-tag vergessen. Das gilt auch für die zwei weiteren Elemente.

onyx.Input sollte innerhalb eines onyx.InputDecorator verwendet werden. Dazu wird im Array ein onyx.InputDecorator eingefügt, der ebenfalls ein Komponenten-Array besitzt, in dem dann onyx.Input
sitzt. Der Snippet sieht dann so aus:

{
  kind: "onyx.InputDecorator",
  components: [
    {
      name: "userInput",
      kind: "onyx.Input",
      placeholder: "Hier tippen..."
    }    
  ]
},

Der Benutzer soll Werte in das Eingabefeld eintippen können, die nach einem Klick auf den Button ausgegeben werden. Dazu erstellt der Entwickler noch einen weiteren Eintrag im Array, das wie folgt aussieht:

{ 
  name: "output",
  content: ""
},

Zuletzt schreibt man noch die Methode sayHello. Sie lässt sich hinter dem components-Array des Kind App anlegen. Zu beachten ist, dass hinter dem Array ein Komma steht. Dann folgt die Methode, die das Eingabefeld ausliest und den Inhalt von output neu setzt:

sayHello: function() {
  var t = this.$.userInput.getValue();
  this.$.output.setContent("Hallo Welt! Ihre Eingabe lautete: "+t);
}

Ein Blick in die Datei debug.html zeigt, dass sich dort im Body-Tag eine Zeile JavaScript befindet:

new App().renderInto(document.body); 

Mit ihr wird das Kind App in den Dokument-Body gerendert. Oder anders gesagt: Dies "startet" die Enyo-Anwendung. Öffnet man nun also die HTML-Datei in einem unterstützten Browser, sollte man die Webanwendung analog zu Abbildung 1 sehen.

Nach dem Starten (Abb. 1)

Ist das nicht der Fall, kann der Entwickler Tools wie eine Fehler- oder JavaScript-Konsole im Browser aufrufen, was die Fehlersuche enorm erleichtert.

Texteingabe (Abb. 2)

Nach Klick auf den Button (Abb. 3)

Fazit

Enyo-Kinds haben eine große Wiederverwertbarkeit, sie lassen sich auch in anderen Projekten benutzen. Ein geschriebenes Kind lässt sich somit in verschiedenen Enyo-Projekten einsetzen, es lässt sich recht einfach hinzufügen und ist je nach Verwendungszweck nicht mal weiter anzupassen.

Die Enyo-Community bietet schon einige interessante Komponenten zum Gebrauch an. Mit Enyo erstellte Anwendungen können sinnvoll auf kleinen und großen Bildschirmen angezeigt werden und sind außerdem auf den meisten Systemen lauffähig. (ane)

Simon Pfundstein
studiert Wirtschaftinformatik plus an der Hochschule Offenburg. Außerdem unterstützt er Tamoggemon Ltd bei Projekten.