WinJS est simple d’utilisation pour vos besoins basique mais saviez-vous qu’il est possible de le personaliser ? Dans cette session vous découvrirez plusieurs incontournables, comme par exemple: • Comment construire votre propre contrôle WinJS • Comment personnaliser le système de navigation • Comment utiliser à 100% le système de binding de WinJS

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

2. Deep Dive WinJS
Thomas LEBRUN / Jonathan ANTOINE
Développeurs, Consultants .NET
Infinite Square
#AP304
infinitesquare.com
Code / Développement

3. INFINITE SQUARE
STAND 44 ESPACE WINDOWS 8 & EXPÉRIENCES NUMÉRIQUES
 Société de conseil, d’expertise, de réalisation et de formation exclusivement sur les technologies
de développement d’applications et la plateforme applicative Microsoft.
 30 collaborateurs spécialisés sur les techno MS, dont 10 MVP.
 GOLD Certified Partner
sur 4 domaines de compétences.
 Agréé CIR.
 Centre de formation agréé.
Infinite Square aux TechDays 2013

4. Ce que l’on va apprendre
• Ce que permet WinJS
• Comment utiliser WinJS pour être productif
– Promises
– Le framework de navigation
– Les Bindings
– Le système de contrôles
– Globalisation des applications
– La ListView et son système de templating
Deep Dive WinJS

5. WinJS.Promise
• Abstraction d’une tâche asynchrone
– done/then lorsque le traitement est terminé
– 3 possibilités : complete/error/progress
• Ne rend pas asynchrone
• Pleins d’helpers dont disponibles
– Join, thenEach, wrap, chaining,etc.
Deep Dive WinJS

6. demo
Deep Dive WinJS

7. Le framework de navigation
• Template de base
– WinJS.Navigation : abstraction
– Application.PageControlNavigator : pratique
• Uri locales : une uri = une page
• Facile à personnaliser
– Centralisation du sharing
– Centralisation de l’internationalisation.
Deep Dive WinJS

8. demo
Deep Dive WinJS

9. Les Bindings sont très puissants 1/2
• Tire la valeur d’un objet JS sur un élément HTML
– Déclaratif dans l’HTML : data-win-bind
– Appel à WinJS.Binding.processAll dans le JS
– Parfait pour la mise en place d’MVVM
• Possible de binder des fonctions
Deep Dive WinJS

10. Les Bindings sont très puissants 2/2
• Syntaxe data-win-bind
cible : source action
• Valeurs possibles :
– WinJS.Binding.defaultBind
– WinJS.Binding.oneTime
– WinJS.Binding.setAttribute
– WinJS.Binding.setAttributeOneTime
– Fonction custom
Deep Dive WinJS

11. demo
Deep Dive WinJS

12. Le système de contrôles
• Interface réutilisable cross-projets
• Un contrôle = une classe JS
– Le constructeur prend l’élément et les options en paramètres
– L’ élément peut être vide
• Un fichier JS et un fichier CSS
Deep Dive WinJS

13. demo
Deep Dive WinJS

14. Internationalisation
• HTML :
– Attributs « data-win-res »
– Utiliser WinJS.Resources.processAll
– Appeler le fichier « resources.resjon »
• Dans le code JS :
– ResourceLoader de WinRT
Deep Dive WinJS

15. demo
Deep Dive WinJS

16. Listview et itemTemplate
• De façon déclarative dans l’HTML
• Une fonction de templating direct
• Une fonction de templating « déporté »
• Utiliser le système de virtualisation de l’UI
Deep Dive WinJS

17. Listview et virtualisation des données
• Une DataSource custom c’est
– Une classe dérivant de WinJS.UI.VirtualizedDataSource
– Une classe implémentant WinJS.UI.IListDataAdapter
• Pourquoi ?
– Ne pas avoir à charger toutes les données d’un bloc
– Exposer des données custom directement à la Listview
Deep Dive WinJS

18. demo
Deep Dive WinJS

19. Noter cette session !
Deep Dive WinJS