Deep Dive WinJS – Profitez à 100% de son potentiel

19
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

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 WinJS

Transcript of Deep Dive WinJS – Profitez à 100% de son potentiel

Page 1: Deep Dive WinJS – Profitez à 100% de son potentiel

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

Page 2: Deep Dive WinJS – Profitez à 100% de son potentiel

Deep Dive WinJS

Thomas LEBRUN / Jonathan ANTOINE

Développeurs, Consultants .NET

Infinite Square

Code / Développement

#AP304

infinitesquare.com

Page 3: Deep Dive WinJS – Profitez à 100% de son potentiel

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.

Page 4: Deep Dive WinJS – Profitez à 100% de son potentiel

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

Page 5: Deep Dive WinJS – Profitez à 100% de son potentiel

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

Page 6: Deep Dive WinJS – Profitez à 100% de son potentiel

demo

Deep Dive WinJS

Page 7: Deep Dive WinJS – Profitez à 100% de son potentiel

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

Page 8: Deep Dive WinJS – Profitez à 100% de son potentiel

demo

Deep Dive WinJS

Page 9: Deep Dive WinJS – Profitez à 100% de son potentiel

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

Page 10: Deep Dive WinJS – Profitez à 100% de son potentiel

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

Page 11: Deep Dive WinJS – Profitez à 100% de son potentiel

demo

Deep Dive WinJS

Page 12: Deep Dive WinJS – Profitez à 100% de son potentiel

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

Page 13: Deep Dive WinJS – Profitez à 100% de son potentiel

demo

Deep Dive WinJS

Page 14: Deep Dive WinJS – Profitez à 100% de son potentiel

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

Page 15: Deep Dive WinJS – Profitez à 100% de son potentiel

demo

Deep Dive WinJS

Page 16: Deep Dive WinJS – Profitez à 100% de son potentiel

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

Page 17: Deep Dive WinJS – Profitez à 100% de son potentiel

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

Page 18: Deep Dive WinJS – Profitez à 100% de son potentiel

demo

Deep Dive WinJS

Page 19: Deep Dive WinJS – Profitez à 100% de son potentiel

Deep Dive WinJS

Noter cette session !