Nicolas Krzyzanowski

Sur cette page

Prérequis
Introduction
Le développement d’interfaces riches pour applications WPF
Réalisation d’une application : Project-Hoshimi Beginner

Prérequis

Pour suivre ce tutorial voici les applications que vous devez installer :

• WinFX Runtime Components Beta 2

• Expression Interactive Designer May 2006 CTP

• Visual Studio 2005 Express (ou supérieure)

Vous trouverez les liens de téléchargement à l’adresse suivante :
http://www.microsoft.com/products/expression/en/interactive_designer/id_free_trial.aspx

Introduction

Cet article présente deux démarches possible de réalisation d’une application Vista. L’objectif est de comprendre comment le code du développeur et le design s’intègrent dans un projet Windows Presentation Fundation. Nous verrons une approche de conception au travers d’un exemple qui implémente d’un côté un modèle de données et de l’autre une interface utilisateur avec des liens entre les deux. L’application qui est présentée fait partie du projet « Project-Hoshimi » de l’Imagin Cup qui vise à promouvoir le développement .NET auprès des étudiants.

Le développement d’interfaces riches pour applications WPF

Design et interactivité

Les interfaces utilisateurs évoluent rapidement principalement en raison de la démocratisation des matériels, des logiciels et des réseaux. L’accès à l’informatique est aujourd’hui possible à une grande majorité de personnes dans leur cadre professionnel et personnel. Le design et l’interactivité sont de plus les clefs de réussites des applications modernes. Elles apportent à l’utilisateur des éléments porteurs de sens à l’ instant précis où il en a besoin dans son processus de création et de conception. Elles renforcent également la productivité en utilisant au mieux les éléments du contexte de l’utilisateur. Le développement du design web et l’apport en interactivité du Web 2.0 illustrent par exemple aujourd’hui parfaitement cette évolution.

L’évolution de Windows dans le contexte de la communication par écran (cinéma, télévision, web) fait ressortir une convergence dans l’augmentation de la qualité des interfaces et dans l’interactivité. L’ergonomie croissante des interfaces sur écran tend aujourd’hui à se généraliser dans l’intérêt de l’utilisateur final.

L’application Vista : l’émergence entre design et développement

Le lien entre design et code est aujourd’hui réalisé pour les applications Windows grâce à Windows Presentation Fundation (WPF), un des trois éléments du Framework WinFX. Dans la conduite d’un projet multimédia complexe l’organisation générale peut se présenter ainsi :

Source : Mason Hale & Nelan Schwartz – Frog Design : http://sessions.mix06.com/

On distingue dans cette organisation possible d’un projet Vista l’intégration dans la fin du projet de WPF et de son langage déclaratif orienté design : le XAML. Voyons maintenant en détail cette partie du projet.

Design et diversité, le monde créatif

Le design d’une application englobe une grande variété de compétences et d’approches complémentaires. Parle-t-on d’infographie, de 3D ou d’animations ? Intègre-t-on des animations de textures dans un monde 3D ou des mondes 3D dans une interface 2D ? Avec WPF c’est de l’ensemble qu’il est question. Les cultures se croisent dans le design. Certains sont des spécialistes de l’infographie et dans la réalisation d’interfaces 2D qui sera ensuite enrichies par des spécialistes de l’animation. D’autres intègrent des éléments graphiques dans des animations. Le monde 3D est spécifique lui aussi car il fait intervenir par exemple des éléments de l’optique, de rendu et de géométrie. On comprend alors que la richesse de ces différentes compétences est à la fois un potentiel remarquable et une difficulté de mise en œuvre. Ce réseau de compétences possède toutefois ses outils et un langage commun dans WPF. Il s’intègre parfaitement dans le développement d’une application .NET avec des outils dédiés à chaque type de design. L’on peut donc enrichir le diagramme précédant en intégrant les outils actuellement disponibles.

Réalisation d’une application : Project-Hoshimi Beginner

