Dans l’article précédent, on a vu le rendu que les composants HTML5 « classiques » pouvaient avoir:

Windows Metro – Le rendu des composants HTML par défaut

Les applications Windows 8 Metro utilisent le framework WinJS qui vient notamment avec d’autres composants, ne faisant pas partie de la spécification HTML5. Ces composants sont un peu spéciaux car il vont venir se greffer sur une balise HTML standard comme un div. Ils n’ont pas de balise consacrée comme <progress> par exemple.

On a déjà vu dans l’exemple de la liste, que leur implémentation se fait par un « winControl » assigné à l’élément HTML, qui va venir apporter le comportement spécifique du composant.

WinJS a préparé 5 composants graphiques pour vos IHM : DatePicker, TimePicker, Rating, Tooltip, ToggleSwitch. Voici un aperçu de leur rendu avec le style « ui-light »:

Les différentes manières d’instancier un composant WinJS

Un composant WinJS peut être créé grâce à des balises / attributs (markup) HTML ou en JavaScript ou un mix des deux.

Composant et ses options déclarés dans le markup HTML

<div id="rating1" 
 data-win-control="WinJS.UI.Rating" 
 data-win-options="{averageRating: 3.4, userRating: 4, onchange: changeRating}">
</div>

Ensuite, pour instancier réellement le composant et sa propriété « winControl », on va le faire passer dans la méthode process() de WinJS.UI:

WinJS.UI.process(document.getElementById("rating1"));

ou alors, on pourrait faire appel à processAll qui va parcourir tout le DOM de la page et aller instancier les composants WinJS

Composant déclaré en HTML et options en JavaScript

Il peut aussi être intéressant de laisser le composant comme un « placeholder », que l’on va paramétrer par la suite. Par exemple, vous allez placer votre composant Rating dans le markup HTML comme ceci:

<div id="rating1" data-win-control="WinJS.UI.Rating">
</div>

Mais la valeur du Rating n’est renvoyée qu’après un appel XHR à votre serveur par exemple. Vous allez donc lui passer ses options en JavaScript, après le retour de votre callback XHR:

var element = document.getElementById("rating1"); 
WinJS.UI.process(element); 
element.winControl.averageRating = 3.4; 
element.winControl.userRating = 4; 
element.winControl.onchange = changeRating;

Vous pouvez aussi utiliser la méthode setOptions qui permet de passer plusieurs options à la fois, comme ce que l’on avait dans le markup HTML. Plus concis mais plus difficile à debugger parfois:

var options = { averageRating: 3.4, userRating: 4, onchange: changeRating }; 
WinJS.UI.setOptions(element.winControl, options);

Composant créé complètement en JavaScript

Vous pouvez aussi tout faire en JavaScript, en appelant le constructeur de votre composant et en lui passant l’élément HTML à décorer:

<div id="rating1"></div>

Et dans le JS:

var newControl = new WinJS.UI.Rating(document.getElementById("rating1")); 
newControl.averageRating = 3.4; 
newControl.userRating = 4; 
newControl.onchange = changeRating;

Notez que si vous ne passez pas d’élément HTML, le composant WinJS va se charger d’en instancier un lui-même. L’élément créé automatiquement sera disponible à travers la variable « element » qu’il vous restera à ajouter au DOM:

var newControl = new WinJS.UI.Rating(null, { averageRating: 3.4, userRating: 4, onchange: changeRating }); 
newControl.element.id = "rating1"; 
document.body.appendChild(newControl.element);