[Techdays 2013] Session “Introduction au développement Windows 8 avec ModernUI avec HTML5 et JavaScript”

download

Lors du premier jour de ces techdays 2013, David Rousset, “Technical Evangelist” chez Microsoft France, a animé cette session sur le développement applicatif pour Windows 8… une fois n’est pas coutume avec HTML 5 et JS. Microsoft a en effet choisi de jouer la carte de l’ouverture dans ses nouvelles plateformes Windows 8 et Windows Phone 8 et de nombreuses technologies sont donc disponibles pour assurer un tel développement.

La plateforme Windows 8 et HTML 5

David est donc revenu sur les composants de Windows 8 qui laissent le choix de plusieurs langages pour l’implémentation d’applications. Cette session s’intéressait à la brique de langages “Web”. Microsoft n’a pas non plus oublié ses développeurs historiques : en parallèle se déroulait une autre session pure “dotnet” que je vous encourage à lire : http://blog-rec.soat.fr/2013/02/techdays-2013-session-introduction-au-developpement-windows-8-avec-xaml-et-net-4-5/.

Win8Core

Comme on peut le voir ici, du côté “Metro”, les API WinRT autorisent le choix du langage indépendamment des plateformes. Pour les desktops apps, ce sera le moteur de IE10 qui sera responsable de l’exécution. On va donc pouvoir profiter pleinement des nouvelles APIs HTML5.

Développer avec HTML5 et JavaScript

WinJS, Windows Library for JavaScript, sera notre librairie pour construire nos applications. Une fois encore l’accent est mis sur la rapidité du développement de l’application, WinJS implémentant le Microsoft Design Language et également des patterns très intéressants, comme les “Promises” pour faire de l’asynchronisme en toute simplicité. On retrouvera également une notion bien connue des amateurs de xaml, avec la possibilité de réaliser les Data Bindings.

David a ensuite présenté les contrôles classiques avec les styles CSS par défaut donnant le look and feel Windows 8… ils peuvent bien sûr être totalement stylisés à notre guise.

Créer une application Windows 8

Visual Studio 2012 reste l’outil de référence ici. Les 3 templates de projets de base pour les projets Windows 8 sont déclinés par langage, le template Grid étant le plus modulable. Il est cependant conseillé de démarrer “from scratch” avec un template blanc pour bien se familiariser avec les layouts applicatifs.

Les vues Windows 8 et l’utilisation de Blend

On crée ensuite notre page de démarrage de base, donc en HTML (default.html) avec  header et contenu… sans oublier nos styles CSS. Qu’il est bizarre de faire du CSS pour une application Windows ! A présent va intervenir la notion de vue des applications Windows 8. Il en existe trois types : snap, filled et fullscreen. Cette notion provient de l’univers tactile. En fait, en faisant glisser la fenêtre principale vers la gauche, on “snappe” l’application qui va rester en verticale sur 23% de la partie gauche de l’écran. On pourra ainsi lancer une autre application qui sera elle en mode “filled” en cohabitation avec la première en mode “snap”, réduite sur la gauche.

Au niveau CSS, par défaut, tout code que vous placez dans la feuille de style principale de l’application, default.css, est automatiquement joué pour toutes les vues. Vous pouvez donc définir les tailles de vos éléments et leurs couleurs par exemple. Mais on peut aussi restreindre un style à une vue en particulier (ainsi qu’à l’orientation de l’écran, pour le mode fullscreen). Par exemple, pour ajouter du code CSS qui ne soit utilisable que dans la vue paysage du plein écran, vous devez l’encapsuler avec @media en y ajoutant une condition sur le paramètre “-ms-view-state” qui devra contenir “fullscreen-landscape”. Voici les quatre possibilités :


@media screen and (-ms-view-state: fullscreen-landscape) { ... }
@media screen and (-ms-view-state: fullscreen-portrait) { ... }
@media screen and (-ms-view-state: filled) { ... }
@media screen and (-ms-view-state: snapped) { ... }

Evidemment pour le CSS comme pour la définition des layouts, des outils sont à disposition, et même incontournables, notamment Blend, disponible gratuitement pour VS2012 express.

 Chargement des données et association : le databinding avec WinJS

Dans le cadre de sa démonstration de construction d’un lecteur RSS, le but est bien sûr de charger des données dynamiques, ici dans un contrôle de type ListView que l’on insère toujours en html de la manière suivante :