Dans le cadre de la catégorie « Project-Hoshimi » (http://www.project-hoshimi.com) de la compétition Imagin Cup a été développé une application permettant de créer des stratégies pour les nanobots du professeur Hoshimi. Pour résumer, dans l’histoire associée à cette compétition, le professeur Hoshimi découvre qu’il est possible de soigner en injectant des molécules particulières nommés AZN dans des points particuliers du corps nommés point Hoshimi. Les molécules AZN sont présentes uniquement à certains endroits dans le corps et il faut les transporter aux différents points Hoshimi pour guérir le patient. Pour effectuer ces transferts des nanobots sont inventés et injectés (virtuellement bien sûr) dans le corps. Leur comportement est programmé par les joueurs grâce à Visual Studio.
Le problème de développer les stratégies des nanobots avec Visual Studio est qu’il est difficile à une personne non-initié à la Programmation Orienté Objet de créer facilement les comportements des différents nanobots. Project-Hoshimi Beginner (PHB) permet donc au joueur de créer facilement des stratégies simples pour débuter le jeu.
Nous allons voir comment intégrer les fonctionnalités de la création de stratégies grâce à WPF.

Les fonctionnalités de l’application

Pour créer des stratégies il est nécessaire de générer un fichier XML contenant les différentes informations de la stratégie.
Pour résumer ces informations, voici le modèle de données qui permet de générer par sérialisation la stratégie au format XML.

On notera l’enchainement des propriétés de type collection. Une stratégie comporte une collection de « GroupOfBots ». Chaque « GroupOfBots » contient une collection de « Turn » et chaque « Turn » contient une collection d’ « Action ».
Par ailleurs, un nom, une description, un point d’injection des nanobots sont associés à chaque stratégie. Les groupes de nanobots sont eux définis par un nom, un nombre de nanobots et une option d’attaque. Les tours sont des périodes de temps pendant lesquelles les groupes de bots effectuent une liste d’action. L’utilisateur peut choisir d’ajouter des tours s’il veut changer la stratégie de son groupe de bots au cours du jeu. Un champ « description » permet de décrire le tour défini. Enfin chaque action d’un tour est définie par une action et un point d’application de l’action. Par exemple dans la stratégie un groupe de 2 nanobots de type « container » iront à un point AZN avec l’ordre « Move NearestAZNPoint » défini au tour 0. On constatera alors au lancement de la stratégie du jeu que les nanobots se déplacent effectivement vers le point AZN le plus proche.
A l’initialisation de l’application, un super nanobot est créé, l’AI (l’Intelligence Artificielle). Cette AI permet de créer la totalité des nanobots au lancement du jeu. Un tour initial est également créé. On notera que l’important dans un premier temps est la création de groupes de nanobots et l’affectation des ordres. La gestion des tours n’est qu’une complication secondaire pour affiner une stratégie.
L’intérêt de Project-Hoshimi Beginner est de faciliter la saisie de la totalité des informations. L’interface doit être conviviale et ergonomique, le joueur ne devra pas avoir l’impression dans un premier temps qu’il réalise un programme informatique dans la création de sa stratégie.

Le design de l’interface – environnement graphique

Le design de l’interface fait appel à un certain sens de créativité, pour cela l’inspiration auprès des éléments graphiques existants autour du projet est essentielle. Il ne s’agit souvent pas de partir de zéro. Dans le cas ou vous devriez partir de rien n’hésitez pas à vous lancer dans l’aventure du design avec des professionnels à l’imagination aussi débordante que leur compétences en dessin. Dans le cas de Project-Hoshimi c’est le contraire, deux ambiances de graphismes se côtoient. Une ambiance manga en 2D comme support de l’histoire du professeur Hoshimi et de ses compagnons et une ambiance 3D support du jeu. Des mini-aventures animées en Flash présente l’histoire. On retrouve au passage la diversité du monde du design.

Ambiance manga en 2D de l’histoire

Ambiance et graphisme 3D du jeu avec une vue de la carte et une vue en poursuite des nanobots.

L’esquisse du contrôle de génération des stratégies

Le contrôle de génération des stratégies est le cœur de l’application son ergonomie est essentielle pour que le joueur l’utilise avec plaisir. A partir des fonctionnalités on peut jeter sur papier les premières idées de design du contrôle.

Esquisse du contrôle avec les principales informations

Dans ce design on retrouve bien la mise en parallèle entre les groupes de nanobots d’une part et les ordres d’autre part. La visualisation du contrôle de haut en bas et de gauche à droite donne également le sens de modification des informations. Enfin à ce stade on peut imaginer les animations possibles pour cacher ou afficher les informations en fonction du niveau d’avancement de création de la stratégie.

Le visuel du contrôle

Il permet de définir précisément l’aspect du contrôle. C’est le visuel qui fixe l’orientation quasi-définitive du graphisme final. Certaine nuance et variations seront adaptées lors du développement, mais c’est le cahier des charges graphique. Si le visuel est réalisé avec Microsoft Expression Graphic Designer il permet d’amorcer le partage des graphismes en XAML grâce à un puissant outil de découpage des graphismes. Toutefois un plug-in de génération XAML est disponible par exemple pour Adobe Illustrator. On notera ici l’importance pour l’infographiste de connaître les animations du contrôle afin de découper les éléments graphiques en fonction des besoins de l’animateur. Le risque étant de fournir un visuel inexploitable que l’animateur devra entièrement refaire dans son logiciel d’animation. Il est par exemple possible de concevoir un visuel avec Microsoft Expression Interactive Designer, mais la puissance de ses outils graphiques reste limitée devant ceux de Microsoft Graphic Designer. Par ailleurs certains éléments graphiques ne peuvent être définis que dans la partie qui lie le design au développement. Les contrôles de données ne peuvent être intégrés qu’avec Interactive Designer. Le graphisme sera alors une ressource vers laquelle le design du contrôle ira pointer.

Exemple de visuel du contrôle sur le fond de l’application

Dans le cas de Project-Hoshimi Beginner, le designer à choisi de reprendre l’environnement 3D du jeu, contexte dans lequel le joueur évolue. Il aurait pu choisir le contexte manga de l’histoire par exemple se qui donnerait un visuel complètement opposé.

Visuel plus enfantin inspiré de l’histoire.

Intégration des animations du contrôle

A l’aide du visuel et de la définition des animations on place les contrôles de données et les conteneurs graphiques dans une nouvelle scène d’un projet Interactive Designer. Pour ce faire je vous invite à faire les tutoriaux de l’application qui vous donnerons l’aisance suffisante pour reproduire cette partie et les suivantes si vous le désirez.

Intégration des contrôles de données dans Interactive Designer.

Cette étape donne la nomenclature des contrôles qui seront utilisés par le développeur de l’application. Celui-ci connectera le contrôle de génération des stratégies avec le modèle de données issu de l’architecture. Par exemple on peut s’interroger sur le partage des tâches à ce niveau de l’application, car c’est un designer qui implante les boutons, listbox, et autres textbox mais c’est un développeur qui les nommera. Le designer n’a pas besoin du nom des contrôles autrement que pour se repérer dans la hiérarchie des composants graphiques alors que le développeur les utilise comme nom de variable. Une bonne coordination entre designer et développeur en amont du développement permet de nommer les contrôles de données de telle sorte qu’ils soient significatifs pour tout le monde. C’est ce type d’interaction entre designer et développeurs que l’on peut trouver dans les projets WPF.
Continuons la création de notre contrôle. En appliquant les ressources graphiques du visuel dans Interactive Designer on conçoit alors le design définitif du contrôle.
Le contrôle ainsi créé est une page XAML, c'est-à-dire que c’est aussi une classe DotNET. On choisi de l’instancier dans un autre projet DotNet qui est l’application globale. Ce projet réuni la totalité des contrôles utilisateurs pour donner l’aspect définitif de l’application. L’avantage de cette architecture visuelle est la simplicité du code XAML sur chaque niveau de design. La relative lourdeur des pages XAML de designs très riches ne s’ajoutent pas au projet de l’application finale.

Design définitif du contrôle dans l’environnement de développement et dans l’application

Interactive Designer crée l’expérience utilisateur, cette étape est fondamentale car elle défini les limites des comportements possibles de l’application face aux besoins de l’utilisateur. Par exemple dans Project-Hoshimi Beginner les largeurs des listbox « Group Of Bots », « Turns » et « Orders » sont variables car personne ne peut prévoir à l’avance le nom des groupes de nanobots, le nom des tours et les ordres choisis par le joueur. Un degré de liberté est laissé au joueur pour que ses informations soient correctement affichées. Ce type de design « flexible » est un atout d’ergonomie dans WPF. C’est un des points clefs d’une application Vista [lien vers les 10 points d’une application Vista]. De plus le rendu vectoriel garanti une qualité égale de visualisation quelque soit l’échelle. Le design flexible est remarquablement illustré dans un webcast du site de Microsoft Interactive Designer.

Conclusion : Du design au code

Nous voilà à présent avec une interface utilisateur riche qui permet d’afficher et d’animer des contrôles de données au design tout à fait agréable … mais vide. Il nous reste à implanter le code qui permet de créer, modifier et supprimer des informations de la stratégie, et de générer notre fichier XML.
Windows Presentation Fundation permet facilement d’afficher des données provenant de sources diverses (XML ou objets). Pour la compréhension de la suite, voici un excellent article [lien vers le databinding] sur les différents moyens d’interagir sur des données en XAML ou en code. Project-Hoshimi Beginner est un exemple de l’implantation du fournisseur de données objets de WPF « ObjectDataProvider ». Cet objet, instancié dans le contexte de données d’un conteneur XAML permet de diffuser à travers les propriétés des différents objets de la page, les données d’une collection de type « ObservableCollection ». On notera qu’il est possible de passer des paramètres aux différentes méthodes, dont les constructeurs pour effectuer des calculs immédiats ou formater des données grâce à « ObjectDataProvider ». Voici un blog qui vous en dira plus sur le sujet [lien vers le blog de Béatriz Costa]. Par ailleurs en récupérant le contexte de données dans une variable en VB ou C# on peut ajouter et supprimer des éléments de la collection. Les modifications seront alors directement répercutées dans les objets de l’interface qui affichent le contenu de la collection. On possède grâce à ce fonctionnement un puissant outil de manipulation des données par le code ou par l’interface.
Nous verrons dans la partie suivante un exemple simple illustrant le fonctionnement de cette interaction.

Windows Presentation Foundation, la rencontre du design et du développement

• Partie 1 :
  Les interfaces riches.
  

• Partie 2 : Interaction entre l’interface et le code.

• Partie 3 : Synthèse des approches.