Einstieg in das Enyo-Framework

Inhaltsverzeichnis

Das junge JavaScript-Framework Enyo hat bereits eine wechselhafte Geschichte hinter sich. Aus der Entwicklung rund um Palms/HPs früherem webOS hervorgegangen, ist es an dieses jedoch keineswegs gebunden, sondern eignet sich auch bei der Anwendungsentwicklung für andere Betriebssysteme.

In der griechischen Mythologie ist Enyo die Göttin des blutigen Nahkampfs. In der Welt der Computer, Tablets und Smartphones handelt es sich um ein objekt- und komponentenorientiertes JavaScript-Framework, das sein Debüt erstmals auf dem TouchPad genannten Tablet von HP feierte. Ursprünglich kommt das Produkt allerdings aus dem Hause Palm. Der Handheld-Pionier stellte auf der CES 2009 erstmals das Betriebssystem webOS vor. Darauf installierte Anwendungen sind im Grunde Webanwendungen auf Basis von HTML, CSS und JavaScript, die der Browser "nativ" ausführt.

Das damalige JavaScript-Framework namens Mojo war speziell für das Format von Handy-Applikationen optimiert und somit nicht für andere Endgeräte-Arten geeignet. Der Nachfolger Enyo ist von Mojo vollständig unabhängig, zudem wesentlich performanter und zu guter Letzt nicht nur für Smartphones, sondern auch für Tablets und sogar Desktop-Computer geeignet.

Einige Monate nach der Übernahme von Palm durch HP kündigte die Firma an, alle webOS Hardwareprodukte einzustellen. Inzwischen wird das Betriebssystem unter dem Namen "Open webOS" als Open-Source-Software weiterentwickelt; Enyo ist als unabhängiges JavaScript-Framework unter der Apache License verfügbar. Laut Jon Rubinstein, dem früheren Palm-Chef, gab es bereits vor dem überraschenden Kurswechsel von HP die Pläne, das Framework quelloffen anzubieten.

Enyo-Anwendungen sind theoretisch auf jedem Handy, Tablet, Laptop oder Desktop-Computer einsetzbar. In der Praxis hängt das vom aktuellen Entwicklungszustand des Frameworks und natürlich vom Endgerät selbst ab. Unter Windows lassen sich Enyo-Anwendungen im Browser ausführen. Unterstützt werden derzeit der Internet Explorer, Firefox, Safari (Mac) und vor allem Chrome. Die getesteten Anwendungen funktionierten auch unter Opera einwandfrei. Mobile Betriebssysteme wie Android und iOS werden ebenfalls unterstützt. Dank der Verpackung via PhoneGap handelt es sich aus Sicht des Kunden um eine normale App für sein Smartphone oder Tablet.

Mit PhoneGap lassen sich Webanwendungen (also auch mit Enyo umgesetzte Apps) auf den Systemen Android, BlackBerry, iOS, Symbian, Tizen, Bada, webOS und Windows Phone ausführen. Die Apps können Entwickler in der Regel wie gewöhnliche native Anwendungen in einem entsprechenden Katalog zum Download anbieten.

Aus Sicht des Kunden handelt es sich um eine normale App für sein Smartphone oder Tablet. Weitere Informationen und Anleitungen zu PhoneGap selbst findet der Leser auf der PhoneGap-Seite. Alternativ ist es auch mit AppJS möglich, Desktop-Applikationen aus HTML, CSS und JavaScript zu erstellen. Unterstützt werden hier Windows, Linux und Mac OS X.

Aufbau einer Enyo-Anwendung durch Kinds

Die Grundidee von Enyo ist es, Objekte, Komponenten, Kontrollelemente und andere Programmteile durch so genannte Kinds – eine Art Klasse – abzubilden. Eine Anwendung setzt sich dann aus den Kinds zusammen. Das Motto lautet: "You Got to Keep It Separated". Die einzelnen Elemente sollten möglichst klein und des Weiteren separat voneinander einsetzbar sein. Die Wiederverwendbarkeit ist somit hoch. Ein Kind kann wiederum aus verschiedenen Komponenten und Inhalten bestehen.

Wie im folgenden Beispiel-Quellcode lässt sich ein Kind durch die Methode enyo.kind(inProps) erzeugen. Das erzeugte Element besteht aus den Komponenten Header, PageContent und -Footer. Diese sind ebenfalls Kinds und werden an anderer Stelle definiert und beschrieben.

enyo.kind({
  name: "Page", 
  kind: enyo.Component, 
  components: [    
        { 
            kind:    "Header", 
            name:    "pageHeader",
            content: "Testee"
        },  
        {
            kind:    "PageContent",
            name:    "pageContent",
            content: "Beispiel-Inhalt"
        },   
        { 
            kind:    "Footer",
            grabber: true
        }
    ],
  reloadPage: function() { 
      this.$.pageContent.setContent("Neuer Beispiel-Inhalt"); 
  }
}); 

Der Grundbaustein

Im Beispiel wird ein Kind namens "Page" definiert, welches das Objekt enyo.Component um Header, PageContent und -Footer erweitert. Eine Komponente besteht aus einer Anzahl von Komponenten, Events, Getter-, Setter- und weiteren Methoden. Im Beispiel findet man keine Events und sonst nur die Methode reloadPage, die den Text des Kind pageContent verändern kann.

Page erbt von enyo.Component und besitzt somit die von der Mutterklasse mitgegebenen Methoden. Diese sind hier nicht weiter von Bedeutung, lassen sich aber unter enyojs.com anzeigen (dazu die Checkbox "show inherited" ganz oben anklicken).

Durch enyo.kind(inProps) lässt sich einfach ein neues Kind erzeugen. Diese vom Programmierer erschaffenen Komponenten sind im Idealfall nützlich und können einfach geteilt werden. Die Enyo-Community pflegt eine Galerie, in der einige unterschiedlich einsetzbare Kinds zur Verfügung stehen. Sie lassen sich als Demo im Browser testen, ihr Quelltext ist in der Regel einsehbar. Unter Beachtung der Lizenz (z. B. Apache 2.0) kann ein Entwickler das Kind einfach und schnell in sein Enyo-Projekt einbinden. Beispiele für dort angebotene Komponenten sind ein Time Picker, ein Grid Layout oder ein LocalStorage Wrapper.

Im Enyo-Framework findet sich von Haus aus eine Reihe Kinds und Widgets. Einige Elemente der UI-Bibliothek Onyx stellt der Autor im Folgenden vor. Genauere Details und alle verfügbaren Komponenten finden sich unter der offiziellen Enyo API.