<div id="articlelist" data-win-control="WinJS.UI.ListView"></div>

Cette “div” pourtant classique, sera transformée par WinJS en un contrôle JavaScript ListView ! Le code provoquant la transformation (de manière asynchrone en parsant le DOM après son chargement) a déjà été inclus lors de la création de notre projet avec Visual Studio. On retrouve en effet, dans default.js, un appel à :

WinJS.UI.processAll();

Il est important de savoir où cette transformation se passe, car le reste de notre “code-behind” en JavaScript sera placé après (tout du moins le code qui doit s’exécuter au chargement de la page, bien sûr). On va ici découvrir un des patterns intéressants implémentés en WinJS, les Promises, qui sont une implémentation d’un standard proposé d’ecmascript et qui font retourner aux méthodes asynchrones des objets Promise. On peut ensuite utiliser  de nouvelles fonctions “then” ou “done” qui assignent des handlers pour les résultats ou erreurs : « .then » désigne une opération exécutée une fois que la première se sera déroulée ! Ceci évite l’écriture pénible de nombreuses “callback” successives difficiles à enchaîner. Dans notre exemple, on a donc :


WinJS.UI.processAll().then(downloadC9BlogFeed);

Le téléchargement des données avec notamment le download du flux RSS sera donc exécuté une fois que tous les contrôles WinJS seront chargés !


function downloadC9BlogFeed() {
 WinJS.xhr({ url: "http://channel9.msdn.com/coding4fun/articles/RSS" }).then(function (rss) {
   var items = rss.responseXML.querySelectorAll("item");
  // suite du code de parsing
 [...]
  // remplissage de l'objet javascript d'articles à utiliser lors du binding
  // représenté par "ItemList.datasource" dans la balise html ci-dessous
});
}

Et oui, ici encore, xhr encapsule un appel de XMLHttpRequest dans une Promise, ce qui permet d’enchaîner par le traitement du contenu reçu. L’objet résultat, la “datasource” sera liée à notre div “articleList”. On ne s’attardera pas sur tous les détails techniques (définition de namespaces JavaScript notamment) qui sont disponibles sur le blog de David.

Le code final de la “div” sera finalement :


<div id="articlelist" data-win-control="WinJS.UI.ListView"
 data-win-options="{ itemDataSource: C9Data.ItemList.dataSource }"></div>

Ensuite vient une démonstration sur l’utilisation des templates pour modifier le design avec Blend. Il faut noter que l’outil a vraiment progressé : Blend 5 est capable d’exécuter dynamiquement le code JavaScript que l’on vient d’écrire pour vous montrer le contenu directement dans le designer. Dans cette partie, on a aussi pu remarquer l’utilisation de fonctionnalités d’un autre namespace de WinJS, WinJS.UI.Animation. WinJS expose ce moteur d’animations préconçues pour respecter la philosophie ModernUI, le concept de Fast & Fluid, ce que David appelle avec humour “la suggestion de la performance”.

Utilisation conjointe de WinJS & WinRT pour l’utilisation d’une webcam

La dernière partie bluffante de cette démonstration a été la présentation rapide d’une application utilisant la webcam de l’ordinateur. Ce qu’il faut retenir ici, c’est qu’on appelle les APIs WinRT via le namespace Windows.Media.Capture dans WinJs.

Enfin il ne faut pas oublier de spécifier dans le manifeste de notre application qu’elle va utiliser les périphériques microphone et webcam, ceci afin qu’elle puisse être validée dans le store, la finalité d’une telle application étant bien sur d’être publiée. L’utilisateur sera ainsi sollicité automatiquement pour lui demander l’autorisation d’utiliser les périphériques définis dans le manifeste.

Conclusion

Cette session a donc été l’occasion de voir en action les nouvelles possibilités offertes pour le développement d’applications Windows 8 avec des langages standards auparavant réservés au web ! L’accent est mis sur la rapidité d’un tel développement applicatif avec l’intégration d’outils performants et accessibles. Une session rafraîchissante donc, que vous pouvez retrouver sur Slideshare :

http://www.slideshare.net/davrous/introduction-au-dveloppement-windows-8-modern-ui-avec-html5-et-javascript

Les détails techniques ainsi que le code (pour le lecteur RSS comme pour l’application Webcam un peu plus pointue) sont mis à disposition sur le blog de David Rousset.

Nombre de vue : 58

AJOUTER UN COMMENTAIRE