Outils Intel® HTML5 pour le développement d'applications mobiles

HTML5 est la nouvelle norme HTML. Intel Corporation a annoncé récemment la publication d'un ensemble d'outils HTML5 pour le développement d'applications mobiles. Cet article montre comment porter une application d'accéléromètre Apple iOS* sur HTML5 en utilisant ces outils. Attention : le code autogénéré créé par Intel® XDK peut contenir du code utilisé sous une des licences détaillées dans l'Annexe A de ce document. Reportez-vous à la sortie Intel XDK pour obtenir des détails sur les bibliothèques utilisées pour construire votre application.

Outils Intel® HTML5 pour le développement d'applications mobiles

Code source iOS

Code source résultant des outils HTML5

Pour commencer, nous allons prendre une application d'accéléromètre iOS et convertir le code source Objective-C* en code HTML5. Nous allons le faire à l'aide d'Intel® HTML5 App Porter Tool et du code source qui se trouve ici : [iOS_source] (Remarque : l'exemple de code IOS_source est fourni dans le cadre de la licence Intel Sample Software License (Licence des exemples de logiciels Intel) détaillée dans l'Annexe B). Vous pouvez télécharger Intel HTML5 App Porter Tool depuis l'onglet Tools ici : http://software.intel.com/fr-fr/html5. Après avoir rempli et soumis le formulaire avec votre adresse e-mail, vous obtiendrez les liens permettant de télécharger cet outil. Les consignes d'utilisation de cet outil se trouvent sur ce site : http://software.intel.com/fr-fr/articles/tutorial-creating-an-html5-app-from-a-native-ios-project-with-intel-html5-app-porter-tool

Une fois que vous aurez terminé toutes les étapes, vous obtiendrez le code source HTML5.

Vous pouvez ouvrir le code HTML5 dans n'importe quel IDE. Intel vous offre un outil pratique pour le développement d'applications HTML5 : Intel XDK - Kit de développement multi-plate-forme (http://software.intel.com/fr-fr/html5/tools). Avec Intel XDK, les développeurs peuvent écrire un seul code source pour le déployer sur de nombreux appareils. Ce qui est particulièrement intéressant est qu'il n'est pas nécessaire de l'installer sur votre ordinateur. Vous pouvez l'installer comme une extension de Google Chrome*. Si vous utilisez un autre navigateur, vous devez télécharger un fichier JavaScript* et l'exécuter. Il est parfois nécessaire de mettre à jour Java*.

Après avoir installé Intel XDK, la fenêtre principale s'affiche :

Si vous voulez porter un code existant, appuyez sur le gros bouton « Start new » (Démarrer un nouveau).

Si vous créez un nouveau projet, entrez le nom du projet et sélectionnez la case d'option « Create your own from scratch » (Créer mon propre projet depuis le début), comme illustré dans la capture d'écran ci-dessous.

Cochez « Use a blank project » (Utiliser un projet vierge). Attendez un peu que le message suivant s'affiche : « Application Created Successfully! » (L'application a été créée avec succès).

Cliquez sur « Open project folder » (Ouvrir le dossier du projet).

Supprimez tous les fichiers de ce dossier et copiez-y les fichiers portés. Nous n'avons pas encore porté l'application d'accéléromètre. Nous devons encore lui écrire une interface. Il est possible de supprimer les hooks créés par Intel HTML5 App Porter Tool. Supprimez ces fichiers :

• todo_api_application__uiaccelerometerdelegate.js ;
• todo_api_application_uiacceleration.js ;
• todo_api_application_uiaccelerometer.js ;
• todo_api_js_c_global.js.

Pour mettre à jour le projet dans Intel XDK, accédez à la fenêtre d'édition de l'émulateur Windows.

Ouvrez le fichier index.html et supprimez les lignes restantes des fichiers inclus.

Ouvrez le fichier todo_api_application_appdelegate.js et implémentez la propriété non mappée « window » du délégué.

application.AppDelegate.prototype.setWindow = function(arg1) {
    // ================================================================
    // REFERENCES TO THIS FUNCTION:
    // line(17): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: [*js.APT.View]
    //    Expected return type: [unknown type]
    //
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
    //{
        // TODO remove exception handling when implementing this method
       // throw "Not implemented function: application.AppDelegate.setWindow";
    //}
this._window = arg1;
};

