Teil 2 der Artikelserie

Intel-App-Framework: Cross-Plattform-Entwicklung mit HTML5 und JavaScript
Kommentare

Dieser Artikel ist der zweite Teil einer Serie zum Thema Cross-Plattform-Entwicklung. Diesmal erkunden und erlernen Sie ausführlich die Möglichkeiten des Intel-App-Frameworks im Zusammenspiel mit dem Intel XDK. Sie steigen mit den Grundlagen des Intel-App-Frameworks ein und sind schon bald mit den wichtigsten Vorgehensweisen vertraut.

Der erste Teil dieser Serie stellte eine Einführung zum Thema Cross-Plattform-Entwicklung dar. Es wurden die Vor- und Nachteile gezeigt und aufgewiesen, weshalb das Thema für uns Entwickler immer wichtiger wird. Passend dazu wurde das kostenfreie Entwicklungstool Intel XDK vorgestellt [1]. Das gerade einmal 74 Megabyte große Tool ist sehr leichtgewichtig und läuft unter Windows, Mac OS X und Linux. Es wurde selbst komplett in HTML und JavaScript geschrieben. Im Gegensatz zu bestehenden Lösungen werden hier alle wichtigen Funktionen aus einer Hand kostenfrei angeboten. Es gibt einen Webeditor sowie -designer und Emulatoren mit Debugging-Möglichkeiten. Auch das Erzeugen der Apps für gängige Plattformen ist inklusive.

Hier geht’s zu Teil 1 >>>

Das Intel-App-Framework

Das Intel XDK ist aber nicht nur ein Entwicklungstool, sondern auch eine Allroundlösung für Cross-Plattform-Entwickler, denn passend dazu wird auch das Intel-App-Framework zur Verfügung gestellt. Dabei handelt es sich um eine umfangreiche UI-JavaScript-Bibliothek, die auf drei Hauptmerkmale aufbaut:

  1. Es verfügt über eine Abfrage-Selektor-Bibliothek für die einfache DOM-Manipulation, deren Syntax der von jQuery sehr ähnlich ist.
  2. Zusätzlich umfasst es ein UI/UX-Framework, das gestochen scharfe Animationen und flüssiges Scrollen bietet (native Lösungen).
  3. Zudem gibt es die Möglichkeit, hier für JavaScript Plug-ins zu erstellen.

Das Intel-App-Framework ist Open Source unter der MIT-X11-Lizenz verfügbar und hieß ursprünglich jqMobi [2]. Sein wesentliches Ziel ist die einfache Bereitstellung von JavaScript- und UI-Funktionen mit einer hohen Performance, denn diese wird bei hybriden Apps oft kritisiert. Das liegt daran, dass das Webprojekt bei der App-Erstellung zuerst an einen Cloud-Compiler gesendet werden muss. Dieser hält für jede gängige Plattform ein fertiges App-Gerüst bereit. Die App enthält ein WebBrowser-Steuerelement, das mit dem von uns hochgeladenen Webprojekt verknüpft wird. Dieses Steuerelement ist eine WebKit Engine mit Schnittstellen zum nativen System und wird WebView genannt. Anhand dieser Architekturlösung fehlt es jedoch immer etwas an Performance und Komfort – schließlich liegt durch das WebView immer ein Vermittler dazwischen. Genau dieses Problem möchte das App-Framework auf elegantere Weise lösen. Zum Beispiel erkennt es, auf welcher Plattform die App gerade ausgeführt wird und stellt passend dazu native Oberflächenelemente zur Verfügung. Es spricht in diesem Fall Erweiterungen der WebKit Engine an, was die Performance enorm erhöht.

App-Framework-Query-Selector

Die App-Framework-Abfrage-Selektor-Bibliothek konzentriert sich auf die nützlichsten Funktionen für eine einfache DOM-Manipulation, die Technologien wie jQuery und Zepto.js sehr ähnlich ist. Insgesamt gibt es hier über sechzig APIs.

Zur Verwendung der Bibliothek starten Sie das Intel XDK. Dann erzeugen Sie ein neues Projekt vom Projekttemplate „Start with App Designer“ mit dem Namen AppFrameworkExample. Anschließend wird automatisch zum Develop-Tab gewechselt. Bei der Auswahl der Index.html erscheint ein Dialog, der Sie fragt, welches UI-Framework verwendet werden soll. Bestätigen Sie mit einem Klick auf den Select-Button die Auswahl der ersten Option „App-Framework“. Danach wird links oben im Menü zum Codemodus gewechselt.

Abb. 1: Auswahl des UI-Frameworks

