Applications modernes

Créer des applications du Windows Store avec HTML5 et JavaScript

Rachel Appel

Télécharger l'exemple de code

Non seulement le rêve que nourrissait Bill Gates de voir un ordinateur sur chaque bureau et dans chaque foyer est devenu une réalité, mais avec l'arrivée d'appareils tels que la tablette Surface, ce rêve est allé bien au-delà de ses espérances. Outre Surface, les ventes d'appareils orientés consommateur ont explosé dans tous les formats existants. En d'autres termes, les ordinateurs sont partout.

Notez également que plus d'un milliard d'installations Windows existantes se trouvent sur ces ordinateurs, avec 300 millions de licences Windows 7 vendues chaque année au cours des deux dernières années. Combinez l'installation Windows actuelle pouvant être mise à niveau au marché en forte croissance des appareils Windows 8, tels que Surface, et vous avez la formule d'une monétisation réussie. C'est Windows réinventé, une chance inédite de gagner de l'argent en publiant des applications dans le Windows Store.

Plateforme, langage et ensemble d'outils pour la création d'applications du Windows Store

Pour créer une application du Windows Store, vous avez besoin de Windows 8, Visual Studio 2012 et de tous les Kits de développement logiciel (SDK) spécifiques aux besoins de votre application, tels que les Kits de développement logiciel (SDK) Windows Live ou Bing Maps. Cette installation et configuration système minimale facilite le développement des applications sur Windows 8, de l'installation au développement.

Une fois que vous avez installé le logiciel requis, il est temps de passer au choix du langage. Si vos connaissances en développement se résument à la pile Microsoft en tant que développeur Microsoft .NET Framework qui écrit des applications Windows Forms, Windows Presentation Foundation (WPF) ou Silverlight, en C# ou Visual Basic, la solution la plus simple pour vous sera de créer des applications du Windows Store en XAML et C# ou Visual Basic . Les développeurs C++ peuvent également utiliser C++ comme langage compilé avec XAML comme compagnon d'interface utilisateur.

Si vous êtes développeur Web, y compris en ASP.NET, vous pouvez appliquer vos connaissances actuelles des normes ouvertes HTML5, JavaScript et CSS3 directement au développement d'applications du Windows Store. Les développeurs Web peuvent continuer à utiliser plusieurs bibliothèques JavaScript tierces populaires, telles que jQuery ou Knockout. Dans cet article, je vais utiliser JavaScript comme langage principal.

Peu importe le niveau de votre expérience en développement, le développement d'applications Windows 8 natives présente peu d'obstacles lors du développement d'applications Windows 8 natives. En effet, Windows Runtime (WinRT) est une plateforme contenant des API qui se trouvent au-dessus des services de base Windows, comme illustré dans la figure 1.

Figure 1 Architecture des applications du Windows Store

Les API WinRT vous donne accès à tout ce qu'offre Windows 8, y compris les API pour le matériel, tel que les webcams, la géolocalisation, les capteurs de lumière et les accéléromètres intégrés. Bien sûr, les éléments clés de la plateforme, tels que la gestion de la mémoire, l'authentification, la globalisation et le traitement asynchrone, ainsi que les fonctionnalités des applications du Windows Store, telles que la recherche, le partage et les communications, sont également rapidement utilisables. Il existe même des API pour la manipulation de l'audio et de la vidéo. Cependant, si vous écrivez des applications JavaScript, les éléments <audio> et <video> de HTML5 fonctionnent très bien. Vous pouvez parcourir l'API complète sur la page « Documentation de référence pour les applications du Windows Store » à l'adresse bit.ly/ZCwcJE.

Principes d'une application du Windows Store

Les applications du Windows Store offrent des expériences totalement immersives et en plein écran. Elles diffusent un contenu simplifié à l'utilisateur qui n'est pas gêné par l'application ni par ses commandes. Elles offrent une visualisation des données propre et simple qui attire l'attention de l'utilisateur sur le contenu.

