Entwickeln von HTML5-Anwendungen für Intel AppUp®: Teil 1 – Ein einfaches Beispiel

Kategorien:

Entwickeln von HTML5-Anwendungen für Intel AppUp(SM);
Teil 1: Ein einfaches Beispiel

Einleitung

Dieser Artikel ist der erste einer ganzen Serie von Artikeln, die sich mit dem Entwickeln von HTML5-Anwendungen für Intel AppUp(SM) beschäftigen. In diesem ersten Artikel geht es um die Grundlagen des Paketierens einer Minianwendung mit dem Tool Encapsulator. In den weiteren Artikeln werden die verschiedenen Features von HTML5 anhand größerer Beispielanwendungen beschrieben. Es wird davon ausgegangen, dass Ihnen HTML5 nicht ganz neu ist oder dass Sie zumindest mit HTML4 und JavaScript vertraut sind.

Wir werden uns auf die Plattform Windows konzentrieren, wobei Encapsulator auch Pakete erzeugt, die auf der Netbook-Version von MeeGo ausgeführt werden können. Ziel ist es, diese Anwendungen mit minimalem Aufwand zukünftig auch auf anderen Plattformen, wie Tizen, zum Laufen zu bringen.

Sämtliche in diesem Artikel beschriebenen Quelldateien können hier heruntergeladen werden.

Zu beachten ist, dass sich das Tool Encapsulator zum Zeitpunkt des Schreibens noch im Beta-Stadium befindet. Daher kann es zwischen dem, was hier beschrieben und gezeigt ist, und dem, was letztendlich veröffentlicht wurde, einige Unterschiede geben.

Minianwendung

Im Rahmen dieses ersten einfachen Beispiels wollen wir eine Minianwendung mit dem Namen "Simple Example" schreiben, die lediglich eine Webseite anzeigt und dabei ein einfaches Style Sheet und etwas JavaScript-Code verwendet. Ich werde zeigen, wie einige der von AppUp bereitgestellten APIs zu verwenden sind. Anschließend werde ich Sie durch die Schritte zum Paketieren des Programmcodes als Anwendung (mit dem Tool Encapsulator) führen und zeigen, wie die Anwendung auf einem Windows-Desktop installiert und ausgeführt werden kann.

Es ist zwar möglich, den gesamten Code in einer einzigen HTML-Datei unterzubringen, aber in der Praxis sollte der JavaScript-Anteil bei allen Anwendungen, die über die einfachsten Bedürfnisse hinausgehen, in mindestens einer separaten Datei abgelegt werden. Außerdem werden wir, um die typische Verwendung von Style Sheets zu zeigen, auch eine CSS-Datei aufnehmen.

Als Ausgangspunkt benötigen wir eine Haupt-HTML-Datei, index.html, die auf unser Style Sheet (app.css) und eine externe JavaScript-Datei (functions.js) verweist. Die Haupt-HTML-Datei muss die Bezeichnung index.html erhalten, für alle anderen Dateien können Sie die Bezeichnung frei wählen. Die ersten paar Zeilen unserer Datei index.html sind unten im Codebeispiel 1 zu sehen. Darin verweisen wir auf das Style Sheet und die JavaScript-Datei.

 <!DOCTYPE HTML> <html> <head> <title>HTML5 Application: Simple Example</title> <link href="app.css" rel="stylesheet" type="text/css" /> <script src="functions.js" type="text/javascript"></script> </head>

Codebeispiel 1: Haupt-HTML-Datei Teil 1

Jetzt werden wir den <body>-Teil der Webseite mit einer Überschrift und etwas Text implementieren. Dies ist im Codebeispiel 2 zu sehen:

 <body> <h1>HTML5 Application: <em>Simple Example</em></h1>  This is a simple first example of an HTML5 application. It illustrates what is needed to use Encapsulator to package an HTML5 application for AppUp. As well as a single HTML file, it includes a JavaScript file and style sheet. It shows how to call some of the Encapsulator AppUp APIs and use some HTML5 features.  </hr>

