Windows 8 a introduit le Framework WinJS permettant de développer des applications de type Windows Store avec JavaScript. Dans Windows 8.1, Microsoft a fait évoluer ce Framework pour proposer de nouvelles fonctionnalités, des optimisations de performances, etc. Au cours de cette session, vous découvrirez toutes les nouveautés apportées par le Framework WinJS 2.0 pour le développement d'applications Windows 8.1! Speakers : Thomas LEBRUN (Infinite Square), Soriya THACH (Infinite Square)

2. Quoi de neuf dans WinJS
2.0 ?
Soriya THACH
Consultant
Infinite Square
sthach@infinitesquare.co
m
@SoriyaThach
Thomas
LEBRUN
Consultant
Infinite Square
tlebrun@infinitesquare.co
m
@thomas_lebrun

3. Infinite Square stand 19

Société de conseil, expertise, réalisation, formation, spécialisée dans le développement d’applications logicielles
innovantes sur les technologies Microsoft

100% des consultants certifiés Microsoft, parmi lesquels 10 MVP et 2 Nokia Champions

GOLD Certified Partner sur 5 domaines de compétences

Centre de formation agrée
#mstechdays
Infinite Square aux TechDays 2014

4. Donnez votre avis !
Depuis votre smartphone sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toute les heures !!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les Techdays !
#mstechdays

5. Agenda
• Rappels
• WinJS 2.0 en 1 slide
• Focus sur les nouveautés
• Questions
#mstechdays

6. RAPPELS
#mstechdays

7. Rappel
Windows 8
WinJS 1.0
#mstechdays
Windows 8.1
WinJS 2.0

8. Rappels (2)
#mstechdays

9. WINJS 2.0 EN 1 SLIDE
#mstechdays

10. WinJS 2.0 en 1 slide
Des contrôles améliorés
Infrastructure
List view
App bar
Scheduler
Le pattern Dispose
Débogage Asynchrone
De nouveaux contrôles
Hub
Navigation bar
Search box
Back button
#mstechdays
Building Blocks
Binding template
Repeater
Item Container

11. FOCUS SUR LES NOUVEAUTÉS
#mstechdays

12. Améliorations des performances de la ListView
ListView avec 1000 items (sur Microsoft Surface)
2000
1750
1500
1250
1000
750
500
250
0
Startup
WinJS 1.0
#mstechdays
Insert
WinJS 2.0
Remove

13. Améliorations des performances de la ListView (2)
ListView avec 1000 items (sur Microsoft Surface)
2000
1750
1500
1250
1000
750
500
250
0
Startup
WinJS 1.0
#mstechdays
Insert
WinJS 2.0
Remove

14. Améliorations des performances de la ListView (3)
WinJS 1.0
#mstechdays
WinJS 2.0

15. Améliorations des performances de la ListView (4)
Temps d’affichage (ms) de 100 Templates
0
10
20
30
40
50
60
70
80
90
100
WinJS 1.0
#mstechdays
110
120
WinJS 2.0
130
140
150
160
170
180
190
200

16. Améliorations des performances de la ListView (4)
Temps d’affichage (ms) de 100 Templates
0
10
20
30
40
50
60
70
80
90
100
WinJS 1.0
#mstechdays
110
120
WinJS 2.0
130
140
150
160
170
180
190
200

17. ListView: De nouvelles mises en page possibles
Header
Header
Vertical GridLayout
Grouped ListLayout
CellSpaningLayout
• Vous pouvez facilement créer vos propres mises en page
grâce à IListLayout2!
#mstechdays

18. LISTVIEW
Drag and Drop & Layouts
#mstechdays

19. Le Hub
• Nouveau contrôle avec un objectif principal: la mise en avant
de contenu!
• Le contrôle est composé de « Sections », chaque sections
possédant un « Header »
• Idéal pour les scénarios dans lequel vous souhaitez mettre
en avant des images
#mstechdays

20. Le Hub – Mise en place
<div data-win-control="WinJS.UI.Hub">
</div>
#mstechdays

21. Le Hub – Mise en place (2)
<div data-win-control="WinJS.UI.Hub">
<div data-win-control="WinJS.UI.HubSection" data-win-options="{header:
‘Foo'}">
<!– INSERER VOTRE CONTENU -->
</div>
</div>
#mstechdays