Les applications du Windows Store font des choses que les applications Windows ou Web traditionnelles ne pouvaient pas faire avant, telles que le partage, la recherche et la communication entre applications de manière facile et uniforme, en utilisant les éléments des contrats appelés par Windows Runtime comme des liaisons entre les applications.

Le développement d'applications du Windows Store doit avoir pour objectif une excellente expérience utilisateur, de la présentation et de la disposition à la navigation et aux performances des applications. Les utilisateurs s'attendent à de la cohérence entre les applications, et entre les applications et le système d'exploitation. Les applications du Windows Store privilégient l'expérience utilisateur et l'application de principes de conception (utilisation d'une police cohérente, de l'apparence de l'interface utilisateur Windows, d'un système de grilles évolutives, etc.) qui améliorent le niveau de confort de l'utilisateur lors de l'utilisation de votre application. Cette cohérence est présente partout dans les applications et dans Windows 8 lui-même.

Il est essentiel de garantir un fonctionnement fiable et cohérent des entrées tactiles et effectuées via la souris, car les utilisateurs disposent désormais d'un plus grand nombre de possibilités d'interactions avec leurs appareils informatiques sous la forme de souris, stylets, entrées tactiles, caméras et capteurs.

Les appareils alimentés par une batterie et dotés de processeurs, tels qu'ARM, prennent une place importante dans le paysage informatique, Windows 8 doit donc gérer la mémoire globale et par application de façon stricte pour permettre une expérience rapide et fluide, même en cas de faibles ressources. Les applications Windows 8 profitent d'un cycle de vie de processus facile et simple pour garantir la meilleure expérience.

Même si de nombreuses applications fonctionnent bien en tant qu'application du Windows Store, elles ne sont pas toutes de bonnes candidates. Par exemple, bien que Visual Studio adopte lui-même de nombreux principes modernes de conception de l'interface utilisateur, son objectif est de permettre à l'utilisateur d'exécuter des commandes (en d'autres termes, de programmer). Cela n'est pas compatible avec une application du Windows Store.

Modèles de projet d'applications du Windows Store de Visual Studio 2012

Visual Studio 2012 a introduit un ensemble de nouveaux modèles pour le développement d'applications du Windows Store en C#, Visual Basic, C++ et JavaScript. Quel que soit le langage, les styles de modèles suivants sont disponibles :

• Vierge : modèle sobre avec les fichiers minimaux requis pour concevoir votre application du Windows Store.
• Grille : modèle affichant une grille qui utilise l'apparence de l'interface utilisateur de Windows 8, ainsi que le code des modèles de plusieurs fonctionnalités, y compris la prise en charge de la navigation et de la vue ancrée (nous reviendrons sur ces points plus tard). 
• Fractionné : modèle affichant une liste d'éléments avec leurs détails dans une vue sur deux colonnes, permettant ainsi à l'utilisateur de basculer facilement et rapidement entre les éléments.
• Corrigé : modèle vierge qui utilise un objet ViewBox dans la page default.html. ViewBox est un objet WinRT utilisé dans les jeux.
• Navigation : modèle avec une structure de projet vierge plus la navigation et un jeu de ressources d'applications de base (c'est-à-dire, home.html, home.js et home.css) sous le répertoire de base.

Le modèle Grille contient du code qui affiche un grand nombre de fonctionnalités exceptionnelles de Windows 8, telles que la prise en charge de la vue ancrée, de la mise à l'échelle de l'écran et de la navigation, c'est donc le meilleur modèle pour commencer à écrire des applications du Windows Store.

Une fois le nouveau modèle de projet Grille JavaScript créé, l'examen de sa structure révèle un projet rempli de types de fichiers Web standard, tels que les fichiers .html, .css et .js, organisés en dossiers sous la racine du projet. Vous pouvez ensuite déboguer et exécuter une application du Windows Store en appuyant sur F5 ou, dans le menu Débogage, en sélectionnant Démarrer le débogage.