Nun muss vom App-Framework eine Referenz auf die JavaScript-Library gesetzt werden und zwar direkt nach der intelxdk.js-Referenz (Listing 1).


Innerhalb des JavaScript-Bereichs erfolgt der Zugriff auf die HTML-Elemente mit der $()-Funktion. Dazu werden unterschiedliche Parameter zur Zuweisung unterstützt:

  • String: Zugriff auf Elemente mit ID-Attributen, Elemente, die auf bestimmte CSS-Klassen verweisen, oder beides. Auch ein direkter Verweis für alle HTML-Elemente vom gleichen Typ ist möglich (Listing 2).
  • Element: Das App-Framework erzeugt dynamisch ein HTML-Elementobjekt.
  • Array/Object: Das App-Framework erzeugt dynamisch ein HTML-Elementobjekt mit Kinder-Elementen.
  • Function: Führt eine Funktion aus, wenn DOMContentLoaded angetriggert wurde.
$("#foo");  //Finde HTML-Element mit id="foo"
$("div");  //Finde alle Div-Elemente auf der aktuellen Seite
$(".foo");  //Finde alle HTML-Elemente, die den CSS-Klassennamen ="foo" verwenden
$("#foo span");  //Finde alle Span-Elemente, die ein id="foo" beinhalten

Wurde der Zugriff zu einem HTML-Element hergestellt, wird eine Objektinstanz davon erzeugt. Durch weitere Funktionsaufrufe wird dann die Instanz weitergereicht und verarbeitet. Zum Ausblenden eines Div-Elements würde man z. B. zusätzlich die hide()-Funktion aufrufen.

$("#foo").hide();
...
Hallo Welt!

Um dynamisch ein Div-Element mit der ID myNewDiv zu erzeugen und dieses mit Logik zu bestücken, wird im geöffneten Intel-XDK-Projekt der Code aus Listing 4 eingefügt. Unter Windows wird das Projekt mit der Tastenkombination STRG + S gespeichert. Zum Testen der App muss in den Emulate-Tab gewechselt werden. Nun öffnet sich eine MessageBox.

