WPF : Comment le dévelloppeur facilite la collaboration avec les équipes graphiques

Nicolas CLERC Tekigo – Cofoundernclerc@tekigo.com

Agenda

Impact non technologique de WPFArchitectures possibles facilitant la collaborationRendre accessible les donnéesDéclencher des traitements et des actions

WPF : Impact

Hormis les nouveautés techniques, WPF impacteLa structure des projets et des équipes

Importance de l’esthétiqueHors de compétence du développeur

Apparition de nouveaux profils dans les équipes

DesignerIntégrateur WPF

WPF : Impact

On retrouve la situation connue lors des premiers projets web

Soit piloté 100% dev esthétisme approximatifSoit 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.

Quels profils interagissent ?

AD Designer Intégrateur visuel

développeur

Expert technique

Architect

« DESIGNERS » « DÉVELOPPEURS »

« INTÉGRATEURS »

Designer Développeur

Qui sommes nous ?

Création Forme Gabarit couleur Images Typographie

Architecture Code Pattern Composant

RéutilisabilitéProductivité

ADORE LES PIZZAS ET UNE

BOISSON FRAÎCHE

COOL MAIS FAUT AIMER LA

MUSIQUE ET LES POMMES

Comment faire ???

La quadrature du cercle :Ne pas brider la créativité du designerProfiter de la puissance de WPF & de XAMLCréer une architecture applicative fiable et performante4e point

Solution 1 : Vive le design

Design -> intégration -> codageOn laisse faire le designer

Expression Designer

L’intégrateur WPF se débrouille pour générer du XAML avec Expression BlendLe développeur se débrouille avec le XAML généré pour ajouter le code technique et fonctionnel

Inconvénient :Mono itération

une 2e passe de design ou d’intégration est excessivement risquée , complexe, donc couteuse

Solution 2 : Hybride

Le designer crée son visuelLe développeur crée un squelette technique en utilisant les contrôles standards de WPF

IHM : ListBox, UserControl, …Event Handler : Click, SelectionChanged, …

L’intégrateur prend le relais & à partir du squelette technique et ‘plaque’ le visuel conçu par le designerEn // le développeur commence à intégrer les éléments fonctionnels

Solution 2 : Hybride

Itération possible, mais évolution d’architecture complexeLa structure technique du projet est relativement figéeComplexité si le designer fait évoluer l’aspect esthétique de manière importanteIdéal pour les prototypes, POC ou petites applications jetables

L’idéal

Décorréler complètement l’aspect esthétique et visuel, du fonctionnel de l’application

Modèle « à la MVC » adapté à la sauce WPFFournir des éléments techniques ‘visuels’ directement utilisable dans l’outil de l’intégrateur (Blend)

Sans ligne de code ou de XAMLUtilisation massive des Template & des Style

Contrôleur fonctionne

l

Un modèle proche du modèle MVC

Visuel Controleur visuel

Implémentation de l’esthétique de l’application•Template•Style•StoryBoardEventuellement seul le support technique est imposé :•Window•Page•UserControl

Controleur visuelContrôleur visuel

Couche technique d’intégration fonctionnelle.•Multi instance•Support du design visuel•Intégration avec blendExpose 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 l’applicationTrès souvent sous la forme d’un singleton

Modèle de donnéesSupport de l’intégration à WPF-ObservableCollection si possible- INotifyPropertyChanged

L’intégration aux outils

Blend & Visual Studio 2008Un namespace : System.ComponentModelQuelques attributs :

[Category(« MaCategory »)][Description(« Listes des contacts »)][Browsable(true)]

Quelques méthodes :DesignerProperties.GetIsInDesignMode(…)

Permets de savoir si un DependencyObject est instancié au sein d’un designer

Intégration aux outils

demo

Les données

Nécessité d’exposer les données vers XAML/WPFNotifier les changements de valeur des donnéesNotifier les changements dans le contenu des collections de donnéesLes propriétés .NET

Utilisable en XAML (mapping automatique en attribut XAML)Pas de bindingPas d’animation

INotifyPropertyChanged

Permet à une classe de notifier tout changement survenu sur ses données

Fonctionne sur un principe d’abonnement

ObservableCollection<>

Collection générique notifiant tous changements survenus sur les éléments contenus dans la collectionUtilisation couplée avec des classes implémentant INotifyPropertyChange

Notification à tous les niveaux d’imbricationElément de la collectionDonnées des éléments

Utilisation des donnéesSuivi des modifications

demo

DependencyProperty

Définie une donnée attachée à un élément et stocké en dehors de cet élementUtilisable pour

Binding avancé,Animation, Suivre les changements de valeur, …

Souvent couplé à une propriété pour l’accès à la valeur par le codeLe porteur doit hériter de DependencyObject

AttachedProperty

Permet d’attacher une DependencyProperty à un DependencyObject qui n’en était pas initialement pourvuPermet d’étendre le comportement d’éléments qui n’avaient pas été conçus pour cela.Souvent couplé à 2 méthodes statiques : SetMyProperty, GetMyPropertyEx:

Canvas.Grid peut être appliqué sur un LabelGrid.Row / Grid.Column applicable aussi sur un Label

DependencyProperty

demo

Déclencher un traitement

Appeler une méthode ou une fonction Impossible directement à partir de Blend

Sauf si l’intégrateur est formé au langage .NET utilisé dans le projet

Déclencher des modifications visuelles à partir du code fonctionnel sans connaitre l’aspect visuel de l’application

Impossible sauf usine à gaz et guide de programmation très cadré.

RoutedCommand

Code visuel Code fonctionnelUne RoutedCommand découple une action de la définition de son déclencheur

Le déclenchement d’une commande peut être comparé à l’appel d’une méthode.

Un paramètre peut y être associéLa déclenchement d’une commande est disponible pour toute classe héritant de ButtonBase

RoutedCommand

De nombreuses commandes sont déjà définies dans le framework

ApplicationCommandsCopy/Paste...

ComponentCommandsMediaCommandsNavigationsCommandsEditingCommands…

On peut créer ses propres RoutedCommand

RoutedEvent

Code fonctionnel Code visuelExposé par le contrôleur visuelAttrapable en XAML par l’intermédiaire des triggers pour modifier le visuel

Déclenchement de storyboard, …Parcours de l’arbre visuel de WPF

Autre Possibilité : Utiliser une DependencyProperty pour un déclenchement lié à un changement de valeur de donnée

PropertyTrigger

CommandsRoutedCommandRoutedEvent

demo

A savoir …

La gestion du mode design peut être compliqué

Fournir des données de test au designer en l’absence de données réellesSimuler 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.