Dans les modèles d'applications du Windows Store, default.html est la page de démarrage d'une application du Windows Store et comporte un fichier de script associé, /js/default.js, qui contient du code de gestion du cycle de vie de processus de base. Comme avec tout autre fichier HTML, default.html comporte le code que vous attendez, y compris des références de script et du nouveau balisage sémantique HTML5 qui définit la structure de la page. Le fragment de code suivant réside dans la balise <body> de default.html et utilise les contrôles WinJS pour la navigation et le chargement de la page groupedItems.html :

    <div id="contenthost"
      data-win-control="Application.PageControlNavigator"
      data-win-options=
      "{home: '/pages/groupedItems/groupedItems.html'}"></div>

Les attributs data-* représentent la façon HTML5 d'appliquer le code ou le comportement personnalisé à l'élément HTML, et dans le développement des applications du Windows Store, les attributs data-win-* se réfèrent généralement aux contrôles JavaScript Windows. Les contrôles JavaScript Windows sont intégrés aux composants WinRT que vous appliquez aux éléments HTML pour améliorer ou modifier le comportement ou style. Les attributs data-win-* prévalent dans les applications JavaScript du Windows Store, surtout lors de la liaison de données.

Accès aux données dans les applications du Windows Store

Dans le cadre du modèle Grille, un fichier nommé data.js du dossier /js contient du code qui crée un ensemble de données de tableaux, ainsi que des fonctions pour grouper et manipuler les données. Le fichier data.js contient également des exemples de données que vous devez remplacer avec les vôtres. Dans cet article, je vais utiliser les données d'une application de compte à rebours qui affiche le nombre de jours restants avant un événement, tel qu'un jour férié ou un jour de congés.

Dans le fichier data.js, vous pouvez trouver le commentaire seulement // TODO au début du fichier. Remplacez le code sous le commentaire avec votre propre code. Le code ressemble alors à l'extrait de code suivant, qui effectue un appel à XMLHttpRequest pour extraire les données JSON, puis crée également l'ensemble de données, y compris les propriétés dynamiques, telles que les champs daysToGo et message :

var list = new WinJS.Binding.List();
...
WinJS.xhr({ url: "data.json" }).then(function (xhr) {
  var items = JSON.parse(xhr.responseText);          
  items.forEach(function (item) {
    item.daysToGo = Math.floor(
      (Date.parse(item.eventDate) - new Date()) / 86400000);
    item.message = item.daysToGo + " days until " + item.title;
    if (item.daysToGo >= 0) {
      list.push(item);
    };
  })
})

Au début de data.js se trouve une ligne de code qui instancie une liste d'objet WinJS.Binding.List qui porte bien son nom et le code précédent envoie les éléments individuels sur cette liste.

L'objet List active la liaison entre les données JSON ou les tableaux JavaScript et les éléments HTML. Une fois que la variable de liste est remplie avec les données, utilisez les expressions de liaison dans le balisage HTML pour lier les membres List aux éléments HTML.