var div = $("
This is some content
"); $(document.body).append(div); div.bind("click",function(){ alert("I was clicked"); });

Webentwickler mit jQuery-Erfahrung wird die große Ähnlichkeit der Syntax und der Funktionen sofort auffallen. Das App-Framework ist nämlich eine optimierte Version der jQuery-Mobile-Variante und durch den konsequenten Einsatz von HTML5 und dem fehlenden Legacy-Browser-Support schneller und agiler. Es werden nur die neuesten mobilen Browser unterstützt, die älteren Modelle hingegen nicht mehr.

Der Zugriff auf die Elemente unterscheidet sich indes durch die Selektoren. So werden vom App-Framework nur W3C-CSS-valide Paramater unterstützt. Bei jQuery wiederum sind auch selbst definierte Pseudoparameter möglich. Das App-Framework ist allerdings auch direkt mit jQuery kompatibel.

[ header = Seite 2: App-Framework-UI ]

App-Framework-UI

Das App-Framework-UI, kurz AFUI, ermöglicht ein natives Theming der App. Anders ausgedrückt: Das Layout passt sich der darunterliegenden Plattform an. AFUI ist auch kompatibel zu MVC-Frameworks wie etwa Backbone.js. Dazu kommen über eine CSS3-Datei fertige Icons und Animationen. Erweiterungen sind einfach durch den zusätzlichen Plug-in-Support zu ermöglichen.

Im vorher mit dem Intel XDK erzeugten Projekt wird das AFUI durch die Verwendung des App-Designers automatisch referenziert. Aus diesem Grund entfernen wir wieder den bereits geschriebenen Code aus Listing 1 und 4. Anschließend wechseln wir links oben im Menü in den Designmodus.

In einem weiteren Beispiel möchten wir jetzt einen Header für den Titel und einen Footer für die Navigationsbar hinzufügen. Dazu wählen wir auf der linken Seite unter „Controls“ im Layoutbereich das Header-Control aus und ziehen es per Drag and Drop in die Mitte des Bildschirms zur App-Oberfläche. Oben und unten erscheint automatisch ein blauer Balken. Direkt darüber wird durch eine Pfeilnavigation angezeigt, welches UI-Element aktuell ausgewählt ist. Passend dazu stehen auf der rechten Seite die Eigenschaften. Mit einem Klick auf die Title-CheckBox kann nun ein Titel festgelegt werden. Hier fügen wir das klassische „Hallo Welt“ ein.

Jetzt erzeugen wir die Navigationsbar, indem wir per Drag and Drop das Footer-Control platzieren. In der Mitte des Footers erscheint ein kleiner vertikaler Strich. Diesen können wir mit einem Button aus dem Form-Bereich bestücken. Wichtig dabei ist, dass der Strich beim Drag and Drop eine orangene Farbe annimmt. Nur so weiß der Designer sicher, dass der Button auch für den Footer vorgesehen ist. Dem erzeugten Button geben wir jetzt ein Label mit der Aufschrift „Info“. Direkt darunter wird als Nächstes die Icon-CheckBox aktiviert und das Infosymbol ausgewählt. Um auf den Klick des Buttons reagieren zu können, definieren wir die ID mit dem Namen buttonInfo.

Abb. 2: Button zum Footer hinzufügen

Abb. 3: Button-Einstellungen für die Navigationsbar

Dann wechseln wir in den Codebereich und schreiben den JavaScript-Code aus Listing 5 zum Auslösen einer Meldung, wenn in der Navigationsbar auf den Info-Button geklickt wurde. Wichtig ist hierbei, den Code innerhalb der onDeviceReady-Funktion zu schreiben. Anschließend kann die App mit einem Klick auf den Emulate-Tab im Emulator getestet werden.

$("#buttonInfo").click(function(){
    alert("Codet by me!")
});

Abb. 4: Erstes Layout mit Funktionalität

Dieses Beispiel hat gezeigt, wie einfach der App-Designer zur Layouterstellung funktioniert und wie man anschließend die passende Logik dazu programmiert. Aber der App-Designer bietet noch zahlreiche weitere Funktionen. So kann man schon während der Designzeit zu den nativen Themes der Plattformen wechseln. Wird zum Beispiel auf eine freie Fläche geklickt, sodass der Body-Bereich oben selektiert ist, erscheinen rechts die passenden Eigenschaften. Hier steht dann eine ComboBox mit den unterschiedlichen Themes zur Auswahl.

[ header = Seite 3: Weitere Steuerelemente ]

Weitere Steuerelemente

Die App-Framework-UI-Bibliothek bietet zudem eine Vielzahl an fertigen Steuerelementen. Diese konnten wir bereits unter den Controls im App-Designer sehen, wo wir das Header- und Footer-Steuerelement hinzugefügt haben. Nun soll durch ganz besondere Controls noch etwas mehr Interaktivität folgen, z. B. durch die Animated Sidebars.

Um diese besser kennenzulernen, greifen wir wieder zu unserem bereits erzeugten Projekt im Intel XDK. Im Controls-Bereich des App-Designers wählen wir die linke Sidebar mittels Drag and Drop aus und fügen diese auf der Oberfläche der App ein. Die Sidebar wird sofort angezeigt und rechts neben der App-Oberfläche erscheint nun auch ein Sidebar-Button. Mit diesem Button können wir die Sidebar zur Designzeit ein- oder ausblenden.

Die Sidebar zeigt bereits zwei fertige Container. Der obere Container kann durch eine Grafik oder einen Titel bestückt werden. Im unteren Container platzieren wir jetzt mittels Drag and Drop zwei Buttons. Der erste Button bekommt das Label „Windows Phone“ mit der ID buttonWindowsPhoneTheme und der zweite das Label „iPhone“ mit der ID buttoniPhoneTheme.

Nun muss die untere Navigationsbar durch einen weiteren Button erweitert werden, der später die Sidebar öffnen soll. Der Button wird hierbei mittels Drag and Drop direkt über dem linken Strich innerhalb der Navigationsbar platziert, sodass sich der Strich wieder orange verfärbt. Der Button erhält das Label „Settings“ und ein Settings-Icon.

Um den Settings-Button nun mit der Sidebar zu verknüpfen, wechseln wir durch Auswählen der Sidebar zu ihren Eigenschaften. Dort gibt es den Menüpunkt „Triggered By“. Mit einem Klick auf den „+“-Button können wir nun die Button-Einstellungen konfigurieren. Zu guter Letzt wird noch die „Initially-Open“-CheckBox deaktiviert, damit die Sidebar anfangs noch geschlossen bleibt. Ganz oben unter „Style“ stehen unterschiedliche Arten zur Verfügung, wie die Sidebar innerhalb der App integriert werden kann. Ein Ausprobieren und Testen im Emulator zeigt, was hinter ihnen steckt.

Abb. 5: Die left Sidebar mit Buttons und erweiterter Navigationsbar

Jetzt muss nur noch die passende Logik der beiden Buttons hinzugefügt werden. Das Besondere an AFUI ist, dass automatisch das passende Theme ermittelt und angezeigt wird. Durch die Buttons soll jetzt manuell zur Laufzeit der Wechsel der Themes stattfinden. Dazu wird in den Codemodus gewechselt. Direkt unter dem JavaScript-Code aus Listing 5 folgt nun der Code aus Listing 6. Dieser entfernt lediglich aus dem Body-Element die zugewiesene CSS-Klasse des erkannten Themes. Daraufhin wird jeweils manuell eine neue CSS-Klasse dafür festgelegt.

Das war auch schon alles – nur noch das Projekt abspeichern und zum Emulate-Tab wechseln. Wählen Sie hier z. B. das Nokia Lumia 920 und öffnen Sie die Sidebar durch einen Klick auf den Settings-Button. Nun können Sie den Theme-Effekt über die beiden Buttons testen.

Abb. 6: Wechseln von Themes zur Laufzeit

$("#buttonWindowsPhoneTheme").click(function(){
  $("#afui").removeClass();
  $("#afui").addClass("win8");
});

$("#buttoniPhoneTheme").click(function(){
  $("#afui").removeClass();
  $("#afui").addClass("ios");
});

Multimedia

Ob Web oder App, beide haben etwas gemeinsam: einen umfangreichen Multimedia-Support. Das AFUI stellt dafür ebenfalls zahlreiche Steuerelemente zur Verfügung. In einem kurzen Beispiel soll nun das YouTube-Steuerelement gezeigt werden. Dieses befindet sich unterhalb des App-Designers ganz links unten im Mediabereich. Wir ziehen das Steuerelement mittels Drag and Drop auf die App-Oberfläche. Rechts bei den Eigenschaften soll die passende Source (Src) dazu folgen. Als Beispiel kann das Video unter [3] dienen.

Das war auch schon alles. Einfache Vorgehensweisen wie diese sind ein wesentlicher Vorteil der App-Entwicklung mit HTML. Bei der nativen Entwicklung muss oft erst ein Steuerelement erstellt und etwas mehr Zeit für die Integration investiert werden. Beim Blick in den Codebereich sieht man auch, dass es sich hierbei nur um ein einfaches iFrame-Element handelt. Dennoch bietet AFUI durch den App-Designer ein effektives Tooling.

Abb. 7: Erstes Layout mit Funktionalität

Splashscreen

Beim Starten von Apps kann durch das Laden der Daten einige Zeit vergehen. Das kann durch einen angenehmen Startbildschirm (Splashscreen) verschleiert werden. Um solch einen Bildschirm in seine eigene Cross-Plattform-App zu integrieren, sind nur wenige Schritte notwendig. Man benötigt lediglich ein Div-Element innerhalb des Body-Bereichs mit der ID splashscreen. Für das richtige Layout wird außerdem die CSS-Klasse ui-loader deklariert. Für eine zusätzliche Animation kann dann noch ein Span-Element mit der CSS-Klasse ui-icon ui-icon-loading spin hinzugefügt werden (Listing 7).

Starting app

Fazit

Das Intel-App-Framework als UI-Framework hat große Ähnlichkeiten zu jQuery Mobile, Zepto.js oder Twitter Bootstrap, konzentriert sich aber auf die wesentlichen Punkte wie Einfachheit und Performance. Durch den Zugriff auf native Themes und das umfangreiche Tooling mittels App-Designer zeigt es sich von seiner attraktiven Seite. Zudem fällt sehr angenehm auf, dass es sich hierbei um Open Source handelt [4]. So kann abseits vom Intel-XDK-Produktteam die gesamte Webcommunity an der gemeinsamen Weiterentwicklung teilnehmen. Obwohl das Produktteam alle zwei bis vier Wochen ein Update veröffentlicht, löst dies die Abhängigkeit auf. Ähnlich im App-Designer: Dieser unterstützt unabhängig andere UI-Frameworks wie jQuery Mobile, Bootstrap und Topcoat. So kann jeder Entwickler sein bevorzugtes UI-Framework selbst auswählen.

In der nächsten Folge beschäftigen wir uns mit dem Thema Responsive Design. Bei Responsive Design handelt es sich um einen gestalterischen und technischen Ansatz zur Erstellung von Apps, damit diese auf die Eigenschaften des jeweils benutzten Endgeräts reagieren. Der grafische Aufbau einer „responsive“ App erfolgt anhand der Anforderungen des jeweiligen Geräts. Bei Fragen stehe ich gerne per E-Mail zur Verfügung. Jetzt wünsche ich Ihnen aber erst einmal viel Spaß mit dem Intel XDK und dem Intel-App-Framework.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -