Einführung in die Cross-Plattform Entwicklung Das Intel App Framework

Transkript

1 Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel App Framework vom Intel XDK vertraut. Es wird Schritt für Schritt eine Hybrid-App entwickelt und getestet. Voraussetzungen Die folgenden Voraussetzungen sind notwendig für die nächsten Schritte: - Das Intel XDK kostenlos Downloaden unter und installieren. - Es wird Windows, Mac OS X oder Linux benötigt. - Grundkenntnisse in HTML und JavaScript. Was ist das Intel App Framework? Das Intel App Framework ist eine umfangreiche Open Source UI-JavaScript-Bibliothek und steht unter der MIT- X11-Lizenz. Diese ist in drei Hauptmerkalen aufgebaut: Abfrage-Selektor Bibliothek für eine einfache DOM- Manipulation, Steuerelemente mit teilweiser nativer Unterstützung und es gibt die Möglichkeit eigene JavaScript- Plug-ins zu erstellen. Der hauptsächliche Fokus besteht bei einer einfachen Bereitstellung von JavaScript UI- Funktionen mit einer hohen Performance. Übung Die eigene Hybrid-App mit dem Intel App Framework Für die Übung wählen wir die Start with App Designer -Vorlage aus und geben AppFrameworkBeispiel als Projektnamen ein. Wir erzeugen das Projekt per Klick auf den blauen Create-Button. Abbildung 1 Ein neues Projekt mit AppFrameworkBeispiel erzeugen Es öffnet sich anschließend der App Designer mit einem Dialog. Dieses fragt welches JavaScript UI-Framework verwendet werden soll. In dieser Übung wird mit dem App Framework gearbeitet und wird mit einem Klick auf den Select-Button bestätigt. 1

2 Abbildung 2 JavaScript UI-Framework auswählen Der App-Framework-Query-Selector Ein Bestandteil vom Intel App Framework ist die Abfrage-Selektor Bibliothek, die zur DOM-Manipulation dient. Sie ist sehr ähnlich zu bereits bekannten JavaScript Frameworks wie JQuery Mobile oder Zepto.js. Der wesentliche Unterschied besteht bei einer optimierten Ausführungszeit. So dass eine höhere Performance gewährleistet wird. Das Intel App Framework ist auch kompatibel mit den bereits bekannten Frameworks. Mit Drag-and-Drop wird jetzt ein Text-Steuerelement auf die Oberfläche platziert. Die passenden Eigenschaften vom Text befinden sich auf der rechten Bildschirmseite. Unter Id wird der Wert lblwelcome geschrieben. Als nächstes wird ein Button-Steuerelement direkt unter dem bereits gesetzten Text-Steuerelement platziert. Das Label erhält den Wert Say hello. Beim Icon wird ein Message-Symbol ausgewählt. 2

3 Abbildung 3 Oberfläche vorbereiten Wird der Button betätigt soll nun ein JavaScript-Code ausgeführt werden. Dazu befindet sich unter den Button- Eigenschaften der Interactivity-Bereich. Mit einem Klick auf not set, öffnet sich ein Kontextmenü. In diesen wird nun Custom Script ausgewählt. Nun wird unter Action ein Custom Script angezeigt. Hier einfach wiederholt klicken und es erscheint darunter ein Edit Script -Button. Dieser wird nun angeklickt und es wird automatisch in den Code-Editor mit dem dazugehörigen JavaScript-Code gewechselt. Abbildung 4 Custom Script dem Button zuweisen 3

4 Abbildung 5 Zum Custom Script wechseln Wir befinden uns nun beim HTML Code-Editor. Das Intel XDK hat automatisch mit dem Query-Selector vom Intel App Framework, den bereits angelegten btnsayhello-button selektiert. Der Zugriff auf die HTML-Elemente erfolgt mit der $()-Funktion. Wurde diese hergestellt, wird eine Objektinstanz erzeugt. Durch weitere Funktionsaufrufe wird dann die Instanz weitergereicht. Der erzeugte Code zeigt, dass auf die btnsayhello-button-instanz eine Click-Funktion angehängt wird. Wird der Button betätigt, wird automatisch die enthaltene Funktion ausgeführt. Innerhalb dieser Funktion erfolgt nun unser eigener Code. Dieser soll ebenfalls mittels Query-Selector auf das lblwelcome-steuerelement zugreifen und einen Text ausgeben. Dazu eignet sich die html-funktion. Listing 1 veranschaulicht die dazugehörige Implementierung. $("#btnsayhello").click(function(evt) { }); $("#lblwelcome").html("hello World!"); Listing 1 Auf das Text-Steuerelement mittels Query-Selector zugreifen Die soeben erzeugte App kann man nun unter dem Emulate-Tab testen. Links oben stehen die zahlreichen Emulatoren zur Auswahl. In der Mitte vom Bildschirm wird die App im gewünschten Gerät ausgeführt. Ein einfacher Klick auf den Button genügt um den gewünschten Text zu sehen. 4

