Niveau : Confirmé

Une application HTML5 sous Windows Phone 8

Tutoriel par (Alsacréations, Strasbourg)
Créé le , mis à jour le (30402 lectures)
Tags : internet explorer, application, html5, windows, windows phone

Windows Phone 8 Nokia Microsoft propose un SDK (Software Development Kit) compréhensible pour qui souhaite développer une application HTML5 sous Windows Phone. D'autres types de projets peuvent être réalisés grâce à ce kit, mais ici ne sera abordé que le côté HTML+CSS+JavaScript, qui intéresse bien sûr tout développeur web sachant déjà manier ces langages. C'est là tout l'intérêt : réaliser des applications rapidement, avec des connaissances déjà maîtrisées, et des ressources souvent déjà disponibles (serveur, images, styles, icônes, polices, scripts, etc).

En réalité, l'application HTML5 sera hébergée dans une page XAML, équipée d'un composant WebBrowser piochant les ressources localement, c'est-à-dire les fichiers web regroupés dans le package installé. Il n'y aura pas nécessité absolue d'une connexion, bien que l'on puisse faire appel à des requêtes distantes (avec de l'AJAX par exemple) si l'on veut une interaction avec un service en ligne.

Windows Phone SDK

Le SDK Windows Phone se compose principalement de Microsoft Visual Studio Express 2012 for Windows Phone et d'un émulateur qui permettra (développement de votre application ou non) de lancer une machine virtuelle tournant sous Windows Phone pour effectuer vos tests. Cet émulateur donne aussi accès aux applications livrées en standard sous ce système, et donc à Internet Explorer mobile, ce qui en fait un outil de test bien pratique. De façon très simplifiée, Windows Phone 8 utilise le même noyau que Windows RT (alias Windows 8 pour ARM).

Premiers pas

Si vous ne souhaitez pas vous consacrer au développement Windows Phone, sautez directement à la fin de ce tutoriel pour les derniers mots sur la machine virtuelle et le navigateur Internet Explorer embarqué.

Installation Windows Phone SDK

L'installation du SDK n'est par contre possible qu'à partir de Windows 8 (environ 1.6 Go seront téléchargés).

Après les différentes étapes, l'icône VS Express for Windows Phone s'ajoutera à l'écran de démarrage, qui basculera automatiquement en mode desktop - plus approprié pour le développement que l'interface Modern UI.

Le plus simple est de passer par la création d'un nouveau projet (menu Fichier/File, New Project). Plusieurs types de projets seront proposés, celui nous intéressant ici est "Windows Phone HTML5 App".

Windows Phone SDK Nouveau Projet

Un modèle de base est fourni, il n'est pas nécessaire de le modifier pour lancer l'application et l'émulateur. L'éditeur dévoile le fichier MainPage.xaml utilisé comme vue principale de l'application, dans laquelle le composant WebBrowser (Internet Explorer) est placé au sein d'un élément <Grid>. Plus loin, l'élément ApplicationBar définit l'apparence de la barre de navigation. Sur la partie gauche, un éditeur visuel traduit ces instructions.

Cliquez sur le bouton Emulator dans la barre d'outils. Une liste déroulante permet de choisir - si nécessaire - la résolution de l'écran simulé, et la configuration matérielle (ARM, x86).

Windows Phone SDK Projet

Au bout de quelques secondes, une fenêtre épurée symbolisant un mobile lance le système mobile Windows Phone et l'application en train d'être développée. Par défaut, le projet étant quasiment vide, il n'y a qu'une page d'accueil avec un titre.

Windows Phone SDK Emulator

Pour personnaliser ce modèle de base, il faudra aller explorer les ressources via le panneau de droite (Solution Explorer). Le dossier Html regroupera par défaut un fichier index.html (la page affichée au lancement) et un dossier css contenant le fichier phone.css. Un clic sur ces noms les ouvrira directement dans l'éditeur pour les modifier.

Windows Phone SDK Solution Explorer

On remarque que le fichier HTML principal est en réalité ouvert dans une vue interprétant du... HTML (zone à fond noir par défaut avec l'icône d'Internet Explorer en blanc). Ce fichier contient une structure assez classique de document web : en-tête <head>, corps <body>, avec des blocs <div>, et le tout fait appel à une feuille de styles CSS pour la présentation.

Windows Phone SDK Emulator HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
        <title>Windows Phone</title>
    </head>
    <body>
        <div>
            <p>MY APPLICATION</p>
        </div>
        <div id="page-title">
            <p>page title</p>
        </div>
    </body>
</html>

On peut constater que dans le code CSS, délivré par défaut avec le projet initial, des Media Queries sont appliquées pour modifier l'apparence de l'application selon l'orientation.

Windows Phone SDK Emulator CSS

@media all and (orientation:portrait) {
    @-ms-viewport {
        width:320px;
        user-zoom: fixed;
        max-zoom: 1;
        min-zoom: 1;
    }
}

@media all and (orientation:landscape) {
    @-ms-viewport {
        width:480px;
        user-zoom: fixed;
        max-zoom: 1;
        min-zoom: 1;
    }
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

body {
    font-size: 11pt;
    font-family: "Segoe WP";
    letter-spacing: 0.02em;
    background-color: #000000;
    color: #ffffff;
    margin-left: 24px;
}

#page-title {
    font-size: 24pt;
}

À partir de ce moment c'est à vous de jouer et d'utiliser vos connaissances web pour articuler l'application autour de différentes vues HTML stylées par des propriétés CSS. Avertissement : il faut activer JavaScript dans le composant WebBrowser pour s'en servir (voir ci-après).

Développer une application HTML5

Quelles sont les outils et API à disposition ? Le moteur intégré actuellement est celui d'Internet Explorer 10.

Au niveau de la présentation, toute une panoplie de modules CSS3 sont disponibles, avec entre autres les dégradés (gradients), les transformations 3D, les transitions et animations, les polices WOFF, CSS Grid Layout, Flexbox, le multi-colonnage, box-shadow et text-shadow, etc. Le moteur d'Internet Explorer 10 pour Windows Phone est proche de la version de "bureau", mais dispose de quelques fonctionnalités en moins, comme par exemple les sites épinglés, le Drag & Drop, le champ <input type="file"> et d'autres subtilités propres à ces systèmes.

Une application de démonstration

Pour introduire quelque peu plus en avant cette démonstration, il s'agira de créer une (très modeste) application récupérant les dernières offres d'emploi sur emploi.alsacreations.com via un flux JSON et un appel AJAX. Sachant qu'il est également possible de le développer avec un projet "non HTML5" en XAML et C#, voir How to create a basic RSS reader for Windows Phone.

À chaque modification du code (hors fichier XAML verrouillé par un petit cadenas dans son onglet), il est inutile de relancer l'émulateur totalement, il suffit d'arrêter le débogage de l'application en cliquant sur le bouton stop (carré rouge) dans la barre d'outils puis de relancer l'installation et l'exécution dans la machine virtuelle via le bouton Emulator ou encore plus simple en une seule action avec Restart (flèche circulaire) :

Activer JavaScript

Première action préalable : autoriser l'exécution de code JavaScript dans le composant WebBrowser. Pour ceci, il faut ajouter l'attribut IsScriptEnabled="True" dans la balise <phone:WebBrowser ...> du fichier MainPage.xaml. Sans cela, le code sera ignoré.

Structure HTML, JavaScript

En partant du code HTML proposé par défaut, on ajoute quelques éléments pour recevoir les informations, nommés par des attributs id afin d'interagir rapidement avec JavaScript :

  • un élément <span id="nb-offres"> pour afficher le nombre total d'annonces dans la liste
  • un élément <div id="offres"> pour ajouter successivement des blocs correspondant aux liens reçus

La page principale reçoit aussi un logo, on peut aller beaucoup plus loin en personnalisation graphique mais ce n'est pas le but de cet exemple.

Un fichier JavaScript (nommé ici kiwi.js) contiendra toutes les instructions pour aller charger le contenu et l'afficher dans la page HTML. Il sera donc essentiel au bon fonctionnement de l'application.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
        <title>Alsacreations</title>
    </head>
    <body>
        <h1><img src="/html/img/logo.png" alt="Emploi" /></h1>
        <div id="page-title">
            <p><span id="nb-offres"></span> offres d'emploi</p>
        </div>

        <div id="page">
          <p id="message">Chargement des offres...</p>
          <div id="offres"></div>
        </div>
        <script src="/html/kiwi.js"></script>

    </body>
</html>

Pour ajouter une ressource image, on crée un nouveau dossier dans la racine Html grâce au menu contextuel en choisissant Add et New Folder. Un glisser-déposer dans ce dossier du fichier PNG suffira amplement pour bénéficier de l'image dans l'application en indiquant le bon chemin : /html/img/logo.png.

Windows Phone SDK New Folder

Windows Phone 8 IMG

Quelques nouvelles propriétés CSS modifient la couleur des liens par défaut et la largeur de l'image du logo pour s'adapter automatiquement à l'espace disponible à l'écran.

a {
    color:#B8D940;
}

h1 img {
    max-width: 80%;
}

Le noyau de l'application se déroule côté JavaScript :

  • Dès le chargement, une requête va être envoyée via l'interface XMLHttpRequest (alias AJAX).
  • Si tout se déroule bien, un code HTTP 200 sera obtenu.
  • Le serveur interrogé va renvoyer un fichier au format JSON (plus d'informations sur JSON, AJAX et jQuery), ce qui est à peu près le format le plus léger et efficace pour ce type d'échange de données.
  • La réponse (au format texte pur) va passer par la moulinette JSON.parse() pour être convertie en objet exploitable directement par JavaScript.
  • Les données JSON ayant été structurées dans un tableau, il faut itérer sur chacun des éléments de ce tableau pour en extraire individuellement les informations de l'annonce et les injecter progressivement en tant que paragraphes/liens.
(function () {
    "use strict";

var JSON_object = {};
var oRequest = new XMLHttpRequest();
var sURL  = "http://emploi.alsacreations.com/offres.json";

oRequest.open("GET",sURL,true);
oRequest.onreadystatechange = function () {
    if (oRequest.readyState == 4 && oRequest.status == 200)
    {
        JSON_object = JSON.parse(oRequest.responseText);
        var nb_offres = JSON_object.annonces.length;
        document.getElementById('nb-offres').innerHTML = nb_offres;
        document.getElementById('message').style.display = 'none';
        for(var i=0;i<nb_offres;i++) {
            var paragraphe = document.createElement('p');
            paragraphe.innerHTML = '<a href="'+JSON_object.annonces[i].link+'">'+JSON_object.annonces[i].titre+'</a>';
            paragraphe.innerHTML += '<br>'+JSON_object.annonces[i].societe+' ('+JSON_object.annonces[i].lieu+')';
            document.getElementById('offres').appendChild(paragraphe);
        }
    } else if(oRequest.readyState == 4 && oRequest.status != 200) {
        document.getElementById('page').innerHTML = 'Erreur lors du chargement';
    }
};

oRequest.send(null);

})();

Pour avoir plus de renseignements quant au fonctionnement de ce code, penchez-vous sur tout ce qui concerne XMLHttpRequest et JSON. Cet exemple fonctionne parfaitement dans n'importe quel navigateur et n'est pas spécifique à Windows Phone ou Internet Explorer (heureusement).

Et voilà le travail :

Windows Phone Application finale

Finaliser une véritable application

  • Pour cette démonstration, cette application ne fait qu'afficher une liste de liens, qui ouvrent directement le navigateur du système au clic. Si l'on veut faire les choses proprement et ne pas "sortir" de cette application, il faut intercepter le clic et aller charger une autre vue HTML avec les informations récupérées (éventuellement toujours en AJAX). C'est quelque peu hors sujet pour cette introduction minimale, mais les exemples de codes fournis donnent déjà des pistes.
  • Pour augmenter les performances, une solution à base de Web Storage est envisageable.
  • Pour personnaliser les icônes de l'application, explorez le dossier Assets, qui pourra héberger des tuiles ajustables selon la résolution.
  • Et enfin, il ne restera plus qu'à publier votre application (j'insiste : la vôtre, pas cette démo) sur le Windows Phone Store en suivant la procédure pour créer un package suivi d'une certification, d'un manifeste et de captures d'écran.

Télécharger les sources du projet démo

N'hésitez pas à consulter les nombreuses autres ressources en ligne guidant pas à pas pour le développement d'applications HTML, que ce soit spécifiquement sous Windows Phone ou avec d'autres environnements.

... ou juste tester l'OS et Internet Explorer

Si vous n'êtes pas intéressés par le développement d'applications, le SDK vous permet tout de même de lancer la fenêtre de simulation. L'émulation peut être plus ou moins rapide selon la puissance de la machine hôte. Elle fonctionne également sur une tablette Windows 8.

Qui dit Windows Phone, dit également navigateur Internet Explorer Mobile intégré par défaut. Il pourra être exécuté pour consulter le rendu de n'importe quel site web.

Windows Phone SDK Emulator

En cliquant sur le bouton "fenêtres" Windows Phone Start Icone vous aurez accès aux applications, dont le projet HTML décrit précédemment et Internet Explorer.

Windows Phone SDK Emulator

La barre d'icônes placée sur le côté de la fenêtre du simulateur donne accès aux paramètres d'orientation (portrait/paysage) mais aussi à 4 onglets avancés via " » " pour jouer avec l'accéléromètre, modifier le positionnement géographique, faire une capture d'écran ou consulter les propriétés de connexion réseau.

Windows Phone SDK Additional Tools

Et voici la dernière capture, le résultat de la version Responsive d'Alsacreations sur Internet Explorer mobile.

Windows Phone SDK Internet Explorer

Enfin, sachez qu'il existe un Windows Simulator pour avoir un aperçu du rendu des applications (non mobiles) dans le style Windows 8 avec du touch.

Commentaires

Seb33300 a dit le

Plutôt sympas comme article, ça permet d'avoir les bases rapides pour commencer une appli WP :p

Par contre une petite question :
Est il possible d'intégrer des librairies notamment jquery ?
Cela ne génère pas de problème particulier ?

dew a dit le

Oui c'est tout à fait possible.

webonote a dit le

Super ! L’embêtant c'est qu'il semblerait qu'il ne soit disponible que sur windows 8...

ptitfab a dit le

A noter que l'émulateur ne fonctionne qu'avec Windows 8 Pro !

Rudloff a dit le

À noter qu'il y a aussi l'excellent PhoneGap (http://phonegap.com/).

xzenn a dit le

Oui enfin PhoneGap y a l’environnement de dev pas si simple à installer avant ...

MewaketGUEU a dit le

j'ai un souci puisque je débute les applications mobiles.je voudrais savoir si je peux créer plusieurs pages pour mon application comme pour un site web ordinaire?
je veux en fait qu'en cliquant sur un bouton sur une page,une autre page-réponse soit renvoyée.