Lorsque vous lisez les données JSON avec un appel à JSON.parse, les noms des paires nom/valeur correspondent aux propriétés des objets JavaScript au moment de l'exécution. Les données JSON suivantes montrent comment la structure JSON correspond aux membres de la variable d'éléments de l'extrait de code précédent. Les champs clé, titre, eventDate, image, couleur et groupe correspondent tous aux propriétés de l'objet item.

    [{"key":"1","group":{"key":"group1","title":"Important Dates"},
    "title":"Rachel's Birthday","eventDate":"01/13/2013",
    "image":"/images/birthday.png","color":"#6666FF"},
    {"key":"2","group":{"key":"group1","title":"Important Dates"},
    "title":"Ada Lovelace Day","eventDate":"10/16/2013",
    "image":"/images/ada.jpg","color":"#fff"},
    {"key":"3","group":{"key":"group2","title":"Holidays"},"title":"Christmas",
    "eventDate":"12/25/2013","image":"/­images/­tree.png","color":"#ef0d0d"},
    {"key":"4","group":{"key":"group3","title":"School"},"title":"School Ends","eventDate":"6/10/2013","image":"/images/schoolbus.png","color":"#fff"},
    {"key":"5","group":{"key":"group2","title":"Holidays"},"title":"Thanksgiving",
    "eventDate":"11/29/2012","image":"/­images/­thanksgiving.png","color":"#FFCC00"},
    {"key":"6","group":{"key":"group2","title":"Holidays"},"title":"New Year's Day", "eventDate":"1/1/2013","image":"/images/celebrate.png","color":"#f8baba"}]

Une fois les données chargées, vous devez vérifier que l'objet Liste est associé aux éléments HTML corrects. Les modifications apportées à la page /pages/groupedItems/groupedItems.html dans la figure 2 montre la liaison des données en action.

Figure 2 Liaison des données de l'objet List aux éléments HTML avec les contrôles WinJS

    <!-- These templates are used to display each
      item in the ListView declared below. -->
    <div class="headertemplate" data-win-control="WinJS.Binding.Template">
      <button class="group-header win-type-x-large win-type-interactive"
        data-win-bind="groupKey: key"
        onclick="Application.navigator.pageControl.navigateToGroup(
          event.srcElement.groupKey)"
          role="link" tabindex="-1" type="button">
        <span class="group-title win-type-ellipsis"
          data-win-bind="textContent: title"></span>
        <span class="group-chevron"></span>
      </button>
    </div>
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template" >
      <div id="myitem" class="item"
        data-win-bind="style.background: color">
        <img class="item-image" src="#"
          data-win-bind="src: image; alt: title" />
        <div class="item-overlay">
        <h2 class="item-title" data-win-bind="innerText: message"></h2>
          <h6 class="item-subtitle"
            data-win-bind="textContent: eventDate"></h6>
        </div>
      </div>
    </div>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment groupeditemspage">
      <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back"
           disabled type="button"></button>
        <h1 class="titlearea win-type-ellipsis">
          <span class="pagetitle">How long until...</span>
        </h1>
      </header>
        <section aria-label="Main content" role="main">
          <div id="listView" class="groupeditemslist"
            aria-label="List of groups"
            data-win-control="WinJS.UI.ListView"
            data-win-options="{  selectionMode: 'multi',
            tapBehavior:'toggleSelect' }"></div>
        </section>
    </div>

Chaque élément HTML de la figure 2 qui contient un attribut data-win-bind comporte une expression de liaison qui correspond au nom de propriété de la variable d'élément de l'extrait de code précédent, il vous suffit donc de vérifier que les expressions de liaison correspondent aux noms des champs. N'oubliez pas de modifier également les expressions de liaison des pages groupedDetail.html et itemDetails.html pour que les données correctes s'affichent lorsqu'un utilisateur y accède.

L'exécution du projet dans le simulateur Windows donne des résultats similaires à ceux de la figure 3. (Vous pouvez en apprendre davantage sur l'utilisation du simulateur à l'adresse bit.ly/M1nWOY.)

Figure 3 Remplacer les exemples de données pour concevoir une application de base

Comme vous pouvez le remarquer, vous pouvez remplacer le code du modèle Visual Studio pour accéder rapidement aux données. Cependant, les projets sont souvent assez volumineux et complexes, ce qui rend la maintenance difficile. Si c'est le cas, utilisez alors le modèle MVVM (Model-View-ViewModel) pour faciliter la maintenance. Ce modèle est très bien documenté sur le Web.

Votre application fonctionne maintenant, il est donc temps de tirer parti des nombreuses fonctionnalités exceptionnelles de Windows 8 qui peuvent faire sortir votre application du lot.