22. Le Hub – Mise en place (3)
<div data-win-control="WinJS.UI.Hub">
<div data-win-control="WinJS.UI.HubSection" data-win-options="{header:
‘Foo'}">
<!– INSERER VOTRE CONTENU -->
</div>
<div data-win-control="WinJS.UI.HubSection" data-win-options="{header:
‘Bar'}">
<!-- INSERER VOTRE CONTENU -->
</div>
</div>
#mstechdays

23. HUB
#mstechdays

24. La SearchBox
• Windows 8.1 tire parti des « erreurs » de
Windows 8
– On peut maintenant inciter l’utilisateur à faire une
recherche
• Le contrôle SearchBox est dédié à cela
– Fonctionnalités similaires au SearchPane de la barre
des Charms (autocomplétion, liste de résultats, etc.)
mais intégré dans la page
#mstechdays

25. La SearchBox – Mise en place
<div id=“mySearchBox" data-win-control="WinJS.UI.SearchBox“></div>
mySearchBox.addEventListener("suggestionsrequested",
suggestionsRequestedHandler);
mySearchBox.addEventListener("querysubmitted", querySubmittedHandler);
• Les évènements (SuggestionsRequested et QuerySubmitted) sont les mêmes
que pour le SearchPane!
#mstechdays

26. SEARCHBOX
#mstechdays

27. Le Scheduler – La problématique actuelle
• setImmediate permet d’exécuter une tâche juste après la
passe de rendu graphique
• Si plusieurs appels à la méthode setImmediate sont
exécutés simultanément, comment connaitre l’ordre
d’exécution ?
#mstechdays

28. Le Scheduler – La problématique actuelle (2)
Task
Task
setImmediate();
Task
Task
setImmediate();
Task
Task
Task
setImmediate();
Task
Task
#mstechdays

29. Le Scheduler – Le Scheduler WinJS 2.0
Task
Task
schedule(func, pri);
Task
Task
schedule(func, pri);
Task
Task
Task
schedule(func, pri);
Task
Task
#mstechdays

30. Le Scheduler – Le Scheduler WinJS 2.0
Task
Task
Task
Task
Task
Task
Task
Task
Task
#mstechdays

31. Le Scheduler – Mise en place
setImmediate(foo);
var S = WinJS.Utilities.Scheduler;
S.schedule(foo, S.Priority.normal);
or
S.schedule(foo, S.Priority.high);
or
S.schedule(foo, S.Priority.idle);
#mstechdays

32. Le Pattern Dispose - Rappels
Garbage Collector
#mstechdays

33. Le Pattern Dispose – Rappels (2)
Garbage Collector
#mstechdays

34. La Pattern Dispose – Utilisation avec WinJS
Garbage Collector
.dispose();
#mstechdays

35. La Pattern Dispose – Utilisation avec WinJS
Garbage Collector
.dispose();
#mstechdays

36. Le Repeater
• Quelle alternative pour afficher des données sous forme de
liste ?
– GridView
– ListView
• Contrôles pratiques mais parfois trop complexes
– Utiliser un bazooka pour tuer une mouche 
• Le « Repeater » (ItemsControl en XAML) réponds au besoin:
– D’afficher une liste d’éléments avec le même template
– C’est tout ! (pas de sélection, pas de groupes, pas de header, etc.)
#mstechdays

37. Le Repeater (2)
WinJS.Binding.List
HTML UI
#mstechdays

38. REPEATER
#mstechdays

39. Le Repeater (3) – Mise en place
var myBindingList = new WinJS.Binding.List(…);
<div data-win-control="WinJS.UI.Repeater" data-win-options="{data:
myBindingList}">
<label data-win-bind="textContent: description"></label>
<progress data-win-bind="value: value" max="100"></progress>
</div>
#mstechdays

40. Conclusions
• WinJS 2.0, c’est
–
–
–
–
–
Des contrôles améliorés
De nouveaux contrôles
Des Beaucoup d’optimisations de performances
Une facilité de déboggage
Et encore plein d’autres choses!
• A vous les belles apps! 
#mstechdays

41. QUESTIONS ?
#mstechdays

42. Digital is business