Codebeispiel 2: Haupt-HTML-Datei Teil 2

Wir wollen drei Schaltflächen bereitstellen und sie mit den JavaScript-Funktionen verknüpfen, die beim Drücken dieser Schaltflächen ausgeführt werden sollen. Der Code für diese Schaltflächen ist im Codebeispiel 3 zu sehen:

<a href="#" id="FullScreen" class="button black" onclick="fullScreen()">Set Full Screen Mode</a>
<a href="#" id="ExitFullScreen" class="button white" onclick="exitFullScreen()">Exit Full Screen Mode</a>
<a href="#" id="CloseApp" class="button blue" onclick="closeApplication()">Close Application</a>

Codebeispiel 3: Haupt-HTML-Datei Teil 3

Am Ende wird die Seite mit ein paar Copyright-Informationen und den schließenden </body>- und </html>-Tags versehen:

 <br><br><hr> <address><br>Copyright © 2011, Intel Corporation.</address> </body> </html>

Codebeispiel 4: Haupt-HTML-Datei Teil 4

Hier ist unsere JavaScript-Datei, functions.js. Sie implementiert einfach nur drei Funktionen, indem sie Funktionen der Intel AppUp API aufruft. Die Funktionen dürften anhand ihrer Namen selbsterklärend sein. Eine ausführlichere Beschreibung finden Sie hier. Die vollständige Datei ist im Codebeispiel 5 zu sehen:

function closeApplication() { intel.adp.encapsulator.closeapplication(); } function fullScreen() { intel.adp.encapsulator.setfullscreen(); } function exitFullScreen() { intel.adp.encapsulator.exitfullscreen(); }

Codebeispiel 5: JavaScript-Datei functions.js

Zum Schluss stellen wir noch ein Style Sheet, app.css, bereit, das Informationen zum Stil für unsere Schaltflächen enthält. Da die Datei ziemlich groß und nicht sonderlich interessant ist, führe ich sie hier nicht vollständig auf. Bei Bedarf können Sie sie herunterladen und sich genau ansehen. Codebeispiel 6 zeigt lediglich einen Teil der Datei.

BODY { background-color: grey } .button { display: inline-block; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.3); }

Codebeispiel 6: Teil der CSS-Datei

Das Letzte, was nun noch nötig ist, um die Anforderungen von AppUp zu erfüllen, ist eine Symbol-Datei. Diese wird beim Paketieren der Anwendung verwendet. Sie muss das Format PNG haben, die Bezeichnung icon.png tragen und ein Quadrat mit einer Auflösung von mindestens 128 × 128 Pixeln enthalten. Abbildung 1 zeigt mein erstelltes Symbol:

Abbildung 1: Anwendungssymbol

Wenn nun alle diese Dateien vorliegen, könnten Sie die Anwendung lokal mit einem Webbrowser testen. Die einzige Einschränkung dabei ist, dass Ihr Browser die AppUp JavaScript-API-Funktionen nicht erkennen wird. Im Falle dieser einfachen Anwendung ist das lokale Testen in einem Webbrowser eine effiziente Möglichkeit, von vornherein zu prüfen, ob die Benutzeroberfläche korrekt aussieht.

Unsere Anwendung ist damit soweit bereit, und wir können nun dazu übergehen, sie mithilfe von Encapuslator als Anwendung zu paketieren.

Verwenden von Encapsulator

Encapsulator ist ein webbasiertes Tool, das unsere HTML5-Anwendung als native Anwendung für AppUp für die einzelnen Plattformen paketiert.

Als Erstes müssen wir dazu die Dateien unserer Anwendung zu einem ZIP-Archiv zusammenpacken. Abbildung 2 zeigt einen Screenshot davon, erstellt auf einem Windows 7-Desktop mit Windows Explorer. Dieses ZIP-Archiv muss die vier Dateien enthalten, die wir zuvor erstellt haben: die Haupt-HTML-Datei, die JavaScript-Datei, die CSS-Datei und die Symbol-Datei.

