View
116
Download
1
Category
Preview:
Citation preview
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.
Recommended