application.AppDelegate.prototype.window = function() {
    // ================================================================
    // REFERENCES TO THIS FUNCTION:
    // line(20): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: none
    //    Expected return type: [unknown type]
    //
    // line(21): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: none
    //    Expected return type: [unknown type]
    //
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
    //{
        // TODO remove exception handling when implementing this method
       // throw "Not implemented function: application.AppDelegate.window";
    //}
return this._window;
};

Ouvrez le fichier viewcontroller.js. Supprimez toutes les fonctions utilisées pour travailler avec l'accéléromètre dans l'ancienne application iOS. À la fin, nous obtenons ce fichier :

APT.createNamespace("application");

document.addEventListener("appMobi.device.ready",onDeviceReady,false);

APT.ViewController = Class.$define("APT.ViewController");

application.ViewController = Class.$define("application.ViewController", APT.ViewController, {
    __init__: function() {
        this.$super();
    };>});

Dans le fichier ViewController_View_774585933.css, nous devons changer le style de couleur des éléments pour qu'ils soient blancs au lieu de noirs et qu'ils soient lisibles sur un arrière-plan noir et donc remplacer : color: rgba(0,0,0,1); par color: rgba(256,256,256,1);. En conséquence, nous obtenons :

div#Label_590244915
{
        left: 20px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 320px;
        top: 0px;
        opacity: 1;
}
div#Label_781338720
{
        left: 20px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 42px;
        top: 29px;
        opacity: 1;
}
div#Label_463949782
{
        left: 20px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 42px;
        top: 51px;
        opacity: 1;
}
div#Label_817497855
{
        left: 20px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 42px;
        top: 74px;
        opacity: 1;
}
div#Label_705687206
{
        left: 70px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 42px;
        top: 29px;
        opacity: 1;
}
div#Label_782673145
{
        left: 70px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 42px;
        top: 51px;
        opacity: 1;
}
div#Label_1067317462
{
        left: 70px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 42px;
        top: 74px;
        opacity: 1;
}
div#View_774585933
{
        left: 0px;
        height: 548px;
        position: absolute;
        width: 320px;
        top: 20px;
        opacity: 1;
}

Après avoir actualisé la fenêtre de l'émulateur, vous voyez :

Pour coder les fonctions de l'accéléromètre, nous devons utiliser la bibliothèque JavaScript appMobi. Vous trouverez la documentation de cette bibliothèque ici. Elle est installée lorsque vous téléchargez Intel XDK.

Ouvrez le fichier index.html et ajoutez cette ligne à la liste des scripts :

<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>

Ouvrez le fichier ViewController_View_774585933.html. Nous devons renommer les champs avec des noms plus logiques, de :

<div data-apt-class="Label" id="Label_705687206">0</div>
<div data-apt-class="Label" id="Label_782673145">0</div>
<div data-apt-class="Label" id="Label_1067317462">0</div>

à :

<div data-apt-class="Label" id="accel_x">0</div>
<div data-apt-class="Label" id="accel_y">0</div>
<div data-apt-class="Label" id="accel_z">0</div>

La même opération doit être réalisée avec le fichier ViewController_View_774585933.css, où nous devons renommer les styles.

Ouvrez le fichier viewcontroller.js et écrivez des fonctions à utiliser avec l'accéléromètre.

function suc(a) {
    document.getElementById('accel_x').innerHTML = a.x;
    document.getElementById('accel_y').innerHTML = a.y;
    document.getElementById('accel_z').innerHTML = a.z;
}

var watchAccel = function () {
    var opt = {};
    opt.frequency = 5;
    timer = AppMobi.accelerometer.watchAcceleration(suc, opt);
}

function onDeviceReady() {
    watchAccel();
}
document.addEventListener("appMobi.device.ready",onDeviceReady,false);

Actualisez le projet et vous pouvez le voir dans la fenêtre de l'émulateur :

Vous pouvez voir comment fonctionne l'accéléromètre sur Intel XDK dans le volet « ACCELEROMETER » (Accéléromètre) :

L'application se présente maintenant ainsi :

Vous trouverez le code source complet de l'application ici.

Annexe A : Contrats de licence de code Intel® XDK

Annexe B : Contrat de licence des exemples de code source Intel

Merci à Intel Developer Zone et à Xavier Hallade pour la rédaction de ce tutoriel.

Retrouvez le Blog de Xavier Hallade, Software Engineer chez Intel.

Pour toute question, merci de contacter Slim Soussi, EMEA Program Manager chez Intel : slim(pt)soussi(at)intel(pt)com