Abbildung 2: Erstellen der ZIP-Datei

Jetzt können wir zu Encapsulator gehen. Dazu öffnen wir in einem Webbrowser diese URL. Nach Kenntnisnahme der Informationen auf der Registerkarte Introduction öffnen wir die Registerkarte Make your app. Alle erforderlichen Felder im Formular müssen ausgefüllt werden. Wenn Sie Hilfe bei irgendeinem Feld benötigen, klicken Sie auf die Schaltfläche mit dem Fragezeichen. Klicken Sie nach Eingabe der benötigten Informationen auf Datei auswählen, um die ZIP-Datei mit den Anwendungsdateien auszuwählen und hochzuladen. Abbildung 3 zeigt ein Beispiel dieser Registerkarte für unsere einfache Beispielanwendung:

Abbildung 3: Ausfüllen der Felder in Encapsulator

Jetzt können Sie auf Make it klicken. Encapsulator prüft die Anwendungsdateien und gibt Bescheid, wenn irgendetwas nicht in Ordnung ist. Encapsulator erkennt Fehler recht zuverlässig und kann auch ziemlich gut angeben, wo das Problem liegt (fehlende Symbol-Datei, zu kleine Symbol-Datei, falsches Format des Version-Strings usw.).

Wenn alles korrekt abläuft, wird die Registerkarte Check status and download eingeblendet, und Sie können den Fortschritt beim Paketieren der Anwendung für die einzelnen Plattformen verfolgen. Dieser Schritt ist im Screenshot in Abbildung 4 zu sehen.

Abbildung 4: Registerkarte "Check Status and Download"

Wenn die Anwendung erfolgreich paketiert wurde, wird dies zusammen mit einem Link für das Herunterladen der Pakete auf der Weboberfläche angezeigt. Für Windows wird eine MSI-Datei bereitgestellt, während für MeeGo ein RPM-Paket heruntergeladen werden kann. Wenn das Paketieren fehlschlägt, wird der Grund dafür angegeben, sodass Sie das Problem beheben und den Paketiervorgang erneut starten können.

Lassen Sie mich an dieser Stelle ein paar kurze Erläuterungen dazu machen, was beim Paketieren der Pakete im Hintergrund passiert: Encapsulator erstellt eine native Anwendung mit einer HTML-Rendering-Engine. Derzeit verwendet das Tool dazu das Qt Toolkit und QtWebKit. Die Webansicht in der Anwendung öffnet die Datei index.html der erstellten Anwendung. Diese Wrapper-Anwendung wird für die einzelnen Plattformen kompiliert und im entsprechenden Format paketiert. Sie enthält die Symbol-Datei und alle anderen Dateien aus dem ZIP-Archiv der Anwendung.

Das Paket für MeeGo ist eine RPM-Datei. Sie verwendet die Version von Qt, die auf MeeGo für Netbooks installiert ist. Das Paket kann mit dem Befehl "rpm" installiert werden.

Das Paket für Windows ist eine MSI-Datei, die einen Installations-/Deinstallations-Assistenten mit grafischer Oberfläche enthält. Das Paket beinhaltet Qt und alle anderen DLLs, die von der nativen Wrapper-Anwendung benötigt werden.

Installieren, ausführen und deinstallieren

Nachdem wir das Paket erstellt haben, können wir die Anwendung installieren und testen. Für Windows: Laden Sie die generierte MSI-Datei herunter, und führen Sie sie aus. Abbildung 5 zeigt das entsprechende Installationsprogramm:

Abbildung 5: Installationsprogramm für die Anwendung

Sobald die Installation abgeschlossen ist, können Sie die Anwendung entweder über das Symbol auf dem Desktop oder über das Startmenü starten. Bei unserer einfachen Anwendung sieht das in etwa wie in Abbildung 6 dargestellt aus:

Abbildung 6: Einfache Beispielanwendung nach dem Starten

Jetzt kann es ans Testen gehen. Klicken Sie auf die drei Schaltflächen und versichern Sie sich, dass diese tun, was von ihnen erwartet wird.

