Ma première application Metro/Javascript. Partie 1 : les contrôles

Par Guillaume Lacasa, posté le 16/04/2012

Profil : Développeur | Niveau : Découverte (100)

Tags : Windows8, HTML, javascript | Partager :

Cet article est le premier d’une série d’article de présentation du développement d’application Metro, avec HTML et Javascript.

Ces articles se concentreront principalement sur les spécificités de Windows 8, il est recommandé de connaitre les bases du développement web avec HTML et Javascript.

Présentation de la solution

Nous commençons par créer un nouveau projet « Windows Metro Style », utilisant le langage Javascript :

Lorsque le projet est créé, on se retrouve avec la structure suivante :

Hormis les deux derniers fichiers (manifest et certificats), on a vraiment un projet similaire à un site web : des fichiers html, javascript, css, et des images.

Nous allons développer notre application en HTML et Javascript, et le rendu sera géré par Internet Explorer 10.

Utilisation des contrôles HTML

Contrôles HTML

Étant donné que nous développons en HTML, nous allons donc pouvoir gérer notre affichage de la même manière que dans un site web classique, à l’aide des contrôles HTML que nous connaissons déjà. On pourra par afficher un bouton avec le contrôle <button> :

<button id="bt">Un bouton</button>

Et comme les applications Metro utilisent un moteur de rendu compatible avec HTML5 (au moins en partie), nous allons pouvoir utiliser les nouveaux contrôles. Par exemple, nous pourrons utiliser un contrôle de type « slider » en faisant un input de type « range » :

<input type="range" min="0" max="20" step="2" />

Propriétés des contrôles, et évènements

Une fois qu’on a écrit nos contrôles en HTML, on peut y accéder, lire et modifier les propriétés, à l’aide de Javascript. Par exemple, si on veut afficher la valeur du slider, ça se passe comme ça :

<button id="bouton">Un bouton</button>

<input id="slider" type="range" min="0" max="20" step="2" />

<p id="resultat"></p>

Et dans le code Javascript (fichier data.js), on ajoute une fonction :

function buttonClick(mouseEvent) {

    var output = document.getElementById("resultat");

    var slider = document.getElementById("slider");

    output.innerText = slider.value;

}

Et il faut s’abonner à l’évènement « click » du bouton. Dans la fonction app.onactivated (lors de l’activation de l’application), on ajoute :

var bouton = document.getElementById("bouton");

bouton.addEventListener("click", buttonClick, false);

Il est aussi possible de se baser sur des librairies Javascript externes. Le code Javascript aurait tout aussi bien pu s’écrire de la manière suivante, en utilisant jQuery :

$("#bouton").click(function () {

    var sliderValue = $("#slider").val();

    $("#resultat").text(sliderValue);

});

 

 

 

Utilisation des contrôles WinJS

En plus des contrôles HTML classiques, nous avons la possibilité d’utiliser des contrôles supplémentaires, fournis par la « Microsoft Windows Library for Javascript ». Pour pouvoir les utiliser, il faut référencer les fichiers javascript et css de cette librairie :

<link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">

<script src="//Microsoft.WinJS.0.6/js/base.js"></script>

<script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

Nous pouvons maintenant utiliser les contrôles WinJS dans notre application. La liste des contrôles utilisable (liste complète, incluant les contrôles HTML) peut être consultée sur msdn à cette adresse : http://msdn.microsoft.com/en-us/library/windows/apps/hh465453.aspx

Contrairement aux contrôles HTML que nous avons vu en première partie, ces contrôles WinJS n’ont pas de balise associée. Pour les utiliser, nous allons les embarquer dans une balise <div>, que nous allons configurer à l’aide des attributs « data-win-control » et « data-win-options ».

Ensuite, il faut appeler la méthode Javascript WinJS.UI.processAll(); qui va insérer les contrôles dans les éléments div. Cette méthode est déjà appelée dans les templates par défaut de Visual Studio.

Par exemple, pour utiliser le contrôle DatePicker (http://msdn.microsoft.com/en-us/library/windows/apps/br211681.aspx), nous allons écrire :

<div id="datePicker" data-win-control="WinJS.UI.DatePicker"></div>

Ce qui nous donnera le résultat suivant :

Pour définir les propriétés du contrôle, on utilise data-win-options. On pourra par exemple définir l’année minimale et maximale de notre contrôle :

<div id="datePicker" data-win-control="WinJS.UI.DatePicker" data-win-options="{minYear : 2011 , maxYear : 2013}"></div>

Pour accéder au contrôle par code (en Javascript), il faut récupérer la propriété winControl de l’élément conteneur :

var control = document.getElementById("datePicker").winControl;

On peut ensuite lire ou modifier ses propriétés :

document.getElementById("divResult").innerText = control.current;

control.maxYear = 2020;

Conclusion

Nous avons vu dans ce premier article un premier aperçu des contrôles Windows 8 ; rendez-vous dans quelques jours pour la suite, avec une vue d'ensemble du binding dans les applications metro javascript.

Commentaires