Personnalisation de votre application du Windows Store

Sachant que le point central de Windows 8 est la page de démarrage, il est judicieux de commencer la personnalisation par là. La page de démarrage est remplie de vignettes dynamiques, et il ne s'agit pas simplement d'une série d'icônes carrées. Au lieu de cela, elles représentent le meilleur moyen de s'afficher et d'attirer les utilisateurs vers votre application. Les vignettes dynamiques sont appelées « dynamiques » pour une raison. Vous pouvez y afficher des informations et des images de façon dynamique et rendre ainsi votre application encore plus attractive.

Les applications du Windows Store requièrent trois images de vignette séparées avec les dimensions en pixels suivantes :

• Logo : 150 x 150 (vignette standard)
• Logo large : 150 x 310 (mosaïque large)
• Petit logo : 30 x 30 (s'affiche uniquement dans les listes d'applications du Windows Store)

Les images peuvent avoir un format d'image populaire, et celles avec des arrière-plans transparents fonctionnent le mieux. L'ouverture du fichier package.appxmanifest depuis la racine du projet fait apparaître la palette de configuration, dans laquelle vous pouvez sélectionner les images de vignette et définir les couleurs d'arrière-plan. La figure 4 illustre une vignette standard et large.

Figure 4 Compte à rebours des vignettes standard et large de l'application

Lorsque vous configurez les vignettes, profitez-en pour configurer en même temps l'écran de démarrage en sélectionnant uniquement une image et une couleur d'arrière-plan. Aucun code n'est utilisé. Même si les vignettes et les écrans de démarrage sont des facteurs importants dans la personnalisation de votre application, vous pouvez faire tellement plus pour personnaliser et peaufiner votre application. Pour en savoir plus, consultez bit.ly/M4HYmL.

Fonctionnalités Windows 8 « incontournables » pour votre application

Bien que votre application puisse fonctionner à ce stade, il existe de nombreuses nouvelles fonctionnalités et API dans l'écosystème d'applications Windows 8 que vous pouvez exploiter pour faire réellement sortir votre application du lot. Je vais analyser rapidement chacune d'entre elles.

AppBar L'AppBar est une fonctionnalité essentielle de chaque application. Il s'agit d'un contrôle WinJS présent dans default.html. En général, l'AppBar reste invisible, mais lorsque les utilisateurs cliquent avec le bouton droit de la souris ou balaye du haut ou du bas de l'écran, l'AppBar s'affiche comme une barre en bas de l'écran. La figure 5 affiche le balisage d'une AppBar contenant trois boutons, ainsi que leurs écouteurs d'événements correspondants.

Figure 5 AppBar avec les boutons pour ajouter, supprimer et exporter des données

    // AppBar markup in default.html
    <div id="appbar" data-win-control="WinJS.UI.AppBar">
      <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{id:'addItem', label:'Add',
        icon:'add', section:'global'}" type="button"></button>
      <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{id:'exportData', label:'Save',
        icon:'save', section:'global'}" type="button"></button>
      <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{id:'deleteItem', label:'Delete',
        icon:'delete', section:'selection'}" type="button"></button>
    </div>
    // Script in groupedItems.js
    document.getElementById("exportData").addEventListener("click", Data.exportData);
    document.getElementById("addItem").addEventListener("click", this.addItem);
    document.getElementById("deleteItem").addEventListener("click", this.deleteItem);

Les commandes globales de l'AppBar doivent se trouver sur le côté droit de l'AppBar, alors que les commandes contextuelles doivent se trouver à gauche. Appliquez le style CSS à l'AppBar, comme il s'agit simplement de <div>.

Vue ancrée Les applications du Windows Store peuvent fonctionner en mode plein écran ou en mode de vue ancrée, qui se produit lorsque l'utilisateur « colle » l'application à gauche ou à droite de l'écran. Comme l'application dispose maintenant de moins de place à l'écran, votre application doit afficher uniquement les données nécessaires.

