Nicolas CLERC Tekigo – Cofounder

Impact non technologique de WPF Architectures possibles facilitant la collaboration Rendre accessible les données Déclencher des traitements et des actions

Hormis les nouveautés techniques, WPF impacte La structure des projets et des équipes Importance de lesthétique Hors de compétence du développeur Apparition de nouveaux profils dans les équipes Designer Intégrateur WPF

On retrouve la situation connue lors des premiers projets web Soit piloté 100% dev esthétisme approximatif Soit piloté 100% design code & fiabilité très faible, réutilisabilité quasi impossible Actuellement les Webdesigner sont pour la plupart des profils hybrides maitrisant le design & le dev via des outils adaptés.

ADDesignerIntégrateur visuel développeurExpert technique Architect

DesignerDéveloppeur Création Forme Gabarit couleur Images Typographie Architecture Code Pattern Composant

La quadrature du cercle : Ne pas brider la créativité du designer Profiter de la puissance de WPF & de XAML Créer une architecture applicative fiable et performante 4 e point

Design -> intégration -> codage On laisse faire le designer Expression Designer Lintégrateur WPF se débrouille pour générer du XAML avec Expression Blend Le développeur se débrouille avec le XAML généré pour ajouter le code technique et fonctionnel Inconvénient : Mono itération une 2 e passe de design ou dintégration est excessivement risquée, complexe, donc couteuse

Le designer crée son visuel Le développeur crée un squelette technique en utilisant les contrôles standards de WPF IHM : ListBox, UserControl, … Event Handler : Click, SelectionChanged, … Lintégrateur prend le relais & à partir du squelette technique et plaque le visuel conçu par le designer En // le développeur commence à intégrer les éléments fonctionnels

Itération possible, mais évolution darchitecture complexe La structure technique du projet est relativement figée Complexité si le designer fait évoluer laspect esthétique de manière importante Idéal pour les prototypes, POC ou petites applications jetables

Décorréler complètement laspect esthétique et visuel, du fonctionnel de lapplication Modèle « à la MVC » adapté à la sauce WPF Fournir des éléments techniques visuels directement utilisable dans loutil de lintégrateur (Blend) Sans ligne de code ou de XAML Utilisation massive des Template & des Style

Contrôleur fonctionnel Visuel Controleur visuel Implémentation de lesthétique de lapplication Template Style StoryBoard Eventuellement seul le support technique est imposé : Window Page UserControl Implémentation de lesthétique de lapplication Template Style StoryBoard Eventuellement seul le support technique est imposé : Window Page UserControl Controleur visuel Contrôleur visuel Couche technique dintégration fonctionnelle. Multi instance Support du design visuel Intégration avec blend Expose les traitements & fonctionnalités sous la forme de Command DependencyProperty Event ObservableCollection Couche technique dintégration fonctionnelle. Multi instance Support du design visuel Intégration avec blend Expose les traitements & fonctionnalités sous la forme de Command DependencyProperty Event ObservableCollection Modèle de données Implémentation des fonctionnalités métiers de lapplication Très souvent sous la forme dun singleton Implémentation des fonctionnalités métiers de lapplication Très souvent sous la forme dun singleton Modèle de données Support de lintégration à WPF -ObservableCollection si possible - INotifyPropertyChanged Modèle de données Support de lintégration à WPF -ObservableCollection si possible - INotifyPropertyChanged

Une application de gestion de Contacts Une couche de données Fournit un ensemble de Contact Une couche fonctionnelle Modifier ses informations … Une couche dinteraction avec lutilisateur

Blend & Visual Studio 2008 Un namespace : System.ComponentModel Quelques attributs : [Category(« MaCategory »)] [Description(« Listes des contacts »)] [Browsable(true)] Quelques méthodes : DesignerProperties.GetIsInDesignMode(…) Permets de savoir si un DependencyObject est instancié au sein dun designer

Nécessité dexposer les données vers XAML/WPF Notifier les changements de valeur des données Notifier les changements dans le contenu des collections de données Les propriétés.NET Utilisable en XAML (mapping automatique en attribut XAML) Pas de binding Pas danimation

Permet à une classe de notifier tout changement survenu sur ses données Fonctionne sur un principe dabonnement

Collection générique notifiant tous changements survenus sur les éléments contenus dans la collection Utilisation couplée avec des classes implémentant INotifyPropertyChange Notification à tous les niveaux dimbrication Elément de la collection Données des éléments

Définie une donnée attachée à un élément et stocké en dehors de cet élement Utilisable pour Binding avancé, Animation, Suivre les changements de valeur, … Souvent couplé à une propriété pour laccès à la valeur par le code Le porteur doit hériter de DependencyObject

Permet dattacher une DependencyProperty à un DependencyObject qui nen était pas initialement pourvu Permet détendre le comportement déléments qui navaient pas été conçus pour cela. Souvent couplé à 2 méthodes statiques : SetMyProperty, GetMyProperty Ex: Canvas.Grid peut être appliqué sur un Label Grid.Row / Grid.Column applicable aussi sur un Label

Appeler une méthode ou une fonction Impossible directement à partir de Blend Sauf si lintégrateur est formé au langage.NET utilisé dans le projet Déclencher des modifications visuelles à partir du code fonctionnel sans connaitre laspect visuel de lapplication Impossible sauf usine à gaz et guide de programmation très cadré.

Code visuel Code fonctionnel Une RoutedCommand découple une action de la définition de son déclencheur Le déclenchement dune commande peut être comparé à lappel dune méthode. Un paramètre peut y être associé La déclenchement dune commande est disponible pour toute classe héritant de ButtonBase

De nombreuses commandes sont déjà définies dans le framework ApplicationCommands Copy/Paste... ComponentCommands MediaCommands NavigationsCommands EditingCommands … On peut créer ses propres RoutedCommand

Code fonctionnel Code visuel Exposé par le contrôleur visuel Attrapable en XAML par lintermédiaire des triggers pour modifier le visuel Déclenchement de storyboard, … Parcours de larbre visuel de WPF Autre Possibilité : Utiliser une DependencyProperty pour un déclenchement lié à un changement de valeur de donnée PropertyTrigger

La gestion du mode design peut être compliqué Fournir des données de test au designer en labsence de données réelles Simuler ou gérer des services non disponible en mode design Doit être pris en compte dès le début de la conception du projet

© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.