deep dive winjs – profitez à 100% de son potentiel
DESCRIPTION
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 WinJSTRANSCRIPT
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
Deep Dive WinJS
Thomas LEBRUN / Jonathan ANTOINE
Développeurs, Consultants .NET
Infinite Square
Code / Développement
#AP304
infinitesquare.com
INFINITE SQUARE STAND 44 ESPACE WINDOWS 8 & EXPÉRIENCES NUMÉRIQUES
GOLD Certified Partner
sur 4 domaines de compétences.
Agréé CIR.
Centre de formation agréé.
Infinite Square aux TechDays 2013
Société de conseil, d’expertise, de réalisation et de formation exclusivement sur les technologiesde développement d’applications et la plateforme applicative Microsoft.
30 collaborateurs spécialisés sur les techno MS, dont 10 MVP.
Deep Dive WinJS
• 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
Ce que l’on va apprendre
Deep Dive WinJS
• 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.
WinJS.Promise
demo
Deep Dive WinJS
Deep Dive WinJS
• Template de base– WinJS.Navigation : abstraction
– Application.PageControlNavigator : pratique
• Uri locales : une uri = une page
• Facile à personnaliser– Centralisation du sharing
– Centralisation de l’internationalisation.
Le framework de navigation
demo
Deep Dive WinJS
Deep Dive WinJS
• 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
Les Bindings sont très puissants 1/2
Deep Dive WinJS
• Syntaxe data-win-bind
Les Bindings sont très puissants 2/2
cible : source action• Valeurs possibles :
– WinJS.Binding.defaultBind
– WinJS.Binding.oneTime
– WinJS.Binding.setAttribute
– WinJS.Binding.setAttributeOneTime
– Fonction custom
demo
Deep Dive WinJS
Deep Dive WinJS
• 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
Le système de contrôles
demo
Deep Dive WinJS
Deep Dive WinJS
• HTML :– Attributs « data-win-res »
– Utiliser WinJS.Resources.processAll
– Appeler le fichier « resources.resjon »
• Dans le code JS : – ResourceLoader de WinRT
Internationalisation
demo
Deep Dive WinJS
Deep Dive WinJS
• 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
Listview et itemTemplate
Deep Dive WinJS
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
demo
Deep Dive WinJS
Deep Dive WinJS
Noter cette session !