La prise en charge de la vue ancrée étant intégrée dans le modèle Grille, vous devez vérifier que les données s'affichent correctement lorsqu'elles sont ancrées, en présentant des informations pertinentes et lisibles. L'AppBar fonctionne également lorsque l'application est ancrée, des ajustements de style peuvent être également nécessaires.

Zoom sémantique Cette nouvelle fonctionnalité tactile de Windows 8 est une façon de regrouper de grande quantité de données dans une seule vue « digeste ». Les utilisateurs appellent le zoom sémantique en procédant comme suit :

• Entrée tactile : geste de pincement
• Souris : Ctrl+molette
• Clavier : Ctrl - et Ctrl +

Le zoom sémantique est plus une visualisation pertinente des données qui assiste la navigation qu'une simple exposition des données dans une vue faisant l'objet du zoom. Si la quantité de données est importante, il est préférable que l'utilisateur ait une vue d'ensemble plutôt qu'une vue dans laquelle il doit parcourir une surcharge d'informations. Réfléchissez à la meilleure façon de présenter les données de la façon la plus pertinente.

Recherche et Partage La recherche et le partage des données entre les applications constituent les aspects principaux des applications modernes. Les utilisateurs peuvent maintenant rechercher parmi plusieurs applications à la fois et partager ensuite les données qu'ils ont trouvées. Ou bien, votre application peut s'auto-enregistrer comme cible de partage et accepter les données que les utilisateurs partagent depuis d'autres applications du Windows Store. La communication entre applications n'a jamais été si simple et si cohérente.

Contrôles de sélecteur Il s'agit de contrôles Windows traditionnels mis à jour pour une interface utilisateur moderne, tels que le sélecteur de fichier ouvert ou le sélecteur de fichier enregistré, ou de boîtes de dialogues de paramètres d'impression qui ont été les principaux composants des applications Windows dans différentes versions.

Média Comme les applications du Windows Store créées en JavaScript prennent complètement en charge HTML5, les éléments <audio> et <video> fonctionnent de la même façon que dans les pages Web ordinaires. 

Notifications toast Les notifications toast sont une façon de fournir un message momentané à l'utilisateur, que l'application soit en cours d'utilisation ou non. Les formes les plus populaires des notifications toast sont les fenêtres d'alerte par courrier électronique et les messages texte sur les téléphones. Les messages toast peuvent contenir du texte et des images et constituer un autre moyen d'attirer les utilisateurs vers votre application. Vous pouvez publier les mêmes notifications sur l'écran de verrouillage de Windows 8 pour obtenir un aperçu rapide de tout message en attente.

Application de génération

Pour résumer, Windows 8 est Windows réinventé, intégrant certains des plus grands changements du système d'exploitation depuis Windows 95 dans un marché sans précédent. Les modèles de projet Visual Studio intégrés vous permettent de commencer à publier des applications lucratives plus facilement et plus rapidement que jamais dans le plus grand marché des créateurs d'applications.

Il n'y a pas assez de place ici pour discuter de toutes les fonctionnalités étonnantes que vous pouvez ou devez utiliser dans votre application du Windows Store, je vous recommande donc fortement de consulter le programme d'application de génération (bit.ly/W8GenAppDev). Il vous guide lors du processus de création d'une application du Windows Store (ou Windows Phone) en 30 jours, en offrant des consultations et une assistance techniques et conceptuelles gratuites avec des conseils et ressources réservés.

Rachel Appel est développeuse chez Microsoft, New York. Vous pouvez la joindre via son site Web rachelappel.com ou par e-mail à l'adresse rachel.appel@microsoft.com. Vous pouvez également suivre ses derniers commentaires sur Twitter à l'adresse twitter.com/rachelappel.

Merci à l'expert technique suivant d'avoir relu cet article : Ian LeGrow