5 Abbildung 6 Die App im Emulator testen Das App-Framework-UI Das App-Framework-UI (kurz AFUI), stellt zahlreiche UI-Steuerelemente, CSS3 fertige Icons und Animationen zur Verfügung. Zudem passt sich das Layout der darunter liegenden Plattform an. Damit wird ein natives Themeing der App ermöglicht, das einen erheblichen Performancevorteil bringt. AFUI ist auch kompatibel zu MVC- Frameworks wie etwa Backbone.js. Zur Demonstration einiger Steuerelemente wechseln wir zurück zum App Designer. Dieser befindet sich hinter dem Develop-Tab. Dann wird auf der linken Seite die Index.html-Datei selektiert, worauf im Menü der Designer ausgewählt werden kann. Jetzt möchten wir 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 Layout Bereich das Header-Steuerelement aus und ziehen es per Drag and Drop zur App-Oberfläche. In den Eigenschaften wird der Title aktiviert und erhält den Wert App Framework rockt!. 5

6 Abbildung 7 Header-Steuerelement hinzufügen Jetzt erzeugen wir eine Navigationsbar. Dafür wird das Footer-Steuerelement ebenfalls mit Drag and Drop auf die App-Oberfläche platziert. In der Mitte des Footers erscheint ein kleiner vertikaler Strich. Diesen können wir mit einem Button-Steuerelement bestücken. Wichtig ist, dass der Strich beim Drag and Drop eine orangene Farbe annimmt (siehe Abbildung 8). Abbildung 8 Button zum Footer hinzufügen Das Button-Steuerelement erhält das Label Settings und ein Settings-Symbol als Icon. 6

7 Abbildung 9 Den Button in der Navigationsbar anpassen Für die Settings fügen wir nun eine Animated Sidebar hinzu. Im Animated Sidebars-Bereich klicken wir mit Drag and Drop das Left-Steuerelement auf die App-Oberfläche. Diese wird sofort geöffnet angezeigt. Um diese beim Ausführen der App standardmäßig geschlossen zu halten, muss der Haken bei Initally Open entfernt werden. Um während der Design-Zeit weiterhin die Settings bestücken zu können, wird rechts neben der App-Oberfläche ein Button mit der Left Sidebar-Icon eingeblendet. Dieser wird nun angeklickt. Abbildung 10 Left Settings-Steuerelement hinzufügen und Konfigurieren Es werden nun zwei Buttons direkt untereinander in das Left Settings-Steuerelement hinzugefügt. 7

8 Abbildung 11 Buttons hinzufügen Der erste Button erhält das Label Windows Phone mit der Id btnwindowsphone und der zweite das Label iphone mit der Id btniphone. Abbildung 12 Button-Einstellungen vornehmen Jetzt müssen alle hinzugefügten Buttons interaktiv verknüpft werden. Es genügt den App Designer mit dem Reload-Button links oben im Menü zu aktualisieren. Auf der rechten Seite im Interactivity-Bereich erscheinen dann die hinzugefügten Buttons. Der Settings-Button soll mit left uib_w_7 verknüpft werden, das für die Left Sidebar steht. Die beiden anderen Buttons sollen jeweils ein eigenes Custom Script erhalten. 8

9 Abbildung 13 Buttons verknüpfen Mit einem Klick auf den Edit Script-Button gelangen wir zum Code-Editor. Das Besondere am App Framework UI ist, dass automatisch das passende Theme von der darunterliegenden Plattform angezeigt wird. Wir schreiben jetzt den nötigen JavaScript-Code dazu, um diesen während der Laufzeit wechseln zu können. Dazu wird auf das HTML-Element Body zugegriffen. Das automatisch beim Intel XDK die ID afui erhält. Mit der addclass- und removeclass-funktion können wir dann das nötige CSS-Theme laden. Listing 2 zeigt den dazugehörigen JavaScript-Code. $("#btnwindowsphone").click(function(evt) { }); $("#afui").removeclass(); $("#afui").addclass("win8"); $("#btniphone").click(function(evt) { }); $("#afui").removeclass(); $("#afui").addclass("ios"); Listing 2 JavaScript-Code für das Wechseln der Themes Die soeben erzeugte App kann man nun unter dem Emulate-Tab testen. Links oben stehen die zahlreichen Emulatoren zur Auswahl. Wählen Sie doch einfach mal das Nokia Lumia 920 und klicken auf den Settings-Button. Die Left Sidebar öffnet sich und man kann beliebig das Plattform Layout wechseln. 9

10 Abbildung 14 Die App im Emulator Testen 10