Wenn die Anwendung wieder deinstalliert werden soll, können Sie dies von der Windows-Systemsteuerung aus tun. Der Screenshot in Abbildung 7 zeigt, wie das unter Windows 7 aussieht:

Abbildung 7: Deinstallieren der Anwendung

Bereitstellen im Intel AppUp Shop

Wenn Sie eine Anwendung haben, die Sie anderen als Download anbieten möchten, empfiehlt es sich, die Anwendung z. B. im Intel AppUp Shop bereitzustellen. Welche zusätzlichen Schritte dazu notwendig sind, werden wir in einem späteren Artikel erörtern.

Sonstige Tipps

Es folgen ein paar Tipps, die Ihnen möglicherweise weiterhelfen.

Weiter oben habe ich davon gesprochen, dass es zum Debuggen Ihrer Anwendung sinnvoll sein kann, diese zuerst lokal in einem Browser auszuführen. Auf diese Weise vermeiden Sie zwar den Hochladen/Generieren/Herunterladen-Zyklus mit Encapsulator, können aber Ihre Anwendung in der Regel auch nicht vollständig testen, weil sie in einer anderen Umgebung als die AppUp Wrapper-Anwendung ausgeführt wird. Für das Testen und Debuggen der Anwendung gibt es mit dem sogenannten Web Inspector ein nützliches Tool, das in die WebKit-Rendering-Engine integriert ist. Wenn Sie mit der rechten Maustaste auf die Webansicht klicken, sehen Sie den Menüeintrag "Inspect". Über diesen Menüeintrag können Sie Web Inspector öffnen. Das Tool zeigt nicht nur Fehler an und lässt Sie Fehler in JavaScript beheben, sondern Sie können mit seiner Hilfe u. a. die HTML-Elemente sehen und Angaben zur Leistung abrufen. Nachdem Ihre Anwendung bei AppUp als freigegebene Version eingereicht wurde, wird der Menüeintrag "Inspect" nicht mehr angezeigt. Abbildung 8 zeigt Web Inspector in Aktion.

Abbildung 8: Web Inspector

Da der HTML5-Standard derzeit noch in der Entwicklung begriffen ist, unterstützen Web-Rendering-Engines nicht alle Features. Bei der QtWebKit-basierten Rendering-Engine, die das Wrapper-Programm von Encapsulator nutzt, gibt es einige Einschränkungen. Welche HTML5-Features von Encapsulator unterstützt werden, erfahren Sie hier. Sie können aber davon ausgehen, dass mit der Zeit HTML5 in immer größerem Maße unterstützt werden wird.

Und denken Sie immer daran: Man kann nie genug testen! Beim Testen Ihrer Anwendungen sollten Sie auf folgende Aspekte achten:

Gehen Sie alle Funktionen Ihrer Anwendung durch.
Testen Sie Ihre Anwendung auf allen Plattformen, die Sie unterstützen möchten (z. B. Windows und MeeGo).
Testen Sie Ihre Anwendung in mehreren Versionen der Plattform, z. B. in mehreren Windows-Versionen.
Überprüfen Sie, dass das Installationsprogramm alle erforderlichen Dateien installiert – nicht mehr und nicht weniger.
Überprüfen Sie, dass das Deinstallationsprogramm alle Dateien entfernt.
Prüfen Sie Ihre Anwendung mithilfe von Web Inspector auf JavaScript-Fehler oder -Warnmeldungen, und führen Sie die Audit-Funktion aus.

Zusammenfassung

In diesem Artikel haben wir uns mit den Grundlagen der Verwendung von AppUp Encapsulator zum Paketieren einer einfachen HTML5-Anwendung beschäftigt. Ich hoffe, dass dieses einfache Beispiel ein guter Ausgangspunkt für Ihre eigenen Anwendungen ist. In den kommenden Artikeln werden wir anhand komplexerer HTML5-Anwendungen weitere Features von HTML5 unter die Lupe nehmen, die von AppUp Encapsulator unterstützt werden.