Rfrence

Silverlight
Conception dapplications interactives riches
http://www.free-livres.com/
ric Ambrosi

Pratique de

Rseaux et tlcom Programmation Dveloppement web Scurit Systme dexploitation

Pearson Education France a apport le plus grand soin la ralisation de ce livre afin de vous fournir une information complte et fiable. Cependant, Pearson Education France nassume de responsabilits, ni pour son utilisation, ni pour les contrefaons de brevets ou atteintes aux droits de tierces personnes qui pourraient rsulter de cette utilisation. Les exemples ou les programmes prsents dans cet ouvrage sont fournis pour illustrer les descriptions thoriques. Ils ne sont en aucun cas destins une utilisation commerciale ou professionnelle. Pearson Education France ne pourra en aucun cas tre tenu pour responsable des prjudices ou dommages de quelque nature que ce soit pouvant rsulter de lutilisation de ces exemples ou programmes. Tous les noms de produits ou marques cits dans ce livre sont des marques dposes par leurs propritaires respectifs.

Publi par Pearson Education France 47 bis, rue des Vinaigriers 75010 PARIS Tl. : 01 72 74 90 00 www.pearson.fr

dition et et mise en pages : Dominique Buraud

ISBN : 978-2-7440-4125-9 Copyright 2010 Pearson Education France Tous droits rservs

Aucune reprsentation ou reproduction, mme partielle, autre que celles prvues larticle L. 122-5 2 et 3 a) du code de la proprit intellectuelle ne peut tre faite sans lautorisation expresse de Pearson Education France ou, le cas chant, sans le respect des modalits prvues larticle L. 122-10 dudit code. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc.

Table des matires

Prface Partie I Approche de Silverlight 1. Introduction Quest-ce que Silverlight ? De .Net 1 Silverlight Les avantages de Silverlight La suite Expression Studio Positionnement mtier 1.5.1 Designer interactif 1.5.2 La chane de production 1.6 Langages de dveloppement et choix 1.6.1 Langages accessibles 1.6.2 CLR, DLR et langages non compils 1.1 1.2 1.3 1.4 1.5 2. Le couple XAML / C# 2.1 XML 2.1.1 quoi sert le XML ? 2.1.2 La grammaire 2.1.3 Lambigut des relations familiales 2.2 XAML, un langage dclaratif puissant 2.2.1 Lutilit du XAML 2.2.2 Comparaison XAML / C# 2.2.3 Afficher un visuel XAML 2.2.4 Espaces de noms 2.3 Les fondamentaux du langage C# 2.3.1 C# et lAPI Silverlight 2.3.2 Introduction la programmation oriente objet 2.3.3 Une premire application en mode console 2.3.4 Les types 2.3.5 Dclarer des mthodes 2.3.6 Hritage et implmentations 3. HelloWorld 3.1 Une premire application Silverlight 3.2 Architecture d'une solution 3.3 Le conteneur racine 1 2 3 4 6 7 7 8 9 9 10 13 13 13 14 15 16 16 17 18 19 20 20 21 22 23 31 34 37 37 40 42 IX

 IV

Table des matires

3.4 Ajouter du texte 3.4.1 Crer le champ texte 3.4.2 Alignement 3.5 Tester et compiler 3.5.1 Premire compilation 3.5.2 Une application 100 % Silverlight 3.5.3 Fichiers gnrs 3.5.4 Processus de compilation 4. Un site plein cran en 2 minutes 4.1 Les projets de type site Internet 4.2 Crer des conteneurs redimensionnables 4.2.1 Crer le pied de page 4.2.2 Crer le menu du haut 4.2.3 Crer la grille centrale 4.3 Le composant bouton 4.3.1 Dfinir un nom dexemplaire 4.3.2 Afficher une bulle dinformation au survol 4.3.3 Choisir un curseur de survol personnalis 4.3.4 La proprit Content 4.4 Ajouter de linteractivit 4.4.1 Utiliser les comportements 4.4.2 Mode plein cran 4.4.3 Spcificits du mode plein cran 4.4.4 Dtecter le changement daffichage 4.5 Fichiers dploys 5. Larbre visuel et logique 5.1 Composants visuels 5.1.1 Familles de composants 5.1.2 Arbre dhritage des classes graphiques 5.2 Principe dimbrication 5.2.1 Ordre dimbrication 5.2.2 Accder aux objets de larbre visuel 5.2.3 Parcourir la liste des enfants 5.3 Ajouter des enfants la liste daffichage 5.3.1 Mcanisme dinstanciation dobjets graphiques 5.3.2 Ajouter et insrer des objets dans larbre 5.3.3 Erreurs leves 5.3.4 Crer un menu dynamique 5.3.5 Affecter les proprits Child et Content 5.3.6 vnement diffus 5.4 Supprimer des objets de larbre visuel 5.4.1 Les diffrentes mthodes 5.4.2 Leffondrement de la liste denfants 5.4.3 Dsactiver des objets 5.4.5 vnement diffus 5.5 changes dindex 5.5.1 change dindex du point de vue conception 5.5.2 Une mthode dextension pour UIElementCollection 5.5.3 change dindex du point de vue design

42 42 43 44 44 45 47 49 51 51 53 53 55 60 61 61 62 63 64 67 67 69 70 71 72 73 73 73 75 81 81 83 87 91 91 92 94 95 97 98 99 99 100 103 104 105 105 106 108

Table des matires

Partie II Interactivit et cration graphique 6.Animations 6.1 Introduction 6.1.1 Quest-ce quune animation? 6.1.2 La cadence des animations au sein de Silverlight 6.1.3 Une premire animation 6.1.4 Les diffrents types danimation 6.1.5 Les diffrents types dinterpolation 6.1.6 La classe Storyboard 6.2 Animer avec Expression Blend 6.2.1 Les bonnes pratiques 6.2.2 Crer une animation dintroduction 6.2.3 Dclencher des animations 6.2.4 Les transformations relatives 6.3 Grer lacclration 6.3.1 Les principes 6.3.2 Une animation de rebond en une seule cl danimation 6.3.3 Amliorer lanimation dintroduction 6.4 Animer avec C# 6.4.1 Lintrt danimer avec C# 6.4.2 Instanciation dynamique de ressources Storyboard 6.4.3 Affectation dynamique de Storyboards 6.4.4 Dupliquer un Storyboard cr dans Blend via C# 6.5 Les transformations relatives 6.5.1 Principes 6.5.2 Tester la prsence dune instance TransformGroup 6.5.3 Affecter la proprit RenderTransform 6.5.4 La bibliothque ProxyRenderTransform 6.5.5 Effets antagonistes et complmentaires 6.6 Animer des particules 6.6.1 Exemples dun fond sous-marin 6.6.2 Crer lanimation des bulles 7. Boutons personnaliss 7.1 Crer un lecteur vido 7.1.1 Mettre en place le projet 7.1.2 Insrer une image darrire-plan 7.1.3 Le rle du composant Grid 7.2 Style visuel 7.2.1 Crer un style personnalis 7.2.2 Naviguer entre style, modle et application principale 7.3 Bouton gnrique 7.3.1 La proprit Content 7.3.2 Liaison de modles 7.4 Le gestionnaire dtats visuels 7.4.1 volution de lexprience utilisateur 7.4.2 Au sein dun control 7.4.3 Au niveau de lapplication 7.5 Le bouton interrupteur ou ToggleButton 7.5.1 Crer le bouton 7.5.2 Le systme dagencement fluide 113 114 114 115 116 118 120 123 124 124 125 128 129 132 132 133 137 138 138 139 144 146 150 150 151 153 154 158 160 161 165 169 169 170 170 171 172 172 174 177 177 178 183 184 187 196 201 202 203

 VI

Table des matires

8. Interactivit et modle vnementiel 8.1 Les fondements du modle vnementiel 8.1.1 Le pattern Observateur 8.1.2 Introduction au couplage faible 8.1.3 Souscrire un vnement en C# 8.1.4 Cas pratique 8.2 Supprimer lcoute dun vnement 8.2.1 Principe 8.2.2 Un cas concret dutilisation 8.3 Le couplage faible en pratique 8.3.1 Principe 8.3.2 Simplifier le code du lecteur vido 8.3.3 Affectation dynamique danimations 8.4 Propagation vnementielle 8.4.1 Principe 8.4.2 Un exemple simple de propagation 8.4.3 viter la diffusion dvnements 8.4.4 Arrter la propagation vnementielle 8.4.5 Glisser-dposer et capture des vnements souris 8.5 Les comportements 8.5.1 Comportements versus programmation vnementielle 8.5.2 Les diffrents types de comportements 8.5.3 Crer des comportements personnaliss 9. Les bases de la projection3D 9.1 Lenvironnement3D 9.1.1 Introduction 9.1.2 Le plan de projection 9.2 Les proprits3D 9.2.1 Rotation3D 9.2.2 Laxe de rotation 9.2.3 Les axes de translation 9.2.4 Accs et modification via C# 9.3 La camra 9.3.1 Position de la camra dans lespace de projection 9.3.2 Langle douverture 9.3.3 Les conteneurs3D 9.3.4 Le point de fuite 9.4 Introduction aux matrices 9.4.1 Dfinition et principes 9.4.2 Les matrices3D 9.4.3 Oprations sur les matrices 9.4.4 Initialiser une vue perspective 10. Prototypage dynamique avec SketchFlow 10.1 Lenvironnement 10.1.1 Le prototypage 10.1.2 Quest-ce que SketchFlow? 10.1.3 Le flux de production 10.2 Prototype simple 10.2.1 Problmatique cliente 10.2.2 Le projet SketchFlow 10.2.3 La carte de navigation

205 205 206 207 208 209 211 211 212 215 215 217 219 220 221 222 223 225 228 232 232 232 234 245 245 246 247 249 249 250 251 253 257 258 259 260 262 263 263 267 269 272 277 277 277 279 282 283 283 284 287

Table des matires

VII

10.3 Le lecteur SketchFlow 10.3.1 Navigation 10.3.2 Collaboration transverse avec SketchFlow 10.4 Interactivit 10.4.1 Importer des fichiers PSD 10.4.2 Navigation utilisateur 10.4.3 Simuler un flux dutilisation 10.4.4 tats visuels 10.5 Interface riche 10.5.1 cran versus composant 10.5.2 Lexemple du configurateur riche Partie III Conception dapplications riches 11. Ressources graphiques 11.1 Quest-ce quune ressource 11.1.1 Dfinition et types de ressources 11.1.2 Les dictionnaires de ressources 11.1.3 Appliquer des ressources 11.2 Les pinceaux 11.2.1 Couleurs et pinceaux 11.2.2 Les pinceaux dimages et de vidos 11.3 Les polices de caractres 11.3.1 Afficher et mettre en forme du texte 11.3.2 Polices personnalises 11.4 Styles et modles de composants 11.4.1 Les styles 11.4.2 Affectation dynamique 11.4.3 Organiser et nommer les ressources 11.4.4 Les modles 11.5 Le modle Slider 11.5.1 Principes et architecture 11.5.2 Un Slider personnalis 11.6 Les liaisons 11.6.1 Crer une liaison 11.6.2 Les donnes fictives 11.6.3 Le contexte de donnes 11.6.4 Paramtres optionnels 11.7 Le modle ListBox 11.7.1 Structure et principes 11.7.2 Modifier lapparence dune liste dlments 11.7.3 DataTemplate versus ListBoxItem 12. Composants personnaliss 12.1 Contrle utilisateur 12.1.1 Un hritage pertinent 12.1.2 Navigation page par page 12.2 Bote de connexion 12.2.1 Conception visuelle 12.2.2 Validation par liaison de donnes

290 291 292 298 298 300 302 303 304 305 306

315 316 316 319 324 327 328 336 340 340 344 348 348 350 351 353 355 356 358 360 360 367 371 374 375 375 377 379 385 385 386 386 390 390 393

 VIII

Table des matires

12.2.3 Rafrachissement manuel de liaison de donnes 12.2.4 Notification de changement de proprit 12.2.5 vnements personnaliss 12.3 Contrles personnalisables 12.3.1 ColorChooser et ColorPicker 12.3.2 Crer des contrles 12.3.3 Le contrat de modle 12.3.4 Les proprits de dpendance 13. Mdias et donnes 13.1 Chargement de mdias 13.1.1 Chargement dynamique dimages 13.1.2 Formats vido et modes de diffusion 13.1.3 Un lecteur vido simple 13.1.4 Chargement dynamique de vidos 13.2 Conception MVVM 13.2.1 Principes 13.2.2 Modle 13.2.3 Vue-Modle 13.3 Chargement de donnes 13.3.1 Lobjet WebClient 13.3.2 Introduction LINQ 13.3.3 Expression lambda 13.3.4 Consommer du XML avec LINQ 13.3.5 Charger un flux JSON 13.3.6 Scurit interdomaines Index

398 399 403 409 410 411 413 423 429 429 430 438 444 449 452 452 454 457 459 460 463 467 469 472 477 481

Prface
Cela fait maintenant trois annes que jutilise Silverlight et avant lui WPF. Lorsque lon me demande de qualifier Silverlight, le premier mot qui me vient lesprit est moderne. Moderne, lenvironnement de travail via Expression Blend, logiciel de conception, que lon pourrait qualifier dhyper contextuel, et via Visual Studio port en WPF pour sa version 2010. En tant que concepteur, cest pour moi ce jour le meilleur outil et produit cr par Microsoft. Moderne, le flux de production et les enjeux humains quil engendre dans celle-ci. Silverlight porte en lui une rflexion sur nous-mmes et sur la manire dont nous catgorisons les acteurs de la production et leurs comptences. Que lon soit dveloppeur, graphiste, designer, architecte, directeur technique ou artistique, il est impossible de rester insensible cette mutation qui sopre autour de nous. Jusqu rcemment, le design graphique ne concernait pas ou peu le monde du dveloppement applicatif, mais le Web et son volution ont servi de catalyseur et ont bouscul nos habitudes de production. Moderne enfin, parce que Silverlight reprsente le fer de lance des technologies dans ce domaine et quil chappe aux habitudes et aux clichs. Les applications voluent et, de ce fait, la communication qui a souvent fait dfaut dans le pass entre techniques et cratifs est remise en jeu. Les frontires seffacent diffrents niveaux. Ainsi, une application perue comme riche, lest indpendamment de son support ou de son contexte de diffusion, quelle soit bureautique ou Internet. Ainsi, dveloppeurs et designers prouvent aujourdhui la ncessit de communiquer et de travailler de concert pour obtenir des applications de meilleure qualit. Lun sans lautre, ils ne peuvent plus rpondre au renouvellement constant des problmatiques clientes. Ainsi, les comptences de chacun ne sont plus enfermes et catgorises aussi simplement quauparavant. Silverlight offre, de ce point de vue, un environnement de dveloppement performant, robuste et complet. Il ne se contente pas de porter lexistant .Net dans une application compile pour le Web ; il correspond pleinement lvolution des murs et des attentes des internautes et leur propose de nouvelles expriences enthousiasmantes. Ce livre est bti sur ces principes, cest une rfrence pratique de Silverlight qui vous accompagnera en production. Il sadresse aux designers interactifs, aux dveloppeurs ainsi qu tous les concepteurs souhaitant apprendre le framework Silverlight. Il expose les principes et concepts de cette plateforme et les illustrent par de nombreux exemples tlchargeables. Il sarticule autour des deux axes de conception que sont le design et le dveloppement, et les met en perspective lun par rapport lautre. Si vous tes designer interactif, ce livre vous donnera une meilleure comprhension des contraintes lies au dveloppement dapplications. Il vous immergera progressivement dans lunivers du dveloppement orient objet tout en vous apportant les cls de la conception graphique propre Silverlight. Si vous tes dveloppeur, il vous sensibilisera aux contraintes nouvelles en matire de design, de prototypage et dexprience utilisateur. Il facilitera le dialogue et la communication avec les autres acteurs de la production. Quel que soit votre cas, cet ouvrage est conu pour fluidifier vos productions et tablir les bases dune rflexion intermtiers respectueuse de chaque profil.

Prface

Prrequis
Ce livre sadresse deux types de public diffrents : les designers et les dveloppeurs. La difficult est progressive. Toutefois, quelques sections peuvent sadresser lun de ces profils en particulier. Ainsi, ne vous formalisez pas sur certains termes utiliss car mme sans pratiquer le design ou le dveloppement, il est ncessaire dapprendre le vocabulaire propre ces mtiers pour communiquer avec chacun des acteurs dune production. Dans cette optique, les copies dcran dExpression Blend sont en anglais. Il nest cependant pas ncessaire de connatre la langue de Shakespeare pour comprendre ce livre. De manire plus gnrale, il est conseill davoir des notions basiques en cration graphique ou en dveloppement quel que soit le langage et le niveau technique. Ce livre se positionne comme un ouvrage dapprentissage en mode pas pas. Les trois premiers chapitres ainsi que celui ddi SketchFlow (Chapitre 10) sont les seuls qui ne ncessitent a priori aucune des disciplines mentionnes prcdemment.

Organisation de ce livre
Cet ouvrage se compose de trois parties :

Partie I, Approche. Cette partie du livre donne une vision globale de la technologie Silverlight et de son positionnement. Nous y dcouvrons larchitecture de la plateforme ainsi que son histoire. Nous crons notre premier projet Silverlight et nous y abordons les principes lmentaires de conception lis Silverlight. Nous la clturons par un tour dhorizon des composants fournis par la plateforme et nous concevons un premier site brut plein cran. Partie II, Interactivit et cration graphique. Cette partie saxe essentiellement sur le graphisme et linteractivit au sein de Silverlight. Lanimation, le modle vnementiel, la conception dinterfaces graphiques, la personnalisation graphique de composants ou encore la 3D, sont autant de sujets tudis. En fin de partie, nous abordons la conception de prototypes dynamiques via la technologie SketchFlow. Partie III, Conception dapplications riches. Le flux de production, le positionnement mtier et larchitecture reprsentent les thmes de cette partie. Au cur de ceux-ci, nous tudierons notamment la conception de contrles, lorganisation et le rle des ressources responsables de la rpartition des tches de chacun, ainsi que le modle de conception MVVM et le chargement de donnes externes.

Les exemples
Ce livre contient de nombreux exemples sous forme dexercices, de projets et de fichiers divers dont la majorit est tlchargeable sur le blog ddi au livre ainsi que sur le site de lditeur Pearson. Le blog est conu dans le but de mettre jour les projets et de garder un contenu vivant et cohrent. Il est disponible ladresse http://referencesilverlight.tweened.org. Certains projets doivent tre rcuprs sur ce dernier avant de pouvoir vous lancer. Il est organis sous forme de treize catgories dont chacune correspond un chapitre. Elles donnent accs diffrents articles contenant les sources, les projets et certains schmas tlchargeables. Plusieurs composants et autres classes sont en tlchargement libre et peuvent vous aider dans vos productions. Certains

Prface

XI

des contrles ont t rcemment ajouts la bibliothque SLExtensions ou fondus avec ceux dj existants. Dans tous les cas, ils sont accessibles sur mon blog http://www.tweened.org via la catgorie Composants.

Conventions typographiques
Les conventions typographiques adoptes dans ce livre sont les suivantes :

Police fixe. Cette police met en valeur les lments du langage. Dans les extraits de code, cette police met en exergue les modifications apportes aux programmes.
NOTE INFO

Police fixe grasse.

Ce type de note fournit des prcisions en marge du texte.

ATTENTION

Cette icne vous met en garde sur un point prcis.

propos de lauteur
Issu dun cursus scientifique Paris VII, puis dune formation aux mtiers de la production audiovisuelle et de la post-production, ric Ambrosi est co-fondateur de lcole Europenne Suprieure dAnimation, rebaptise cole Mlis, dont il fut le responsable pdagogique de 1999 2003. Il devient par la suite concepteur dapplications Web 2.0 Flash / Flex et responsable technique sur les outils de mobilit pour la socit Atos Origin jusqu fin 2006. Il est aujourdhui responsable pdagogique et directeur technique chez Regart.net pour les plateformes Microsoft Silverlight et WPF. Il a t nomin deux fois MVP, une premire fois en tant que Client Application Developer pour lanne 2008-2009 et une seconde fois comme MVP Silverlight pour lanne 2009-2010.

Remerciements
Je remercie toutes les personnes qui ont cru en moi et mont accompagn tout au long de cet exercice prilleux et fastidieux dcriture. Je remercie galement mes parents et mes beaux-parents qui nous ont soutenus ma femme et moi tout au long de ce parcours. Je remercie tous mes collgues et ex-collgues de Regart.net. Merci donc Fatos et Guylaine, les deux prsences fminines de Regart.net. Un grand merci Vincent Maitray pour mavoir accord les droits de la vido Petit Pan (utilise au Chapitre 13), ralise avec talent en une journe par ses soins. Je remercie galement Matthieu Appriou pour ce joli visuel de premire de couverture que jai repris pour le lecteur multimdia du Chapitre 11. Merci mon collgue Nicolas pour son humour et son soutien durant ces dix derniers mois. Merci Thibault pour toute cette nergie quil diffuse atour de lui. Merci en vrac mes amis, Philippe et Samia, Cyril et Aurlie, Candice et Herv, et Num et Say qui jai pens ces derniers mois. Ils mont support durant tout ce temps

XII

Prface

par leur prsence ou leurs coups de fil mme si je ne les ai vu que de manire entrecoupe. Merci toutes les personnes de Microsoft avec qui je collabore et qui me font confiance. Un grand merci mon ditrice Patricia Moncorg, qui ma permis dcrire ce livre, et ma relectrice Dominique Buraud, avec qui il est vraiment agrable de travailler. Toutes deux forment une trs bonne quipe et mont permis daccomplir ce voyage jusquau bout. Merci mon relecteur ct dveloppement, Thierry Bouquain, compatriote MVP Siverlight qui ma apport beaucoup par ses conseils et le temps quil ma allou. Thierry est co-fondateur de lentreprise Ucaya qui sest illustre sur des projets de Smooth Streaming pour les vnements du Tour de France et de Roland Garros entre autres. Merci Aude Mousset, ma relectrice ct design interactif et amie depuis trois ans, merci donc pour avoir pris le temps de me relire et dtre une force de proposition. Aude est graphiste de formation, experte sur Blend et a travaill pour I-Breed et Microsoft durant ces dernires annes. travers son travail constant et de qualit, elle a ouvert la voie aux designers. Son aventure continue chez MPower en tant que Directrice artistique et Designer interactif. Merci donc vous deux, Aude et Thierry, sans qui le livre ne serait pas ce quil est aujourdhui. Pour finir, je remercie galement ma femme pour son soutien, pour mavoir pouss crire ce livre, et pour sa comprhension dans cette preuve. Merci de nous avoir donn cette jolie Gabrielle qui nous rend tellement heureux. Merci galement pour notre fils qui va natre dans les prochains jours et qui fait dj des siennes ds quil entend le rire de Gabrielle ou la musique autour de nous je vous ddie ce livre.

Un mot des collaborateurs techniques

"La lecture de cet ouvrage renforce ma vision de lvolution des sites Internet. La dimension interaction et design est de plus en plus prsente et devient incontournable pour des sites de qualit. Les bonnes pratiques de dveloppements dcrites ici permettent de bien dmarrer un projet o la mthode de travail et de collaboration entre designer, intgrateur et dveloppeur est un des lments cls du succs." Thierry Bouquain, directeur technique et fondateur de Ucaya.

"En tant que graphiste, Silverlight est un nouveau terrain de jeux explorer. Les possibilits sont multiples, la technologie est puissante, mais sans connaissances techniques cela peut savrer frustrant. Mme si vous ntes pas dveloppeur, faire un pas vers le ct obscur est un vrai plus dans le cadre de projets Silverlight. Que vous produisiez en solo ou en quipe, que vous soyez du ct Blend ou du ct Visual Studio, ce livre est un bon moyen dapprhender le workflow Silverlight. Vous rentrerez rapidement dans le vif du sujet : ric Ambrosi partage sa matrise de Silverlight et vous permet dapprhender des concepts dintgration et de dveloppement via de nombreux cas pratiques, pertinents et complets. Un ouvrage indispensable pour tous les devsigners1 !" Aude Mousset, Directrice Artistique et Designer Interactif pour MPower.

1. Devsigner pour designer + dveloppeur.

Partie I Approche de Silverlight 1

Introduction
Dans ce chapitre, vous dcouvrirez la nouvelle plateforme de diffusion plurimdias interactive Silverlight et les raisons qui ont pouss Microsoft sa conception. Vous apprendrez en quoi Silverlight hrite de la bibliothque .Net et propose un nouveau modle de conception avantageux. Nous voquerons galement la nouvelle suite doutils Expression Studio ddie aux graphistes et aux intgrateurs et comment ceux-ci se positionnent dans la chaine de production. Silverlight laisse aussi bien la place aux langages .Net C# quaux langages libres et dynamiques comme JavaScript. Prendre partie pour lun de ces langages est lune des tapes incontournables de sa prise en main. Nous listerons donc les critres qui orienteront votre choix parmi ceux-ci. De manire gnrale, Silverlight est fait pour amliorer notre quotidien de designer ou de dveloppeur, ainsi que lexprience utilisateur sur Internet. Nous examinerons les moyens mis en uvre pour atteindre ces diffrents objectifs.

Partie I

Approches de Silverlight

1.1 Quest-ce que Silverlight ?

Silverlight est un lecteur Internet existant sous forme de plug-in, anciennement connu sous le nom de WPF/E, initiales de Windows Presentation Foundation Everywhere. Les applications lisibles par ce lecteur sont des fichiers au format xap. Bas sur un moteur vectoriel puissant, il permet dafficher du contenu dynamique et interactif pour le Web. Il facilite la conception et la diffusion dapplications riches sur Internet. Il fait partie de la plateforme de dveloppement .Net (prononcer "dotte net") propose par Microsoft, mais ne ncessite quune fraction hrite de celui-ci pour tre excut, autrement dit, linstallation du lecteur seul suffit. Cette particularit lui permet dtre diffus au sein de nombreux navigateurs sur MacOS, Windows ou Linux (via le projet Moonlight pour Linux, voir Tableau 1.1).
Tableau 1.1 : Navigateurs et systmes supports.

Systme dexploitation Windows 7 Windows Vista WindowsXP SP2 Windows 2000 SP4 Windows Server 2003 / 2008 Mac OS10.4.8+ (PowerPC) Mac OS10.4.8+ (Intel) Linux, FreeBSD, SolarisOS

Internet Explorer8 Oui Oui Oui

Internet Explorer7 Oui Oui -

Internet Explorer6 -

Firefox 2/3 Safari 3/4 Oui -

Oui Oui Oui -

Oui Oui Oui Oui

Oui Oui

Oui

Oui -

Support par le projet Moonlight dvelopp par Novell

Les applications .Net traditionnelles reposent sur la notion de client lourd, cest--dire quelles ncessitent linstallation de la bibliothque .Net. Celle-ci peut peser jusqu195Mo pour la version 3.5. Le lecteur Silverlight chappe ce type de fonctionnement peu souple car cest un environnement dexcution pour les applications de type client lger. Cela signifie que son poids est suffisamment ngligeable (de 4Mo 7Mo selon les systmes dexploitation) lors du tlchargement, pour que son installation soit rapide et les applications excutes trs lgres (souvent infrieure 1Mo). Sous Vista et Windows 7, les droits ncessaires son installation sont moins contraignants pour lutilisateur de la machine cliente. Bien que lon puisse avoir limpression quil sagit dun dtail, les rseaux dentreprises actuels sont souvent constitus de centaines, voire de milliers dordinateurs, et les dploiements qui en dcoulent ncessitent dimportants moyens humains et techniques. Dans ces conditions, le dploiement de clients lgers est une stratgie efficace court et moyen termes puisque les applications dveloppes pour ces plateformes sont de plus

Chapitre 1

Introduction

en plus performantes et puissantes. Malgr un poids ngligeable, Silverlight apporte un environnement de dveloppement complet.

1.2 De .Net 1 Silverlight

Comme nous lavons vu prcdemment, Silverlight est la fois une volution parallle et un hritage de la plateforme de dveloppement .Net (prononc "dotte nette"). Quest-ce que .Net? Quel est son but et comment est-elle ne? Rpondre ces questions nous permettra de mieux comprendre les orientations prises par les quipes dingnieurs ayant particip sa conception et nous permettra plus facilement denvisager les amliorations possibles dans le futur. Il faut remonter le temps jusqu fvrier2002 pour voir la sortie de .Net1.0, livr avec le Service pack 1 de Windows XP. Visual Studio.Net est cette poque, loutil de prdilection pour dvelopper ce type dapplications. .Net est n des besoins dinteroprabilit (entre ancienne et nouvelle technologie) et de portabilit (valable pour les langages et les systmes). Les objectifs sont simples:

Proposer une meilleure plateforme de dveloppement. Apporter un environnement indpendant du rseau ou du langage choisi quels quils soient Visual Basic, C# ou C++, etc. Dlivrer un unique modle de conception quelle que soit la version de Windows: XP, 2000, Windows CE, etc. Concurrencer Java. Faciliter la cration de services web. Accompagner les dveloppeurs et assouplir la mthodologie de dveloppement avec en point de mire lindustrialisation des processus.

Microsoft propose de nombreux systmes dexploitation et .Net uniformise le dveloppement dapplications. Les applications dveloppes en .Net ciblent essentiellement lOS Windows. Par ailleurs Microsoft ralise une premire perce significative pour scinder le design des interfaces et le code logique, grce aux formulaires Windows, surnomms Winforms. Avec ce type darchitecture, apparat la notion de code "behind". Un fichier va contenir le code ncessaire pour fabriquer linterface visuelle. Celle-ci sera simplement cre par de simples glisser-dposer de composants dans la fentre de prvisualisation sous Visual Studio. Un autre fichier contient dsormais le code logique, ou code "behind", sans lequel linterface ne rpondrait pas aux interactions utilisateurs et ne possderait aucune logique. Sorti fin 2005, .Net 2 est une vritable amlioration mais napporte que peu de nouveauts. Il faut attendre janvier 2007 pour dcouvrir .Net 3 qui rvolutionne le dveloppement dapplications sous Windows. .Net 3 nest pas une refonte, mais une extension de .Net2. Cette version apporte, en plus de C#3 ou de technologies comme Linq, de nombreux bnfices rpartis en quatre modules:

WCF (Windows Communication Foundation) facilite la communication entre les applications, les domaines ainsi que partage de bas de donnes. WCS (Windows CardSpace) pour lauthentification des utilisateurs.

Partie I

Approches de Silverlight

WWF (Windows Workflow Foundation) pour lamlioration des flux de production. WPF (Windows Presentation Foundation) comme couche de prsentation.

WPF est la technologie qui nous concerne : Silverlight en est un dveloppement la fois hrit et parallle. On peut considrer que WPF reprsente le futur de la technologie Winforms. Tout en conservant les capacits prcdentes, il intgre les profils du designer et de lergonome qui, dans 90% des cas, taient soit mis lcart, soit relgus au second plan. Microsoft comprend en effet que la fonctionnalit nest plus la seule garantie dune russite commerciale ou technique. De plus en plus dapplications voient le jour et beaucoup sont fonctionnelles. Toutefois, seules trs peu dentre elles y ajoutent lergonomie et lesthtisme, deux facteurs que lon retrouve pourtant dans lindustrie automobile, les tlphones portables et de nombreux autres secteurs. Grce lenvironnement WPF, vous pourrez changer le visuel dune application dans sa globalit. Modifier le design dune barre de dfilement ou dune liste dlments se rvlera trs simple. Tout ceci est ralisable grce WPF et au langage XAML (eXtensible Application Mark-up Language). Le XAML permet de formaliser nimporte quel dessin vectoriel ou composant visuel sous forme de balises XML. Un client peut dornavant configurer le visuel dune application en modifiant des feuilles de styles XAML et y apposer ainsi sa charte graphique sans faire appel lditeur. Certes, ces oprations sont ralisables depuis longtemps en important des bibliothques entires de classes, mais autant dire que les graphistes ntaient pas vraiment prsents dans le processus de cration. Exit donc les interfaces grises, rectangulaires, hrites de Windows3.1. WPF aborde donc avec succs lun des grands chantiers de linformatique moderne: la sparation complte du fond et de la forme, elle dpasse de loin les Winforms sur ce point. Dautres technologies ont galement essay de rpondre cette problmatique: XUL, de la fondation Mozilla, ou encore le langage FXG bas sur SVG du ct dAdobe. WPF a pris de lavance, mais concerne les dveloppements sur systme Windows pour les langages de hauts niveaux. partir de ce constat, une nouvelle problmatique apparat. De manire gnrale Microsoft est avant tout diteur de solutions, quel que soit le systme dexploitation, cest l son cur de mtier. Il se doit donc proposer des solutions indpendantes du systme. Afin de supprimer le couplage existant entre lenvironnement de dveloppement et les systmes dexploitation Windows cibls, WPF/Everywhere voit le jour. Cest lancien nom de code de Silverlight. Lobjectif est clair: puisque lon cre des solutions autant faire en sorte quelles ciblent le plus de systmes dexploitation possibles. Le moyen le plus efficace consiste alors proposer un lecteur Internet sous forme de plug-in. Les navigateurs les plus courants sont cibls en premier, et Silverlight voit finalement le jour en novembre2007. Cette initiative de Microsoft rpond avant tout aux attentes du march actuel qui volue rapidement vers les applications en ligne et rpond au quasi monopole de la plateforme Flash.

1.3 Les avantages de Silverlight

Dvelopper avec Silverlight apporte beaucoup davantages, dont certains ne lui sont pas forcment propres, mais sont plutt relatifs lensemble des technologies asynchrones prsentes sur le Web comme Shockwave, Flash, Silverlight et Ajax. Silverlight est avant tout orient applications interactives riches et, dans ce cadre, il bnficie galement de toute lexprience de Microsoft en matire de dveloppement. Ce serait une erreur de penser que les graphistes sont dlaisss car des efforts importants ont t raliss pour fournir des outils de design et danimations performants. Lors du rachat de Macromedia par Adobe, de nombreux acteurs de talent furent recruts par Microsoft pour atteindre ces objectifs. Voici les avantages les plus significatifs de Silverlight:

Chapitre 1

Introduction

Comportement asynchrone. Ajax est la premire technologie asynchrone au sein du navigateur, mais cest aussi la plus ancienne. Apparu avec Internet Explorer5 en 2001, cette technologie, rapidement adopte, provient dun objet en particulier (Xml HttpRequest) permettant deffectuer des requtes client serveur. La spcificit des technologies asynchrones rside dans le fait quelles ne ncessitent pas le rechargement complet de la page du navigateur la rception des donnes serveur. Lutilisateur peut mme continuer utiliser le reste de linterface sans provoquer derreur. Silverlight possde de nombreuses mthodes asynchrones, plus modernes quAjax permettant non seulement les changes dans un format texte, mais galement dans un format binaire. Ainsi, lchange dimages, de flux vido, de donnes types est possible ; le mode peer-to-peer est galement support. Il ne dpend pas dune technologie serveur spcifique. Il vous suffit dun simple client FTP et le tour est jou. Vous navez pas besoin dune configuration serveur spcifique ou propritaire. Un serveur Apache traditionnel fera trs bien laffaire pour diffuser votre site ou votre application Silverlight. Ouvert aux technologies du Web. Les langages dynamiques, comme JavaScript, ont la capacit de communiquer avec une instance de plug-in Silverlight de manire transparente. La communication est en ralit possible dans les deux sens. De plus la lecture, lcriture ou lenvoi de donnes sont ralisables dans des formats courants, comme XML, ou JSON, de mme que laccs nimporte quel type de technologie ct serveur. On peut ainsi interfacer sans problme une application Silverlight avec des services, ct serveur, cods en PHP, ASP, etc. Il bnficie dune compatibilit multi-environnement. Comme nous lavons dit au dbut de lintroduction, Silverlight est accessible en tant que lecteur sur Mac OS, Windows et Linux (Moonlight) et sur les navigateurs Chrome, Firefox, Internet Explorer6, 7 et8, Safari. Votre application, bien que dveloppe avec Visual Studio, Expression Blend ou mme Eclipse, sera donc visible et accessible au plus grand nombre. Les applications ne ncessitent pas de dploiement. Autrement dit, une fois accessible une adresse donne, lapplication est lisible et excutable au sein des navigateurs par les internautes. Cela est peut tre anodin ou normal si vous travaillez actuellement sur le march du Web, mais la philosophie actuelle (en mutation) consiste encore dployer des clients lourds et des applications locales poste par poste. Dans des rseaux comprenant des milliers de postes clients, le dploiement de telles applications est extrmement coteux en ressources humaines et techniques. Les applications Silverlight apportent une rponse efficace ces problmatiques de diffusion. Les langages logiques .Net supports sont grs. Le code gr (dit aussi manag) est loppos du code interprt. C# ou VB sont des codes compils, JavaScript, PHP, HTML sont interprts. Cela signifie quils sont lus par le logiciel dune machine cliente ou serveur dans le cas de PHP. Pour un langage comme JavaScript, cela se traduit par des diffrences de performances flagrantes selon le navigateur, mais aussi par des diffrences dinterprtations. Dans un site web traditionnel, laspect visuel, ainsi que la version du langage, peuvent donc varier fortement selon les navigateurs (IE, Firefox ou Safari par exemple). Au sein de Silverlight, toutes ces problmatiques sont rsolues, laffichage sera le mme quelle que soit la plateforme, la version du langage reste constante. On obtient galement beaucoup de performances car le langage est gr. la compilation, il est transform et optimis en langage intermdiaire. Par la suite, selon la machine cliente, le systme dexploitation et le navigateur, le lecteur sadaptera pour loptimiser en un langage machine adapt chaque navigateur (voir Chapitre3).

Partie I

Approches de Silverlight

Il contient un moteur daffichage vectoriel puissant. Lensemble des composants ou objets visuels sont vectoriels. Ils sont donc affichs grce au moteur vectoriel Silverlight. De nombreuses problmatiques, comme le poids des fichiers dploys ou encore la gnration dobjets de manire dynamique, sont ainsi rsolues. Les animations vectorielles sont non seulement possibles, mais galement simples raliser. Laffichage de texte avec des polices de caractre embarques, des vidos ou des images est ais mettre en uvre. Les visuels ne sont pas figs sous forme de bitmap ce qui facilite grandement la mise jour des applications et le travail collaboratif. Il amliore la collaboration entre designers et dveloppeurs. Hritant de WPF, Silverlight bnficie de la mme architecture de production. Cela signifie que le langage XAML est prsent pour formaliser lensemble des lments visuels dune application. Tout ce que le graphiste va produire gnre du XAML, de la mise en forme jusquau moindre pictogramme visuel. La consquence directe est que la cration dun composant (ou contrle) personnalis, comme une mire de connexion par exemple, seffectue en deux tapes distinctes compltement autonomes. Les designers interactifs ou les intgrateurs crent les lments visuels et les animations. Le dveloppeur ajoute le code logique. Cest une vision un peu simplifie de la ralit, mais cependant assez proche. Lavantage rside dans le fait que les graphistes participent pleinement la conception. De plus, ce quils produiront sera fidlement rutilis par les dveloppeurs et non recr ou retraduit par ceux-ci. tout moment, les designers pourront mettre jour le visuel sans mettre en danger laspect fonctionnel ou modifier le code logique.

1.4 La suite Expression Studio

La gamme Expression Studio fait partie de la stratgie WPF. Cette suite de logiciels apporte un confort jamais atteint pour le dveloppement dapplications Microsoft. Les objectifs de la gamme Expression Studio sont:

Permettre la cration dapplications riches connectes (Rich Desktop Application) ou dapplications riches pour navigateur (Rich Internet Application) via Expression Web ou Blend intgrant Silverlight. Amliorer la qualit graphique et lergonomie des applications en proposant de nouveaux outils aux profils de type graphiste, intgrateur ou designer dans lenvironnement .Net et Silverlight, tout cela en scindant le fond et la forme. Ces outils facilitent la mise en place de un flux de production reposant sur la collaboration intermtiers. Proposer de nouvelles solutions aux besoins de la "vido la demande" trs prsents sur le Web grce Silverlight, Expression Encoder et au format wmv. Rpondre aux problmatiques traditionnelles propres la cration de site Internet via Expression Web.
NOTE INFO

Pour rappel, Visual Studio est loutil de dveloppement phare de Microsoft. Du point de vue dun dveloppeur et concernant des projets standard, Visual Studio peut tre utilis seul. En effet, il est possible de btir un projet Silverlight sans besoin de logiciels de la gamme Expression Studio (Blend ou Design). Toutefois, cela ne serait pas pertinent, on pourrait en effet se demander quelle serait la valeur ajoute de telles applications? La gamme Expression facilite justement laccs au dveloppement de nouveaux acteurs. Ces nouveaux profils, que sont lintgrateur, lergonome et

Chapitre 1

Introduction

le graphiste, par leur apport, enrichissent de manire considrable lapproche et le ressenti dune application pour lutilisateur. La gamme Expression Studio apporte une ouverture exceptionnelle au monde du graphisme qui, jusque-l, tait laisse de ct. Blend et Design ont donc pour mission de fournir du contenu graphique et interactif, ainsi quune ergonomie accrue en comparaison des applications bureautiques ou Internet standard.

Voici une liste des outilscompris dans la suite:

Expression Web pour la cration de sites Internet ; Expression Blend pour la conception dinterfaces riches ; Expression Design pour la conception graphique vectorielle ; Expression Encoder pour lencodage des fichiers au format wmv en haute dfinition ; Expression Media pour lorganisation et la lecture des mdias ; Visual Studio pour la conception, le dveloppement et larchitecture dapplications.

Pour notre part, nous couvrirons la conception dapplications interactives riches via lutilisation dExpression Blend et de Visual Studio.

1.5 Positionnement mtier

Comme nous le voyons, WPF et les outils de la gamme Expression sont sur le point de bouleverser les modes opratoires existant. La tendance actuelle repose sur un besoin devenu essentiel qui consiste formaliser le graphisme grce des langages dclaratifs de type XML. Il est intressant de noter que ce mouvement, initi par Mozilla avec le XUL et par Adobe avec le SVG il y a quelques annes, est aujourdhui concrtis par Microsoft. Cependant, nous parlons bien de tendance, ce qui signifie que dautres acteurs comme Adobe reprennent la mme direction. Le FXG est la version Adobe du XAML, les deux langages se ressemblent fortement. Lenseignement que lon peut tirer de cette situation est que les modes et flux de production suniformisent et sont en pleine mutation. Les prochaines annes seront riches tous points de vue. Les capacits de Silverlight, Flash et Ajax (et nouvellement XHTML 5) proposer des langages performants et diffuser du contenu innovant seront dcisives. Ce qui est abord dans cette section est donc valable pour tous les acteurs du march quelle que soit leur provenance.

1.5.1 Designer interactif

Au sein de lenvironnement .Net, trois logiciels de la gamme sont le thtre de cette volution: Expression Blend, Expression Design et Visual Studio:

Expression Design concerne essentiellement les graphistes. Il contient lensemble des outils ncessaires la cration vectorielle. Cependant il joue aussi le rle de passerelle et permet dimporter nativement de nombreux types de fichiers dont le format Adobe Illustrator ou le format Photoshop psd. Expression Blend cible avant tout les designers interactifs, les intgrateurs et les designers deXprience Utilisateur. Les ergonomes peuvent aussi dans une certaine mesure crer des maquettes et prototype en partie rutilisables (voir Chapitre 10).

Partie I

Approches de Silverlight

Visual Studio comme outil de dveloppement principal est conue pour les dveloppeurs et possde un puissant outil de dbogage que Blend ne fournit pas. ce jour, il est considr comme lun des meilleurs produits dlivrs par Microsoft.

Le tableau 1.2 indique la localisation de Blend / Design dans la chane de production, ainsi que linvestissement prvoir en fonction du rle de chacun. On remarque que chacun peut lutiliser, Blend tant un outil polyvalent et multiforme.
Tableau 1.2 : Positionnement de Blend au sein de la chane de production.

Outils et niveau dutilisation Rle Expression Design Graphiste Designer interactif Dveloppeur Fort Moyen Aucune Expression Blend Moyen Fort Faible moyen Visual Studio Aucune Faible moyen Fort

Comme on peut sen rendre compte, un nouveau profil merge: le designer interactif. On peut considrer ce profil comme un nouveau genre de designer web. Dans la majorit des cas, cest un graphiste ayant volu et acquis une relle culture de dveloppeur ainsi quune connaissance aigu de lergonomie. Lintgrateur HTML reprsente en partie ce type de profil. Il est la fois confront des langages comme JavaScript, PHP (ralisation de modles) et CSS, tout en conjuguant cette technique une sensibilit de graphiste. La diffrence entre intgrateur et designer interactif repose essentiellement sur la partie animations et transitions. On peut voir le flasher comme designer interactif. Son objectif principal est de coupler le visuel, lergonomie, lanimation et les transitions. Il considre la logique applicative et la fonctionnalit comme importantes, mais coulant de source et plutt dvolues aux dveloppeurs. Au sein des environnements WPF et Silverlight, le designer interactif tient un rle crucial puisquil fait le lien entre les profils situs chaque extrmit de la chane de production. Cest un lment fdrateur. Silverlight et WPF proposent un modle qui facilite la collaboration, mais cest le profil de designer interactif qui formalise et permet cette communication. On pourrait y voir un mlange des genres douteux, mais sans lui, on se retrouverait dans une situation dlicate o les graphistes nauraient finalement que peu dinfluence sur la production.

1.5.2 La chane de production

Tout projet conu avec Blend sinscrit dans le cadre WPF, les applications Silverlight sont un sousensemble de WPF. Cependant, au contraire des applications WPF bureautiques, les applications Silverlight sont multi-plateformes et multi-navigateurs. Les projets Silverlight suivent la logique classique de tout dveloppement applicatif avec un renforcement singulier de la collaboration entre chaque ple mtier. Voici le dtail de chaque tape et son impact mtier:

Cahier des charges. Profils concerns: client, D.A. / D.T., chef de projet, graphistes, dveloppeurs, ergonomes et utilisateur final

Chapitre 1

Introduction

Maquette fonctionnelle et story-boards. Profils concerns: 50% dveloppeurs et 50% graphistes ou ergonomes. Rflexion papier commune sur la disposition des objets de linterface et sur lergonomie de lapplication. La navigation et la cinmatique doivent tre penses ce stade. Squelette technique et maquettage. Les collaborateurs du projet sont dans le mme bureau et travaillent ensemble :
11

llaboration du squelette technique, profils concerns: 95% dveloppeurs et D.T., 5% graphistes ou ergonomes la cration de plusieurs maquettes sous Expression Design ou Illustrator "Look & Feel", profils concerns: 5% dveloppeurs et 95% graphistes ou D.A. Cette phase se termine lorsque lune des maquettes est valide par le client.

11

Production. Cycle de "va et vient" dit itratif entre chaque ple mtier qui est une interaction continue entre les profils. Durant cette phase chaque ple mtier fournit lautre les lments dont il a besoin afin davancer dans le dveloppement du projet.
11

Dveloppement de la partie logique de lapplication, profils concerns: dveloppeurs et directeur technique; Intgration graphique des lments composant lapplication, profils concerns: graphistes, designers interactif ou intgrateurs, directeur artistique.

11

Figure 1.1
Le cycle itratif de production.

Dveloppeur

Designer interactif

Un designer interactif est toujours ncessaire. Toutefois, si le projet ncessite peu de ressources et quil est de faible envergure, ce rle est dvolu un graphiste ou un dveloppeur, ou encore aux deux tour de rle selon les besoins.

1.6 Langages de dveloppement et choix

Choisir un langage de dveloppement nest pas seulement un choix pragmatique, cette dcision est troitement lie la sensibilit et lhistoire personnelles de chacun. Nous allons toutefois lister les langages, et essayer de nous dcider pour lun deux de manire impartiale.

1.6.1 Langages accessibles

Plusieurs langages sont accessibles aux dveloppeurs dans la gamme Expression Studio, ils sont catgoriss en trois types distincts. La premire catgorie concerne les langages manags propres la CLR (Common Language Runtime). On y compte:

10

Partie I

Approches de Silverlight

Le langage dclaratif XAML. XAML signifie eXtensible Application Mark-up Language. Ce langage permet de formaliser le graphisme: les courbes vectorielles, les dgrads de couleurs ou les couleurs unies, les styles, les composants visuels, les animations, les modles de composants qui correspondent la forme et au graphisme de ceux-ci. C#. Le langage logique que nous utiliserons tout au long du livre (voir Chapitre 2). Visual Basic. Langage de haut niveau, comme C#, mais plus spcifique dans son criture, nous ne lutiliserons pas dans ce livre.

La deuxime catgorie concerne les langages manags dynamiques grs par la DLR (Dynamic Language Runtime). Ils ne seront pas couverts ici. Parmi eux on trouve:

IronPython. Cest le portage du python pour la plateforme .Net, vous trouverez plus dinformations ladresse suivante: http://www.codeplex.com/IronPython. IronRuby. Cest la version du langage Ruby propre .Net, vous trouverez plus dinformations ladresse suivante: http://www.ironruby.net/. JScript. Cest un langage cr par Microsoft qui jouit de la norme ECMA. JavaScript. Version spcifique du langage du mme nom mais compile par la DLR

La troisime catgorie fait rfrence au langage non compil (donc interprt) JavaScript, cela engendre moins de possibilits et daccs au lecteur Silverlight, mais laccs est transparent. Le XAML est le seul langage dont vous aurez besoin quel que soit le code logique que vous choisirez. Celui-ci est orient prsentation, cest un langage dclaratif de type XML (voir Chapitre 2).

1.6.2 CLR, DLR et langages non compils

Nous aborderons en dtails les notions de CLR et de DLR au Chapitre3. Sachez simplement que la CLR est le compilateur grant les langages natifs de la plateforme .Net, donc de lenvironnement Silverlight. Au sein de Silverlight, deux langages sont grs par dfaut dans les projets : Visual Basic et C#, mais la CLR donne accs dautres langages moins connus comme F# par exemple. Dune toute autre manire, la DLR ouvre et enrichie Silverlight dautres langages dynamiques qui ne sont pas forcment hrits de ou propres .Net. Un langage dynamique est un langage capable de faire voluer sa structure lexcution, autrement dit un langage dont il est facile dtendre les capacits des classes ou objets natifs dynamiquement. Ce type de langage nest pas rellement dans la culture originelle de Microsoft mais les anciens dogmes provenant des annes80 sont en cours de mutation. Lvolution de C# en est un flagrant exemple. La DLR est en ralit une surcouche la CLR, elle permet des langages dynamiques daccder au lecteur Silverlight en communiquant avec la CLR. JavaScript est un cas particulier, il peut tre gr de deux manires, soit par la DLR, soit de manire transparente. Lorsquil est gr par la DLR, sa mise en production est, au dpart, plus complexe mais dans ce cas, il accde entirement la CLR et bnficie des avantages lis cette dernire. Dans le cas dune utilisation transparente, il donne directement accs une petite partie des capacits du lecteur Silverlight, mais les performances lexcution sont beaucoup moins leves puisquil ny a pas de compilation. Le choix du langage dpendra essentiellement de votre culture de dveloppeur. Cependant, dcider dutiliser ou non directement JavaScript comme langage non compil est un peu moins vident, vous devrez vous poser deux questions:

Chapitre 1

Introduction

11

Quel type de projet souhaitez-vous construire?

11

Si vous souhaitez construire un projet Silverlight faible interactivit, comme des bannires ou de petits sites vnementiels, JavaScript parat plus adquat car sa mise en uvre, ainsi que larchitecture projet, est moins complexe. Le plus logique sera alors de crer un site web Silverlight dans lequel JavaScript assurera la logique. Si vous souhaitez au contraire crer une application riche ayant une forte interactivit utilisateur, optez pour C#, Visual Basic ou nimporte quel langage gr par la DLR (selon votre culture). Tous ces langages ont accs lensemble des fonctionnalits du lecteur Silverlight et permettent des performances bien suprieures lintgration simple de JavaScript. Bien que cela soit rellement possible, raliser une bannire avec C# est sans aucun doute disproportionn.

11

Quel est votre corps de mtier?

11

Si vous tes intgrateur HTML ou que vous cumulez les expriences dans ce secteur, vous avez sans doute dj dvelopp avec JavaScript et vous connaissez peut-tre AJAX. Vous naurez donc pas deffort de reformation dans un premier temps. Vous vous apercevrez cependant que certaines interactions seront moins faciles, voire impossibles mettre en place en JavaScript. Je vous encourage envisager un apprentissage C# moyen terme. Visual Basic est un trs bon langage bnficiant dune grande communaut, mais sa syntaxe est trs spcifique. C# est tout de mme plus proche de ce que nous connaissons. Si vous tes un dveloppeur Java ou .Net, C# parat tout dsign, la puissance de ce langage, son confort dutilisation, son orientation vers des langages fonctionnels, surtout dans sa version 3 (avec les infrences de type par exemple) sont sans gales.

11

Pour notre part, nous utiliserons de faon significative le XAML et opterons pour le langage C#, assez proche de la norme ECMA (les origines de lauteur) sur de nombreux points. JavaScript ne nous servira qu lintgration de Silverlight au sein dune page HTML. Ce livre sadresse en partie aux designers web, dans ce cadre et pour diverses raisons, nous naborderons pas Visual Basic, IronRuby, IronPython ou JScript. Au Chapitre 2, afin de commencer notre apprentissage de Silverlight, en douceur, nous ferons un rapide retour sur les bases du langage XML et XAML, ainsi que sur C#. De cette manire, vous les assimilerez plus facilement par la suite.

2
Le couple XAML / C#
Lapparition du XAML constitue lune des grandes nouveauts de .Net 3. Ce langage repose sur XML. Dans ce chapitre, nous reviendrons donc brivement sur lcriture et la grammaire XML. Puis nous verrons en quoi certains processus de cration sont facilits grce XAML, et comment afficher un document XAML valide au sein dun navigateur ou dun diteur de code simple. Au mme niveau que XAML, le langage C# permet dajouter de la logique nos applications Silverlight. Nous dresserons donc un rcapitulatif succinct de lcriture afin de vous familiariser avec C# et la programmation oriente objet. Si vous dveloppez avec un autre langage, comme JavaScript ou PHP, ou si vous tes intgrateur, ce chapitre vous concerne. Ainsi, inutile de consacrer des heures la lecture dun ouvrage sur C#, dans un premier temps. Si vous tes vous-mme dveloppeur .Net, vous pouvez passer votre chemin ou revoir les fondamentaux du langage.

2.1 XML
Le XAML repose sur XML. Connatre les rgles dcriture du XML revient donc respecter celles du XAML. XML est lacronyme de eXtensible Mark-up Language, cest un langage dclaratif balises.

2.1.1 quoi sert le XML ?

Le XML na quun seul objectif: prsenter dune manire structure et universelle des donnes. Il ny a pas de vocabulaire li ce langage, seule la grammaire est importante. Celle-ci est trs simple et ne connat que quelques rgles importantes. XML se veut donc le plus gnrique possible. Au contraire du XAML qui est conu pour afficher un visuel et qui possde un vocabulaire spcifique, le XML ne possde pas de vocabulaire spcifique. crire ou comprendre la structure dun fichier XML est la porte de tous, dveloppeurs ou non. Les noms des balises ne sont donc pas prdfinis ou figs, mais arbitrairement choisis par le dveloppeur ou le fournisseur de la source XML. Le transit de fichier XML est indpendant du rseau, de la plateforme ou de la connaissance pralable du fichiers XML. Cest aujourdhui le format de communication le plus utilis sur Internet. Vous connaissez sans doute les fameux flux RSS bass sur XML. Les flux RSS

14

Partie I

Approches de Silverlight

ne sont rien dautre que des fichiers de donnes XML respectant la norme RSS. Cest pour cette raison quun lecteur de flux RSS est capable de lire nimporte quelle source do quelle provienne tant que la norme RSS est respecte. Voici un exemple de contenu au format XML:
<DISCOGRAPHIE> <INTERPRETE prenom="Patrick" nom="Hernandez"> <ALBUM annee="1979" titre="Born to be alive"> <JACQUETTE url=www.amazon.com/images/P/Patrick.jpg /> <CHANSON>Born to be alive</CHANSON> <CHANSON>You Turn me On</CHANSON> <CHANSON>It Comes So Easy</CHANSON> </ALBUM> <ALBUM annee=1980 titre=Crazy days Mystery nights> </ALBUM> </INTERPRETE> ... </DISCOGRAPHIE>

Vous remarquez que les donnes sont structures suivant des relations familiales. Ainsi la balise INTERPRETE contient plusieurs balises ALBUM qui contiennent elles-mmes plusieurs balises CHANSON. Les balises ALBUM sont surs les unes par rapport aux autres car elles sont situes sur le mme niveau dimbrication: elles sont toutes contenues par la balise mreINTERPRETE. Nous pouvons donc comparer une structure XML un arbre gnalogique. Toutefois les noms des balises sont arbitraires et ne relvent pas du langage proprement dit. Nous allons maintenant tudier les rgles dcriture du XML qui sappliquent galement aux langages drivs tels que XAML.

2.1.2 La grammaire
Le langage XML est constitu de balises et dattributs. Les balises peuvent tre ouvrantes, fermantes ou auto-fermantes. Les attributs sont dfinis au sein des balises ouvrantes ou auto-fermantes. Ils sont suivis de loprateur daffectation = et leurs valeurs sont toujours entre guillemets (voir Figure 2.1).
Figure2.1
Structure dun fichier XML.
Nud racine Attributs de balise Valeur de l'attribut nom

Balise auto-fermante

Nud texte Nud lment Balise fermante

Balise fermante du nud racine

Chapitre 2

Le couple XAML/C#

15

Bien que les balises soient dfinies arbitrairement, il existe des rgles dcritures respecter sous peine que le fichier ne soit pas lisible:

La balise xml est proscrite. Cest une balise rserve, utilise uniquement pour dcrire lencodage du fichier XML. Les balises ne doivent pas commencer par un chiffre ou par un caractre spcial. Le seul caractre spcial autoris est _. Les autres ne doivent pas tre contenus dans un nom de balise. Attention donc viter les caractres avec accent dont la langue franaise fourmille. Il doit y avoir un unique nud racine. Dans le code XML prcdent, la balise racine est DIS COGRAPHIE. Une balise ouverte doit imprativement tre suivie dune balise de fermeture qui commence par "</" ou tre elle-mme auto-fermante. Cest le cas de la balise JACQUETTE. Les attributs de balise, par exemple annee, ne doivent pas contenir de caractres spciaux. Les valeurs des attributs de balise doivent toujours tre entre guillemets ou entre simples apostrophes.

Vous pouvez galement vous rfrer des fichiers de type DTD (Document Type Definition). Ceux-ci contiennent une dfinition de type de document permettant de spcifier certaines rgles.

2.1.3 Lambigut des relations familiales

Dcider arbitrairement dune structure de donnes base sur des relations familiales peut savrer trs risqu. Dans un arbre gnalogique, la structure familiale reprsente la vie relle, il est donc facile de concevoir des donnes XML bases sur ce modle. Toutefois, lexemple de la discographie est intressant car de nombreuses mthodes de tri existent dans ce cas. Nous avions class notre discographie par interprte puisque les balises INTERPRETE contenaient un ou plusieurs albums. Cependant, nous aurions pu classer les albums au sein de balises GENRE contenant un attribut type avec des valeurs comme funk, rap, disco. Puis, lintrieur des balises GENRE, nous aurions pu avoir des balises ALBUM. Les donnes contenues auraient t les mmes, mais leur structure aurait t diffrente. Nous aurions galement pu classer les albums par date :
<DISCOGRAPHIE> <DATE annee="1979" month="05"> <ALBUM titre="Born to be alive"> <INTERPRETE prenom=Patrick nom=Hernandez /> <JACQUETTE url=www.amazon.com/images/P/Patrick.jpg /> <CHANSON>Born to be alive</CHANSON> <CHANSON>You Turn me On</CHANSON> <CHANSON>It Comes So Easy</CHANSON> </ALBUM> </DATE> <DATE annee=1980> </DATE> ... </DISCOGRAPHIE>

Bref, notre premire structure aurait pu diffrer alors que nous avons les mmes donnes. Il en est de mme pour tous les langages drivs du XML. Les consquences pour les fichiers XML peuvent tre importantes car cela peut rendre difficile les oprations de tri et daccs aux donnes.

16

Partie I

Approches de Silverlight

Pour les langages comme le XAML, les diffrentes approches dimbrication de balises permettent une souplesse de conception unique. Nous allons donc nous intresser davantage au XAML afin de comprendre en quoi ces relations peuvent engendrer des visuels diffrents et innovants.

2.2 XAML, un langage dclaratif puissant 2.2.1 Lutilit du XAML

Comme nous lavons expliqu au Chapitre 1, le XAML, driv de XML, est le nouveau langage apport par .Net 3. Ce langage permet simplement un graphiste de formaliser nimporte quel visuel. Crer des lments graphiques, grce ce langage, peut donc tre ralis de deux manires:

La premire consiste crire du XAML via nimporte quel traitement de texte ou diteur de code. Cest lapproche que va adopter le dveloppeur. Un outil comme Note Pad suffit, mais Visual Studio est recommand car le dveloppeur bnficie de lIntelliSense. Ce concept facilite grandement la programmation en vitant aux concepteurs de connatre le vocabulaire dun langage dans sa totalit. Cela suppose que le graphiste code le visuel, ce qui nest pas lidal car concevoir du graphisme de cette manire se rvle tre une dmarche abstraite et indirecte, qui fait appel peu de sensibilit. Lapprentissage technique du langage est tel que le coder directement dans un premier temps nuit la cration graphique. La deuxime mthode passe par lutilisation dun outil ddi aux graphistes ou aux designers interactifs. Dans ce cas, deux logiciels de la suite Expression rpondent cette problmatique: Expression Blend et Expression Design. Avec ces deux logiciels, les graphistes peuvent concevoir le design dlments visuels ou dune application. Ces logiciels ont la capacit de traduire le visuel en XAML. Une fois le design cr, le dveloppeur peut non seulement en avoir un aperu, mais aussi rcuprer le code XAML gnr de manire transparente. Si vous travaillez avec des outils tels que Adobe Illustrator ou Photoshop, il est tout fait possible dimporter les fichiers produits par ces logiciels au sein dExpression Design ou Expression Blend directement. Dans ce cas, les fichiers psd ou ai sont transforms en bitmap ou au format vectoriel XAML selon le type du fichier import.

Le code gnr est directement rutilisable au sein dune production, le dveloppeur ne le modifiera que trs peu et laissera la place au designer interactif. Le travail de ce dernier est donc rellement respect. Voici une liste de ce qui peut tre formalis en XAML par le graphiste:

les tracs vectoriels ; les couleurs unies ; les dgrads de couleurs ; Les animations ; les composants visuels ; lagencement dune interface visuelle ; les styles de composants ; les modles de composants ;

Chapitre 2

Le couple XAML/C#

17

les filtres ; la 3D.

Comme nous pouvons le voir, le XAML est un formidable outil de communication conu pour chaque acteur dune production. Lergonome, le directeur artistique, le graphiste, le designer interactif, lintgrateur, le dveloppeur et le directeur technique peuvent participer pleinement la cration dune application sans empiter sur le travail des uns ou des autres.

2.2.2 Comparaison XAML / C#

Ces deux langages sont de mme niveau. Cela signifie que tout ce qui est cr en XAML peut ltre via C#, bien quil ne soit pas adapt la cration graphique. Linverse nest pas vrai, XAML est orient visuel avant tout, ainsi il nest pas possible de crer dalgorithmes quelconques sans C# ou un autre langage logique, comme VB. Voici lcriture dun bouton en C#:
Button monBouton = new Button(); monBouton.Width = 156; monBouton.Height = 80; monBouton.Content = "Hello"; Canvas.SetTop(monBouton, 50); Canvas.SetLeft(monBouton, 75); monBouton.Background = new SolidColorBrush(Color.FromArgb(0xFF, 0xC3, 0x02, 0x02)); monBouton.Click += new RoutedEventHandler(button_Click); monCanvas.Children.Add(monBouton);

Voici la mme criture en version XAML:

<Canvas x:Name="monCanvas" > <Button x:Name="monBouton" Width="156" Height="80" Content="Bonjour" Canvas.Top="50" Canvas.Left="75" Background="#FFC30202" Click="button_Click" /> </Canvas>

Dans ces exemples, nous instancions un bouton lintrieur dun conteneur de type Canvas. Comme nous le constatons, le XAML est bien plus simple crire. Par exemple, affecter une couleur se rvle trs facile. De mme, dfinir le bouton comme enfant dun autre objet est trs intuitif et moins verbeux quen C#. Cela provient de la nature mme du XAML qui mane du XML. Vous pouvez avoir un aperu du rsultat la Figure 2.2.
Figure2.2
Visuel dun bouton gnr par XAML ou C#.

18

Partie I

Approches de Silverlight

La proprit Content du bouton permet dans ce cas dafficher le mot Bonjour. Cette proprit ne sappelle pas Label car elle a la capacit dafficher autre chose quune chane de caractres. Grce son criture, trs souple, sappuyant sur le langage XML, le XAML permet dimbriquer des objets complexes aisment. Pour cela, il suffit de dfinir lobjet imbriqu comme nud lment enfant du bouton (voir la section 2.1.2 pour plus dinformations sur XML). Par exemple, on peut afficher une case cocher dans le bouton au lieu dun mot (voir Figure 2.3):
<Canvas x:Name="monCanvas"> <Button x:Name="monBouton" Width="156" Height="80" Canvas.Top="50" Canvas.Left="75" Background="#FFC30202" Click="button_Click" > <CheckBox Content=CheckBox /> </Button> </Canvas>

Figure2.3
Visuel dun bouton gnr par XAML avec case cocher.

Lexemple de la Figure 2.3 ne serait pas rellement ergonomique pour lutilisateur, imbriquer une case cocher au sein dun bouton na pas de relle utilit, toutefois cela montre quel point le XAML sappuie sur les relations familiales hrites du XML. Vous pourrez donc imaginer toutes sortes dinterfaces visuelles et de nouvelles ergonomies pour vos applications. Ce nest quun aperu de ce dont le XAML est capable. Vous allez maintenant crer votre premier visuel XAML.

2.2.3 Afficher un visuel XAML

Lexemple prcdent est illustratif, mais nous ne bnficions daucun moyen pour le moment den avoir un aperu. Bien sr, vous pourriez utiliser Expression Blend ou Visual Studio, mais ces logiciels sinscrivent dans une logique de projet. Vous souhaiterez souvent avoir laperu visuel dun code XAML sans pour autant crer un projet ou une solution (voir Chapitre 3). Pour cela, il existe quelques diteurs de XAML dont lun sappelle Kaxaml. Il a t conu par Robby Ingebretsen, vous pouvez le tlcharger cette adresse: http://www.kaxaml.com. Comme le dit son concepteur, lobjectif est de vous proposer une IntelliSense pousse tout en fournissant un aperu de nimporte quel fichier XAML prsent sur votre disque dur. Vous trouverez un fichier de dmonstration, preview.xaml, dans le dossier chap2 des exemples du livre. Cependant Kaxaml nest pas obligatoire. Il existe une autre solution si vous souhaitez envoyer votre travail un collgue ou votre directeur artistique, mais que ces derniers ne possdent pas dditeur XAML. En ralit, ils nen ont pas forcment besoin tant quaucun code logique nest li au code dclaratif. Tout fichier XAML que vous crez est lisible par votre navigateur, si le lecteur Silverlight est install, et si ce fichier est correctement format. Dans ce dernier cas, le lecteur Silverlight compile directement le fichier XAML lexcution et laffiche dans le navigateur (voir Figure 2.4).

Chapitre 2

Le couple XAML/C#

19

Figure2.4
Fichier preview.xaml directement lisible par Internet Explorer ou Kaxaml.

Mme si Kaxaml est pratique pour lire des fichiers, il ne permet pas rellement un graphiste dlaborer des lments visuels complexes. Nous utiliserons donc exclusivement Expression Blend et Visual Studio pour concevoir nos projets.

2.2.4 Espaces de noms

Pour visualiser correctement un code dclaratif XAML, vous devez imprativement utiliser les espaces de noms conformes au dveloppement XAML. Voici une portion du code o vous pouvez apercevoir les espaces de noms dans les lignes en gras ; il permet dafficher la Figure 2.4:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480"> <Grid x:Name=LayoutRoot Background=White> <Border Height=134 Width=624 Canvas.Left=8 Canvas.Top=8 CornerRadius=24,24,24,24> <Border.Background> <LinearGradientBrush EndPoint=0.5,1 StartPoint=0.5,0> <GradientStop Color=#FF002352/> <GradientStop Color=#FF68A9DE Offset=1/> </LinearGradientBrush> </Border.Background> <Grid Margin=24,20,8,20> <TextBlock HorizontalAlignment=Left VerticalAlignment=Top FontSize=24 Foreground=#FFFF Text=Pratique de Silverlight TextWrapping=Wrap/> <TextBlock HorizontalAlignment=Left FontSize=16 Foreground=#FFFF Text=Conception dapplication interactives riches TextWrapping=Wrap Margin=0,39,0,20 /> </Grid> </Border> </Grid> </UserControl>

Vous remarquez que le code prcdent rpond bien au standard XML. Outre de nombreuses balises permettant de gnrer du contenu graphique, il sy trouve un nud XML racine UserControl. Celui-ci reprsente le premier objet visuel de lapplication Silverlight. Au sein de cette balise, deux attributs nous intressent particulirement: xmlns et xmlns:x. Les initiales xmlns signifient XML NameSpace. Ces attributs sont des espaces de noms, cest--dire quils font rfrence des dictionnaires ncessaires au dveloppement dapplications bases sur WPF et XAML. Ces espaces de noms doivent toujours se situer dans le conteneur XAML racine. Le premier fait rfrence la bibliothque WPF (Window Presentation Foundation) dont Silverlight mane. Cest lespace de noms par dfaut. Grce lui, nous avons accs aux objets complexes de cette bibliothque, comme Border, Grid ou TextBlock. En interne, cette bibliothque est base sur le langage XAML. Cest pourquoi on a besoin dun deuxime espace de noms, xmlns:x, qui fait pour sa part rfrence au

20

Partie I

Approches de Silverlight

langage XAML proprement dit. chaque fois que nous ferons rfrence cet espace de noms, les balises ou attributs devront tre prfixs de x:. Cest, par exemple, le cas de lobjet grille qui contient lattribut x:Name:
<Grid x:Name=LayoutRoot Background=White>

Pour adjoindre un comportement logique aux objets visuels, il vous faudra une classe dite partielle. Celle-ci devra tre rfrence au sein du nud racine de cette manire (voir Chapitre 3 pour les classes partielles):
<UserControl x:Class="maClasse"

Cependant, gardez bien lesprit quun navigateur renverra une erreur daffichage lors de la lecture directe dun fichier XAML si celui-ci rfrence une classe partielle. Dans ce cas, il vous faudra compiler les fichiers XAML et C# pour en faire un unique fichier xap lisible par le lecteur Silverlight. Nous allons maintenant nous concentrer sur le code logique C# qui contribue largement la robustesse des applications Silverlight.

2.3 Les fondamentaux du langage C#

Cette section ne concerne que les dveloppeurs non .NET ou les designers interactifs et intgrateurs ayant des bases de programmation dans nimporte quel langage logique (JavaScript, PHP, ActionScript). Si vous tes dveloppeur .Net expriment, vous pouvez passer votre chemin. Lobjectif est de prsenter et de sinitier aux bases de la programmation oriente objet et de C#, de savoir dclarer des variables et des mthodes et de connatre les types C#.

2.3.1 C# et lAPI Silverlight

Le langage C# est sorti dans sa premire version avec la plateforme .Net 1. Daprs Microsoft, ce langage est le plus performant en termes de lisibilit et de confort. Il allie la puissance de C++ et la simplicit de Visual Basic. Chaque version de C# est une rvolution en soi. Pour ses versions 3 et 4, il a bnfici damliorations visant assouplir les rgles et les mthodologies de dveloppement. Lide est de permettre des prises de dcisions tardives dans les choix darchitecture en intgrant les avantages propres aux langages fonctionnels F# ou JavaScript. Au mme titre que Visual Basic, il est gr par la CLR (Common Language Runtime), cest--dire quil est tout dabord compil en langage intermdiaire avant de ltre en langage machine par le Just In Time Compiler (JITC). C# est un langage orient objet. Les variables ou mthodes sont fortement types. Toutefois les types (comme string ou double) nappartiennent pas au langage lui-mme, mais au Common Type System (CTS). Cela signifie quun type string en C# ou en Visual Basic est avant tout un type string gr par le CTS propre .Net. Cest cela qui permet aux dveloppeurs de coder dans diffrents langages. Le CTS est donc une composante importante de la CLR. Il permet linteroprabilit des langages. Le cur du langage C# est totalement indpendant de lAPI Silverlight. Une API est constitue dune multitude de bibliothques (ou espaces de noms). LAPI (ou framework) Silverlight permet aux dveloppeurs de concevoir des applications Silverlight. Lespace de noms principal est System. Par exemple, lune des bibliothques accessibles dans le framework Silverlight permet de sauve-

Chapitre 2

Le couple XAML/C#

21

garder des donnes sur le poste client local. Il sagit de la bibliothque IsolatedStorage. Celle-ci contient plusieurs classes qui permettent datteindre cet objectif.

2.3.2 Introduction la programmation oriente objet

La programmation oriente objet soppose la programmation procdurale. Jusquau dbut des annes 1980, avec les langages bas niveau proche de la machine, le code tait organis de manire linaire: il tait lu de haut en bas la manire dune procdure que lon suit. Par la suite, avec des langages comme C++, puis des langages de haut niveau, la programmation oriente objet sest impose. La POO part du principe que la plupart des fonctionnalits ou composants dune application peuvent tre dcrits sous forme dobjets. Par exemple, si lon cre une application de gestion de parc automobile, on peut considrer les voitures comme un composant essentiel de lapplication, les voitures seront donc envisages comme des objets. Les objets sont en ralit des exemplaires de modles dobjets appels classes. Chaque exemplaire de la classe Voiture sera diffrenci par les valeurs de ses proprits et de ses champs (voir la section 2.3.4.6). Par convention, on privilgie la notation Pascal o chaque nom de variable ou de mthode commence par une majuscule : MaFonction, MaProprit, MonChamp. Pour les paramtres de mthode, on utilise plutt la notation Camel: monParametre. Le modle de Voiture, appel classe, permet de dcrire tout ce que peut faire une voiture, ainsi que tout ce qui la dfinit. Le mot-cl class permet de crer une nouvelle classe. Voici en C# comment gnrer une classe Voiture:
class Voiture { //champs de la classe voiture public string Marque; public string Modele; public string Imat; public double Longueur; public string TypeCarburant; //mthode qui permet la voiture de rouler public void Roule(){ // permet de tracer la voiture roule dans une console Console.WriteLine("la voiture roule"); //permet de laisser la console affiche Console.ReadLine(); } //mthode qui permet la voiture de sarrter public void Stop(){ Console.WriteLine("la voiture stoppe"); Console.ReadLine(); } }

Comme nous le voyons, tous les exemplaires manant de la classe auront des champs et des mthodes (ou fonctions) propres au modle Voiture. Toutefois, les valeurs affectes aux proprits et aux champs pourront tre diffrentes pour chacun deux, cest cela qui permet de les diffrencier. Toutes les voitures ont une proprit couleur, mais celle-ci pourra possder plusieurs valeurs: rouge, verte ou bleu selon lexemplaire. Le mot-cl new permet de crer un nouvel exemplaire de la classe Voiture. Voici comment vous pouvez crer des exemplaires (galement appels instances) du modle Voiture:

22

Partie I

Approches de Silverlight

//voici un exemplaire de la classe Voiture Voiture MaPorsche = new Voiture() { Marque="Porsche", Longueur=1.95,Modele="Carrera 4", TypeCarburant="essence"}; // voici un autre exemplaire Voiture MaSuper5 = new Voiture() { Marque = "Renault", Longueur = 1.2, Modele = "Super5", TypeCarburant = "diesel" };

On se rend bien compte que chaque voiture instancie possde les mmes champs mais que ceuxci contiennent des valeurs diffrentes. La dclaration et laffectation de variables seront abordes la section 2.3.4.

2.3.3 Une premire application en mode console

Nous allons maintenant mettre en pratique notre apprentissage rcent en crant une petite application en mode console. Ouvrez Visual Studio 2008 et choisissez Fichier > Nouveau projet C# > Application console. Entrez le nom de solution : ParcAuto. Voici le code que Visual Studio gnre par dfaut:
using using using using System; System.Collections.Generic; System.Linq; System.Text;

namespace ParcAuto { class Program { static void Main(string[] args) { } } }

Toute application console possde une classe par dfaut qui sappelle Program, contenue dans un espace de noms correspondant au nom du projet. Celle-ci contient une mthode qui sexcute par dfaut: Main. Nous allons tracer un message dans la console Windows. Pour cela, ajoutez les lignes suivantes au sein de la mthode Main:
static void Main(string[] args) { Console.WriteLine(Bonjour tout le monde!!); //ceci trace le message Console.ReadLine(); //ceci empche la fermeture de la console }

Pour compiler notre premire application et lexcuter, rien de plus simple : appuyez sur la touche F5. Lorsque vous utilisez ce raccourci, vous lancez le mode Debug. Ce dernier vous permettra de corriger et de comprendre les dysfonctionnements de votre application lorsque vous compilerez ou durant son excution. Si vous nutilisez pas ce mode, votre application chouera en silence si elle contient des erreurs. Pour compiler et excuter sans dboguer, il suffit de laisser appuyer sur les touches Ctrl et F5 en mme temps. Si vous souhaitez uniquement compiler sans lancer votre application, vous pouvez utiliser le raccourci Ctrl+Maj+F5.

Chapitre 2

Le couple XAML/C#

23

2.3.4 Les types

2.3.4.1 Variables et champs dobjets
Une variable permet de stocker des donnes. Voici comment dclarer une variable au sein dune classe, dans ce cas la variable est un champ dobjet (en C#, on diffrencie champ de proprit):
class Program { int monEntier = 13; }

Vous remarquez que le type est toujours prcis en premier, dans notre cas int signifie entier. Il vous faut, cependant, faire la diffrence entre la dclaration et laffectation. Ce sont deux tapes distinctes et laffectation peut tre ralise plus tard. Nous aurions tout aussi bien pu crire:
class Program { int monEntier; monEntier = 13; }

Il arrivera souvent de dclarer une variable sans pour autant laffecter. Par exemple, dans un jeu la variable score sera affecte ds son initialisation mais durant lexcution du programme. Lorsquune variable de type entier est dclare sans tre affecte, sa valeur par dfaut est 0. Ce comportement est d au fait que le type int est un type primitif numrique.

2.3.4.2 Les types primitifs

Il est ncessaire de typer les variables dune part par obligation due au langage, et dautre part parce que cela permet damliorer les performances de vos applications. Le choix du type est trs important dans ce contexte car cest lui qui dterminera loccupation mmoire alloue par dfaut pour stocker la valeur. Parmi tous les types existants, on trouve les types primitifs. Ceux-ci acceptent des valeurs simples. Ils sont la base de tous dveloppements, sans eux aucune conception ne verrait le jour. Voici quelques types primitifs importants:

sbyte. Il contiendra une valeur entire comprise entre 128 et 127. Son nom vient du fait que la valeur pourra tre ngative (s pour signed) et que le nombre de possibilits correspond un octet soit 28 (256 chiffres). Il ne faudra pas confondre Byte, en anglais, et bit, qui signifie 0 ou 1. byte. Ce type peut accepter un entier entre 0 et 255. uint. Il accepte un entier entre 0 et 232, soit 4294967295 possibilits. Le u de uint signifie que la valeur sera toujours non signe (u pour unsigned), donc toujours positive. int. Il reprsente le mme nombre de possibilits mais contient la moiti des chiffres en dessous de 0. Soit entre 2147483648 et 2147483647. decimal. Il contient des valeurs virgule. La plage des valeurs admises se situe entre 1028 et 7.91028. double. Ce type contient galement des valeurs virgule. Comme pour decimal le stockage des donnes est assez complexe, mais le nombre de valeurs acceptes est beaucoup plus grand: entre 510324 et 1.710308.

24

Partie I

Approches de Silverlight

bool. Il est le digne reprsentant de la logique de Mr George Boole. Ce mathmaticien britannique est lorigine dune rvolution des mathmatiques et de la philosophie au XIXme sicle. On en trouve aujourdhui de nombreuses utilisations dans lindustrie ou dans le secteur informatique. Ce type ne peut contenir que deux valeurs: vrai ou faux (true ou false); le bit de donne repose sur cette logique. string. Il reprsente une chane de caractres. La valeur est toujours spcifie entre guillemets. La chane de caractres contenue peut-tre infinie, la mmoire utilise sera alloue au fur et mesure des besoins. Toutefois le type string nest pas comme les autres types simples (voir la section "Le tas et la pile" dans ce chapitre).

2.3.4.3 Les types complexes

Stocker des valeurs simples ne suffit pas. Bien souvent, vous aurez besoin dune variable ayant la capacit de contenir plusieurs donnes. Voici les types complexes:

Les numrations notes enum. Elles vous permettent de stocker un choix de valeurs arbitrairement. Si lon reprend lexemple de la voiture, nous pourrions par exemple proposer une numration pour le type de carburant au lieu dune chane de caractres. Nous pourrions crire ceci:
class Program{ Voiture MaDeLorean = new Voiture() { TypeCarburant = Carburant.Detritus, Marque = DeLorean, Modele = volante }; } enum Carburant{ Diesel, Essence, propane, Detritus, Ethanol } class Voiture{ public string Marque; public string Modele; public Carburant TypeCarburant; }

Vous remarquez que lnumration est en dehors de la classe, elle se suffit elle-mme. Elle pourrait galement en faire partie. Au sein de la classe Voiture, nous dclarons un nouveau champ public de type Carburant. Le mot-cl public est un modificateur daccs, nous verrons les modificateurs daccs plus loin dans ce chapitre. Laffectation se produit au niveau de la classe Program, linstanciation dune nouvelle voiture grce cette ligne:
Voiture MaDeloreane = new Voiture() { TypeCarburant = Carburant.Detritus, Marque = DeLorean, Modele = celle qui vole };

Il faut savoir quune valeur dnumration possde toujours un type sous-jacent. Par dfaut ce type est int mais vous pourriez le changer.

Les structures notes struct. Il sagit de lquivalent dune classe, mais elle est gre diffremment en mmoire. Il faut envisager une structure comme une dfinition dobjets. Dans la majorit des cas, ce seront des objets simples. Par exemple, un point gographique est dfini

Chapitre 2

Le couple XAML/C#

25

grce deux coordonnes: la latitude et la longitude, toutes deux exprimes en degrs. Nous pourrions ainsi dfinir la position de notre voiture grce une structure qui sappellerait PositionGPS:
class Program{ //ceci est une criture pratique //pour crer un nouvel exemplaire de voiture Voiture MaDeloreane = new Voiture(){ TypeCarburant = Carburant.Detritus, Marque = "DeLorean", Modele = "volante", MyPlace = new PositionGPS() { DegreLat=180, DegreLong=176 } }; } struct PositionGPS{ public int DegreLat; public int DegreLong; } class Voiture{ public string Marque; public string Modele; public Carburant TypeCarburant; public PositionGPS MyPlace; }

Les tableaux nots Array et []. Ce sont des objets diffrents de ceux que nous venons de citer en cela quils sont faits pour stocker de multiples donnes sous forme dlments indexs numriquement partir de 0. Il faudra toujours prciser le type des objets stocks. Pour initialiser un tableau, il existe deux mthodes. La premire consiste utiliser le mot-cl new et indiquer le nombre dlments quil pourra contenir. Dans dautres langages comme Java ou Action Script3, ce type correspond la classe Vector (vecteur). Voici un exemple dinstanciation:
Voiture[] MesVoitures = new Voiture[3];

Par la suite, on affecte une voiture chaque index numrique du tableau comme ceci:
MesVoitures[0] = MaDeLorean; MesVoitures[1] = MaPorsche; MesVoitures[2] = MaSuper5;

Voici la seconde mthode appele "criture littrale":

Voiture[] MesVoitures = { MaDeloreane, MaPorsche, MaSuper5 };

Il nous suffit maintenant daccder aux voitures du tableau. Pour cela, nous pouvons utiliser une boucle qui nous permettra de tracer le nom de chaque voiture dans une console Windows. La boucle foreach est la mieux adapte ce type de situation. Voici comment lutiliser:
void TraceMesVoitures(){ //Pour chaque lment de type Voiture dans le tableau MesVoitures foreach(Voiture V in MesVoitures){ //cette ligne permet dafficher le rsultat dans une Console Console.WriteLine("jai une {0}", V.Marque); } //celle-ci permet de figer laffichage de la console pour la lecture Console.ReadLine(); }

26

Partie I

Approches de Silverlight

Concrtement, la boucle parcourt le tableau MesVoitures, rcupre un exemplaire de Voi ture chaque index et trace une phrase en fentre de sortie. Cette boucle sarrte delle-mme lorsque le tableau est entirement parcouru. Les tableaux possdent la proprit length qui permet de connatre le nombre dlments contenus en leur sein. Lobjet List, en C#, est plus souvent utilis que lobjet tableau (Array) en raison des nombreuses capacits quil offre. Un tableau possde une longueur (ou nombre dlments) fixe. La classe List possde pour sa part des mthodes lui permettant dajouter ou de supprimer des lments sans avoir besoin dinitialiser la longueur. Vous la trouverez dans lespace de noms System.Collections. Generic.

2.3.4.4 Les modificateurs daccs

Vous avez sans doute remarqu le mot-cl public prsent devant la dclaration de certains membres de classe. Cest un modificateur daccs. Ces derniers permettent de rendre accessible ou non des champs, des proprits et des mthodes de classe. Le mot-cl public permet de rendre un membre de classe accessible depuis lextrieur de la classe. Cest cela qui nous a permis dinstancier des voitures tout en initialisant leurs champs publiques depuis lextrieur. Voici un cas concret:
class Program{ //ceci est une criture pratique //pour crer un nouvel exemplaire de voiture Voiture maDeLorean = new Voiture(); maDeLorean.marque = "DeLorean"; } class Voiture{ public string marque; Guid numeroSerie = new Guid(); }

La proprit numeroSerie nest dfinie avec aucun modificateur daccs. En fait, lorsque rien nest prcis cest le modificateur private qui est utilis la compilation pour un membre de classe. Pour une classe ce sera le mot-cl internal. Un champ de classe, dfini avec private, nest pas accessible en dehors de la classe, mais seulement en son sein. La meilleure pratique consiste toujours laisser le moins de champs ou de mthodes visibles depuis lextrieur. Votre classe doit toujours tre ferme la modification et toujours ouverte lextension. Seules les proprits et mthodes utiles doivent tre accessibles celui qui instancie ou utilise votre classe. Dans le cas prcdent, il est logique que le numro de srie reste priv et ne soit pas accessible au quidam de base. Le type Guid est en fait une valeur unique car le nombre de possibilits est quasi illimit. De plus, on affecte la valeur lors de linstanciation de la classe Voiture. Voici la liste des modificateurs daccs utilisables:

public. Permet laccs depuis nimporte quel endroit du code. private. Dfinit un membre de classe accessible uniquement depuis la classe contenant ce membre. internal. Autorise laccs toutes les classes de lespace de noms dans lequel est la classe et aux espaces de noms amis. protected. Permet laccs au code situ au sein de la classe ou dans une de ses sous-classes.

Chapitre 2

Le couple XAML/C#

27

2.3.4.5 Conversion de type implicite et explicite

Il vous arrivera souvent dans un langage orient objet de transformer le type dune valeur en un autre type. Catgoriser des objets est une dmarche qui permet doptimiser les performances des applications. Toutefois catgoriser est une dmarche rigide, mme dans la vie courante. Il est toujours dangereux et rarement vrai long terme quun objet soit dun seul type. La classification des espces, bien que ncessaire dun point de vue scientifique, est remise en question chaque fois quune espce sortant du cadre est dcouverte. Lornithorynque est le cas le plus flagrant qui dmontre que classifier des espces est hasardeux. Celui-ci pond des ufs, allaite ses petits, possde un bec de canard, sappuie sur des pattes aux cinq orteils palms. Bref, il regroupe de nombreux aspects que lon croyait uniques au mammifres, aux reptiles et aux ovipares. Il ne rentre dans aucune catgorie simple et prsente certains aspects de plusieurs dentre elles (depuis la thorie de Darwin, la classification des espces a volu, il sagit bien ici dun exemple mettant en vidence la dangerosit de cette manire de raisonner). Pour cette raison et de nombreuses autres, il vous arrivera donc souvent, si vous commencez la POO, dutiliser un type la place dun autre; davoir un jour besoin dun entier la place dun dcimal ou de transformer un boolen en chiffre. Pour transformer un type en un autre type, vous utiliserez une opration de conversion implicite ou explicite appele transtypage ou casting en anglais. La conversion implicite est ralise par le compilateur sans que vous ayez besoin de lui indiquer un mot-cl. Pour que le compilateur puisse russir cette opration, il suffit juste que le type de destination accepte la valeur que lon souhaite dfinir avec ce type. Par exemple, il est facile de transformer un type byte en type uint car un byte est toujours positif et la plage de valeurs possibles est contenue dans la plage de valeurs possibles de uint:
int MonEntier; byte MonByte = 113; MonEntier=MonByte; // Dans ce cas, le type de b sera converti en int la compilation, // ce qui est faisable, puis a recevra la valeur de b.

Il est donc trs facile de dduire les conversions implicites pour les types primitifs numriques. Le deuxime type de transtypage est un peu plus dlicat manier car il vous faudra prciser vousmmes la conversion souhaite. Nous allons reprendre le mme exemple, mais en affectant la valeur de type byte un entier not int:
byte MonByte2; int MonEntier2 = 113; MonByte2 = (byte)MonEntier2; Console.WriteLine(type de MonByte2 :: + MonByte2.GetType());

Dans ce cas, vous devrez mettre le type de destination entre parenthse devant la valeur convertir. Tout type possde une mthode GetType renvoyant le type. Si jamais vous oubliez de convertir explicitement, Visual Studio vous surligne la valeur affecte dans notre cas, cela serait mon Entier2. Lorsque vous passez la souris au-dessus du surlignage, Visual Studio vous indique que vous avez peut-tre oubli une conversion et vous prcise quune conversion explicite existe. Cela nest pas toujours le cas. Que se passe-t-il si jamais une valeur numrique sort de la plage de valeur admise par le type de destination? Par exemple, que se passerait-il si monEntier3 tait gal 312? Le rsultat correspond la valeur convertir, modulo (%) la longueur de la plage des valeurs du type de destination.

28

Partie I

Approches de Silverlight

Modulo est un oprateur mathmatique qui permet de calculer le reste dune division entire. Dans notre exemple "312 modulo 256" nous renverra 56. 312 divis par 256 est gal 256 divis par 256 (qui est nombre entier) plus 56 divis par 256. 56 est bien le reste de la division. Ce sera donc la valeur affecte notre variable de type byte:
int MonEntier3 = 312; byte MonByte3 = (byte)MonEntier3; Console.WriteLine(type de MonByte3 :: + MonByte3.GetType() + valeur :: + MonByte3);

Un autre moyen de convertir explicitement une valeur est dutiliser la classe Convert. Celle-ci possde des mthodes de conversion. Nous pourrions par exemple crire:
byte MonByte4; int MonEntier4 = 312; MonByte4 = Convert.ToByte(MonEntier4); Console.WriteLine(type de MonByte4 :: + MonByte4.GetType());

Lavantage de cette mthode est quelle gnre par dfaut une erreur lexcution si jamais la valeur convertir ne correspond pas la plage du type de destination. Dans lexemple prcdent, nous aurons donc une erreur leve.

2.3.4.6 Diffrencier les champs et les proprits

Jusqu maintenant nous navons utilis que des champs de classe. Une proprit est un membre de classe stockant une valeur au mme titre quun champ de classe. Cependant lavantage dune proprit est quelle permet lajout de logique lorsquelle est mise jour ou lue. Dfinir une proprit est simple avec Visual Studio, il suffit de taper prop, suivi de deux tabulations pour gnrer automatiquement le code:
public string modele { get; set; }

Ceci est la nouvelle criture courte des proprits depuis C# 3. Vous remarquez le mot-cl get qui signifie obtenir et le mot-cl set qui signifie tablir. Ces termes reprsentent deux mthodes qui vont nous permettre de contrler les accs notre proprit. En rgle gnrale, une proprit est toujours accompagne dun champ priv, donc non accessible, qui est mis jour par ces deux mthodes. Nous allons maintenant ajouter un champ priv et un peu de logique dans notre proprit:
class Program { static void Main(string[] args) { Voiture maVoiture = new Voiture(); Console.WriteLine(modele de la voiture :: + maVoiture.modele); Console.ReadLine(); } } class Voiture{ // ceci est le champ priv modele de type chane de caractres private string _modele; public string Modele

Chapitre 2

Le couple XAML/C#

29

{ get{ // on met la logique concernant la lecture de la proprit //si le modle est dfini alors je renvoie le nom du modle if ( _modele.Length > 0) return _modele; else return "N.C."; //si non je renvoie Non Communiqu } set{ // on met la logique concernant lcriture de la proprit // si la valeur que lon essaie dtablir nest pas nulle // alors on affecte la nouvelle valeur du modle if (value.Length > 0) _modele = value; } } }

Par dfaut, une proprit gnre par Visual Studio est publique. Si vous souhaitez crer une proprit uniquement accessible en lecture, il suffit de supprimer la mthode set. Vous pouvez galement prciser un modificateur daccs devant le mot-cl set, ce qui est plus lgant et avantageux. Le modificateur daccs internal permettra par exemple daccepter lcriture de cette proprit uniquement aux objets contenus dans lespace de nom; protected permettra quant lui de laisser laccs en criture aux classes hritant de Voiture.

2.3.4.6 Le tas et la pile

On rpartit les types en deux grandes catgories: les rfrences attribues sur le tas et les valeurs attribues sur la pile. Concrtement, il sagit de deux manires diffrentes de stocker des donnes. La pile reprsente lespace mmoire allou pour les valeurs, alors que le tas reprsente lespace mmoire grant les rfrences. La gestion de ces espaces mmoire est trs diffrente. Lallocation mmoire est fige dans le cas de la pile mais peut tre variable sur le tas. Vous pouvez considrer les rfrences comme des variables qui pointent vers une adresse mmoire, laffectation sera contenue cette adresse. Le Tableau2.1 vous prsente ces types.
Tableau 2.1 : Types grs par la pile et le tas.

Valeurs attribues sur la pile byte / sbyte short / ushort int / uint long / ulong boolean double, float, decimal char numration structure

Rfrences gres sur le tas Array classe personnalise string interface List ObservableCollection

30

Partie I

Approches de Silverlight

Vous remarquez que le type string est gr sur le tas. Chaque modification dune chane de caractres entrane une allocation mmoire et donc des accs coteux en terme de performances. Il faudra utiliser la classe StringBuilder qui permet dallger les accs mmoire. Diffrencier une rfrence dune valeur est assez simple. Il faut se rappeler quune rfrence est une variable qui pointe une adresse mmoire. Commenons par dfinir une valeur de type structure alloue sur la pile:
struct PositionGPS{ public int DegreLat; public int DegreLong; } PositionGPS Gpa = new PositionGPS { DegreLat = 141, DegreLong = 76 }; PositionGPS Gpb = Gpa; Gpa.DegreLat = 35; Console.WriteLine(Gpb.DegreLat);

La console affiche 141, la structure gpb ne change pas car nous avons procd une simple recopie de valeurs. Les deux variables ciblent un espace mmoire diffrent. Elles sont donc autonomes. Examinons le mme code en remplaant les structures par des classes personnalises. Celles-ci sont sont attribues sur le tas:
class Point{ public int X; public int Y; } Point P1 = new Point(){ X = 141, Y = 76 }; Point P2 = P1; P1.X = 35; Console.WriteLine(P2.X);

Cette fois, la console affiche 35, la valeur du champ X de P2 a chang car linstance P2 pointe vers la mme allocation mmoire que P1. On procde une recopie de pointeur dans le cas dune affectation de variables de type rfrence. P2 et P1 ciblent le mme espace mmoire.

2.3.4.7 Les infrences de type

Un nouveau mot-cl est apparu avec C# 3: var. Ce mot-cl vous vitera de prciser le type dune variable lors de sa dclaration. Cela signifie que le type dune variable dclare avec var nest fix quau moment de laffectation de la variable. Cette capacit est trs pratique si vous ne connaissez pas lavance la valeur daffectation. Toutefois le mot-cl var nest pas utilisable pour dclarer des membres de classes, il sert essentiellement dfinir des variables locales aux mthodes.

2.3.4.8 Les types anonymes

Les types anonymes ont un peu le mme rle que les structures. Comme pour celles-ci, lobjectif majeur est de crer un objet ne contenant que des proprits (bien que les structures puissent faire mieux). Cest une reprise directe de ce que vous trouverez dans les langages dynamiques fonctionnels. Ces types anonymes ne peuvent tre dfinis et affects quau sein dune mthode, grce au mot-cl var. Il sagit donc de variables locales. Voici comment crer une classe anonyme:
var MaVoitureAnonyme = new { Modele="307", Marque="Peugeot", Prix=8950, Annee=2004 };

Chapitre 2

Le couple XAML/C#

31

En ralit, le typage fort est prsent, mais une classe anonyme, ainsi que les champs qui la composent, sont crs dynamiquement.

2.3.5 Dclarer des mthodes

2.3.5.1 Dfinition et appel de mthodes
Une mthode est une fonction appartenant une classe. Son premier objectif est de centraliser la mise en uvre dune srie dinstructions. Celle-ci sera excutable linfini par simple appel du nom de la mthode, suivi de deux parenthses (ouverte et ferme). Quels que soient les langages, les fonctions ou mthodes permettent la rutilisation du code. En langage C#, les fonctions globales qui nappartiennent aucune classe nexistent pas. Cest un abus de langage de dire quune mthode statique de classe (donc appartenant et excutable par la classe) est une fonction globale. A contrario de C#, les fonctions sont considres comme des objets dans les langages dits fonctionnels. Dans ces langages, dont JavaScript fait partie, une fonction peut exister par elle-mme (car elle est considre comme un objet). Ce nest pas le cas en C#. Deux types de mthodes existent, les mthodes excutables par la classe et les mthodes invoques par les exemplaires ou instances de classe. Il faut tout dabord dfinir une mthode pour linvoquer par la suite. Voici une dfinition et un appel de la mthode rouler, propre aux exemplaires de la classe Voiture :
class Voiture{ public void Rouler(){ Console.WriteLine("La voiture roule 100Km"); } } class Program{ static void Main(string[] args){ //On invoque la mthode rouler sur linstance de Voiture MaDeLorean MaDeLorean.Rouler(); Console.ReadLine(); //la console tracera le message dfinit au dessus } }

Comme vous pouvez le constater, le nom de la mthode est dabord prcd du mot-cl public (voir "Les modificateurs daccs"), puis du mot-cl void qui fait rfrence au type muet. Cela signifie que la mthode ne retourne aucune valeur. Dans le cas dune mthode renvoyant une valeur, il suffit de prciser le type la place de void. On pourrait dduire que Rouler modifie la position de la voiture et renvoie du dioxyde de carbone en mme temps. Voici le mme exemple mis jour:
public class Voiture{ public int Rouler(){ Console.WriteLine("La voiture roule 100Km ") return 125; } } class Program{ static void Main(string[] args){ Voiture MaDeLorean = new Voiture(){ TypeCarburant = Carburant.Detritus, Marque = De Loreane, Modele = volante, MyPlace = new PositionGPS() { DegreLat = 180, DegreLong = 176 } }; //On invoque la mthode rouler sur linstance MaDeLorean

32

Partie I

Approches de Silverlight

Console.WriteLine(Elle rejette :: + MaDeLorean.Rouler() + g CO2 / Km); Console.ReadLine(); //la console tracera le message dfinit dans la mthode, //puis le message dfini dans la mthode Main } }

Comme nous lavons dj dit, la mthode Main de la classe Program est une mthode dinitialisation, cest le point dentre de notre application console, cest--dire que celle-ci sera excute ds le lancement de lapplication par la CLR. Cest pour cela que sa dfinition commence par le mot-cl static. Les mthodes static prsentent de nombreux avantages. Nous pourrions par exemple crer une mthode de ce type pour la classe Voiture, qui renverrait le nombre de voitures en circulation.

2.3.5.2 Les paramtres de mthode

Nous allons maintenant amliorer la mthode rouler en lui dfinissant un paramtre. Comme nous lavons vu au dbut de ce chapitre, une mthode doit faciliter la rutilisation1. Toutefois, on constate que notre mthode rouler ne permet une voiture de rouler que 100 km. Il serait utile de pouvoir choisir le nombre de kilomtres chaque appel de cette mthode. Pour cela, il nous faut ajouter un paramtre dans la dfinition de cette mthode:
class Voiture { public string Marque; public string Modele; public Carburant TypeCarburant; public PositionGPS MyPlace; public int Rouler( int nombreKilometre) { Console.WriteLine(La voiture roule + nombreKilometre + km); return 125; } }

Puis, nous invoquons celle-ci en lui passant le nombre de kilomtres attendus:

static void Main(string[] args) { //On invoque la mthode rouler sur linstance maDeLorean Console.WriteLine("Elle met :: " + MaDeLorean.Rouler(113) + " g CO2 / Km"); Console.ReadLine(); //la console tracera le message dfini dans la mthode en //prenant en compte le nombre de kilomtres parcourus }

2.3.5.3 Le tableau de paramtres

Dans certains cas, vous aurez besoin de passer un nombre variable de paramtres. C# propose pour cela une signature de fonction spcifique. Il vous faudra utiliser le mot-cl params entre les

1. La rutilisation est un principe connu des dveloppeurs, qui consiste rutiliser le code ou les fonctionnalits dj conues.

Chapitre 2

Le couple XAML/C#

33

parenthses en prcisant le type des paramtres reus. Le terme params reprsente le tableau des paramtres qui ont t passs lors de lappel de la mthode. Si vous ne souhaitez pas prciser de type, il suffit de prciser object. Toutes les classes en C# hritent de object, ainsi vous pourrez spcifier nimporte quel type de paramtre. Dans lexemple suivant, nous calculons le prix moyen dune voiture:
static void Main(string[] args){ Voiture MaDeLorean = new Voiture(){ Prix=150000, TypeCarburant = Carburant.Detritus, Marque = "De Loreane", Modele = "volante", MyPlace = new PositionGPS() { DegreLat = 180, DegreLong = 176 } }; Voiture MaPorsche = new Voiture() { Marque = "Porsche", Modele = "Carrera 4", TypeCarburant = Carburant.Essence, Prix=18500 }; Voiture MaSuper5 = new Voiture() { Marque = "Renault", Modele = "Super5", TypeCarburant = Carburant.Diesel, Prix=1300 }; //on trace directement le retour de la mthode CalculPrixMoyen Console.WriteLine(prix moyen des voitures :: {0}, CalculPrixMoyen (MaDeLorean, MaPorsche, MaSuper5) ); } //on utilise le tableau de paramtre et on prcise un type de retour //car cette fonction renvoie la moyenne calcule private static decimal CalculPrixMoyen( params Voiture[] mesVoitures){ decimal Total = 0; foreach (Voiture v in mesVoitures){ Total += v.Prix; } return Total / mesVoitures.Length; }

2.3.5.4 Porte de variables

Les variables que vous dfinissez au sein dune mthode ne sont accessibles qu lintrieur de celle-ci. Ce sont des variables locales la mthode. la fin de lexcution et dans le cas de variables de type valeur, celles-ci librent la mmoire qui leur est alloue. Ces variables ne sont donc pas accessibles depuis lextrieur. La variable locale total de lexemple prcdent est donc inaccessible dans la mthode main. Cependant, vous pouvez trs bien dcider daffecter une proprit ou un champ de classe. Ils peuvent tre atteint depuis nimporte quel endroit au sein de cette classe mis part au sein de membres ou proprits statiques.

2.3.5.5 Les mthodes dextension

Comme nous lavons dit plusieurs reprises, C# soriente vers les langages dynamiques. Les mthodes dextension sont un nouveau pas dans cette direction. Celles-ci permettent dajouter de manire propre et efficace des mthodes nimporte quel type. Une mthode dextension doit toujours tre static et public et appartenir une classe static. Tout se passe au niveau de la signature de la mthode dont voici un exemple simple:
static class MyExensionsMethods { public static bool IsBiggerThan (this int myInt, int compare) {

34

Partie I

Approches de Silverlight

return myInt > compare; } }

Vous remarquez que le premier paramtre commence par le mot-cl this. Cela signifie quil fait rfrence la variable de type entier qui va faire appel la mthode. Le second paramtre est le premier paramtre de la mthode IsBiggerThan lorsque celle-ci sera appele. Voici comment se droule lappel:
int monEntier = 37; bool myBoolean = monEntier.IsBiggerThan( 13 );

2.3.6 Hritage et implmentations

2.3.6.1 Principes
Un des grands axes de la programmation oriente objet des annes 80 90 est la capacit des classes hriter dautres classes. Dans lapplication dexemple, peut-tre souhaitez-vous louer des voitures de type Utilitaire. Dans ce cas, il nest pas ncessaire dcrire une classe Utilitaire en reprenant chaque champ de la classe Voiture. Nous pouvons simplement considrer que la nouvelle classe Utilitaire hritera de la classe Voiture. Dans ce dernier cas, nous naurons qu le prciser au moment de sa dfinition comme ceci:
class Utilitaire : Voiture{ public int Volume; public void Charger(){ Console.WriteLine("on charge lutilitaire"); Console.ReadLine(); } public void Decharger(){ Console.WriteLine("on dcharge lutilitaire"); Console.ReadLine(); } }

Le grand avantage rside dans le fait que nous navons pas recoder une nouvelle classe entirement. De ce point de vue, lhritage en POO est une technique de dveloppement qui permet la rutilisation. La sous-classe de Voiture (Utilitaire) bnficie de tous les comportements et proprits dune voiture normale en plus des siennes. Voici comment crer une instance de la classe Utilitaire:
//une classe hrite de Voiture Utilitaire MonKangoo = new Utilitaire() { Marque = "Renault", Longueur = 1.2, Modele = "Super5", TypeCarburant = "diesel", Volume=6

};

La problmatique nest cependant pas si simple car imaginez un vhicule de type 4x4. Nous pourrions lenvisager comme un utilitaire ou un vhicule familial. Doit-il hriter dans ce cas de la classe Voiture ou de la classe Utilitaire? Il ny a malheureusement aucune bonne rponse cette question en utilisant lhritage, car il est impossible dhriter de plusieurs classes en C#. Nous avons donc l un problme de conception important: noubliez pas quune fois la dcision prise, vous ne pourrez plus revenir en arrire facilement. Votre dveloppement subira long terme

Chapitre 2

Le couple XAML/C#

35

les dcisions que vous aurez pris trop tt face la ncessit de commencer le dveloppement. Bien que de nombreuses techniques permettent de concevoir un code souple la modification, la programmation objet tente de classifier les fonctionnalits par type, ce qui ne correspond pas toujours une ralit. Les langages dynamiques permettent la prise de dcisions tardives mais aussi de rectifier simplement des choix de conception. Plus vous dcidez tard, meilleure est votre apprciation de la situation et des besoins. Nous verrons que C# soriente dans cette direction depuis sa version 3.

2.3.6.2 Surcharge de mthodes

Comme nous lavons vu, toutes les classes de C# hritent de la classe object. Celle-ci possde une mthode ToString qui permet davoir une reprsentation sous forme de chane de caractres de linstance sur laquelle elle est invoque. Les classes C# ont pour la plupart une implmentation diffrente de cette mthode. Les classes personnalises dont Voiture fait partie, implmentent par dfaut la mthode ToString propre object. Utilisons cette mthode sur notre classe Voiture et voyons le rsultat:
Console.WriteLine( MaDeLorean.ToString()); //renvoie ParcAuto.Voiture

Comme vous le constatez, la mthode retourne par dfaut lespace de noms et le type Voiture. Il peut tre utile davoir un retour personnalis pour la classe Voiture. Nous allons donc redfinir notre propre mthode ToString, il suffit dutiliser le mot-cl override:
public override string ToString(){ return "modle :: " + Modele + " - marque :: " + Marque; }

Ce mot-cl permet doutrepasser la mthode hrite de la classe de base. Ainsi, vous pouvez redfinir cette mthode votre convenance. Il est encore possible dinvoquer la mthode originelle de cette manire:
return "classe :: " + base.ToString()+" - modle :: " + Modele + " - marque :: " + Marque;

Le terme base fait rfrence la classe dont on hrite, dans notre cas cest object.

2.3.6.3 Dclarer des interfaces

Une interface est constitue des signatures de mthodes, de dlgus et dvnements (voir Chapitre 8). Elle reprsente un contrat abstrait dimplmentation. Une classe implmentant une interface doit ncessairement contenir les mmes signatures de mthodes, dlgus et vnements mais avec une dfinition concrte de ceux-ci ( lexception des classes abstraites). Les interfaces (et les classes abstraites) permettent dassouplir le dveloppement et rendent le code plus facile maintenir et volutif. Lutilisation dinterfaces se rvle au final moins dangereux et plus facile grer que lhritage. Pour implmenter une ou plusieurs interfaces, il faudra ajouter un signe: aprs le nom de la classe, suivi du nom des interfaces. Si la classe est hrite dune autre classe, il faudra suivre cet ordre:

36

Partie I

Approches de Silverlight

class MaClasse : ClasseDeBase, interface1, interface2,, interfaceN class Voiture : Vehicule, IUtilitaire, IFamilial

Par convention, on prfixe les noms dinterface de I, ce qui donne plus de lisibilit. Nous nentrerons pas plus dans les dtails de C# au sein de ce chapitre car, comme vous lavez constat, C# est un langage performant dont lapprentissage ncessiterait un livre part entire. Maintenant que vous tes familiaris avec cet environnement, vous allez crer votre premire application Silverlight grce aux outils proposs au sein de la gamme Expression. Dans le prochain chapitre, vous utiliserez Expression Blend et aborderez les bases de la mise en forme XAML, ainsi que larchitecture des projets Silverlight.

3
HelloWorld
Nous allons concevoir une premire application Silverlight avec le logiciel Expression Blend. Ce projet nous servira de base pour dtailler larchitecture par dfaut des projets Silverlight ainsi que lorganisation de linterface Blend. Nous aborderons ensuite la notion darbre visuel et logique ainsi que lutilisation de conteneurs. Nous listerons rapidement les composants de gestion de texte et les options dalignement. Nous finirons ce chapitre par une premire compilation de lapplication, ce qui nous permettra dnumrer les fichiers quelle produit tout en abordant ses mcanismes internes.

3.1 Une premire application Silverlight

Commencez par crer un nouveau rpertoire sur votre disque dur. Vous pouvez le nommer Pra tique_de_Silverlight, par exemple. Cest dans ce rpertoire que seront contenus tous les projets que vous allez crer dans ce livre. Vous devez vous munir de la dernire version dExpression Blend afin de gnrer une solution Silverlight. Celle-ci est disponible en version dessai sur le site de Microsoft: http://www.microsoft.com/france/expression/. De manire gnrale, vous trouverez les pr-requis logiciels sur le blog Tweened.org cette adresse: http://www.tweened.org/ pre-requis-silverlight/. Ils sont mis jour chaque nouvelle version de Silverlight. Une fois que vous avez install Blend et lensemble des pr-requis, dmarrez lapplication. Vous devriez avoir une interface correspondant la Figure 3.1. Blend vous permet dafficher un cran de bienvenue. Cochez la case en bas droite si vous souhaitez quelle apparaisse chaque dmarrage. Vous allez maintenant crer votre premier projet. Pour cela, slectionnez longlet Projects de lcran de bienvenue, puis cliquez sur New Project... Vous devriez voir un nouvel cran safficher (voir Figure 3.2).

38

Partie I

Approches de Silverlight

Figure 3.1
cran de bienvenue d'Expression Blend.

Figure 3.2
Cration d'un nouveau projet.

Dans la bote de dialogue affiche, plusieurs possibilits soffrent vous. Vous pouvez tout dabord choisir entre deux familles de projets: WPF ou Silverlight. Au sein de la famille Silverlight, quatre choix sont accessibles par dfaut. Les solutions de type Silverlight 3 Application ou Silverlight 3 Application + Website sont trs semblables. La premire sera excute dans une page HTML gnre dynamiquement lors de chaque compilation. A contrario, une solution de type site propose des fichiers HTML et JavaScript permettant dintgrer lapplication pour une mise en production et un dploiement rapide (voir Chapitre 4). Le troisime type, Silverlight 3 Control Library, gnre un projet facilitant la centralisation de contrles personnaliss. Crer des contrles personnaliss avec Silverlight est tellement simple que cette manire de procder est assez naturelle. Le dernier type de projet, Silverlight 3 SketchFlow Application, permet de concevoir, de manire efficace et rapide, larchitecture entire dune application Silverlight. Nous aborderons la cration de prototypes avec SketchFlow au Chapitre 10. Choisissez Silverlight 3 Application, puis le langage C# (normalement slectionn par dfaut). Si vous tes dveloppeur Visual Basic, vous avez bien sr la possibilit de choisir ce langage. Il faut galement prciser le chemin daccs au dossier que nous avons prcdemment cr. Il va contenir lensemble de nos projets. Voici un exemple: C:\Documents and Settings\invite\Bureau\

Chapitre 3

HelloWorld

39

Pratique_de_Silverlight\. Pour finir, entrez HelloWorld dans le champ Name, cliquez sur OK. Une autre mthode serait de fermer le panneau, douvrir le menu File, puis de slectionner New Project Il ny a aucune diffrence de rsultat entre ces deux manires de faire. Une fois cette tape ralise, vous accdez linterface de Blend correspondant aux projets de type Silverlight. De lgres diffrences dinterface existent entre les projets WPF et Silverlight. On a coutume de dire que Blend est ralis avec Blend. Cela fait rfrence la nature mme de ce logiciel qui repose sur WPF. Vous devriez rcuprer une interface correspondant la Figure 3.3.
Figure3.3
L'interface d'Expression Blend l'ouverture du projet HelloWorld.

Blend a plac automatiquement, sur votre disque dur, un nouveau rpertoire portant le nom du projet. Crer une application Silverlight, ou WPF, revient gnrer un rpertoire sur votre disque dur contenant un ensemble de fichiers par dfaut. Comme vous le constatez la Figure 3.3, linterface de Blend est constitue de plusieurs parties distinctes:

La barre de menu, situe en haut, permet de crer des boutons et des composants personnaliss, mais donne galement accs aux oprations sur les tracs, aux prfrences du projet et de nombreux autres menus inaccessibles dune autre manire. Compltement gauche de linterface, vous trouverez une barre dicnes. Chaque icne fait rfrence un type doutil. Ceux-ci sont catgoriss en cinq familles: les outils de slection, de manipulation de la vue (le zoom par exemple), de modification, de cration dobjets primitifs (tels que les rectangles, les tracs) et de cration de contrles (du plus simple conteneur aux objets visuels et logiques complexes comme la ListBox). En haut gauche se trouve une srie de panneaux grant les tats visuels, la liste des composants et des ressources, ainsi que larborescence du projet prsent sur le disque dur. Par dfaut, vous trouverez ltat visuel Base qui contient le visuel par dfaut de lapplication. Le panneau Projects contient une arborescence des fichiers ncessaires au fonctionnement de lapplication (voir la section 3.2). La notion dtats visuels, telle quelle est ralise dans Silverlight, est relativement innovante. Nous ajouterons des tats visuels au sein de nos applications afin de scinder visuellement leurs fonctionnalits et de grer les transitions (voir Chapitre 7). En bas gauche se situe le panneau contenant larbre visuel et logique de notre application. Ce panneau affiche lensemble des composants dune application. Ceux-ci sont hirarchiss selon leur ordre dimbrication et leurs liens de parent. On peut considrer que larbre visuel et logique est la reprsentation graphique des liens familiaux entre les objets XAML. Cest galement dans ce panneau que lon pourra concevoir des animations

40

Partie I

Approches de Silverlight

Le centre de lapplication correspond lespace allou aux designers et aux intgrateurs pour concevoir les lments visuels ainsi que larchitecture de linterface utilisateur. Le rectangle blanc au milieu est la grille principale dagencement, nomme LayoutRoot. La couleur darrire-plan par dfaut est le blanc, mais vous pourriez dcider de ne pas en dfinir dans loptique de crer une application Silverlight transparente. Cette vue est donc rellement importante car cest son ergonomie qui rend possible la participation des designers. Cet espace permet galement dafficher le code XAML gnr par Blend lorsque le graphiste cre linterface visuelle. En bas, au centre, le panneau sortie et erreur permet dafficher des informations de sorties lors de la compilation de lapplication Silverlight. Il permet galement dexposer les erreurs leves lors de la compilation ou de lutilisation de Blend.

Compltement droite se concentre une srie donglets: Data, Properties et Resources. En voici le dtail:

Le panneau Data permet de grer des sources de donnes externes ou propres la solution. Il permet galement de crer des jeux de donnes fictives et de simuler un flux RSS ou un tableau dobjets C#. Le panneau Properties est contextuel, cest--dire quil est mis jour en fonction de lobjet slectionn dans larbre visuel et logique ou dans la fentre de design. Il dresse un inventaire complet de toutes les proprits de lobjet en cours de slection. Celles-ci sont parfois si nombreuses quun champ texte de saisie permet de les filtrer. Le panneau Resources est galement contextuel au fichier XAML slectionn ou lobjet slectionn. Il liste lensemble des ressources visuelles ou logiques accessibles. Nous consacrerons le Chapitre 11 aux ressources visuelles et logiques.

3.2 Architecture d'une solution

Le panneau Projects affiche lensemble des fichiers faisant partie de lapplication. Llment hirarchique le plus lev est la solution. Une solution est lunit dorganisation principale. Celle-ci est constitue dau moins un projet. Tous les fichiers ncessaires pour la conception ou produits lors de la compilation sont rpartis au sein de divers projets. Chaque projet a pour but de grer une application, un module, une fonctionnalit ou une bibliothque de contrles facilitant lorganisation du dveloppement. On a donc, en premier lieu, une solution contenant un projet du mme nom (voir Figure 3.4). Voici la liste des fichiers gnrs, par dfaut, au sein du projet lorsque vous crez une application Silverlight:

Le fichier MainPage.xaml. Il contient le code XAML dcrivant les objets graphiques et logiques de linterface utilisateur. Par dfaut, cest galement la premire page charge par lapplication. Le travail du graphiste et de lintgrateur se rpercute dans un premier temps dans ce fichier. Lors de lavancement du projet, dautres fichiers XAML sont ajouts, notamment des dictionnaires de ressources. Le fichier MainPage.xaml.cs contient le code logique C#. Celui-ci assure la partie fonctionnelle de la premire page de lapplication. Ce fichier concerne les dveloppeurs C# et les intgrateurs. Aucun fichier logique JavaScript nest prsent dans ce type de solution. Toutefois, dans le cas de projets Visual Basic, le fichier aura une extension propre ce langage.

Chapitre 3

HelloWorld

41

Le rpertoire References contient toutes les bibliothques C# ou assemblies ncessaires par dfaut. Ce sont des fichiers dll qui permettent dtendre volont les capacits fonctionnelles de lapplication. Si vous souhaitez utiliser des formats de donnes comme XML ou JSON par exemple, vous devrez ajouter une rfrence sous forme de dll. Pour cela, il suffit de faire un clic-droit, puis de choisir Add Reference... ou Add Project Reference... Le rpertoire Properties contient deux fichiers dcrivant lapplication dans ses grandes lignes : auteur, compagnie, objectif, version, etc. Les fichiers App.xaml et App.xaml.cs contiennent et centralisent du code inhrent au projet lui-mme. Ils permettent de prciser quelle est la premire page de lapplication qui va tre charge. Ils peuvent galement contenir des styles ou des modles de composants accessibles pour toutes les pages XAML. Ces fichiers sont importants car ils reprsentent linstance de lapplication Silverlight dans la page HTML. Ils permettent donc de dfinir des comportements prcis linitialisation ou la fermeture de celle-ci.

Les fichiers numrs ci-dessus ne sont pas les seuls pouvant faire partie dune solution. De nombreux types de documents peuvent tre utiliss au sein de solutions Silverlight. Ce sont gnralement des ressources gnres depuis des applications externes, comme Illustrator et Photoshop, ou cres au sein de Blend ou de Visual Studio. Vous pouvez tout moment ajouter une nouvelle ressource, par exemple une police de caractre ou un fichier de code logique, un projet existant.
Figure3.4
Le panneau Projects.

Nous allons maintenant voir ce qui a t gnr sur le disque dur. Ouvrez votre explorateur Windows afin daccder au rpertoire contenant votre solution. Si celui-ci est sur votre bureau et que vous avez suivi la procdure indique, voici son chemin daccs: C:\Documents and Settings\ invite\Bureau\Pratique_de_Silverlight\. Votre rpertoire doit contenir un dossier du nom de la solution. Celui-ci comprend un rpertoire du mme nom (correspondant au projet gnr par dfaut), ainsi que deux autres fichiers: HelloWorld.sln et HelloWorld.suo qui est un fichier cach contenant des paramtres propres la solution (voir Figure 3.5).
Figure3.5
Contenu du rpertoire de la solution Hello World.

42

Partie I

Approches de Silverlight

Lextension .sln indique un fichier solution. Il rfrence les projets contenus par la solution ainsi que diverses informations. Le rpertoire HelloWorld possde un contenu correspondant ce qui apparat dans le panneau projet de Blend plus un rpertoire bin. Celui-ci reoit les fichiers binaires gnrs lors de la compilation (voir section 3.5.3). Lorsque vous ajoutez un fichier de type ressource ou code logique un projet Silverlight, celui-ci est automatiquement plac dans le rpertoire du projet. Cela permet au projet dtre autonome, dplaable librement sur le disque dur ou encore dtre partag.

3.3 Le conteneur racine

Maintenant que nous avons vu larchitecture dune solution, nous allons tudier celle dune page dapplication Silverlight. Lors de linitialisation dune application Silverlight, celle-ci charge une page par dfaut. La page en question est issue de la compilation des deux fichiersMainControl. xaml et MainControl.xaml.cs. Le premier fichier est de type XML, il contient donc un nud racine. Ce nud est le conteneur parent de tous les objets visuels et logiques de la page. Il est de type UserControl. Il dtermine la dimension de la page, si elle possde un fond transparent ou encore tout ce qui a trait directement ou indirectement son affichage. Les composants de type UserControl ne peuvent contenir quun unique objet enfant. Ainsi, dposer un composant directement dans un UserControl efface lenfant qui sy trouve ventuellement. Lors de la cration dun nouveau projet Silverlight, un contrle Grid nomm LayoutRoot lui est ajout, par dfaut, comme lment enfant. Celui-ci peut, contrairement au composant UserControl, contenir plusieurs enfants visuels et logiques.
Figure3.6
Arbre visuel et logique d'une page.
Conteneur racine Conteneur Grille par dfaut Afficher/cacher les composants

Verrouiller/dverrouiller les composants

Comme vous pouvez vous en rendre compte, une page est constitue dlments imbriqus. Il ny a donc pas rellement de notions de calques ou de couches. Un calque (ou une couche) est une unit dorganisation abstraite qui regroupe plusieurs objets sur une mme profondeur visuelle. Les conteneurs Silverlight sont, quant eux, des objets slectionnables ayant un aspect physique et une logique dagencement propre. Ce nest pas un handicap, bien au contraire. Cela force concevoir limbrication ds le dpart et rend plus propre et efficace le dveloppement dapplications ou de sites. Lensemble des lments imbriqus constitue larbre visuel et logique de lapplication.

3.4 Ajouter du texte 3.4.1 Crer le champ texte

Vous allez maintenant ajouter un champ texte centr. Pour cela, vous trouverez une icne de champ texte dans votre barre doutils. Cliquez dessus et maintenez licne enfonce. Trois pictogrammes

Chapitre 3

HelloWorld

43

apparaissent, correspondant aux trois types de champs texte que vous pouvez crer : TextBlock, TextBox et PasswordBox. Le contrle de type TextBlock vous permet dafficher du texte. Les deux autres types autorisent lutilisateur saisir du texte lors de lexcution de lapplication. Le composant PasswordBox est utile pour la saisie de mots de passe utilisateur. Slectionnez le premier type de champ (TextBlock). Nous allons ajouter une instance de type TextBlock dans notre conteneur LayoutRoot. Double-cliquez sur licne. Un nouveau TextBlock est automatiquement cr en haut gauche, dans la grille LayoutRoot. sa cration un TextBlock est en mode dition de texte (voir Figure3.7). Pour en sortir, appuyez sur la touche Esc ou cliquez hors du composant.
Figure3.7
Cration d'un TextBlock.

3.4.2 Alignement
Lors de sa cration via un double-clic et au sein dun contrle de type Grid, un objet est toujours plac en haut gauche. Vous allez centrer le champ texte au sein de la grille. Pour cela, slectionnez-le dans larbre visuel, puis ouvrez longlet Properties. lintrieur de la catgorie Layout, vous trouvez deux sries dicnes refltant les options dalignement ainsi que quatre champs de saisie juste en dessous. Ceux-ci permettent de spcifier des marges extrieures et doivent tre utiliss conjointement avec les options dalignement. Cest le paramtrage de lensemble de ces proprits qui dtermine le positionnement des objets au sein dun conteneur. Assurez-vous que ces champs ont tous une valeur gale zro. Si un quelconque chiffre apparat dans un de ces champs, il faut le remettre zro. Si vous avez cr le champ texte en le dessinant directement au sein de la grille, ces proprits ne sont pas vides. Pour rinitialiser nimporte quelle proprit dans Blend, il vous suffit de cliquer sur licne carre prsente droite de chacune des proprits et de slectionner Rtablir. Cliquez maintenant sur les deux pictogrammes qui permettent lalignement horizontal et vertical (voir Figure 3.8).
Figure3.8
Les options d'alignement.

Votre texte est maintenant centr. Les proprits largeur et hauteur (Width et Height) possdent une valeur Auto. Cela signifie que leur valeur sadaptera automatiquement, soit au contenu du champ texte (la chane de caractres), soit au conteneur, en fonction des marges et de lalignement spcifi. Vous allez paramtrer laffichage de ce champ. Pour cela, ouvrez la catgorie Text du panneau Properties. Vous y trouverez plusieurs options, notamment pour choisir la police de

44

Partie I

Approches de Silverlight

caractre ou encore la mise en forme du texte. Lune dentre elles, FontSize, permet de modifier la taille de la police en pixels. Choisissez une taille dau minimum 24 pixels. Si vous avez correctement configur les options dalignement du texte, celui-ci devrait stendre dans les deux sens, mais rester centr dans la grille principale. Dans longlet Common Properties, pour la proprit Text, entrez la valeur "HelloWorld" ou la chane de caractres de votre choix. Une fois de plus, le TextBlock stend dans les deux directions pour sadapter son contenu (voir Figure3.9).
Figure3.9
Le projet HelloWorld.

3.5 Tester et compiler

Contrairement aux langages tels que HTML ou JavaScript qui sont interprts par le navigateur, le lecteur Silverlight excute des fichiers de type xap compilables par Blend ou Visual Studio. La compilation permet de fusionner les fichiers contenant le code XAML et C# en langage intermdiaire. Cette tape est donc importante.

3.5.1 Premire compilation

Vous allez maintenant compiler votre application. Pour cela, il y a trois solutions:

Dans le panneau Project, aprs un clic droit sur la solution, slectionnez Run Project. Au sein du menu Project, slectionnez Run Project. Utilisez le raccourci clavier F5.

Ces trois mthodes compilent le projet et affichent le rsultat dans votre navigateur configur par dfaut. Un lecteur autonome existe, mais tester ou dboguer une application Silverlight ne peut tre ralis quau sein dun navigateur. Appuyez sur la touche F5. Une srie de messages apparat en fentre de sortie. Ils vous indiquent la progression de la compilation. La page HTML contenant votre application apparat (voir Figure 3.10).
NOTE INFO

Lors de projets plus complexes, il peut arriver qu'une erreur soit leve la compilation. Dans ce cas, l'application ne compile pas. Il vous faudra lire le message d'erreur prsent en fentre de sortie. Toutefois Blend ne bnficie pas d'un dbogueur aussi puissant que celui de Visual Studio. C'est pourquoi les messages d'erreur sont parfois trs gnriques et peuvent ne pas vous donner d'indices suffisants pour rsoudre le bogue.

Chapitre 3

HelloWorld

45

Figure3.10
L'application charge dans le navigateur aprs compilation.

3.5.2 Une application 100 % Silverlight

Vous remarquez quau sein de notre page, le composant TextBlock nest pas centr. En ralit, il est correctement centr, mais par rapport la page de notre application charge par dfaut. Il est donc centr par rapport au conteneur principal du fichier MainControl.-xaml et son composant racine UserControl. Si vous cliquez-droit nimporte o sur la page HTML, vous verrez un menu contextuel Silverlight. Celui-ci vous indique que linstance du plug-in Silverlight occupe toute la place dans la page HTML. Cependant, par dfaut, le UserControl racine possde des dimensions fixes (640 pixels de large par 480 de hauteur). Pour le vrifier, slectionnez dans Blend le UserControl principal et vrifiez les valeurs de ses proprits Width et Height. Pour rsumer, la page HTML gnre par dfaut affiche linstance du plug-in dans une balise de type DIV occupant100% de hauteur et de largeur, cest--dire que linstance Silverlight occupe toute la place au sein du navigateur. Toutefois, le UserControl racine possde des dimensions fixes exprimes en pixels (voir Figure 3.11).
Figure3.11
Mise en page par dfaut d'une application Silverlight.

Si vous souhaitez centrer le TextBlock dans la page HTML, il vous faut donc faire en sorte que le UserControl racine de MainControl.xaml sadapte au navigateur continuellement. Pour cela il vous faut redfinir la largeur et la hauteur du UserControl. Fermez votre navigateur et revenez sous Blend. Slectionnez le UserControl dans larbre visuel, au-dessus du composant Grid, nomm LayoutRoot par dfaut. Ensuite, dfinissez ses proprits Width et Height sur Auto en cliquant sur le pictogramme situ droite. La valeur Auto signifie que la largeur du composant va sadapter lespace qui lui est permis dans la page HTML. Au sein de Blend, la largeur et la hauteur ntant pas fixes en pixels, le composant sadapte pour afficher au minimum le champ texte

46

Partie I

Approches de Silverlight

contenu dans la grille LayoutRoot. Des icnes apparaissent autour du contour, elles indiquent que vous pouvez agrandir les dimensions du UserControl racine (voir Figure 3.12).
Figure3.12
Mise jour des proprits du UserControl.

Manipulateurs de redimensionnement du UserControl racine

Les icnes les plus loignes permettent dtirer le projet pour simulant les dimensions fictives dune page HTML. Vous pourrez par exemple obtenir un aperu du redimensionnement de votre application dans une rsolution plus faible. Pour grer de manire prcise les dimensions daffichage fictives, vous devez passer en mode ddition XAML. Pour cela, Blend propose un mode ddition XAML. Cliquez sur licne reprsentant une balise en haut droite de la fentre de design. Cest la deuxime icne en partant du haut (voir Figure 3.13). Elle permet daccder au mode XAML. La premire icne, en haut, passera la vue en mode cration. Vous pourrez galement utiliser le mode mixte qui affiche la fois le code XAML et le visuel en cliquant sur licne situe en bas.
Figure3.13
Bouton d'accs au mode d'dition XAML.

Une fois en mode XAML, modifiez les proprits d:DesignWidth et d:DesignHeight du nud UserControl racine en leur donnant respectivement les valeurs 800 et 600. Vous pouvez voir un aperu du code ci-dessous :
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="HelloWorld.MainControl" Width="Auto" Height="Auto" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="600">

Votre application possde maintenant une rsolution de 800 pixels de large et de 600pixels de hauteur. Toutefois ces valeurs ne sont uniquement prises en compte et utiles que lorsque vous tes sous Expression Blend. Elles sont pratiques pour avoir une prvisualisation de la mise en page dans cette rsolution. Elles ne sont pas prises en compte lors de lexcution de lapplication dans une page HTML. Quoi quil en soit, linstance de lapplication Silverlight est dans une balise 100 %, le UserControl occupera le maximum despace dans la page HTML car les proprits

Chapitre 3

HelloWorld

47

Width et Height sont en mode Auto et son alignement vertical et horizontal est en mode Stretch. Cette fois, le texte est correctement centr au sein du navigateur. De plus, lorsque vous redimensionnez la fentre du navigateur, le texte se repositionne dynamiquement (voir Figure 3.14).
Figure3.14
Repositionnement centr du TextBlock.

3.5.3 Fichiers gnrs

Une fois lapplication compile, votre navigateur se lance et affiche la page Silverlight. Le site saffiche via le serveur web de dveloppement lanc par Blend. Cest licne que vous pouvez apercevoir en bas droite. Tous les fichiers relatifs la cration du site se situent dans le rpertoire Debug (voir Figure 3.15).
Figure3.15
Emplacement des fichiers gnrs.

Rpertoire du projet

Contient les dossiers Debug et Release selon l'avancement du projet

Rpertoire de la solution

Dtient les fichiers compils HelloWorld.xap, HelloWorld.dll en mode Debug ainsi que la page de test TestPage.html et le fichier AppManifest.xaml.

Comme vous pouvez le voir, les fichiers produits la compilation sont situs dans le rpertoire Debug. Lorsque votre projet est en phase finale et prt pour sa mise en ligne, vous pouvez, sous Visual Studio, dfinir lapplication en mode Release. Cela permet de gagner en performances. Les bibliothques ncessaires pour tracer des messages dans la fentre de sortie ou pour dboguer sont ignores, le code est galement beaucoup plus optimis. De plus, cest une bonne pratique, lorsque lon arrive une version stable, de compiler en mode Release, puis de la mettre en production. Dans tous les cas, vous trouverez au moins les fichiers suivants:

TestPage.html est le fichier gnr automatiquement lors de chaque compilation pour tester lapplication Silverlight. Ce fichier propose une intgration minimale. Il contient simplement une balise object dfinissant linstance du plug-in Silverlight dans la page web. Voici un exemple de la balise gnre par dfaut:

48

Partie I

Approches de Silverlight

<div id="silverlightControlHost"> <object data="data:application/x-silverlight-3," type="application/x-silverlight-3" width="100%" height="100%"> <param name="source" value="SL3WebSite.xap"/> <param name="onerror" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="3.0.40304.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=141205" style="text-decoration: none;"> <img src="http://go.microsoft.com/ fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/></a> </object> </div>

Vous pouvez remarquez que le premier paramtre indique le chemin daccs vers le fichier xap lire (voir HelloWorld.xap au point suivant). Le deuxime paramtre, onerror, redirige quant lui toutes les erreurs lexcution ou lors de louverture du fichier vers une fonction JavaScript qui gre leur affichage dans une balise DIV ddie. Le paramtre autoUpgrade est par dfaut true. Cela signifie que celui-ci permet la mise jour automatique de Silverlight lorsquune nouvelle version est disponible.

HelloWorld.xap. Cest le format de fichier lisible par le lecteur Silverlight. Malgr les apparences, il nest pas le produit direct de la compilation mais un fichier zip renomm avec lextension xap. Il contient la dll de lapplication ainsi quun manifeste dcrivant tout ce qui est lintrieur. Dans notre cas, il possde HelloWorld.dll, le fichier produit par la compilation. HelloWorld.dll. Cest exactement le mme fichier que celui situ dans le document xap. Il peut tre rfrenc par nimporte quel autre projet Silverlight. Cela permet au projet qui le rfrence de pouvoir crer des instances de notre application. Vous pourriez ainsi crer un portfolio de tous les sites que vous avez ralis en Silverlight, simplement en rfrenant leur dll et en les instanciant sous forme de miniature au sein dExpression Blend. AppManifest.xaml. Le code montr ci-dessous expose le contenu de ce fichier:
<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" EntryPointAssembly="HelloWorld" EntryPointType="HelloWorld.App" RuntimeVersion="3.0.40624.0"> <Deployment.Parts> <AssemblyPart x:Name="HelloWorld" Source="HelloWorld.dll" /> </Deployment.Parts> </Deployment>

Comme vous le constatez, il dfinit les informations indispensables permettant au lecteur Silverlight de lire le fichier xap. Le lecteur compare la version de Silverlight expose par lattribut RuntimeVersion la valeur de la proprit minRuntime Version dfinie dans la balise object au sein du document TestPage.html. Si les versions dfinies dans chacun de ces fichiers ne correspondent pas, le lecteur peut lever une erreur.

Chapitre 3

HelloWorld

49

3.5.4 Processus de compilation

3.5.4.1 Les classes partielles
Les classes partielles sont nes avec lapparition de .Net 2. Elles avaient dj pour but de sparer le fond et la forme au sein de fichiers distincts. Pour cela, le dveloppeur pouvait glisser/dposer nimporte quel composant .Net au sein dune fentre reprsentant linterface visuelle. Le code logique tait bien spar du code dcrivant linterface visuelle mais ce dernier nhritait pas du XML (contrairement XAML). Lorsque le dveloppeur compilait son application, celle-ci tait donc gnre partir de deux fichiers. Ce mcanisme, permis grce aux classes partielles, est exactement le mme que celui utilis aujourdhui par Silverlight. Toutefois ce concept est bien plus efficace et pertinent avec cette technologie. Comme nous lavons dit lors du prcdent chapitre, une classe est un modle dobjet. Une classe partielle est donc une partie dun modle dobjet contenue, la plupart du temps, dans un fichier spar. Examinons le code XAML de notre projet HelloWorld:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="HelloWorld.MainPage" Width="Auto" Height="Auto" mc:Ignorable="d"> </UserControl>

Vous remarquez que le UserControl principal contient la proprit x:Class qui a pour valeur HelloWorld.MainPage. Cela signifie que ce nud est une dfinition de la classe MainPage hritant de la classe UserControl, et que cette dfinition est contenue dans lespace de noms Hel loWorld. Tout ce qui est dclar dans le fichier XAML est donc un nouveau membre de cette classe. Le fichier MainPage.xaml.cs permet dajouter du code logique lapplication et aux objets dclars dans MainPage.xaml. Cest lui qui permet les interactions utilisateur et la cration dalgorithmes complexes. Voici un extrait de ce texte:
namespace HelloWorld { public partial class MainPage : UserControl { public MainPage() { // Required to initialize variables InitializeComponent(); } } }

Cette classe se nomme MainPage. Elle hrite, elle aussi, de la classe UserPage et elle est contenue dans lespace de nom HelloWorld. Vous remarquez lutilisation du mot-cl partial. Ce mot signifie que la classe est partielle. Il sagit donc de la mme classe au sein de deux fichiers spars. Chacun a pour but de dfinir une partie de celle-ci et non la totalit. Cest une approche trs performante car XAML est bien plus pratique pour grer larbre visuel et logique ainsi que les animations. C# sera, quant lui, beaucoup plus performant pour dvelopper laspect fonctionnel et les interactions complexes. Nous allons maintenant tudier les mcanismes du compilateur permettant de grer deux langages aussi diffrents que C# et XAML.

50

Partie I

Approches de Silverlight

3.5.4.2 Just In Time Compiler

La compilation dun projet Silverlight seffectue toujours en deux tapes. La premire consiste transformer les langages de haut niveau grs par la CLR comme C#, VB, XAML ou les langages gres par la DLR, comme IronPython en langage intermdiaire. Quel que soit le langage dorigine, le langage intermdiaire rsultant de la compilation est le mme pour tous les langages grs par .NET. La compilation est ralise par le compilateur propre au langage dans lequel vous dveloppez. Ce langage intermdiaire est contenu dans la dll qui est encapsule au sein du fichier xap. Dans notre cas, elle se nomme "HelloWorld.dll" que nous avons voque plus haut. La deuxime tape est une compilation effectue lors de la lecture du fichier xap par le plug-in Silverlight. Limplmentation du lecteur Silverlight diffre selon les systmes dexploitation et le navigateur utilis. Cette compilation est donc chaque fois diffrente mais lobjectif est le mme: transformer le langage intermdiaire en langage machine. Cest le Just In Time Compiler qui gre cette tape. Son but est de compiler au dernier moment en langage machine afin dobtenir les meilleures performances possibles selon le systme. Comme il est diffrent et spcialis selon les systmes et les navigateurs, il produit du code machine plus adapt quun compilateur gnrique (voir Figure 3.16).
Figure3.16
Compilation Silverlight en deux tapes.

Processus de Compilation Silverlight

Classe partielle XAML Compilateur XAML Classe partielle C# Compilateur C# Classe partielle Visual Basic Compilateur Visual Basic

tape 1
Solution.dll

Langage intermdiaire

AppManifest.xaml Solution.xap

Lecteur Silverlight Just In Time Compiler

tape 2
Langage machine
Windows Mac OS Linux

Dans le prochain chapitre, nous plongerons dans linterface dExpression Blend pour crer un site Silverlight trs simple et grer le redimensionnement des lments visuels.

4
Un site plein cran en 2 minutes
Au sein de ce chapitre, vous allez crer votre premier site Silverlight, puis vous identifierez les diffrences et avantages existants avec les projets de type application. Vous apprendrez crer des boutons au sein de conteneurs spcifiques. Ceux-ci joueront le rle de menus et rafrachiront le contenu de la page principale. Lun deux permettra notamment laffichage du site en mode plein cran. Le navigateur ne sera plus visible et lapplication occupera tout lespace sur lcran lorsque ce mode sera activ. Vous verrez donc comment grer le redimensionnement ou le repositionnement des objets dans la grille principale. Linteractivit utilisateur est aborde travers trois mthodologies diffrentes: les comportements, lutilisation du XAML ou la cration de code logique C#. Pour finir, nous listerons les fichiers qui doivent tre dploys sur le serveur.

4.1 Les projets de type site Internet

Les projets de type site permettent aux designers interactifs de se passer partiellement dun dveloppeur .Net ou dun intgrateur HTML CSS. Ils fournissent par dfaut les mcanismes dintgration des applications Silverlight au sein dune page web. Crez un nouveau projet de type Silverlight Application + Web Site. Nommez-le AgencePort folio. Vrifiez bien que le type de langage choisi est C# et que le rpertoire contenant le projet sappelle Pratique_de_Silverlight. Pour finir, cliquez sur OK. Votre panneau Projects affiche le visuel correspondant la Figure4.1 aprs un court instant. Vous remarquez quil existe une nette diffrence avec les applications Silverlight 3 standard. La solution est constitue de deux projets au lieu dun seul. Le premier projet est lapplication Silverlight elle-mme. Vous pouvez le constater car sa structure est la mme que celle tudie au Chapitre 3. Le deuxime projet reprsente le site web lui-mme. Son nom est le mme que celui de la solution, mais se termine par le suffixe Site. Trois fichiers sont visibles: Default.html, favicon. ico et Silverlight.js. Le premier reprsente la page HTML intgrant lapplication Silverlight. Le deuxime correspond licne par dfaut du site dans la barre dadresse. Le troisime fichier est un document JavaScript qui facilite et amliore lintgration de Silverlight.

52

Partie I

Approches de Silverlight

Figure4.1
Arborescence dun projet de type site Silverlight.

Dans le prcdent type de projet, la page HTML se nommait TestPage.html au lieu de Default.html. Elle tait gnr par dfaut lors de chaque compilation. Lorsque vous le modifiez directement dans le rpertoire Debug, pour amliorer la mise en page ou lintgration Silverlight, ces modifications taient crases chaque compilation. Elles ntaient donc pas prises en considration. Cela ntait pas pratique et rendait obligatoire la sauvegarde de TestPage.html sous un nom diffrent. Vous navez pas ce type de problme avec notre projet, vous pourrez modifier loisir Default.html car il nest pas recr chaque compilation. Un serveur web est lanc avec sa racine pointant sur le dossier site. Le serveur web pointe directement sur le fichier quand le navigateur souvre. Appuyez sur la touche F5 pour tester votre site Internet. Le navigateur affiche une page blanche car aucun lment visuel nest contenu au sein de LayoutRoot. Au moment o vous testez votre site, le projet Application est compil en premier, puis le projet AgencePort folioSite, qui est dfini en tant que projet de dmarrage, est lanc. Le projet en gras au sein dune solution est toujours le projet de dmarrage. Ce projet est donc excut au sein du navigateur aprs la compilation russie du projet Application. Le deuxime projet vous sert donc de base pour produire une intgration HTML performante. En interne, son code est quivalent celui utilis pour lancer les applications classiques car il rfrence le fichier JavaScript Silverlight.js pour vrifier que le plug-in est dj install sur le poste client ou demander sa mise jour. Le fichier Silver light.js donne galement accs aux proprits de linstance du plug-in reprsent par la balise Object. Voil les proprits apports par ce fichier:

Il contient un mcanisme de dtection du lecteur Silverlight, de sa version (si celui-ci est dj prsent) et propose linstallation du lecteur. Il facilite la conception dune intgration avance et permet lutilisation de Javascript comme langage logique. Au mme titre que la balise Object, il permet de grer le prchargement de lapplication Silverlight. Vous pourrez donc afficher un indicateur de prchargement pour les applications Silverlight complexes et celles dont le poids excde une certaine valeur. La dcision concernant la valeur limite vous incombe et dpend du rseau sur lequel lapplication est dploye ou le type de public cibl. Il donne accs aux mmes paramtres avancs que la balise Object. Cest le cas de la proprit IsWindowLess, quivalente windowless pour la balise Object (permettant la cration dapplications transparentes).

Chapitre 4

Un site plein cran en 2 minutes

53

Lorsque vous avez compil, un rpertoire ClientBin a t automatiquement ajout dans le projet Internet. Ce rpertoire contient uniquement le fichier xap. Il est recopi par dfaut la fin de la compilation du projet de type application. Dans ce rpertoire, vous ne trouverez aucun fichier dll ou propre au dbogage car lobjectif est de rester le plus simple possible. Le dossier ClientBin est le dossier de publication. Les fichiers du dossier bin\debug sont empaquets dans le fichier xap qui est dploy dans ClientBin. Vous obtenez ainsi le meilleur des deux mondes. Le projet Internet reste simple et pur, mais le dbogage et la rutilisation demeurent toutefois possibles.

4.2 Crer des conteneurs redimensionnables

Pour crer une interface redimensionnable, plusieurs possibilits soffrent vous. Vous pourriez, par exemple, positionner les menus directement lintrieur de la grille principale. Il est pourtant prfrable de centraliser les objets ayant la mme fonctionnalit au sein dun conteneur ddi. Cela permet de les manipuler tous ensemble plus facilement, si besoin il vaut mieux prvenir que gurir. Nous allons crer deux types de conteneurs. Le premier, un StackPanel, contiendra les lments du pied de page, essentiellement des champs texte cliquables. Le deuxime sera un conteneur de type WrapPanel. Il contiendra et agencera les menus prsents dans le haut de notre page. Ceux-ci seront en ralit des composants de type Button. Notre site correspondra la Figure4.2. Cette figure est un croquis plus ou moins fidle du rsultat escompt. Ne vous formalisez donc pas sur les dimensions ou les rapports de proportions. Ce visuel nous sert avant tout de base de conception. Il a t ralis avec SketchFlow, le nouvel outil de prototypage conu par Microsoft, que tudierons au Chapitre10.
Figure4.2
Croquis du site plein cran.
Menus du haut de page - WrapPanel Bouton plein cran

Croquis du site plein ran

Pied de page StackPanel

4.2.1 Crer le pied de page

4.2.1.1 Crer et configurer le StackPanel
Vous allez commencer par les menus les plus simples : ceux du pied de page. Ils sont contenus dans un StackPanel. Ce type de conteneur permet dempiler verticalement ou horizontalement un ensemble dobjets. Dans notre cas, il sagira de champs texte de type TextBlock. Tout contrle visuel est cliquable au sein des projets Silverlight ou WPF. Le TextBlock nchappe pas cette

54

Partie I

Approches de Silverlight

rgle, il peut donc jouer le rle de liens ou de boutons. Commencez par crer un composant StackPanel. Dans la barre doutils de Blend, cliquez en laissant appuyer sur licne reprsentant le composant Grid. Une srie dicnes apparat. Slectionnez licne reprsentant le StackPanel (voir Figure4.3).
Figure4.3
Icne du StackPanel.

Licne StackPanel remplace licne Grid au 1er niveau, double-cliquez dessus. StackPanel est automatiquement plac en haut gauche de la grille principale LayoutRoot. Il possde des dimensions de 100 pixels de hauteur comme de largeur. Vous allez dfinir une largeur et une hauteur en mode Auto, pour cela cliquez sur licne droite de la proprit Width et Height. Le StackPanel na plus de largeur ni de hauteur, il sest adapt son contenu. Comme il nen a pas encore, il possde des dimensions en largeur et hauteur gales zro pixel. Ce comportement est li au fait quil est align en haut gauche et quil nest pas en mode Stretch (tirement).
NOTE INFO

Lorsquun conteneur vide possde une largeur en mode Auto, cela signifie que la valeur sadapte, soit par rapport au contenu du conteneur, soit par rapport au conteneur parent de celui-ci. Au sein dune grille, si son alignement horizontal est gauche, droite ou centr, cela implique quil sadapte par rapport son contenu. Si loption dalignement est en mode tirement (Stretch) et que des marges sont dfinies, il stirera pour correspondre la largeur de son conteneur, moins les dimensions des marges qui sont dfinies gauche et droite. Cest exactement le mme principe pour la proprit hauteur (Height). Le mode Auto est spcifique aux proprits largeur et hauteur. Pas toujours facile assimiler, il possde le mme comportement que celui existant en XHTML. Il est bidirectionnel car les valeurs en pixels sous-jacentes sont rcupres, soit par le conteneur parent, la grille LayoutRoot dans notre cas, soit par le contenu. Ce mode permet de grer des comportements avancs tout en tant cohrent.

Cliquez sur licne correspondant un alignement horizontal droite dans les options dalignement ( ), puis dfinissez une marge droite de 30 pixels. Spcifiez ensuite un alignement vertical vers le bas ainsi quune marge de 10 pixels par rapport la bordure basse de la grille LayoutRoot. Ne spcifiez aucune marge gauche (entrez la valeur 0). Pour finir, vrifiez bien que Orientation est en mode Horizontal. Ce mode indique la direction dempilement des lments contenus.

Chapitre 4

Un site plein cran en 2 minutes

55

4.2.1.2 Ajouter des champs texte et notion de contexte conteneur

Lorsque vous avez double-cliqu sur licne du StackPanel, vous lavez directement imbriqu dans la grille LayoutRoot. Ce nest pas un hasard. Vous avez pu raliser cette opration car cette grille tait slectionne comme contexte conteneur. Le contexte conteneur est toujours entour dun liser bleu ou jaune. Cela signifie que toutes les actions du graphiste, la cration de composants, leur slection ou encore leur modification, seront ralises dans le conteneur slectionn comme contexte actif. Pour crer une srie de menus lintrieur du StackPanel, il vous faut donc cliquer sur celui-ci dans la vue de design pour le dfinir en tant que contexte actif. Ensuite, vous pouvez double-cliquer sur licne TextBlock dans la barre doutils. Lors de chaque double-clic, vous imbriquez une nouvelle occurrence de TextBlock au sein du StackPanel. Rptez cette opration trois fois. Une fois les trois champs texte crs, dfinissez des marges droite de 20 pixels pour les deux premiers. Vous pouvez slectionnez les deux lments et spcifier leurs marges en mme temps dans le panneau des proprits. Ensuite, changez la valeur contenue dans la proprit Text, qui est accessible via le panneau des proprits ou directement par double-clic sur le composant TextBlock dans la fentre de design (voir Figure4.4). Vous pouvez galement choisir une police afin daffiner le visuel. Je vous conseille la police Trebuchet MS dans un premier temps car cela vite davoir lembarquer puisquelle est intgre par dfaut Silverlight.
Figure4.4
Menu bas du site reprsent par un StackPanel contenant plusieurs contrles TextBlock.

Vous remarquez que le StackPanel sagrandit vers la gauche automatiquement chaque nouvel lment visuel ajout en son sein.

4.2.2 Crer le menu du haut

Nous allons maintenant crer le menu du haut. Le composant bouton (Button) propose des interactions visuelles avantageuses informant lutilisateur que ce menu est ractif. Par exemple, le menu pourrait changer de couleur lorsquil est survol.

4.2.2.1 Principe du WrapPanel et du mode Auto

Comme la navigation de notre site repose essentiellement sur le menu du haut, nous allons imbriquer des boutons au sein dun conteneur. Afin de grer les redimensionnements extrmes de notre site, nous allons utiliser un composant WrapPanel. Celui-ci est proche du StackPanel dans son principe, cest--dire quil empile les lments les uns aprs les autres. Toutefois, il met la ligne un lment visuel si jamais celui-ci tend dpasser le bord droit ou le bord bas du conteneur selon son orientation (voir Figure4.5). Coupl au mode de redimensionnement Auto, propre aux proprits largeur et hauteur, nous pourrions ajuster les dimensions dynamiquement chaque remise la ligne. Par exemple, si nous dfinissons la hauteur (Height) du WrapPanel sur Auto et son orientation horizontale et un aligne-

56

Partie I

Approches de Silverlight

ment vertical haut (viter le mode Stretch dans ce cas, ainsi que les marges), alors le WrapPanel sajustera en hauteur pour chaque nouvelle ligne dlments visuels. Vous pouvez voir lexemple prcdent mis jour en utilisant le mode Auto (voir Figure4.6).
Figure4.5
Principe dimbrication au sein dun WrapPanel.

WrapPanel avec orientation horizontale

WrapPanel avec orientation verticale

Figure4.6
Principe dimbrication au sein dun WrapPanel avec la valeur Auto active.

WrapPanel avec orientation horizontale, hauteur en mode Auto et alignement vertical haut

WrapPanel avec orientation verticale, largeur en mode Auto et alignement horizontal gauche

Comme vous pouvez le constater, sur le premier schma de la Figure4.6, les rectangles (22, 23, 24) ne sont plus coups, la hauteur est rajuste en fonction du nombre de lignes. Sur le second schma, il ne reste plus aucun espace droite de llment 18 car la largeur du WrapPanel sajuste au contenu.

4.2.2.2 Crer et configurer le WrapPanel

Pour crer un conteneur de ce type, vous devez utiliser la bibliothque de composants car il ne se trouve pas dans la liste des conteneurs proposs par dfaut. Cliquez sur la dernire icne de la barre doutils, celle ressemblant une double flche ( ). Elle vous permet douvrir la bibliothque de composants. Slectionnez le mode daffichage avec grandes icnes pour identifier les contrles disponibles (voir Figure.4.7).
Figure4.7
Bibliothque de composants Silverlight.

Chapitre 4

Un site plein cran en 2 minutes

57

Le champ de recherche sert de filtre, entrez-y les lettres wr. Le contrle de type Wrap Panel nest pas visible dans la liste. Cest en fait trs logique, il nest pas instanciable par dfaut au sein des projets Silverlight. Pour y remdier, il vous suffit de tlcharger et dinstaller la bibliothque nomme Silverlight Toolkit. Elle est maintenue par lquipe Silverlight de Microsoft et regroupe de nombreux avantages dont certains contrles qui ne sont par dfaut accessibles quau sein des projets WPF. Afin dassurer un maximum de fonctionnalits au sein de Silverlight, ces composants ont t redvelopps et mis disposition dans le Silverlight ToolKit. Vous le trouverez ladresse: http://www.codeplex.com/Silverlight/. Cliquez sur le menu Download (voir Figure4.8).
Figure4.8
Le portail CodePlex hbergeant le projet Silverlight ToolKit.

Une fois la bibliothque installe, sauvegardez votre projet et relancez Blend. Cette fois-ci, le composant WrapPanel est affich. Cela prend parfois quelques secondes car Blend doit explorer les nouvelles bibliothques de contrles installes. Slectionnez le contrle WrapPanel, son icne apparat juste en dessous de celle permettant laccs la bibliothque. Double-cliquez dessus, une instance de type WrapPanel est automatiquement cre au sein du contexte conteneur slectionn. Dans notre cas, cela doit tre LayoutRoot.
NOTE INFO

Vous pouvez galement accder la liste des contrles via le panneau Assets situ en haut gauche. Ce panneau est parfois plus pratique d'utilisation, cela dpendra essentiellement de la manire dont vous utilisez Blend.

Nous allons lancrer sur les bordures droite, gauche et haute de la grille principale. Pour cela, vous allez dfinir une largeur et une hauteur en mode Auto, comme nous avons fait pour le menu du bas avec le composant StackPanel. Ensuite, cliquez sur licne dalignement vers le haut et spcifiez une marge de 10 pixels par rapport au bord haut. Cliquez sur licne tirement horizontal pour activer ce mode. Dfinissez des marges 30 pixels pour la bordure gauche et 90 pixels pour la bordure droite. Cliquez sur licne droite des proprits Width et Height. Le WrapPanel na plus de hauteur. Il sest adapt son contenu qui est vide. Il possde donc une hauteur gale 0 pixel. Au contraire, comme nous avons dfini des marges gauche et droite ainsi quun alignement horizontal tir, il possde une largeur gale la largeur totale de lapplication moins les marges (voir Figures 4.9 et 4.10).

58

Partie I

Approches de Silverlight

Figure4.9
Configuration des options de mise en forme du WrapPanel.

Figure4.10
Visuel du composant WrapPanel Configur.

Comme vous pouvez le voir, le WrapPanel est ancr en haut, gauche et droite. Les icnes reprsentant un verrouillage indiquent lancrage des objets ou non sur les bords du conteneur Grid principal. Elles sont accompagnes de nombres indiquant la valeur en pixel de chaque marge. Elles sont cliquables et permettent de modifier les options dalignement horizontal et vertical.

4.2.2.3 Ajouter et configurer les boutons du menu

Vous allez maintenant ajouter des boutons correspondant chacun des menus de la Figure4.2. Slectionnez le WrapPanel, puis double-cliquez cinq fois sur licne reprsentant un bouton au sein de la barre doutils. Vous venez linstant dimbriquer cinq boutons dans le conteneur WrapPanel. Vous auriez pu les dessiner directement au sein de ce conteneur. Cette manire de faire prsente lavantage dviter de prciser, pour chaque bouton, les dimensions en hauteur et largeur. Avec cette mthode, celles-ci ont t dfinies en mode Auto pour chacun deux. Les valeurs des proprits Width et Height sajustent en fonction de leur contenu textuel, qui est par dfaut la chane de caractre Button. Ds cet instant, le WrapPanel possde une hauteur qui sajuste chaque bouton. Si vous dfinissez une police diffrente ou une taille diffrente, le bouton rajustera sa hauteur qui rajustera celle du WrapPanel. Si vous avez dfini des marges verticales sur lun des boutons, celles-ci affecteront directement la hauteur finale du WrapPanel. Slectionnez chaque bouton en maintenant la touche Maj enfonce. Ensuite, au sein du panneau des proprits, dans longlet des proprits communes, spcifiez la police Trebuchet MS, ainsi quune hauteur de caractres de 14 pixels.
NOTE INFO

Le corps des polices est exprim par dfaut en pixels et non en points. Il est toutefois possibles de le modifier. Pour cela, ouvrez le menu Tools > Options, choisissez ensuite l'onglet Units. Dans la liste slectionnez Points au lieu de Pixels.

Dslectionnez tous les boutons en cliquant nimporte o sur la scne, puis cliquez sur le premier bouton et entrez la chane de caractres Nouveauts dans la proprit Content. Procdez de

Chapitre 4

Un site plein cran en 2 minutes

59

mme avec tous les autres afin davoir un menu correspondant la Figure4.2. Ensuite, crez un dernier bouton lextrieur du WrapPanel au sein du conteneur Layout Root. Il doit tre ancr en haut droite et possder des marges de 10pixels en haut et de 8 droite. Dans sa proprit Content, insrez la chane de caractres Plein cran. Ce bouton ne fait pas partie directement du WrapPanel car il ne donne pas accs au mme niveau dutilisation. Il nous permettra de passer alternativement du mode plein cran au mode daffichage normal. Vous devriez maintenant avoir un visuel similaire la Figure4.11.
Figure4.11
Menu du haut avec un bouton Plein cran.

Pour finir, slectionnez le UserControl racine et dfinissez une largeur et une hauteur en mode Auto, cela vous permettra de profiter du navigateur 100 %. tirez ensuite la vue de design avec les manipulateurs pour simuler une largeur de 640 pixels et une hauteur de 320 pixels. Voici le code XAML gnr en arrire-plan par Blend, pour la totalit de la grille principale:
<Grid x:Name="LayoutRoot" Background="#FFFFFFFF" Margin="0,0,0,0" > <controlsToolkit:WrapPanel Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Top" Width="Auto" Margin="30,10,90,0" d:LayoutOverrides="Width"> <Button Height="Auto" Width="Auto" Content="Nouveauts" Margin="0,0,20,0" FontSize="14" FontFamily="Trebuchet MS" Visibility="Visible"/> <Button Height="Auto" Width="Auto" Content="Portfolio" Margin="0,0,20,0" FontSize="14" FontFamily="Trebuchet MS" Visibility="Visible"/> <Button Height="Auto" Width="Auto" Content="Mdias" Margin="0,0,20,0" FontSize="14" FontFamily="Trebuchet MS" Visibility="Visible"/> <Button Height="Auto" Width="Auto" Content="Savoir faire" VerticalAlignment="Center" Margin="0,0,20,0" FontSize="14" FontFamily="Trebuchet MS" Visibility="Visible"/> <Button Height="Auto" Width="Auto" Content="Contact" Margin="0,0,0,0" FontSize="14" FontFamily="Trebuchet MS" Visibility="Visible"/> </controlsToolkit:WrapPanel> <StackPanel Height="Auto" HorizontalAlignment="Right" Margin="0,0,30,8" VerticalAlignment="Bottom" Orientation="Horizontal"> <TextBlock Text="A propos " TextWrapping="Wrap" Margin="0,0,30,0" FontFamily="Trebuchet MS" Foreground="#FF6C6C6C" FontWeight="Bold" FontSize="12" TextDecorations="Underline"/> <TextBlock Text="Qui sommes nous ? " TextWrapping="Wrap" Margin="0,0,30,0" FontFamily="Trebuchet MS" Foreground="#FF6C6C6C" FontWeight="Bold" FontSize="12"/> <TextBlock Text="Newsletter" TextWrapping="Wrap" FontFamily="Trebuchet MS" Foreground="#FF6C6C6C" FontWeight="Bold" FontSize="12"/> </StackPanel> <Button Height="45" Width="60" Content="Plein cran" Margin="0,10,8,0" HorizontalAlignment="Right" VerticalAlignment="Top" FontSize="10" Visibility="Visible"/> <Grid Margin="30,70,30,50" Background="#FF8C8C8C" Visibility="Collapsed"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Contenu des Pages" TextWrapping="Wrap" FontSize="36" FontFamily="./segoepr.ttf#Segoe Print" Foreground="#FFE2E0E0"

60

Partie I

Approches de Silverlight

FontWeight="Bold"/> </Grid> </Grid>

En trs peu de lignes, nous sommes parvenus crer une interface redimensionnable. Vous remarquez que la balise WrapPanel est prfixe de controlsToolkit. Cela signifie quil nest pas rfrenc dans lassembly System.Windows.dll par dfaut. En ralit, lorsque vous avez ajout ce composant dans lapplication, Blend a automatiquement rfrenc deux bibliothques issues du Silverlight ToolKit : System.Windows.Controls.dll et System.Windows.Controls.Toolkit.dll. Pour le vrifier, il suffit douvrir votre panneau projet et de dplier le rpertoire Reference. Blend a galement fait en XAML lquivalent dun using C# pour rfrencer lespace de noms controls Toolkit. Voici le code ajout dans le UserControl racine:
xmlns:controlsToolkit="clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls.Toolkit"

Lorsque vous concevrez et partagerez vos composants personnaliss, les personnes dsirant les utiliser agiront de la mme manire. Elles devront donc ajouter la bibliothque contenant vos composants en tant que nouvelle rfrence. Toutefois Blend fait ce travail pour vous dans la plupart des situations. Pour linstant, ce visuel est un peu brut, mais nous apprendrons rapidement crer des composants et des styles personnaliss.

4.2.3 Crer la grille centrale

Vous allez crer un conteneur Grid situ au centre de la grille principale. Il contiendra le contenu des pages de notre site plein cran. Slectionnez le conteneur LayoutRoot pour le dfinir comme contexte conteneur, puis dessinez une grille au centre.

4.2.3.1 Grer le redimensionnement

Affectez cette grille une hauteur et une largeur automatique avec un alignement tir (Stretch). Pour viter quelle ne recouvre les autres objets, elle doit possder des marges denviron 30 pixels gauche, 60 pixels en haut, 30 pixels droite et 30 pixels en bas (voir Figure4.12).
Figure4.12
Paramtrage de lalignement de la grille centrale.

Pour finir, crez un composant TextBlock centr et sans marges au sein de la grille avec dimensions en mode Auto.

Chapitre 4

Un site plein cran en 2 minutes

61

4.2.3.2 Modifier la couleur darrire-plan

Afin de rendre la grille plus visible lors de la compilation, dfinissez une couleur darrire-plan gris clair. Pour cela slectionnez, en haut du panneau des proprits, lattri-but Background prsent dans linspecteur de couleurs. Ensuite, cliquez sur la deuxime icne en partant de la gauche. Elle permet de spcifier une couleur unie (voir Figure4.13). Comme vous pouvez le remarquer, le code couleur hexadcimal est cod sur 4 octets soit #FFFFFFFF.
Figure4.13
Paramtrage de la couleur darrire-plan de la grille centrale.

NOTE INFO

Un octet reprsente 8 bits, cest pour cela que lon parle dimages 32 bits (48). Un bit possde une valeur 0 ou 1. Une valeur 8 bits reprsente donc une combinaison de 8chiffres possibles de 0 ou 1, soit 28 possibilits. En hexadcimal, cela se traduit par FF, ce qui donne en tout 256possibilits, de 0 255. Dans la plupart des logiciels de graphisme, la couche de transparence nest pas directement affiche dans le code hexadcimal mais elle est plutt affiche sur une chelle qui va de 0 100 % dopacit. Blend propose les deux affichages, ce qui vite les ambiguts. La couleur #00FF0000 ne sera donc pas visible car le premier couple de 0 indique quil ny a aucune opacit.

4.3 Le composant bouton

tudier les proprits du composant bouton permet de comprendre de nombreux principes propres au framework Silverlight car celles-ci sont communes de nombreux autres composants.

4.3.1 Dfinir un nom dexemplaire

Donner un nom dexemplaire aux objets permet dy accder facilement depuis le code logique. Une fois nomms, les objets deviennent des champs de la classe associe au UserControl. Ces champs sont dfinis par dfaut avec le modificateur daccs internal. Ainsi vous pourrez atteindre leurs mthodes, cibler leurs proprits dynamiquement ou encore couter les vnements quils diffusent (comme le clic de la souris). Slectionnez le bouton plein cran, celui-ci ne possde pour linstant pas de nom dinstance. Pour savoir si un composant possde un nom dexemplaire, il suffit de regarder dans larbre visuel. Si le composant est dcrit par son type entre crochet,

62

Partie I

Approches de Silverlight

cela signifie quil nest pas nomm. Vous pouvez galement regarder dans le panneau des proprits si son attribut Name, situ tout en haut, est dfini. Dfinir un nom dinstance est assez simple, vous pouvez soit double-cliquer sur loccurrence directement dans larbre visuel, soit insrer une chane de caractres dans sa proprit Name. Dfinissez Plein EcranBT comme nom dinstance. Par la suite, nous dfinirons un comportement propre ce bouton pour passer en mode plein cran (voir Figure4.14).
Figure4.14
Diffrence daffi chage entre objets nomms et anonymes.

4.3.2 Afficher une bulle dinformation au survol

On peut assigner un ToolTip tout lment visuel. Cette proprit est dite attache, elle nest pas dfinie sur lobjet, elle est fournie par la classe statique ToolTipService. Pour mieux comprendre ce principe, insrez la phrase suivante dans lattribut ToolTip: "Ce bouton permet de passer dun mode daffichage normal un mode daffichage plein cran". Ouvrez le mode ddition XAML. Voici ce que vous pouvez voir dans la balise Button :
ToolTipService.ToolTip="Ce bouton permet de passer dun mode daffichage normal un mode d'affichage plein cran"

Compilez votre application en appuyant sur le raccourci F5 (voir Figure4.15).

Figure4.15
Affichage de linfo bulle au survol du bouton.

Chapitre 4

Un site plein cran en 2 minutes

63

Comme vous pouvez le constater, la proprit ToolTip est fournie par ToolTipService:
ToolTipService.ToolTip=""

Pour finir, si vous souhaitez aligner le bouton Newsletter et le bouton plein cran verticalement gauche (voir Figure4.15), il suffit de dfinir une marge de 30 pixels droite pour le bouton PleinEcranBT.

4.3.3 Choisir un curseur de survol personnalis

Tout lment visuel possde par dfaut la proprit Cursor. Celle-ci permet de dfinir un curseur systme lors du survol dun objet. Selon le systme dexploitation sur lequel vous serez, vous aurez donc des curseurs avec des visuels diffrents. Cela peut vous permettre, par exemple, dindiquer lutilisateur un chargement de donnes en cours de progression. Il vous suffirait de spcifier un curseur dattente (Wait) pour une liste de donnes. Lors de la rception des donnes, vous pourriez ensuite redfinir un curseur standard. Cette proprit prend comme valeur une constante de la classe Cursors (au pluriel).

4.3.3.1 Dfinir un curseur en C#

Si vous ntes pas un familier de .Net, cette mthode est intressante car elle permet de redfinir lexcution le curseur dun objet. La classe statique Cursors liste tous les curseurs disponibles lors du survol dun objet graphique. Double-cliquez sur MainPage.xaml.cs et insrez le code en gras suivant :
public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); PleinEcranBT.Cursor = Cursors.Hand; } }

Assigner une valeur dans le XAML est quivalent affecter une valeur dans le constructeur. Pour rappel, le constructeur dune classe reprsente sa mthode dinitialisation, celle qui se lance linstanciation de lobjet. Lintrt daffecter les valeurs dans le code C# est de coupler lassignation de ces valeurs une logique mtier.

4.3.3.2 Dfinir un curseur avec Expression Blend

Expression Blend permet de simplifier le processus pour accomplir cette opration. Il vous suffit douvrir le panneau des proprits propre au bouton plein cran, puis de dfinir un curseur de type Hand (voir Figure4.16).

64

Partie I

Approches de Silverlight

Figure4.16
Affectation dun curseur de survol.

4.3.4 La proprit Content

La proprit Content est assez difficile cerner au premier coup dil. Jusqu maintenant, nous lavons utilise pour afficher un texte au sein des boutons, ce qui constitue son comportement par dfaut. Nous pourrions donc nous demander pourquoi cette proprit ne se nomme pas Label ou Title. Dans les faits, elle est capable de stocker beaucoup plus quune simple chane de caractres. Elle est type Object, ce type reprsente la classe situe au niveau le plus haut de larbre dhritage. Des classes aussi diffrentes que String, Panel ou Button Base hritent par consquent de la classe Object. La proprit Content permet donc dafficher nimporte quel objet visuel ou non. Si lobjet afficher nest pas de type visuel (UIElement), il est converti en chane de caractres de type string, et cette dernire est affiche. Toutefois, la proprit Content ne peut contenir quun seul enfant. Tous les objets hritant de la classe abstraite ContentControl hritent par dfaut de la proprit Content. Nous y reviendrons au Chapitre 5 ddi larbre visuel et logique.
NOTE INFO

Une classe abstraite est une classe dont on ne peut pas crer dinstances directement. Ces classes servent de modle et contiennent du code qui sera, soit surcharg par les classes qui en hritent, soit directement rutilis. Panel, ButtonBase, RangeBase sont des classes abstraites qui sont hrites par de nombreuses classes classes dont on peut crer des instances. Par exemple, Slider ou ProgressBar sont des classes que lon peut instancier et qui hritent des mthodes et des proprits de la classe abstraite RangeBase. En programmation oriente objet, une classe abstraite est lun des moyens mis en uvre en vue de la rutilisation. Toutefois, lhritage multiple ntant pas permis (contrairement C++), ce nest pas toujours le moyen le plus souple.

4.3.4.1 Crer licne de redimensionnement

Nous allons crer une icne de redimensionnement que nous placerons au sein du bouton plein cran. Cette icne est trs simple raliser, et elle va nous permettre dapprendre les oprations de base que Blend propose pour les tracs vectoriels (voir Figure4.17).

Chapitre 4

Un site plein cran en 2 minutes

65

Figure4.17
Icne de redimensionnement.

Dans un premier temps, faites un carr de 16 pixels de ct via la primitive Rectangle. Ensuite, lgrement en dessous, crez deux rectangles allongs de 6 pixels de hauteur par 14 de longueur. Alignez-les horizontalement cte cte en gardant un espace entre eux de 8 pixels (voir Figure4.18).
Figure4.18
Cration de licne, tape 1.

Une fois les rectangles raliss, slectionnez-les, puis ouvrez le menu Object et, au sein de longlet Combine, cliquez sur loption Unite. Vous obtenez une primitive de type Path. Les deux rectangles ont donc t convertis en trac vectoriel. Dans larbre visuel, en lieu et place des deux rectangles, vous remarquez quest apparu un objet [Path]. Slectionnez le carr, puis le nouveau trac, et cliquez-droit dessus. Grce au menu Align, centrez les deux objets horizontalement et verticalement. Ensuite, au sein du panneau des proprits, dans longlet des transformations RenderTransform, cliquez sur la deuxime icne en partant de la gauche. Vous ouvrez ainsi le panneau qui gre la rotation des objets. Longlet RenderTransform est commun tous les objets graphiques. Entrez la valeur de 45 degrs dans le champ Rotation (voir Figure4.19).
Figure4.19
Cration de licne, tape 2.

66

Partie I

Approches de Silverlight

Pour finir, dslectionnez tout, et dans lordre, cliquez sur le trac (les deux anciens rectangles), puis sur le carr, en maintenant la touche Maj enfonce. Ensuite, ouvrez le menu Object, puis Combine et slectionnez loption Substract. Le carr sest vu retirer tout lespace occup par le trac vectoriel (voir Figure4.16). Il ne nous reste plus qu insrer cette image dans notre bouton plein cran en laffectant sa proprit Content. Cela est assez simple faire: glissez licne au-dessus du bouton. Ds que le message vous indiquant la possibilit dimbriquer llment apparat, cliquez sur la touche Alt. Relchez le bouton de la souris. Cest fait, licne est intgre au bouton plein cran. Afin dobtenir un visuel lgant, vous pouvez redimensionner le bouton 18 pixels de hauteur et de largeur, puis slectionner le trac lintrieur et lui affecter des dimensions en mode Auto. Cette dernire modification lui permet de sadapter son conteneur (le bouton). Pour ma part, jai galement dfini des marges extrieures (Margin) en haut et droite de 8 pixels sur le bouton (voir Figure4.20).
Figure4.20
Application finale sans interactivit.

Finalement, on considre les objets bnficiant de la proprit Content comme des conteneurs enfant unique. Au sein de la plateforme Silverlight, de nombreux composants utilisateur en bnficient. Les primitives chappent assez logiquement cette particularit. Le site, sans interaction logique, est disponible en ouvrant pleinEcran_maquette.zip dans le chap4 des exemples du livre.

4.3.4.2 Affecter la proprit Content en C#

Vous laurez compris, au sein de Silverlight presque tous les objets sont imbricables les uns dans les autres. Mais comment faire en C# pour affecter la proprit Content avec un lment existant ou instanci dynamiquement? Pour rpondre cette question, nous allons affecter un composant Image la proprit Content du bouton Contact. Ce type de composant permet dafficher des images bitmap. Pour cela, nommez le bouton ContactBtn, puis tlchargez dans votre rpertoire projet limage IconeContact.png, prsente dans le dossier chap4 des fichiers dexemples. Ensuite, au sein de Blend, cliquez-droit sur le projet et slectionnez loption Add Existing Item Dans la fentre dexploration, slectionnez limage tlcharge et cliquez sur OK. Cette opration vous a permis dajouter limage en tant que ressource. Double-cliquez sur MainPage.xaml.cs. Voici le code C# comment permettant daffecter limage la proprit Content:
public MainPage() { InitializeComponent(); PleinEcranBT.Cursor = Cursors.Hand;

Chapitre 4

Un site plein cran en 2 minutes

67

//on coute l'vnement Loaded diffus lors du premier affichage //du UserControl soit this Loaded +=new RoutedEventHandler(MainPage_Loaded); } private void MainPage_Loaded(object sender, RoutedEventArgs e) { // 1 - ici on cre un composant Image Image myImage = new Image(); // 2 - puis on dfinit son mode de redimensionnement myImage.Stretch = Stretch.None; // 3 - on cre ensuite un objet Uri qui pointe vers // notre fichier image utiliser Uri adresseImage = new Uri("IconeContact.png",UriKind.Relative); // 4 - on cre un objet de type ImageBitmap en lui spcifiant // l'adresse relative que nous venons de dfinir BitmapImage bi = new BitmapImage( adresseImage ); //5 - on prcise au composant la source de l'image qu'il doit afficher myImage.Source = bi; //6 - pour finir, on ajoute le composant Image la // proprit Content de notre bouton Contact ContactBtn.Content = myImage; }

Vous remarquez que limage na pas t copie dans le rpertoire ClientBin. En ralit, elle a t compile au sein du fichier xap, plus exactement dans le fichier dll contenu dans le xap. Il faudra toujours utiliser un objet de type BitmapImage que lon affectera ensuite la proprit Source du composant Image. Finalement, la partie la plus simple est dattribuer le composant Image la proprit Content de notre bouton. Pour affecter un composant plus complexe, tel que Grid, cette proprit, nous aurions simplement pu crire ContactBtn.Content = new Grid();. Cette grille aurait pu, son tour, contenir des objets visuels, il ny a pas limite. Le code nest pas entirement expliqu car nous ferons rfrence au mode redimensionnement ainsi quau chargement dimage ultrieurement.

4.4 Ajouter de linteractivit

Nous allons, dans un premier temps, utiliser les comportements. Depuis sa version 3, Blend permet de coder dans les langages C# et Visual Basic. Comme Visual Studio, il propose une aide au code, IntelliSense, pour ces deux langages ainsi que pour le code dclaratif XAML. Nous utiliserons le C# pour passer du mode plein cran au mode daffichage normal.

4.4.1 Utiliser les comportements

Nous allons nous contenter de simuler le changement de page. chaque fois que nous cliquerons sur un bouton, le champ texte situ au milieu de la page sera mis jour. Nommez le champ texte contenu dans la grille au centre de notre site, TitrePage. Ensuite, ouvrez la bibliothque, puis longlet Behaviors. Celui-ci contient une liste de comportements. Glissez, puis dposez le comportement [ChangePropertyAction] sur le premier bouton du menu. Le comportement apparat ds lors dans larbre visuel (voir Figure4.21).

68

Partie I

Approches de Silverlight

Figure4.21
Ajout dun comportement au premier menu.

Nous allons maintenant configurer ce comportement pour quil change le champ texte TitrePage lors dun clic sur le bouton. Pour cela, aprs avoir slectionn le comportement dans larbre visuel, ouvrez le panneau des proprits. chaque fois que lutilisateur cliquera sur le premier menu, nous affecterons dynamiquement la proprit Text du champ TitrePage avec la valeur Nouveau ts (voir Figure4.22).
Figure4.22
Configuration du comportement.

Lvnement Click reprsente linteraction utilisateur qui dclenchera le changement de valeur. Le paramtre SourceName est optionnel, il indique quel objet est la source de lvnement diffus. Comme le comportement est cr sur le bouton, cest lui qui, par dfaut, diffusera lvnement Click. PropertyName permet de spcifier la proprit affecte lors du Click. Pour modifier le contenu textuel dun composant TextBlock, il faut affecter la proprit Text. Le champ Va lue reprsente la valeur de cette proprit. TargetName est lobjet cibl, dans notre cas cest le champ texte TitrePage. Licne avec les trois points, situe droite du champ de saisie ( ), vous permet de naviguer dans larbre visuel et logique afin de rechercher lobjet cible. Vous devez maintenant rpter cette opration pour les autres menus. Pour accomplir cette tche rapidement, vous pouvez copier-coller ce comportement sur les autres menus, puis changer le paramtre Value pour chaque menu.

Chapitre 4

Un site plein cran en 2 minutes

69

4.4.2 Mode plein cran

Le mode daffichage plein cran est trs pratique pour certains types dapplications, par exemple pour afficher de la vido ou un contenu ncessitant une grande rsolution. Cela permet lutilisateur de simmerger compltement dans lapplication en faisant abstraction des menus propres au navigateur. Pour des raisons de scurit, certaines possibilits du lecteur Silverlight sont dsactives dans ce mode. Pour passer dun affichage normal au mode plein cran, une seule ligne de code C# et un paramtrage XAML suffisent. La premire chose faire est de dfinir une mthode C# qui se dclenchera lorsque lvnement Click est diffus par le bouton plein cran. Pour cela, slectionnez ce bouton, puis ouvrez le panneau des proprits. Cliquez sur licne en forme dclair qui se trouve en haut droite de ce panneau. Vous venez douvrir la liste des vnements disponibles pour le bouton plein cran. Pour lvnement Click, dfinissez la mthode SetFullScreen (voir Figure4.23).
Figure4.23
Le panneau Events.

Voici le code du bouton gnr en XAML:

<Button x:Name="PleinEcranBT" Height="18" Width="18" Margin="0,8,8,0" HorizontalAlignment="Right" VerticalAlignment="Top" FontSize="10" Visibility="Visible" ToolTipService.ToolTip="Ce bouton permet de passer dun mode daffichage normal un mode d'affichage plein cran" BorderThickness="1,1,1,1" BorderBrush="#FFACACAC" Click="SetFullScreen" > <Path Stretch="Fill" Stroke="{x:Null}" Height="Auto" Width="Auto" UseLayoutRounding="False" Data="M4.242609,0 L16,0 L16,11.757387 L12.94972,8.7071075 L8.7070818,12.949746 L11.757336,16 L0,16 L0,4.2426682 L3.0502257,7.2928939 L7.2928643,3.0502553 z"> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFC1C1C1" Offset="0"/> <GradientStop Color="#FF9E9E9E" Offset="1"/> </LinearGradientBrush> </Path.Fill> </Path> </Button>

XAML permet de dclarer des mthodes dcoute sur les vnements diffuss. Ce nest pas toujours lidal car C# offre plus de souplesse de ce point de vue. Toutefois, dans une certaine mesure, cela donne aux designers interactifs une certaine autonomie. En phase finale de dveloppement, cest plutt au dveloppeur de grer la diffusion et lcoute des vnements. Les performances de lapplication sont en partie lies la notion de programmation vnementielle (voir Chapitre 8). Lorsque vous avez dfini la fonction dcoute, Blend a automatiquement cr une mthode corres-

70

Partie I

Approches de Silverlight

pondante dans le fichier MainPage.xaml.cs et a ouvert ce fichier. Supprimez la ligne commente et remplacez-la par la ligne en gras du code suivant:
private void SetFullScreen(object sender, RoutedEventArgs e) { App.Current.Host.Content.IsFullScreen = !App.Current.Host.Content.IsFullScreen; }

Le code prcdent est dclench lorsque lutilisateur clique sur le bouton. La ligne C# en gras est assez simple, la proprit boolenne IsFullScreen est affecte de loppos de sa valeur actuelle. Par exemple, si celle-ci est false (donc si lapplication nest pas en mode plein cran), alors elle passe en mode plein cran. Si elle est true, cest--dire en mode plein cran, alors on repasse en mode normal. Cette syntaxe nous a vit dutiliser une condition if, ainsi quun code fastidieux. Testez votre site, redimensionnez la fentre du navigateur et cliquez sur les menus. Le positionnement et laffichage des menus sadaptent automatiquement, mme au sein dune fentre de 640 par 480 pixels. Le WrapPanel gre le retour la ligne des menus si besoin. Pour finir, cliquez sur le bouton plein cran plusieurs fois pour vrifier que le code logique C# correspond au besoin.

4.4.3 Spcificits du mode plein cran

Pour des raisons de scurit, ds lors que vous tes passs en mode plein cran, un message vous lindiquant est apparu durant quelques secondes (voir Figure4.24).
Figure4.24
Message dindication plein cran.

Ce nest pas la seule contrainte de scurit impose par le mode plein cran. Ce mode ne peut pas tre dfini par dautres vnements que ceux dcoulant des interactions utilisateur. Ainsi, vous ne pouvez pas forcer le mode plein cran ds le dmarrage de lapplication par exemple. Dans ce cas, affecter la proprit IsFullScreen ne provoque aucun changement daffichage. Le mode plein cran limite galement lutilisation du clavier. Cela vite lutilisateur de saisir des donnes confidentielles. Ce mode daffichage peut en effet simuler nimporte quel type dinterface. Voici la liste des touches auxquelles vous pouvez accder:

le pav des flches directionnelles (Up, Down, Left et Right) ; la barre despace (Spacebar) ;

Chapitre 4

Un site plein cran en 2 minutes

71

la touche Tabulation (Tab) ; les touches Page Prcdente et Suivante (Page Up, Page Down) la touche Maison et Fin (Home, End) ; la touche Entre (Enter).

Plusieurs instances du plug-in Silverlight ne peuvent pas tre en mme temps en mode plein cran. En ralit, lorsquune application Silverlight plein cran perd le focus, celle-ci revient un mode daffichage normal. Par exemple, le simple fait, sur Windows de basculer, via la combinaison de touches Alt+Tab, dune application une autre fait perdre le focus lapplication Silverlight. Deux applications Silverlight ne peuvent donc pas tre en mode plein cran en mme temps car lune dentre elles a forcment perdu le focus utilisateur.
ATTENTION
La dernire particularit du mode daffichage plein cran est dempcher laffichage dapplications transparentes (via la proprit windowless). Larrire-plan de lapplication sera alors compltement opaque. Lorsque lutilisateur quittera ce mode, lapplication pourra nouveau bnficier de la transparence.

4.4.4 Dtecter le changement daffichage

Il peut tre trs utile dcouter lvnement FullScreenChanged de linstance du plug-in. Cet vnement est dclench lors du changement de mode. Le code suivant permet dafficher la rsolution de lcran utilisateur dans le champ TitrePage chaque changement de mode:
private void MainPage_Loaded(object sender, RoutedEventArgs e) { //cette ligne permet dcouter lvnement FullScreenChanged App.Current.Host.Content.FullScreenChanged += new System. EventHandler(Content_FullScreenChanged); } private void Content_FullScreenChanged(object sender, EventArgs e) { double l = App.Current.Host.Content.ActualWidth; double h = App.Current.Host.Content.ActualHeight; TitrePage.Text = "largeur :: " + l + " - hauteur :: " + h; }

Comme vous le constatez, les dimensions de lapplication ne sont pas rcupres grce aux proprits Width et Height car celles-ci ont t dfinies en mode Auto. Par contre, elles peuvent ltre via les proprits ActualWidth et ActualHeight. Ces proprits contiennent les valeurs absolues en pixels du conteneur racine UserControl. Le Chapitre8 fournit plus dinformation sur lcoute dvnements.

72

Partie I

Approches de Silverlight

NOTE INFO

Un autre vnement existe, Resized, mais il nest pas diffus lors du changement de mode daffichage. Il est diffus lors que lutilisateur redimensionne linstance du plug-in Silverlight. Il permet, par exemple, de repositionner des objets contenus de manire anime en fonction des nouvelles dimensions du plug-in.

4.5 Fichiers dploys

Les fichiers dployer sont tous contenus dans le projet AgencePortfolioSite. Pour dployer votre application, il vous suffit de copier le contenu de ce rpertoire sur votre serveur web via une connexion FTP. Au sein de votre rpertoire distant, vous devrez donc avoir les fichiers:

Default.html, la page HTML qui contient lapplication Silverlight. Silverlight.js, fichier JavaScript qui facilite et amliore lintgration de Silverlight. ClientBin/AgencePortfolio.xap, le fichier Silverlight compil.

Le site finalis est disponible dans larchive pleinEcran_interactif.zip du chap4 des exemples. Au prochain chapitre, nous tudierons les mcanismes lis larbre visuel et logique, ainsi que les mthodes permettant de manipuler la liste daffichage. Comme nous le verrons, Blend propose de nombreux outils permettant aux designers de faire des applications contextuelles capable dadapter laffichage aux besoins et contraintes des utilisateurs.

5
Larbre visuel et logique
Jusqu maintenant, nous avons construit des interfaces sans rellement nous proccuper de larchitecture ou de limbrication des composants. Dans ce chapitre, nous listerons les familles de contrles graphiques, de la simple forme primitive jusquau composant de donnes labor, en affinant notre analyse au fur et mesure de notre avance. Nous aurons ainsi une ide plus prcise de leur rle et de leurs capacits. Puis, nous utiliserons le projet prcdent, SiteAgencePortfolio, pour apprendre y manipuler, ajouter et modifier les enfants dun composant conteneur. Nous aborderons les mthodes et les moyens techniques offerts par Silverlight pour concevoir limbrication, larchitecture et le design visuel de manire complmentaire. cette fin, nous tudierons chaque cas aussi bien du point de vue dun designer interactif que de celui dun dveloppeur C#.

5.1 Composants visuels

Au sein de Silverlight, tous les objets visuels sont des composants et font donc rfrence une classe. La moindre primitive, qui semble pourtant anodine au premier abord, est un composant aux comportements tendus. Connatre les familles de composants est une chose naturelle pour un dveloppeur car cette notion est directement lie larchitecture de lapplication quil dveloppe. Pour un designer, cette dmarche est moins intuitive car il est moins soumis la technique quau rsultat visuel final. Toutefois, un designer interactif doit se faire force de proposition sur lexprience utilisateur et sur un ensemble de notions directement lies larchitecture de lapplication. Il est galement trs souvent conduit modifier des composants existants pour arriver ses fins. Il lui est donc ncessaire de connatre au moins partiellement les familles et types de contrles visuels dont il peut profiter. Tous les composants que nous allons maintenant tudier peuvent et feront sans doute partie de larbre visuel dune de vos applications Silverlight.

5.1.1 Familles de composants

De manire gnrale, on classe les composants par genre. Voici une classification possible des familles du point de vue dun graphiste ou dun ergonome. Toutefois, nous verrons que ces catgories ne sont pas si videntes.

74

Partie I

Approches de Silverlight

Les primitives vectorielles. Les formes de type Rectangle, Path, Line ou Ellipse sont considres comme des composants car elles font bien plus quafficher une forme ou un trac. Elles sont interactives et possdent des proprits complexes que nous allons tudier. Les conteneurs. Il sagit de composants enfants uniques ou multiples. Ils sont la base de tout visuel. Par exemple, le composant racine UserControl est considr comme le conteneur principal de lapplication. Nous verrons quil nest pas forcment facile de les rpertorier car de nombreux composants inattendus sont des conteneurs enfants uniques. Les contrles de gestion et daffichage de texte. Ils vous permettront dafficher du texte de diffrentes manires. Les composants de liste de donnes. Cette catgorie regroupe les listes (ListBox), les listes droulantes (ComboBox) et les grilles de donnes (DataGrid). Le composant AutoComplete Box en fait galement partie, il est mi-chemin entre le champ de saisie et la liste droulante. Les gestionnaires de mdias. Silverlight est une plateforme plurimdias avant tout : elle peut diffuser du son, des images et de la vido dans divers formats, grce trois composants essentiels : Image et MediaElement pour le son et la vido et MultiScale Image bas sur la technologie DeepZoom. Les composants dinterfaces utilisateur. Cest la catgorie fourre-tout dans laquelle vous trouverez les boutons (Button), les barres de dfilement (ScrollBar), les cases cocher (CheckBox) ou encore les barres de progression (ProgressBar) Pour rsumer, cest tout ce qui nest pas dfini dans les catgories cites prcdemment.

Rpertorier nest toutefois pas si simple. Pour le dmontrer, nous allons essayer de catgoriser certains des composants que nous avons utiliss dans le projet SiteAgencePortfolio. Prenons, par exemple, le cas de la grille (Grid). Elle peut-tre classe dans le genre conteneur. Cela est dautant plus visible quelle peut contenir plus dun objet enfant. Le WrapPanel ou le StackPanel sont eux aussi dans cette catgorie. La seule diffrence entre ces contrles concerne les contraintes dagencement subies par leurs objets enfants. Le bouton semble tre facile classer lui aussi car cest avant tout un objet assurant la gestion de comportement utilisateur. Il se retrouve donc dans la dernire catgorie des composants dinterface utilisateur. Toutefois, les boutons, comme de nombreux autres composants, possdent la facult de contenir un unique objet enfant. Deux des boutons que nous avons instancis sur la scne ont t utiliss de cette manire et possdent un enfant. Cest grce la proprit Content que nous avons pu imbriquer un enfant en leur sein. Cela fait-il deux des conteneurs ? Dans une certaine mesure, oui. Grce diverses techniques de programmation oriente objet, dont la composition et lhritage, ces boutons possdent naturellement cette capacit. Toutefois, leur rle premier nest pas dagencer des objets. Ils nont pas la vocation des conteneurs spcialiss. De la mme manire, le pied de page de notre site est constitu de menus reprsents par des TextBlock. Comme tous les objets visuels, ces TextBlock sont cliquables et rien ne nous empche de les utiliser comme des boutons sans interactions visuelles. De plus, chaque TextBlock contient du texte, soit via sa proprit Text, soit en imbriquant des balises de type Run. Lutilit principale du TextBlock est dafficher du texte, nous le classons donc dans la catgorie des gestionnaires de texte. La nature mme du XAML gnre ce type dambigit de par les relations familiales propres aux arborescences XML, mais facilite la construction dinterfaces riches et non rigides. Dans la section suivante de ce chapitre, nous allons essayer de comprendre pourquoi cette classification est simpliste en tudiant larbre dhritage des objets daffichage.

Chapitre 5

Larbre visuel et logique

75

5.1.2 Arbre dhritage des classes graphiques

5.1.2.1 De Object FrameworkElement
La notion dhritage remonte aux dbuts de la programmation oriente objet. Lorsquune classe hrite dune autre classe, elle rcupre les mthodes, les champs et les proprits de celle-ci. Ainsi, le code cr pour la classe mre, et chu aux classes filles, nest crit quune seule fois par le dveloppeur. Lhritage fait partie des nombreuses techniques de rutilisation de code existantes en POO. Comme de nombreuses autres plateformes, Silverlight est bas sur ce concept et les ingnieurs layant conu ont privilgi cette mthodologie. En tant que designer interactif ou dveloppeur, la connaissance de la bibliothque vous permettra de concevoir vos propres composants de manire optimise et perspicace en hritant de la classe adquate, qui naura ni trop ni pas assez de fonctionnalits. La classe mre de toutes les autres est Object. Elle possde plusieurs mthodes dont toutes les autres classes hritent et quelles utilisent. En voici une liste non exhaustive :

Equals. Cette mthode permet de comparer les valeurs contenues par deux rfrences dobjet. GetType. Renvoie le type de linstance qui linvoque, ce qui est trs pratique pour tudier et numrer lavance un type inconnu. MemberwiseClone. Renvoie une nouvelle rfrence clone partir de linstance qui linvoque. ReferenceEquals. Permet de comparer deux rfrences pour savoir si elles possdent la mme allocation mmoire. ToString. Lors de son appel, elle renvoie la valeur de linstance sous forme de chane de caractres. Il peut tre pratique doutrepasser la mthode fournie par dfaut pour gnrer une reprsentation personnalise si celle implmente ou hrite par dfaut ne correspond pas votre besoin.

Nous allons maintenant dtailler les classes graphiques qui hrite de Object. Dans le schma de la Figure5.1, en dessous de Object, vous trouvez DependencyObject. Cette classe est abstraite, cela signifie quelle ne peut pas tre directement instancie. Elle fournit les mcanismes de base propres aux objets graphiques de la plateforme Silverlight, dont le principe de DependencyPro perty, aux classes en hritant. Lanimation, limbrication et la notion de liaison (Binding) prennent appui sur ce principe. Cest l le cur de la puissance et de la souplesse de Silverlight. Hritant de DependencyObject, la classe abstraite UIElement dfinit les mcanismes daffichage propres aux objets graphiques. Elle possde les mthodes et proprits permettant de calculer la taille et le positionnement de son instance dans lespace, elle pose donc les bases du systme dagencement graphique. Cest dans cette classe que les proprits dopacit, de visibilit et de masque de dcoupe sont, par exemple, pourvues. Elle dfinit galement les vnements propres aux interactions utilisateurs : MouseEnter, Mouse Leave, MouseLeftButtonUp, KeyUp, etc. La classe abstraite FrameworkElement hrite son tour de UIElement et y ajoute le systme de disposition visuel de Silverlight: le SLS pour Silverlight Layout System. Le SLS ou systme dagencement de Silverlight repose sur les mthodes Arrange Override, MeasureOverride, sur les proprits Width, Height, MinWidth, MinHeight, MaxWidth, MaxHeight, ActualWidth, ActualHeight et, enfin, sur lvnement Size Changed. La classe FrameworkElement dfinit galement Loaded, diffus lorsquune nouvelle instance est initialise au sein de larbre visuel et logique de lapplication. Pour finir, bien que les bases de la liaison de donnes soient dfinies en majeure partie dans la classe Dependency Object, cest la classe FrameworkElement qui rsout laccs aux membres de classe en fournissant la proprit DataContext ncessaire la liaison de donnes. Finalement,

76

Partie I

Approches de Silverlight

FrameworkElement donne naissance la majeure partie des classes concrtes donc des composants visuels instanciables dans Silverlight.
Figure5.1
Arbre dhritage des classes dobjets graphiques.

Chapitre 5

Larbre visuel et logique

77

5.1.2.2 Formes primitives

Commenons par les primitives. Elles hritent toutes de la classe abstraite Shape, qui fournit les proprits ncessaires pour affecter le remplissage du fond et le contour dune forme primitive grce aux proprits Stroke et Fill. Shape permet galement de personnaliser la forme du contour, ses extrmits et ses sommets. Toutes les classes hritant de Shape sont verrouilles, il est donc impossible de les tendre via lhritage. La classe Path est particulire car le trac vectoriel est dfini par la proprit Data. Toutefois, les proprits Width et Height sont tout de mme utilises. Il faudra modifier la proprit Stretch de lobjet Path pour dterminer de quelle manire le trac remplit les dimensions imposes en largeur et en hauteur. Par dfaut, la proprit Strech a pour valeur Fill. Cela signifie que le trac stirera pour remplir compltement les dimensions du composant Path en largeur et en hauteur.

5.1.2.3 Conteneurs primitifs

Cette catgorie concerne une dizaine de classes qui, pour la majorit, sont fermes lextension et hritent en droite ligne de FrameworkElement. Elles ont pour but dafficher ou de mettre en valeur un contenu simple et spcifique. Ainsi, vous pouvez y trouver les composants suivants:

TextBlock. Affiche du texte. Glyph. Composant de gestion de texte bas niveau. Il permet dafficher et de mettre en forme nimporte quel caractre via ses proprits UnicodeString et Indices. Il offre plus doptions et plus de capacits que TextBlock, mais il est plus complexe mettre en uvre. Image. Afficher et charger des images aux formats JPEG et PNG. Le format PNG 32 bits est support, ce qui vous permettra dafficher des icnes transparentes par exemple. MediaElement. Contrle qui permet de lire de la vido et du son aux formats WMV, WMA, MP3, ainsi que les fichiers encods en H.264, ce qui tend ses capacits au format MP4 depuis la version 3 de Silverlight. Le logiciel Expression Encoder possde la capacit dencoder la vido dans tous ces formats. MultiScaleImage. Communment appel composant DeepZoom, il prend en paramtre un ensemble dimages quil chargera par la suite dynamiquement afin de proposer une exprience utilisateur spcifique. Pour vous familiariser avec ce comportement utilisateur, vous pouvez vous rendre sur le site http://www.laguna-coupe.com/. Popup et Border. Conteneurs enfant unique. Ils possdent tous les deux la proprit Child qui leur permet de contenir nimporte quel UIElement. Border peut tre considr comme un rectangle amlior car il possde des proprits de remplissage et daffichage avantageuses. Popup permet, quant lui, dafficher une information au-dessus des autres composants constituant larbre visuel et logique. Il ne sagit pourtant pas dune fentre modale. ItemsPresenter. Ce composant est assez particulier. Il est intgr au sein des composants de type ItemsControl et des classes en hritant. Il permet dtablir la position et lespace allous aux objets (ListBoxItem) dune ListBox par exemple. Il est donc troitement li la proprit ItemsSource dune ListBox. ContentPresenter. Gre le comportement de glisser-dposer et limbrication denfants uniques propres aux composants de type ContentControl. Il fait donc partie intgrante de leur structure.

78

Partie I

Approches de Silverlight

5.1.2.4 Composants personnalisables

Parmi les contrles que nous avons voqus, seuls quelques-uns implmentent la capacit dtre personnalisable tant au niveau de leur style que dans leur forme visuel. Si lon prend le cas du composant Image, celui-ci ne peut tre directement paramtr pour possder une bordure ou un fond. Pour cela, vous devrez utiliser la technique de composition propre la programmation oriente objet. Vous devrez donc crer un contrle, qui sappellera par exemple Visionneuse et qui en interne possdera un Border ainsi quun composant Image. Si vous souhaitez que votre contrle Visionneuse soit paramtrable par un designer interactif, vous devrez le faire hriter de la classe Control. Celle-ci hrite de Framework Element et apporte, en plus, tous les mcanismes inhrents la personnalisation du visuel dun composant. Tous les contrles que nous allons prsent voquer hritent de cette classe et sont donc personnalisables par un graphiste, un designer ou un intgrateur. Nous ne traiterons pas de tous les composants car ils sont nombreux. En voici une liste non exhaustive:

AutoCompleteBox est un composant mi-chemin entre un TextBox et une liste droulante (ComboBox). De ce fait, il hrite directement de Control et non de la classe ItemsControls ou Selector. Il sagit en fait dun champ de saisie qui propose une liste de choix au fur et mesure de la saisie utilisateur. RangeBase est une classe abstraite apportant les mcanismes, mthodes et proprits de base propres aux objets de dfilement ou de progression tels que Slider ou Progress Bar. Si vous souhaitez faire un Slider double curseur, vous devrez tendre cette classe. ItemsControl constitue le fondement des composants exposant une liste dobjets. Ceux-ci sont, la plupart du temps, relis un contexte de donnes ou directement fournis par le dveloppeur partir dun fichier XML, dune base de donnes ou dun service web. TextBox et PasswordBox sont deux composants permettant la saisie de donnes utilisateur. Alors que TextBlock nest reprsent visuellement que par le texte quil affiche, ceux-ci possdent en leur sein une bordure extrieure ainsi quun fond et de nombreuses proprits leur permettant dtre personnaliss. ContentControl est une classe abstraite apportant avec elle la capacit de contenir nimporte quel objet enfant. Cette capacit fait que, par dfaut, tous les objets en hritant possdent en interne un composant de type ContentPresenter et une proprit Content. Cette dernire est type Object. Lorsque vous glissez un trac vectoriel dans un bouton, vous affectez sa proprit Content, elle-mme lie au ContentPresenter situ au sein du bouton. Cette capacit en fait une classe trs puissante et trs souple dutilisation. De trs nombreux composants hritent de cette classe du fait de cette capacit. Il arrivera sans doute que vous ayez besoin dtendre cette classe pour vos propres besoins. ButtonBase hrite de ContentControl et apporte une gestion simplifie et directe du clic gauche de la souris. Les classes en dcoulant, comme Button, RadioButton ou CheckBox, constituent la majeure partie des contrles utilisateur au sein dune interface. Il est noter quil ny a pas de diffrence fonctionnelle entre un ToggleButton et une CheckBox. La seule diffrence entre ces deux composants est purement visuelle. ToolTip est un peu spcifique. Cette classe permet dafficher une bulle dinformation lorsque la souris survole un objet graphique. Toutefois, il est impossible dinstancier cette classe directement, vous devrez passer par la classe statique ToolTipService et ses mthodes SetTool

Chapitre 5

Larbre visuel et logique

79

Tip et GetToolTip. ToolTip hrite de ContentControl, elle peut donc afficher nimporte quel enfant de type UIElement ou hritant de UIElement. Pour ajouter une bulle dinformation un objet graphique, il vous suffira daffecter la proprit ToolTip (du mme nom que la classe, attention donc aux confusions) de cet objet. Cette proprit est attribue par dfaut aux objets de larbre visuel par la classe ToolTipService. ToolTip est une proprit dite attache, elle nest pas hrite mais attribue dynamiquement. Nous reviendrons sur cette notion tout au long de ce chapitre.

5.1.2.5 Conteneurs de mise en forme

Comme nous lavons vu lors des chapitres prcdents, les conteneurs enfants multiples facilitent la mise en page et la cration dapplications redimensionnables. Ce chapitre leur est ddi en grande partie, car ils constituent le fondement de toute application Silverlight. Ces conteneurs particuliers hritent de la classe abstraite Panel. De nombreuses notions et proprits propres ces composants sont bases sur les mmes concepts existant au sein du langage HTML. Lorsque vous imbriquez un contrle au sein dun conteneur, lobjet imbriqu reoit automatiquement des proprits dites attaches. Par exemple, lorsque nous avons utilis la grille dalignement au Chapitre2, les objets imbriqus en son sein ont automatiquement reu des proprits attribues par la grille (voir Figure5.2).
Figure5.2
Proprits hrites dynamiquement dun conteneur Grid.

Exemples de proprits attribues dynamiquement un objet par son conteneur de type Grid

Voici la liste des conteneurs de type Panel les plus courants:

Canvas. Cest le conteneur le moins contraignant et le plus simple. Il faut considrer le conteneur Canvas comme un point dans lespace partir duquel les objets qui y sont contenus sont positionn. Les enfants de ce conteneur peuvent donc avoir des coordonnes positives ou ngatives. Il peuvent donc tre en dehors du Canvas, mais sont affichs dans tous les cas. Le redimensionnement dun Canvas via ses proprits Width et Height naffecte en rien la position ou laffichage de ses enfants (voir Figure5.3). Les objets contenus au sein dun Canvas rcuprent automatiquement les proprits Top et Left attribues par celui-ci. Lorsquune proprit est de type attache, cela est visible dans le XAML. Les proprits Top et Left sont prfixes de Canvas, comme le montre le code XAML ci-dessous:
<Canvas Margin="75,110,161,80"> <Button Height="27" Width="72" Content="Button" Canvas.Left="45" Canvas.Top="29"/> </Canvas>

80

Partie I

Approches de Silverlight

Figure5.3
Composants imbriqus au sein dun Canvas.

DockPanel permet de docker des objets en leur attribuant un espace dans une des quatre directions. Les composants quil contient pourront tre docks gauche, en haut, droite ou en bas du DockPanel. Lordre dans lequel ceux-ci sont imbriqus, ainsi que les valeurs Width et Height de ces composants, dterminent lespace qui leur est allou et celui restant pour les autres composants du DockPanel. cette fin DockPanel bnficie de la proprit boolenne LastChildFill, qui permet de spcifier si le dernier lment imbriqu remplit ou non la totalit de lespace restant. Par dfaut cette proprit est true, ce qui nest pas le cas pour le DockPanel de la Figure 5.4 puisquil reste une place libre.

Figure5.4
Composants imbriqus au sein dun DockPanel.

Grid est un composant dagencement trs puissant et souple dutilisation. Il est assez complexe et permet de rsoudre la majorit des problmatiques dagencement. Cest pour cette raison que ce composant est directement plac au sein du UserControl racine lors de la cration dun projet Silverlight. Ce composant propose des options de mise en page trs semblables ce que vous pouvez raliser en HTML et CSS avec les balises de type DIV. Il sagit en ralit dune grille qui peut contenir un nombre indfini de colonnes et de lignes. Comme vous avez pu le voir dans les chapitres prcdents, il contraint automatiquement les objets qui sont imbriqus en son sein. StackPanel permet dempiler les objets les uns aprs les autres dans la direction horizontale ou verticale. Comme vous lavez constat, les options de marges influencent directement le positionnement des objets empils les uns par rapport aux autres. WrapPanel possde le mme comportement que StackPanel, mais renvoie la ligne automatiquement (voir Chapitre 4).

Chapitre 5

Larbre visuel et logique

81

Ces composants rpondent la grande majorit des besoins en matire dagencement. Toutefois, vous devrez tendre la classe Panel pour crer vos propres conteneurs personnaliss. Cette classe possde cette fin deux mthodes virtuelles, MeasureOverride et ArrangeOverride. Vous devrez donc les surcharger lorsque vous crerez vos propres conteneurs. Tous les composants hritant de Panel partagent la proprit Children. Cette dernire est un ensemble de contrles UIElement donnant accs aux enfants du conteneur, qui seront forcment accessibles car ce sont des objets graphiques. Ils sont donc au moins de type UIElement. Ce quon appelle larbre visuel et logique dune application est en fait lensemble des objets affichs ainsi que leurs relations enfant parent. Trois proprits permettent ainsi dimbriquer les lments: Content pour les contrles de type ContentControl, Children pour les conteneurs hritant de Panel et Child pour tous les autres conteneurs spcifiques, tels que ViewBox par exemple. Nous allons maintenant nous intresser la proprit Children et apprendre grer la liste daffichage dun conteneur de type Panel.

5.2 Principe dimbrication 5.2.1 Ordre dimbrication

La proprit Children de la classe Panels tant une collection, il est possible daccder ses enfants par un index numrique correspondant son ordre dimbrication. Lordre dimbrication influe sur deux ples: le design pur et la conception.

5.2.1.1 Du point de vue design

Le design est influenc car lordre dimbrication impacte directement lordre de superposition des objets les uns par rapport aux autres, de la mme manire que les calques sous Photoshop ou Expression Design (voir Figure5.5). Voici un exemple dagencement au sein dune grille. Comme vous le remarquez, rectangle0 est en dessous des autres dun point de vue visuel. Il est situ lindex 0 de la liste daffichage, toutefois au sein de Blend il est reprsent en haut de la liste daffichage dans larbre visuel. Blend affiche par dfaut larbre visuel en respectant lordre de cration XAML. Le code XAML ci-dessous correspond larbre visuel affich la Figure5.5:
<Grid x:Name="LayoutRoot" Background="#FFFFFFFF"> <Rectangle x:Name="rectangle0" Fill="#FF4B7145" Stroke="#FF000000" Height="108" HorizontalAlignment="Left" Margin="137,89,0,0" VerticalAlignment="Top" Width="118"/> <Rectangle x:Name="rectangle1" Fill="#FF5F9657" Stroke="#FF000000" Height="89" HorizontalAlignment="Left" Margin="198,146,0,0" VerticalAlignment="Top" Width="122"/> <Rectangle x:Name="rectangle2" Fill="#FF8CAC95" Stroke="#FF000000" Margin="255,201,249,191"/> <Rectangle x:Name="rectangle3" Fill="#FFB0BF9D" Stroke="#FF000000" Margin="306,239,218,167"/> <Rectangle x:Name="rectangle4" Fill="#FF8DDB86" Stroke="#FF000000" Height="67" HorizontalAlignment="Right" Margin="0,0,180,136" VerticalAlignment="Bottom" Width="95"/> </Grid>

82

Partie I

Approches de Silverlight

Lordre propos par dfaut est donc assez logique dun point de vue architecture. Larbre visuel peut au dpart vous induire en erreur si vous tes habitu dautres logiciels car lobjet le plus haut dans larbre est celui situ le plus larrire-plan par rapport aux autres. Vous pouvez tout moment changer ce mode de prsentation en cliquant sur le bouton situ en bas gauche de larbre visuel ( ). Toutefois, vous vous habituerez trs vite cette reprsentation car elle est cohrente avec lordre des balises XAML gnres.
Figure5.5
Ordre dimbrication et index daffichage.

5.2.1.2 Du point de vue conception

Dun point de vue conception, lordre dimbrication est dterminant car il impose souvent le positionnement des objets au sein des conteneurs. Lagencement des enfants au sein dun contrle StackPanel ou WrapPanel, par exemple, en est une consquence directe comme vous avez pu le constater au Chapitre4 (voir Figure5.4 et 5.6).
Figure5.6
Influence de lindex de lobjet enfant au sein dun WrapPanel.

Le bouton le plus droite au sein du WrapPanel est ContactBtn. Il sagit en fait du dernier bouton imbriqu et du seul qui est nomm. Il possde lindex 4. Lindex influence donc galement larchitecture mme de lapplication. Voici le code XAML reprsent la Figure5.6:
<controls:WrapPanel Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Top" Width="Auto" Margin="30,10,90,0" d:LayoutOverrides="Width"> <Button Height="Auto" Width="Auto" Content="Nouveauts" Margin="0,0,20,0" FontSize="14" FontFamily="Trebuchet MS" Visibility="Visible" /> <Button Height="Auto" Width="Auto" Content="Portfolio" Margin="0,0,20,0" FontSize="14" FontFamily="Trebuchet MS" Visibility="Visible"/> <Button Height="Auto" Width="Auto" Content="Mdias" Margin="0,0,20,0"

Chapitre 5

Larbre visuel et logique

83

FontSize="14" FontFamily="Trebuchet MS" Visibility="Visible"/> <Button Height="Auto" Width="Auto" Content="Savoir faire" VerticalAlignment="Stretch" Margin="0,0,20,0" FontSize="14" FontFamily="Trebuchet MS" Visibility="Visible"/> <Button x:Name="ContactBtn" Height="Auto" Width="Auto" Content="Contact" Margin="0,0,0,0" FontSize="14" FontFamily="Trebuchet MS" Visibility="Visible"/> </controls:WrapPanel>

NOTE INFO

Nommer les objets est dune aide prcieuse dans de nombreux cas. Mme si ce nest pas toujours obligatoire dun point de vue technique, cela permet aux dveloppeurs et aux designers interactifs de communiquer simplement et dviter les malentendus. Ces deux profils sont concerns par le nommage. Donner un nom un objet consiste dfinir sa fonctionnalit et par consquent une partie de larchitecture. Le dveloppeur est en gnral trs concern par cette phase, il doit donc veiller ce que les intgrateurs ne perdent pas de temps sur la comprhension de larbre visuel.

Parfois, le dveloppeur voudra manipuler un objet non nomm ou rorganiser une interface en arrangeant la liste daffichage. Le graphiste, quant lui, souhaitera tout de mme grer la superposition des lments les uns entre les autres sans soccuper directement de larchitecture ou de la conception technique. Nous allons aborder les mthodes et techniques qui rpondent ces problmatiques en nous efforant de garder un flux de production souple et en prservant les rles de chacun.

5.2.2 Accder aux objets de larbre visuel

5.2.2.1 Accder un composant nomm
Un objet nomm est facile cibler car lorsquun objet est nomm, il devient un champ priv de la classe de lapplication. Il faut en effet garder lesprit que tout ce que nous produisons au sein du fichier XAML est en ralit cr au sein de la classe partielle. Un dveloppeur na qu crire le nom dun objet dclar dans le XAML suivi dun point pour accder tous ses membres. Nous pourrions de cette manire facilement accder au bouton ContactBtn (voir Figure5.7).
Figure5.7
Accder aux objets nomms.

84

Partie I

Approches de Silverlight

Toutefois, vous naurez pas toujours la possibilit de connatre le nom dun objet lavance ou encore de nommer tous les objets dans Blend. Nous allons donc apprendre accder un objet anonyme.

5.2.2.2 Accder un composant anonyme

Ouvrez le projet SiteAgencePortfolio cr lors du prcdent chapitre. Pour atteindre un objet prsent au sein de la liste daffichage dun conteneur, il suffit de cibler son index. Nous allons changer le texte du bouton anonyme reprsentant les nouveauts par le texte Accueil en procdant par tape. tudions larbre visuel et logique de notre projet (voir Figure5.8). Le bouton des nouveauts est situ lindex 0 du WrapPanel. Pour latteindre, nous devrons utiliser la proprit Children du WrapPanel. Cependant, le WrapPanel nest lui-mme pas nomm. Nous devrons donc galement utiliser lindex enfant de celui-ci au sein du conteneur nomm LayoutRoot.
Figure5.8
Arbre visuel du projet SiteAgencePortfolio.

Voici comment accder lindex 0 via la proprit Children dun composant de type Panel:
MonConteneur.Children[0]

Pour accder lobjet WrapPanel, qui est le premier enfant de LayoutRoot, on crira donc:
LayoutRoot.Children[0];

Pour des raisons de conception, Children est une collection dUIElement. Les enfants dun conteneur peuvent tre de type diffrent les uns en les autres, mais ils hritent tous de la classe UIElement mre de toutes les classes daffichage. Elle semble donc idale pour reprsenter le type gnral des objets stocks dans la proprit Children. Nous naurons donc pas accs dans un premier temps aux membres de la classe WrapPanel mais plutt aux membres de la classe UIE lement. Nous devrons transtyper la rfrence rcupre en WrapPanel, puis stocker sa valeur au sein dune rfrence de mme type:
WrapPanel menuHaut = LayoutRoot.Children[0] as WrapPanel;

Vous pouvez tous moments rcuprer le type dun objet via la mthode hrite de Object, Get Type(). Voici comment faire:

Chapitre 5

Larbre visuel et logique

85

LayoutRoot.Children[0].GetType();

La mthode GetType() renvoie un objet Type. Cet objet fournit toutes les informations que vous souhaitez obtenir sur la classe relle de lobjet. Vous pouvez rcuprer le nom de la classe via sa proprit Name. Il suffit ensuite de lafficher dans le champ texte au centre du site, de cette manire:
WrapPanel menuHaut = LayoutRoot.Children[0] as WrapPanel; if (menuHaut != null) { string nomType = menuHaut.GetType().Name; TitrePage.Text = nomType; }

Lorsque vous compilez, vous pouvez constater quil sagit bien dun WrapPanel. Si vous souhaitez vrifier quil contient les menus, il faut regarder le nombre de ses enfants grce la proprit Count de Children:
WrapPanel menuHaut = LayoutRoot.Children[0] as WrapPanel; if (menuHaut != null) { string nomType = menuHaut.GetType().Name; TitrePage.Text = nomType+" - Nb enfants : "+ menuHaut.Children.Count; }

Pour modifier le champ texte du premier bouton, nous devons le cibler via Children, accder sa proprit Content et affecter celle-ci:
Button un = menuHaut.Children[0] as Button; un.Content = "Accueil";

5.2.2.3 Grer les erreurs d'accs

Que se passe-t-il lorsque nous essayons daccder un index indfini de la liste daffichage ? Pour le savoir, il vous suffit dessayer daccder lindex 5 de la liste denfants du WrapPanel. Celuici ne possdant que 5 enfants, le dernier index utilis est 4. Pour gnrer cette erreur, il faut donc crire:
Button Un = menuHaut.Children[5] as Button;

Compilez via le raccourci F5. Aucune exception nest leve en apparence, mais si vous regardez en bas gauche du navigateur Internet Explorer, vous apercevrez une icne jaune . Celle-ci vous indique une erreur au sein de lapplication Silverlight. Double-cliquez dessus pour faire apparatre le dtail de lerreur rencontre (voir Figure5.9). En ralit, Blend ne possde pas de vrai dbogueur comme Visual Studio. Les erreurs sont leves, mais ninterrompent pas lexcution de lapplication. Il nest donc pas possible de poser des points darrt, dafficher les valeurs des variables durant lexcution ou dafficher directement la ligne de code fautive ou lexception leve. Le designer qui ne remarquerait pas licne davertissement aurait la fausse impression quil sagit dun chec en silence. De plus, ainsi que vous pouvez le constater la Figure5.9, le numro de ligne spcifi dans le panneau derreur dans le navigateur nest pas vraiment le bon. Cependant, un designer interactif trouvera cela dj trs utile car lerreur renvoye est la bonne:

86

Partie I

Approches de Silverlight

Largument spcifi ntait pas dans les limites de la plage de valeurs valide. nom du paramtre : index

Figure5.9
Erreur leve au sein du navigateur.

Visual Studio offre un environnement plus confortable pour dboguer une application. Nous allons compiler la solution dans ce logiciel. Cliquez-droit sur la solution dans le panneau Projet et slectionnez Ouvrir dans Visual Studio. Une fois le projet ouvert sous Visual Studio, recompilez-le via le raccourci F5. Ds le chargement de lapplication, le dbogueur lve une exception et affiche la ligne de code posant problme (voir Figure5.10).
Figure5.10
Erreur leve par le dbogueur.

Il est ainsi plus rapide et pratique de trouver do vient notre erreur car si le message est le mme, la ligne de code fautive est correctement localise.
NOTE INFO

Lun des avantages majeurs du dbogueur est de pouvoir rcuprer les valeurs des rfrences durant lexcution de lapplication. Il suffit pour cela de positionner votre souris au-dessus dune variable lorsquune erreur est leve ou lorsque vous avez pos un point darrt. Pour poser un point darrt, cliquez gauche de la ligne sur laquelle vous le souhaitez dans lditeur de code. Vous pouvez galement cliquer droit sur la ligne o vous dsirez que lexcution soit stoppe, puis slectionner Breakpoint (Point darrt) et Insert Breakpoint (Ajouter un point darrt) voir Figure5.11.

Chapitre 5

Larbre visuel et logique

87

Figure5.11
Insrer un point darrt.

Examinons maintenant la valeur de linstance du bouton Un lexcution. Pour cela, positionnez votre souris au-dessus de sa rfrence (voir Figure5.12).
Figure5.12
Valeur de la rfrence Un de type Button.

La valeur du bouton Un est null. Lexpression droite du signe gal ne renvoie donc aucune valeur. Positionnez votre souris au-dessus de la proprit Children pour explorer son contenu (voir Figure5.13).
Figure5.13
Exploration de la proprit Children dun conteneur grce au dbogueur.

Nous nous apercevons que cette proprit ne possde que 5 lments, indexs de 0 4. Cibler lindex 5 revient cibler un sixime lment indfini dans cette collection. Nous mettons donc facilement en vidence lerreur leve. Parfois, pour diverses raisons, par exemple pour montrer lapplication une tierce personne, vous ne souhaiterez pas lancer le dbogueur de Visual Studio. Il suffit dans ce cas dutiliser le raccourci Ctrl+F5. Celui-ci permet une compilation quivalente celle fournie par Blend en ne lanant pas le dbogueur.

5.2.3 Parcourir la liste des enfants

Nous allons maintenant apprendre parcourir la liste des enfants grce aux boucles. Il peut tre trs pratique de parcourir la collection denfants Children pour affecter ou rcuprer les proprits de ceux-ci. Nous allons procder par tapes. Tout dabord, nous allons crer une mthode de parcours dans la classe MainPageMainPage. Celle-ci aura pour but de crer une reprsentation de larbre visuel sous forme de chane de caractres. Pour visualiser la chane de caractres, il vous faudra crer un composant TextBlock qui nous affecterons la proprit Text. La mthode doit

88

Partie I

Approches de Silverlight

recevoir comme paramtre le conteneur de type Panel que nous souhaitons parcourir ainsi que la valeur de tabulation. En voici une bauche:
private void ParcoursArbreVisuel ( Panel container, string tab ) { }

Voyons comment lcrire avec une boucle for:

private void ParcoursArbreVisuel ( Panel container, string tab ) { // Les deux critures suivantes sont utilisables //int Lng = container.Children.Count; var Lng = container.Children.Count; for (var i=0; i < Lng; i++) { } }

Crez maintenant le TextBlock nimporte o dans la grille principale LayoutRoot et nommez-le ArbreTxt. Ce champ texte va nous permettre dafficher notre arbre visuel. Chaque fois que nous trouverons un enfant, nous concatnerons le nom de sa classe suivi de son nom dinstance si celleci est nomme:
private void ParcoursArbreVisuel ( Panel container, string tab ) { // Les deux critures suivantes sont utilisables //int Lng = container.Children.Count; var Lng = container.Children.Count; for (var i=0; i < Lng; i++) { //on rcupre le nom de la classe de chaque enfant ArbreTxt.Text += tab + container.Children[i].GetType().Name; // On rcupre le nom de l'instance rcupre string nom = (container.Children[i] as FrameworkElement ).Name; // si l'instance est nomme if (!String.IsNullOrEmpty(nom)) { ArbreTxt.Text += " - " + nom; } //On va la ligne grce au caractre d'chappement n ArbreTxt.Text += "\n";

} }

Loprateur + au dbut de la boucle permet de concatner des chanes de caractres. Concatner une chane revient gnrer une chane en juxtaposant plusieurs autres chane de caractres les unes aux autres. La proprit Name est utilise deux fois dans la boucle: la premire fois pour rcuprer le nom de lobjet Type retourn, la seconde fois pour retrouver le nom de linstance.

Chapitre 5

Larbre visuel et logique

89

Toutefois, la proprit Name nest pas hrite de UI Element, mais de FrameworkElement. Nous sommes donc oblig de transtyper (convertir le type) UIElement en FrameworkElement. Le motcl as permet de considrer un type en lieu et place dun autre type. Pour finir, grce au caractre dchappement \, le caractre n est considr comme un retour la ligne. Cette mthode nous permet de lister tous les objets situs dans LayoutRoot. Il nous faut maintenant lappeler au sein de la mthode MainPage_Loaded:
private void MainPage_Loaded(object sender, RoutedEventArgs e) { ArbreTxt.Text = LayoutRoot.GetType().Name+" - "+LayoutRoot.Name+"\n"; //appel de la mthode ParcoursArbreVisuel( LayoutRoot, "\t" ); }

Lors de cet appel, nous listons le premier niveau dimbrication, soit tous les objets prsents dans LayoutRoot. Pour cette raison, nous passons la chane de caractres "\t" correspondant une seule tabulation (voir Figure5.14).
Figure5.14
Affichage des enfants de LayoutRoot.

Nous navons affich que le premier niveau dimbrication, mais il serait intressant de parcourir larbre visuel dans sa totalit. Pour cela, nous pouvons transformer notre mthode en mthode rcursive. Une mthode rcursive est une fonction capable de sappeler ellemme tant quune condition est ralise. Notre condition est simple : chaque fois que nous listons un enfant, nous pouvons vrifier sil est de type Panel. Dans ce cas il peut donc contenir des objets enfants. Vrifier le type Panel est pratique : que lenfant soit un WrapPanel, un Stack Panel ou un DockPanel importe peu car notre mthode sera r-invoque dans tous ces cas. Voici la mthode de parcours amliore:
private void ParcoursArbreVisuel ( Panel container, string tab ) { // Les deux critures suivantes sont utilisables //int Lng = container.Children.Count; var Lng = container.Children.Count; for (var i=0; i < Lng; i++) { //on rcupre le nom de la classe de chaque enfant ArbreTxt.Text += tab + container.Children[i].GetType().Name;

90

Partie I

Approches de Silverlight

// On rcupre le nom de l'instance rcupre string nom = (container.Children[i] as FrameworkElement ).Name; // si l'instance est nomme if (!String.IsNullOrEmpty(nom)) { ArbreTxt.Text += " - " + nom; } // On saute une ligne grce au caractre d'chappement n ArbreTxt.Text += "\n"; // Si l'enfant que l'on vient de lister est aussi un Panel // alors on appelle nouveau la mthode de parcours Panel panel = container.Children[i] as Panel; if (panel != null) { ParcoursArbreVisuel( panel,"\t\t"); } } }

Vous devriez obtenir un rsultat proche de la Figure5.15.

Figure5.15
Affichage rcursif.

La boucle for nest pas la plus adquate car Children de type UIElementCollection implmente linterface IEnumerable. Celle-ci dcrit les mthodes permettant le parcours de la collection avec une boucle foreach. Le code est bien plus simple crire dans ce cas, le voici mis jour:
private void ParcoursArbreVisuel ( Panel container, string tab ) { foreach (UIElement enfant in container.Children) { ArbreTxt.Text += tab + enfant.GetType().Name; string nom = (enfant as FrameworkElement ).Name; if (!String.IsNullOrEmpty(nom)) { ArbreTxt.Text += " - " + nom; }

Chapitre 5

Larbre visuel et logique

91

ArbreTxt.Text += "\n"; Panel panel = enfant as Panel; if (panel != null) { ParcoursArbreVisuel( panel,"\t\t"); } } }

Nous allons en rester l pour le parcours de larbre visuel. Toutefois, trois proprits permettent limbrication, comme nous lavons dit au dbut de ce chapitre : Children, Child et Content. Pour parcourir la totalit de larbre visuel de notre application, nous devrions galement tester si lenfant est de type ContentControl ou si celui-ci possde la proprit Child. Derrire ces proprits peut se cacher une imbrication labore et complexe. Vous pouvez tlcharger lexercice pleinEcran_parcours.zip dans le dossier chap5 des exemples.

5.3 Ajouter des enfants la liste daffichage

Ajouter des enfants en cours dexcution est une opration courante. Cela nous permet de faire vivre et voluer lapplication. Les applications dynamiques apportent une exprience utilisateur trs diffrente car elles voluent lors de leur utilisation, dans des directions quelquefois surprenantes. Cela ajoute une profondeur aux applications et les rend plus attractives, donnant envie den explorer tous les recoins. Nous allons maintenant apprendre raliser ces oprations en ajoutant des objets la vole, puis en reconstruisant la totalit de notre menu de manire dynamique.

5.3.1 Mcanisme dinstanciation dobjets graphiques

Cela peut paratre trange, mais lorsque le graphiste cre des objets graphiques au sein de Expression Blend, il accomplit en ralit deux choses diffrentes. Il commence par instancier lobjet en le dcrivant au sein dune balise:
<Button Height="Auto" Width="Auto" Content="Portfolio" Margin="0,0,20,0" FontSize="14" FontFamily="Trebuchet MS" Visibility="Visible" />

Toutefois, cela ne suffit pas, le bouton ne safficherait pas sil ne faisait pas partie de larbre visuel. Il doit donc appartenir lun des objets de cet arbre. Un conteneur de type Grid fait laffaire. La deuxime tape ralise sans rellement y prter attention est donc la cration du lien de parent avec son conteneur:
<Grid x:Name="LayoutRoot" Background="#FFFFFFFF" Margin="0,0,0,0" > <Button Height="Auto" Width="Auto" Content="Portfolio" /> </Grid>

Au sein de Blend, cette tape est naturelle puisque lon ne peut crer des objets quau sein de larbre visuel (voir Figure5.16).

92

Partie I

Approches de Silverlight

Figure5.16
Mcanisme dajout dobjets graphiques larbre visuel.

Instance de App

tape 2 : Affectation du bouton un objet parent prsent dans l'arbre visuel Hello Button

Proprit RootVisual

UserControl racine de MainControl.xaml

Grille principale LayoutRoot

tape 1 : Instanciation du bouton Hello Button WrapPanel

Rectangle

TextBlock

ATTENTION

Linstance du plug-in Silverlight possde la proprit RootVisual hrite de la classe Appli cation. Celle-ci renvoie une instance du UserControl racine du fichier MainPage.xaml. Tout objet appartenant directement ou indirectement la proprit RootVisual fait partie de larbre visuel de lapplication. Lors de linitialisation de lapplication, cette proprit est en fait affecte au sein du fichier App.xaml.cs, dans la classe App :
private void OnStartup(object sender, StartupEventArgs e) { // Chargement de larborescence contenue dans MainPage.xaml this.RootVisual = new MainPage(); }

Cette proprit est galement accessible en C# partir de nimporte quel fichier XAML. Vous pouvez latteindre en ciblant la proprit statique Current de la classe App:
App.Current.RootVisual

La proprit statique Current de la classe App renvoie linstance actuelle de lapplication.

5.3.2 Ajouter et insrer des objets dans larbre

Ajoutons un nouveau menu dans la barre. Nous allons raliser la premire tape consistant instancier un bouton via C#:

Chapitre 5

Larbre visuel et logique

93

WrapPanel menuHaut = LayoutRoot.Children[0] as WrapPanel; // on instancie le bouton Button clientMenu = new Button(); // on lui spcifie de nouvelles marges clientMenu.Margin = new Thickness(20,0,0,0); // on lui affecte une nouvelle police clientMenu.FontFamily = new FontFamily("Trebuchet MS"); // on dfinit une taille de police clientMenu.FontSize = 14; // on affecte sa proprit Content pour afficher une chane de caractres clientMenu.Content = "Nos Clients";

Dans tous les cas nous utiliserons le mot-cl new. Cela semble trange, mais la proprit Margin est de type Thickness. Cest une manire dconomiser le poids du lecteur Silverlight car la valeur est structure de la mme manire quun objet dpaisseur, de type Thickness. Le premier chiffre indique la marge gauche, puis le deuxime la marge haute, et ainsi de suite dans le sens des aiguilles dune montre. Comme nous pouvons le voir, affecter une police est assez simple. La police Trebuchet MS possde lavantage dtre embarque par dfaut dans le lecteur Silverlight. Il est donc facile de laffecter au bouton. Vous remarquez que nous navons spcifi aucune largeur ou hauteur. Lorsque vous ne prcisez pas ces valeurs, celles-ci sont par dfaut en mode Auto. Pour finir, il suffit dafficher un texte au sein de notre bouton. La seconde phase est plus facile, nous allons utiliser la mthode Add:
// on ajoute ce bouton la liste des enfants du WrapPanel menuHaut.Children.Add(ClientMenu);

La mthode Add najoute pas les objets au hasard, en fait elle ajoute lobjet la fin de la liste denfants, donc un nouvel index. Notre menu contenait 5 lments indexs de 0 4. la fin du chargement de lapplication, le menu contient dsormais 6 lments. Le sixime lment ajout dynamiquement est situ au dernier et nouvel index, soit 5. Cela est particulirement facile constater dans un conteneur de type WrapPanel car lindex affecte directement lordre des objets imbriqus (voir Figure5.17).
Figure5.17
Ajout dune rubrique Button avec la mthode Add.

La mthode Add nappartient pas lobjet lui-mme mais sa proprit de type UI ElementCollection. Lorsque vous voudrez manipuler les enfants ou la liste elle-mme, il faudra utiliser les membres (proprits et mthodes) de celle-ci. Cette opration est finalement assez facile, toutefois, notre nouveau menu nest pas vraiment sa place. Il serait plus judicieux de le placer entre les menus Savoir faire et Contact. Cela est facile raliser grce la mthode Insert:
menuHaut.Children.Insert(4,ClientMenu);

Il faut commencer par prciser lindex auquel lobjet sera positionn, puis le composant graphique insrer. Modifiez si besoin la proprit Margin pour une mise en forme adapte (voir Figure5.18).

94

Partie I

Approches de Silverlight

Figure5.18
Insertion dune rubrique Button avec la mthode Insert.

Lorsque vous accomplissez une telle opration, vous dcalez de 1 chaque objet imbriqu suivant lindex dinsertion au sein de la liste denfants.

5.3.3 Erreurs leves

Plusieurs erreurs peuvent tre leves lors de lappel de ces mthodes. La premire arrive lorsque vous passez un index aberrant la mthode Insert. Lorsque vous spcifiez un index dpassant le nombre denfants, soit Children.Count, le compilateur lve une erreur correspondant celle leve lors dune tentative daccs un index indfini (voir section "Grer les erreurs daccs", plus haut dans ce chapitre). Il est en effet illogique dinsrer un objet un index suprieur au nombre denfants. Si vous souhaitez connatre lindex du dernier enfant de la collection, il suffit de retrancher 1 Children.Count. Insrer un enfant lindex Children.Count revient utiliser la mthode Add. La deuxime erreur est leve si vous essayez de dplacer un objet graphique dj prsent dans la liste denfants dun autre conteneur. Ce cas est plus pernicieux. Lune des rgles daffichage est quune rfrence dobjet graphique ne peut tre situe en mme temps dans deux conteneurs diffrents. Lorsque vous attribuez un objet prsent dans larbre visuel un autre conteneur, une exception est leve. Elle vous indique que lobjet est dj prsent ailleurs (voir Figure5.19). Pour vous en convaincre, il suffit dajouter au StackPanel, notre pied de page, un lment prsent dans le WrapPanel, notre menu du haut de page:
WrapPanel menuHaut = LayoutRoot.Children[0] as WrapPanel; StackPanel footer = LayoutRoot.Children[1] as StackPanel; Footer.Children.Add(menuHaut.Children[0] );

Figure5.19
Exception leve lors de limbrication dun lment appartenant dj un autre conteneur.

Pour rsoudre cette problmatique, vous devrez supprimer lenfant de la liste de son ancien conteneur, puis invoquer la mthode Add ou Insert. Pour savoir si un enfant est contenu au sein dune liste de type UIElementCollection (Children est de ce type), il suffit dutiliser les mthode Contains ou IndexOf:

Chapitre 5

Larbre visuel et logique

95

menuHaut.Children.Contains(Toto); // renvoie false car Toto n'existe pas menuHaut.Children.Contains(ContactBtn); // renvoie true car Contact est bien un enfant de menuHaut menuHaut.Children.IndexOf(Titi); // renvoie -1 car Titi n'est pas prsent dans la liste des enfants menuHaut.Children.IndexOf (ContactBtn); // renvoie 4 car ContactBtn est le 5ime lments contenu

Pour de plus amples informations sur la suppression dobjets graphiques, vous pouvez consulter la section 5.4.

5.3.4 Crer un menu dynamique

Nous allons maintenant recrer le menu principal de toutes pices. Pour cela, depuis la fentre de design, supprimons tous les boutons de menu du WrapPanel. Dans la mthode MainPage_Loaded, il nous faut galement supprimer toutes les rfrences vers ces menus sauf la ligne permettant de rcuprer une rfrence du WrapPanel:
WrapPanel menuHaut = LayoutRoot.Children[0] as WrapPanel;

Pour crer un menu lexcution, il est plus pratique de crer un tableau de chane de caractres. Ensuite, nous pourrons le parcourir. chaque fois que nous trouverons un lment contenu dans le tableau, nous instancierons dynamiquement un nouveau bouton dans le WrapPanel. Le tableau doit tre un champ priv de la classe MainPage, ainsi il sera accessible et modifiable partir de nimporte quelle mthode de la classe. Voici comment le dclarer:
public partial class MainPage : UserControl { string [] tabMenus = new string[]{"Accueil", "Portfolio", "Medias", "Savoir faire","Contact"}; public MainPage() { InitializeComponent(); Loaded +=new RoutedEventHandler(MainPage_Loaded); } private void MainPage_Loaded(object sender, RoutedEventArgs e) { PleinEcranBT.Cursor = Cursors.Hand; WrapPanel menuHaut = LayoutRoot.Children[0] as WrapPanel; } }

Ensuite, nous pouvons dfinir la nouvelle mthode CreateMenus sur la classe MainPage et lappeler lors du chargement de lapplication. La variable MenuHaut est une variable locale la mthode MainPage_Loaded. Cela signifie que la variable nexiste et nest accessible que dans cette mthode. Pourtant, nous en avons besoin au sein de la mthode Create Menus pour ajouter des lments graphiques sa liste denfants. ce stade, vous avez trois choix : soit vous crez un champ MenuHaut dans votre classe, puis vous laffectez au sein de la mthode MainPage_Loaded, soit vous passez MenuHaut comme paramtre de la mthode CreateMenus ou alors vous faites

96

Partie I

Approches de Silverlight

les deux. Il peut tre pratique de crer les boutons de menu dans un autre conteneur si besoin. La mthode CreateMenus mrite donc un paramtre. Toutefois, nous pourrions galement vouloir supprimer tous les objets contenus au sein du WrapPanel dans une autre fonction. Cela peut donc tre utile den stocker une rfrence en tant que membre de la classe MainPage. Voici comment procder :
public partial class MainPage : UserControl { string [] tabMenus = new string[5]{"Accueil", "Portfolio", "Medias", "Savoir faire","Contact"}; // on dclare un champ de type WrapPanel WrapPanel menuHaut; public MainPage() { InitializeComponent(); Loaded +=new RoutedEventHandler(MainPage_Loaded); } private void MainPage_Loaded(object sender, RoutedEventArgs e) { PleinEcranBT.Cursor = Cursors.Hand; // on affecte le champ de type WrapPanel menuHaut = LayoutRoot.Children[0] as WrapPanel; if (menuHaut!=null) { // on passe le conteneur menuHaut comme paramtre de CreateMenus CreateMenus(menuHaut); } } // cette mthode pourra crer des menus quel que soit le conteneur ;) private void CreateMenus(Panel conteneur) { } }

Typer le paramtre en tant que Panel est pratique car nous pourrons spcifier nimporte quel conteneur hritant de ce type, pour centraliser les menus. La mthode Insert nest pas idale dans notre cas car il faudrait que des composants soient dj prsents dans notre WrapPanel. La mthode Add est la plus adquate car elle ajoute les menus au fur et mesure. Lordre de notre tableau sera donc respect. Voici la dfinition de la mthode CreateMenus:
private void CreateMenus(Panel conteneur) { foreach(string titre in TabMenus) { // on instancie le bouton Button monMenu = new Button(); // on lui spcifie de nouvelles marges monMenu.Margin = new Thickness(0,0,20,0); // on lui affecte une nouvelle police monMenu.FontFamily = new FontFamily("Trebuchet MS"); // on dfinit une taille de police

Chapitre 5

Larbre visuel et logique

97

monMenu.FontSize = 14; // on affecte sa proprit Content pour afficher // une chane de caractres monMenu.Content = titre; // on ajoute ce bouton la liste des enfants du WrapPanel conteneur.Children.Add(monMenu); } }

Comme vous pouvez le voir, mis part spcifier les marges de chaque bouton, nous navons rien coder concernant le placement des menus. Cest le conteneur WrapPanel qui soccupe de cette partie.
NOTE INFO

Dans cet exercice, nous aurions pu utiliser une classe Rubrique et crer un tableau dinstances de rubrique. Lavantage est non seulement de pouvoir dcrire et afficher plus quune simple chane de caractres, mais aussi de dfinir des vnements et mthodes spcifiques. Ce genre dinstance est appele Value Object. Ce sont des instances dont le rle majeur est de contenir les enregistrements rcuprs depuis une base de donnes tout en les adaptant au modle objet. Cest gnralement la mthodologie suivre lorsque le site est vritablement mis jour depuis lextrieur.

Vous trouverez le projet finalis dans larchive pleinEcran_dynamique.zip du dossier chap5.

5.3.5 Affecter les proprits Child et Content

Nous allons voquer rapidement les proprits Child et Content. Elles occupent une place importante en matire dimbrication. Il suffit de voir le nombre dobjets hritant de ContentControl ou assurant une logique dimbrication spcifique pour sen convaincre. Ces proprits pourraient en effet stocker un conteneur enfants multiples, qui lui-mme contiendrait de nombreux objets. Il ny a pas de limites en la matire. La Figure5.20 illustre un exemple dimbrication ralis dans Blend par un graphiste, avec les trois proprits Children, Child et Content.
Figure5.20
Exemple darbre visuel utilisant les trois proprits dimbrication.

Dans lexemple de la Figure 5.20, le composant Border permet de grer laffichage et le graphisme de la barre de lecture. Sa proprit Child est affecte dun StackPanel empilant horizontalement des boutons personnaliss via sa proprit Children. Le bouton stop utilise sa proprit Content pour tre affect dun simple rectangle. Vous remarquez que le bouton playPause est un bouton de type ToggleButton. Pour rappel, la classe CheckBox hrite de ToggleButton et ne se diffrencie que par son visuel fait pour simplifier la vie au graphiste. Il possde deux tats, lun reprsentant une icne de lecture, lautre une icne pause. Pour ajouter un enfant via les proprits Child et Content en C#, il suffit de les affecter:

98

Partie I

Approches de Silverlight

MonBorder.Child = new StackPanel(); MonBoutonStop.Content = new Rectangle();

Noubliez pas cependant que si vous raffectez ces proprits lexcution, le nouvel objet affect remplacera lancien:
MonBorder.Child = new StackPanel(); MonBorder.Child = new grid(); //

Le StackPanel ne sera jamais utilis dans le code prcdent car il est directement remplac par une grille. Vous naurez pas derreur leve : le nouvel enfant crase lancien.

5.3.6 vnement diffus

Lorsque vous ajoutez une instance de type FrameworkElement larbre visuel, elle diffuse lvnement Loaded. Nous allons couter lvnement Click sur le bouton ContactBtn. Lorsquil sera diffus, nous ajouterons le bouton ContactBtn dans le WrapPanel :
public partial class MainPage : UserControl { private Button clientMenu; public MainPage() { InitializeComponent(); Loaded +=new RoutedEventHandler(MainPage_Loaded); } private void MainPage_Loaded(object sender, RoutedEventArgs e) { // on instancie le bouton clientMenu = new Button(); // nous coutons l'vnement Loaded sur le bouton ClientMenu clientMenu.Loaded +=new RoutedEventHandler(clientMenu_Loaded); ContactBtn.Click +=new RoutedEventHandler(ContactBtn_Click); } private void ContactBtn_Click(object sender, RoutedEventArgs e) { WrapPanel menuHaut = LayoutRoot.Children[0] as WrapPanel; if (menuHaut!=null) { // on ajoute ce bouton la liste des enfants du WrapPanel menuHaut.Children.Insert(4,ClientMenu); } } private void clientMenu_Loaded(object sender, RoutedEventArgs e) { // Lorsque le bouton est ajout l'arbre visuel, // l'vnement Loaded est diffus pour le montrer // on affecte le champ texte central TitrePage.Text="Le bouton a t ajout et initialis."; }

Chapitre 5

Larbre visuel et logique

99

Toutefois, il faut faire attention au fait que nous parlons bien darbre visuel et non de la proprit Children. Si jamais la proprit Children, laquelle vous ajoutez un enfant, nappartient pas un objet de larbre visuel, alors lvnement Loaded ne sera pas diffus:
private void ContactBtn_Click(object sender, RoutedEventArgs e) { StackPanel unConteneur = new StackPanel(); // on ajoute ce bouton la liste des enfants du StackPanel menuHaut.Children.Insert(4,clientMenu); } private void clientMenu_Loaded(object sender, RoutedEventArgs e) { // Lorsque le bouton est ajout au StackPanel // l'vnement Loaded n'est pas diffus car // le StackPanel ne fait pas partie de l'arbre visuel TitrePage.Text="Ce message ne doit pas tre trac."; }

Ainsi, le mme bouton ajout un conteneur absent de larbre visuel et logique ne diffusera pas dvnement Loaded.

5.4 Supprimer des objets de larbre visuel

Nous allons maintenant apprendre supprimer les enfants dun conteneur. Comme nous allons le voir, les mthodologies sont trs proches de celles que nous avons utilises pour ajouter des enfants.

5.4.1 Les diffrentes mthodes

5.4.1.1 Supprimer des enfants de conteneur Panel
Trois mthodes sont accessibles pour supprimer un objet de larbre visuel et logique: Remove, RemoveAt et Clear. Ces mthodes sont invoques par la proprit Children dun conteneur de type Panel. Voici leur syntaxe:
// 1 - La mthode Remove reoit la rfrence l'lment contenu menuHaut.Children.Remove( ContactBtn ); // 2 - La mthode RemoveAt doit recevoir l'index menuHaut.Children.RemoveAt( 2 ); // 3 - Clear n'a besoin d'aucun argument, la collection // de UIElement est simplement vide de son contenu menuHaut.Children.Clear( ); (ContactBtn.Parent as Panel).Children.Remove(ContactBtn);

La dernire ligne permet un objet dappeler la mthode Remove de son conteneur. Tous les objets de type FrameworkElement possdent la proprit Parent. Celle-ci renvoie la rfrence du conteneur parent de lobjet. Dans certains cas, il peut arriver que vous ne connaissiez pas la rfrence du conteneur lavance. Cette mthode rpond cette problmatique car chaque objet de larbre visuel possde une proprit parent non nulle.

100

Partie I

Approches de Silverlight

5.4.1.2 Supprimer des enfants uniques

Supprimer lenfant dun conteneur tel que Border ou ContentControl est trs simple. Pour ajouter un enfant au sein dun conteneur enfant unique, il nous a suffi daffecter une instance dUI Element aux proprits Content ou Child. Cette fois, il nous suffira daffecter la valeur null:
MonBorder.Child = null; MonBouton.Content = null;

ATTENTION

Lorsque vous excutez les mthodes de suppression de la liste denfants, vous ne supprimez que la valeur des proprits Children, Child ou Content. Les rfrences des enfants qui taient imbriqus existent toujours en mmoire si celles-ci taient des membres de classe. Nous verrons comment dsactiver des objets en mmoire la section "Dsactiver des objets".

5.4.2 Leffondrement de la liste denfants

5.4.2.1 Principe
Comme vous avez pu le remarquer lorsque vous avez compil votre application, la suppression dun objet au sein du StackPanel a dcal chaque index suivant de 1. Si, par exemple, vous avez supprim le bouton lindex 2, les objets prsents lindex 3 et 4 ont vu leur index passer respectivement 2 et 3 (voir Figure5.21).
Figure5.21
Principe deffondrement de la liste denfants.
Avant suppression de l'enfant l'index 1 Panel.Children - 5 enfants Enfant 4 Enfant 3 Enfant 3 Enfant 2 Enfant 2 Enfant 1 Enfant 0 Suppression de l'enfant l'index 1 via la mthode Children.RemoveAt(1) Enfant 1 Rfrence de l'ancien enfant 1 Enfant 0 Effondrement des index Aprs suppression de l'enfant, on assiste l'effondrement des index de la liste d'enfants Panel.Children - 4 enfants

Lorsque la liste denfants est modifie, lagencement du composant se met automatiquement jour, ce qui peut tre pratique pour mettre en forme des contenus dynamiques.

Chapitre 5

Larbre visuel et logique

101

5.4.2.2 Trier une liste d'enfants

Vous serez donc souvent tent dutiliser leffondrement des index pour mettre en forme ou dynamiser une application. Nous allons voir les limites et les contraintes de leffondrement des index. Vous allez utiliser ce comportement pour supprimer des champs texte contenus dans un Stack Panel. Ceux dont la proprit Text ne possde pas une chane de caractres prcise seront effacs de la liste. Le StackPanel nous servira cette occasion de liste de tri. Au sein dun nouveau projet nomm TriChildren, instancions le tableau suivant comme champ de la classe MainPage, dans le code logique:
string[] moisAnnee = new string[12] { "janvier", "fvrier" , "mars", "avril", "mai", "juin", "juillet", "aot", "septembre", "octobre", "novembre","dcembre"};

Positionnons un nouveau StackPanel dans LayoutRoot. Nous pouvons soit linstancier dynamiquement, via C#, soit le crer via linterface visuelle de Blend. Appelez-le MonStackPanel. Il serait pratique de limbriquer au sein dun Border afin de dfinir un contour visuel. Nous allons parcourir le tableau et crer une occurrence de TextBlock pour chaque lment du tableau lu par la boucle:
string[] moisAnnee = new string[12] { "janvier", "fvrier" , "mars", "avril", "mai", "juin", "juillet", "aot", "septembre", "octobre", "novembre","dcembre"}; private void MainPage_Loaded(object sender, RoutedEventArgs e) { foreach (string mois in moisAnnee) { TextBlock moisTexte = new TextBlock(); moisTexte.Foreground = new SolidColorBrush(Colors.Gray); moisTexte.FontSize = 16; moisTexte.FontFamily = new FontFamily("Trebuchet MS"); moisTexte.Text = mois; monStackPanel.Children.Add(moisTexte); } }

Plaons maintenant un composant de champ texte de saisie, TextBox, au-dessus du StackPanel dans linterface visuelle de Blend. Nous pouvons l aussi crer ces lments par code. Appelons le champ de saisie FiltreMois (voir Figure5.22).
Figure5.22
Arbre visuel et interface de TriChildren.

102

Partie I

Approches de Silverlight

Ajoutez maintenant la logique ncessaire pour trier les mois affichs dans le Stack Panel. Pour cela, vous pouvez ajouter une mthode dans le panneau des vnements du champ de saisie. Les champs de saisie TextBox possdent lvnement TextChanged. Il vous suffit dcrire le nom de la mthode, droite de TextChanged. Elle pourrait se nommer OnChangedFiltre. Blend ajoute directement le code correspondant dans la classe MainPage:
private void OnChangedFiltre(object sender, TextChangedEventArgs e) { // TODO: Add event handler implementation here. }

Lorsque le champ de saisie sera modifi par lutilisateur, supprimez tous les champs texte du StackPanel ne contenant pas la chane de caractres entre par lutilisateur. Toutefois, vous neffectuerez le tri qu partir dun minimum de 3 caractres saisis:
private void OnChangedFiltre(object sender, TextChangedEventArgs e) { // on vrifie qu'il y a au minimum 3 caractres entrs if ( FiltreMois.Text.Length>2 ) { //on parcourt les enfants foreach (TextBlock moisTextBlock in MonStackPanel.Children) { // on rcupre chaque chane de caractres string mt = moisTextBlock.Text as string; // si l'un des TextBlock du StackPanel ne contient pas la chane if ( !mt.Contains( FiltreMois.Text ) ) { // on le supprime MonStackPanel.Children.Remove( moisTextBlock ); } } } }

Vous remarquez le typage TextBlock dans la dfinition de la boucle foreach. Aprs tout, Text Block est une sous-classe du type UIElement. Il faudra juste faire attention ne positionner aucun autre type dobjet dans le StackPanel sous peine de lever une erreur. Compilez et testez votre application. Vous le constatez assez rapidement, le comportement du filtre est trange. Une erreur est mme leve (voir Figure5.23).
Figure5.23
Erreur leve lorsque le type attendu ne correspond pas lenfant.

Le message est clair, vous parcourez la liste et vous la modifiez en mme temps pour la mettre en forme. Toutefois, vous ne ralisez pas une modification anodine dans le cas prsent, vous supprimez dfinitivement un enfant de la liste. La boucle ne peut donc pas tre lue correctement et vous

Chapitre 5

Larbre visuel et logique

103

gnre des erreurs daccs. Dans ce cas prcis, la mthode que nous employons nest pas la bonne car noubliez pas que supprimer des objets modifie la mise en forme certes, mais affecte surtout larbre visuel de lapplication et donc son architecture. Nous allons tudier une mthode plus approprie ce cas de figure dans la section suivante.

5.4.2.3 Suppression vs. Collapsed

Toute sous-classe de UIElement possde la proprit Visibility, qui doit tre affecte dune valeur de lnumration Visibility. Attention ne pas confondre la proprit dobjet et lnumration (une liste de valeurs, voir Chapitre 3). Lnumration possde les valeurs Visible et Collapsed. Lorsque vous crivez:
MonUIElement.Visibility = Visibility.Collapsed;

vous pratiquez un pseudo effondrement. Dans ce cas prcis, le systme dagencement de Silverlight (Silverlight Layout System) ne prend pas en compte lobjet. Ses marges, sa largeur, sa hauteur et ses enfants sont simplement ignors, lobjet nest pas affich et ninfluence pas les autres. Pourtant celui-ci reste un lment de la collection Children, vous naffectez donc en rien larchitecture de votre application. Il faut privilgier cette proprit aux mthodes de suppression lorsque vous souhaitez accomplir des oprations lies la mise en forme. Cela est simplement plus intuitif, plus pertinent et plus simple. Voici notre code pour la liste de tri, mis jour en utilisant cette proprit:
private void OnChangedFiltre(object sender, TextChangedEventArgs e) { // on parcourt le tableau foreach (TextBlock MoisTextBlock in MonStackPanel.Children) { // on rcupre chaque chane de caractres string Mt = MoisTextBlock.Text as string; // si l'un des TextBlock du StackPanel ne contient pas la chane if ( !Mt.Contains( FiltreMois.Text ) ) MoisTextBlock.Visibility = Visibility.Collapsed; else MoisTextBlock.Visibility = Visibility.Visible; } }

Le code est beaucoup plus simple dans ce cas. Avec les mthodes Remove et RemoveAt, nous aurions d stocker les enfants supprims dans un tableau temporaire pour obtenir un rsultat quivalent et ne pas perdre leur rfrence.

5.4.3 Dsactiver des objets

Nous pourrions nous demander lintrt que prsente la dsactivation des objets. Il faut admettre que plus une application est performante, plus elle est conviviale. Dun point de vue utilisateur, rien nest plus nervant queffectuer des actions et voir leur rsultat apparatre avec un temps de latence. Cela peut parfaitement se comprendre pour des accs distants aux bases de donnes mais cest une problmatique que lon sait traiter et que lutilisateur comprend. Pour des actions plus simples, comme naviguer dans un site ou dplier un menu par exemple, il est anormal davoir des temps de latence et cela rvle un dveloppement un peu trop hasardeux. Il faut optimiser au maximum les performances de votre application. Pour cette raison, allger les allocations mmoire

104

Partie I

Approches de Silverlight

est une tche rellement importante. Sans cela, lapplication pourrait utiliser de plus en plus de mmoire vive et ralentir lexcution. Dsactiver des objets est le processus inverse de celui consistant ajouter des objets larbre visuel. Pour ajouter un objet la liste daffichage, nous avons dabord instanci cet objet, puis nous lavons affect comme enfant dun conteneur Panel grce aux mthodes Add et Insert. Les mthodes de suppression Remove et RemoveAt ne sont donc pas suffisantes pour dsactiver compltement un objet en mmoire. Il faut faire exactement loppos de linstanciation, toutefois une mthode aussi directe nexiste pas. Les allocations mmoire sont gres par le ramasse-miettes (ou Garbage Collector). Cest lui qui surveille et dcide si un objet est dsactiv ou non de la mmoire. Nous devons juste permettre au ramasse-miettes de jouer son rle. Pour cela, la premire tape consiste supprimer de larbre visuel linstance que vous souhaitez dsactiver. Tant que celle-ci est prsente dans larbre visuel, elle ne peut tre dsactive puisquelle est rfrence par une collection de composants UIEle ment. Nous invoquons donc en premier la mthode Remove ou RemoveAt. La seconde tape est de passer la valeur de la rfrence null :
MonConteneur.Children.Remove(UnUIElement); UnUIElement = null;

Cette mthode est saine, toutefois vous ne saurez pas quand lobjet sera supprim de la mmoire. Le langage C# est manag, cela signifie que les allocations mmoire ne sont pas gres par le dveloppeur C#, mais par le ramasse-miettes. Celui-ci gre la dsactivation des instances de classes en fonction de leur occupation mmoire. Moins une rfrence prend de mmoire, moins elle est prioritaire. Une mauvaise pratique consiste utiliser la mthode Collect du ramasse-miettes, pour forcer son passage. Cela est trs coteux en performances car le ramasse-miettes doit parcourir toutes les rfrences et dcider de les supprimer ou non:
MonConteneur.Children.Remove(UnUIElement); UnUIElement = null; GC.Collect();

Lorsque vous concevrez vos propres composants, vous devrez faire attention ce quils suppriment bien tous les couteurs internes dvnements propres lapplication ou des rfrences externes. Sans cela, vos instances de composants personnaliss pourraient ne pas tre collectes par le ramasse-miettes (voir Chapitre12).

5.4.5 vnement diffus

Nous avons vu qu chaque fois quun objet est ajout larbre visuel, soit lobjet RootVisual, celui-ci diffuse lvnement Loaded. Il vous suffira donc dcouter cet vnement pour savoir si lobjet est ajout larbre visuel. Un vnement semblable nest pas diffus lorsquun objet est supprim de larbre visuel. Vous pouvez la place utiliser lvnement LayoutUpdate. Toutefois, cet vnement est diffus lors de chaque modification dagencement. Il est donc diffus de nombreuses fois, mme lorsquun objet est ajout larbre visuel. Voici une mthode pour vrifier quun enfant vient dtre supprim de larbre visuel:
private void MainPage_Loaded(object sender, e) { MonStackPanel.LayoutUpdated += MonStackPanel_LayoutUpdated;

Chapitre 5

Larbre visuel et logique

105

} private void MonStackPanel_LayoutUpdated(object sender, EventArgs e) { if (MonStackPanel.Children.Contains(MonBouton) { /* objet non supprim */ } else { /* objet supprim */ } }

Dans tous les cas, il vous faudra tester si lobjet a t supprim. Ce nest pas lidal dun point de vue performance car lvnement LayoutUpdate est diffus trs souvent.

5.5 changes dindex

Nous avons abord de nombreux mcanismes de larbre, mais nous navons pas pratiqu dchanges dindex de la liste denfants. En fait, Children ne possde pas une mthode spcifique assurant directement cette opration. Nous allons tudier les diffrentes manires de procder dans cette section.

5.5.1 change dindex du point de vue conception

Comme aucune mthode nexiste, nous allons coder notre change dindex en prenant soin dviter les erreurs daccs, dajout ou mme de suppression que nous connaissons bien maintenant. Voici le code permettant deffectuer cette opration dlicate:
public partial class MainPage : UserControl { public Button ClientMenu; public WrapPanel MenuHaut; public MainPage() { InitializeComponent(); Loaded +=new RoutedEventHandler(MainPage_Loaded); } private void MainPage_Loaded(object sender, RoutedEventArgs e) { menuHaut = LayoutRoot.Children[0] as WrapPanel; ContactBtn.Click +=new RoutedEventHandler(ContactBtn_Click); } private void ContactBtn_Click(object sender, RoutedEventArgs e) { // on rcupre l'un des enfants dont on veut changer l'index Button Enfant1 = menuHaut.Children[1] as Button; // on stocke les index dont nous aurons besoin par la suite int IndexContact = menuHaut.Children.IndexOf( ContactBtn ); // Ensuite on supprime les enfants de la liste menuHaut.Children.Remove( Enfant1 ); menuHaut.Children.Remove( ContactBtn );

106

Partie I

Approches de Silverlight

// Puis on les rinsre en respectant un ordre prcis // toujours commencer par rinsrer l'lment // que l'on souhaite positionner l'index le plus bas menuHaut.Children.Insert(1,ContactBtn); // pour finir, on ajoute la liste d'enfant l'lment // qui a l'index le plus haut menuHaut.Children.Insert(IndexContact,Enfant1); } }

Comme vous pouvez le voir, nous suivons un ordre vraiment trs prcis pour viter au maximum les erreurs daccs la liste. changer lordre des enfants modifie larbre visuel, mais ne lui retire pas denfants. Nous aurons donc le mme nombre denfants au dpart de notre code qu larrive. Il nous faut dans un premier temps stocker les index que nous souhaiterons changer par la suite. Si nous le faisions aprs avoir supprim un enfant de la liste, ceux-ci ne correspondraient pas au bon emplacement dans la liste. La deuxime tape consiste supprimer les enfants changer de la liste. Lordre importe peu. Pour finir, on les rinsre, mais pas nimporte comment. Dans notre cas, nous avons chang le dernier enfant de la liste avec un enfant situ en plein milieu. Si nous commenons par rinsrer llment le plus haut dans la liste, nous courons le risque de spcifier un index hors de la porte maximale qui correspond notre nombre denfants, Children.Count. Le code suivant renvoie une erreur car nous essayons dinsrer Enfant1 un index qui nest pas encore accessible:
private void ContactBtn_Click(object sender, RoutedEventArgs e) { // on rcupre l'un des enfants dont on veut changer l'index Button Enfant1 = menuHaut.Children[1] as Button; // on stocke les index dont nous aurons besoin par la suite int IndexContact = menuHaut.Children.IndexOf( ContactBtn ); // Ensuite on supprime les enfants de la liste menuHaut.Children.Remove( Enfant1 ); menuHaut.Children.Remove( ContactBtn ); menuHaut.Children.Insert(IndexContact,Enfant1); menuHaut.Children.Insert(1,ContactBtn); }

Cette mthode est assez fastidieuse. Raliser un change dindex sans connatre lavance les objets changer nous forcerait galement prvoir toutes les erreurs possibles. Avoir une mthode de UIElementCollection qui accomplirait directement cette opration serait un plus. Cest ce que nous allons aborder ds maintenant.

5.5.2 Une mthode dextension pour UIElementCollection

Les mthodes dextension sont apparues avec C# 3. Cest un nouveau pas en avant pour rendre C# souple et faciliter lajout de mthodes personnalises aux classes normalement fermes lextension. Voici la signature de la classe UIElementCollection:

Chapitre 5

Larbre visuel et logique

107

public sealed class UIElementCollection : PresentationFrameworkCollection<UIElement>

Comme vous pouvez le constater, cette classe empche tout hritage. Pourtant, les mthodes dextension nous permettent de lui ajouter des fonctionnalits sans pour autant gnrer du code spaghetti. Cliquez-droit sur votre projet et slectionnez Ajouter un nouvel lment. Dans la fentre qui vient de souvrir, choisissez Class. Nommez-la UtilsMethod.cs, vous pouvez galement la glisser dans un dossier spcifique pour viter de mlanger les genres (voir Figure5.24). La cration de rpertoires est accessible par un simple clic-droit sur le projet ou un autre rpertoire.
Figure5.24
Arborescence de dossier pour le fichier Utils.cs.

Comme vous pourriez avoir besoin de notre mthode plus tard, il vaut mieux inclure la future classe qui contiendra notre mthode dans un espace de nom spcifique. Voici le code contenant la dfinition de notre mthode dextension:
namespace Org.Tweened.Utils { public static class UtilsMethod { public static void SwapChildren(this UIElementCollection E, UIElement child1, UIElement child2 ) { if ( E.Contains(child1) && E.Contains(child2) ) { int Index1 = E.IndexOf(child1); int Index2 = E.IndexOf(child2); E.Remove(child1); E.Remove(child2); if (Index1>Index2) { E.Insert(Index2,child1); E.Insert(Index1,child2); } else { E.Insert(Index1,child2); E.Insert(Index2,child1); } } else

108

Partie I

Approches de Silverlight

thrownew NotImplementedException("Au moins l'un des deux enfants n'est pas contenu dans la liste d'enfants."); } } }

Crer une mthode dextension est relativement simple. Lobjectif de ces mthodes est la dcoration. Pas au sens artistique, bien sr, mais dun point de vue technique. Dcorer signifie ajouter de nouvelles fonctionnalits et proprits un objet. La dcoration est un concept permettant de rsoudre de nombreuses problmatiques de conception objet. Le mot-cl static est obligatoire aussi bien pour la classe que pour la mthode. Grce ce mot-cl, le simple fait de rfrencer notre espace de noms permet la mthode dextension dtre utilise. La signature dune mthode dextension contient toujours au moins un premier argument commenant par this, celui-ci est suivi du type puis du nom du paramtre. Le mot-cl this indique au compilateur que le type qui le suit pourra utiliser la mthode. Les paramtres qui suivent sont quant eux utiliss lors de lappel. ce moment, noubliez pas de rfrencer lespace de noms via le mot-cl using:
MenuHaut.Children.SwapChildren(Enfant1, ContactBtn);

Vous naurez sans doute pas dIntelliSense pour les mthodes dextension au sein dExpression Blend, mais vous en aurez au sein de Visual Studio. Compilez et testez votre application. Vous constatez que les boutons changent bien leur place, toutefois contrairement notre premire version, la logique est compltement rutilisable au sein dautres projets.

5.5.3 change dindex du point de vue design

Comme nous lavons vu la section 5.2, lordre dimbrication est directement li lordre de superposition. Toutefois cela nest pas forcment pratique car lordre dimbrication est galement li aux contraintes de positionnement au sein dun conteneur. Nous allons le dmontrer travers un mini exemple et trouver des solutions adaptes aux designers et aux dveloppeurs.

5.5.3.1 Crer le projet

Crez un nouveau projet de type application et nommez-le SuperpositionOrder. Dans le conteneur principal, crez un StackPanel avec une orientation horizontale. Celui-ci doit sadapter son contenu, vous devrez donc lui affecter une largeur et une hauteur en mode Auto. Faites en sorte quil soit centr horizontalement au sein de la grille principale. Ensuite, imbriquez lintrieur du StackPanel cinq objets Rectangle de diffrentes couleurs. Chacun doit faire 100 pixels de largeur par 100 pixels de hauteur. Pour finir, espacez-les en leur spcifiant une marge droite (voir Figure5.25). Il faudrait agrandir un rectangle afin de voir comment ceux-ci se superposent, par exemple celui du milieu. Ceci nest pas aussi facile faire quil ny parat.

Chapitre 5

Larbre visuel et logique

109

Figure5.25
Exercice pratique de superposition.

5.5.3.2 Introduction aux RenderTransform

Notre problme est simple: agrandir la largeur dcalera les autres rectangles les uns par rapport aux autres car la largeur et la hauteur sont lies au comportement dempilement du StackPanel. Cest une impasse si nous nous contentons de ces proprits. Heureusement un autre type de transformation existe, les transformations vectorielles. Nous aborderons en profondeur ces transformations au Chapitre6. Pour linstant, nous nous contentons de les utiliser. Slectionnez le rectangle du milieu, puis dans le panneau des proprits, ouvrez longlet Transform (voir Figure5.26).
Figure5.26
Longlet des transformations.

Cet onglet vous propose deux types de transformation : les transformations vectorielles de type RenderTransform et les transformations de type Projection qui permettent de grer laffichage dobjets en pseudo3D (voir Chapitre9). Nous allons utiliser les transformations vectorielles pour nous librer partiellement des contraintes dagencement propres au StackPanel. Cliquez sur licne de transformation dchelle ( ), puis saisissez la valeur 1,4 dans les deux champs de saisie (voir Figure5.27).

110

Partie I

Approches de Silverlight

Figure5.27
Longlet des transformations dchelle.

Les transformations de type RenderTransform sont totalement indpendantes de lagencement impos par le contexte conteneur. Elles permettent donc aux graphistes de saffranchir des contraintes lies la conception et larchitecture. Notre Rectangle mesure dsormais 40 % de largeur et de hauteur de plus et il ne dcale plus les autres (voir Figure5. 28).
Figure5.28
Rectangle avec changement dchelle.

5.5.3.3 La proprit ZIndex

Comme vous pouvez le constater, notre Rectangle tant en troisime position dans lordre dimbrication XAML, il apparat au-dessus du rectangle sa gauche et sous le rectangle sa droite. Nous allons lafficher au-dessus des autres rectangles. Sur Internet, vous trouverez de nombreux exemples dans lesquels un menu se superpose aux autres lors du survol de la souris. Pour raliser ce type de menu, il faudrait nous affranchir, une nouvelle fois, des contraintes lies limbrication. Tous les conteneurs pouvant contenir plus dun enfant possdent la proprit attache ZIndex, fournie par la classe Canvas. Par dfaut, la proprit Zindex contient la valeur 0. Comme tous les enfants dun conteneur possdent ZIndex 0, cest lordre dimbrication XAML qui prime dans un premier temps. Il existe ainsi une comptition constante entre lordre dimbrication, soit lindex de lenfant dans la collection Children, et la proprit ZIndex. Lorsque deux enfants possdent le mme ZIndex, lordre de superposition est dtermin par lindex enfant de chacun. Au contraire, sils possdent un ZIndex diffrent, lordre de superposition est dfini par le ZIndex. La valeur ZIndex la plus haute reprsente lobjet affich au-dessus des autres. Toutefois, cette proprit nexerce son influence quau sein dun mme conteneur. Il nous faut la modifier pour le rectangle central. Pour cela, il vous suffit douvrir le panneau des proprits, dans les options dagencement, puis de passer sa valeur 1 (voir Figure5.29).
Figure5.29
Rectangle avec changement dchelle et modification de la proprit ZIndex.

Chapitre 5

Larbre visuel et logique

111

Pour mieux comprendre la comptition entre lindex enfant et le ZIndex, vous pouvez slectionner tous les rectangles et passer leur ZIndex 1. Notre rectangle du milieu passe nouveau en dessous du rectangle de droite. Les ZIndex tant tous gaux, cest lordre dimbrication XAML qui prime nouveau. Vous tes maintenant familiaris avec les diffrents composants visuels propos par le framework Silverlight. Dans le prochain chapitre, nous tudierons les mcanismes lis lanimation propres la plateforme Silverlight. Nous verrons en quoi Silverlight se rvle tre un puissant moteur danimation vectorielle. Nous aborderons donc la cration danimations dans Expression Blend ou avec C#.

Partie II Interactivit et cration graphique 6

Animations
Dans ce chapitre, nous tudierons en profondeur les mcanismes dinterpolations vectorielles propres Silverlight. Pour cela, nous allons apprendre les principes fondamentaux de lanimation. Nous utiliserons notre projet de site plein cran comme point de dpart pratique pour acqurir les concepts de base, ainsi quune aisance technique. Nous aborderons tout dabord lanimation du point de vue dun designer interactif via Blend. Dans un second temps, nous verrons que C# facilite et dynamise la cration danimations, mais quil simplifie et optimise galement le flux de production sans dlaisser le travail des designers ou des animateurs. Nous apprendrons en quoi les transformations relatives sont efficaces et incontournables en matire danimation et comment les gnrer lexcution. Pour finir, nous aborderons et utiliserons le gestionnaire dtats visuels dont la bonne comprhension repose sur lensemble des notions apprises auparavant. Nous verrons quel est son impact en matire de conception applicative ou de flux de production dans notre quotidien.

114

Partie II

Interactivit et cration graphique

6.1 Introduction
Silverlight est, entre autres, un moteur danimations vectorielles. Depuis sa version 3, il permet de grer la projection dobjets vectoriels en pseudo 3D. Cela signifie quil est capable de reprsenter un objet au sein des quatre dimensions que nous connaissons tous, soit x, y, z (la profondeur) et t pour le temps. Dans ce chapitre, nous ntudierons pas les animations dans un espace 3D, mais uniquement 2D pour des raisons de clart (si besoin, vous pouvez consulter le Chapitre9 ddi la 3D).

6.1.1 Quest-ce quune animation?

Quel que soit lenvironnement de dveloppement, crer une animation revient toujours modifier la valeur dune proprit dun objet au cours du temps. Nous verrons la section6.3.2 que la valeur de dpart peut-tre rcupre implicitement. Cette particularit propre au lecteur Silverlight permet des comportements trs puissants et beaucoup de souplesse de conception. Dans le langage courant, une animation est forcment fluide, mais cest un raccourci un peu rapide et incorrect. Gardez lesprit que cest avant tout une proprit dobjet qui varie au cours du temps quel que soit le laps de temps coul entre deux valeurs de cette proprit. Ainsi, le rebond dune balle se rsume aux variations de ses coordonnes dans lespace au cours du temps. La nature offre de nombreux exemples danimations invisibles nos yeux, comme lrosion dune montagne ou la croissance dun arbre. Les proprits de ces objets voluent tellement lentement dans le temps que voir ces phnomnes est simplement impossible lil nu. Certains mouvements sont tellement rapides quil est galement difficile de les analyser. Le galop du cheval en est un exemple flagrant, il ne fut rellement compris scientifiquement par tienne Jules Marey et Eadweard Muybridge qu la fin du xixe sicle. Le naturaliste tienne Jules Marey pensait quau grand galop aucune des pattes du cheval ne touchait le sol en mme temps durant un cours instant. Cela est vrai, mais le dmontrer ntait pas si simple. Pour le prouver, Eadweard Muybridge a dcoup son mouvement laide dappareils photographiques aligns les uns ct des autres. Les appareils photographiques de ces scientifiques taient dclenchs de manire dcale dans le temps selon un intervalle rgulier (voir Figure 6.1).
Figure6.1
Dcoupage du galop dun cheval par Muybridge.

La dcomposition et ltude des mouvements amena de grandes dcouvertes et perspectives. Ce laps de temps constant entre chaque photographie a introduit la notion de cadence de prise de

Chapitre 6

Animations

115

vues. Plus ce laps est court, plus la cadence est leve. Par la suite, Muybridge inventa le premier appareil permettant dafficher les images rapidement les unes aprs les autres. Cette invention prfigurait sans doute les prmisses du cinma et de lanimation. Dans la mme veine, les premiers dessins anims Disney taient en huit images par seconde car cela vitait un travail de dessin trop fastidieux. Toutefois, lil humain ne percevant plus leffet de saccade partir de24images par seconde, ces 8 images par seconde taient perues par les spectateurs malgr le talent des animateurs. Les premiers films des frres Lumire connaissaient des limites quivalentes. Les cadences daffichage, de prise de vues et danimations furent, durant au moins 50 ans, le centre de nombreux efforts de la part des cinastes et techniciens car celles-ci engendrent lillusion du mouvement et son ralisme. Aujourdhui encore, leur matrise permet de concevoir des effets visuels impressionnants et de mieux connatre notre environnement naturel.

6.1.2 La cadence des animations au sein de Silverlight

Au sein de Silverlight, la cadence des animations est de 60 images par seconde par dfaut. Le laps de temps scoulant thoriquement entre deux images affiches est donc de 1/60 de seconde. Cette valeur est accessible travers la proprit MaxFrameRate de linstance Silverlight. Vous pouvez galement afficher la cadence en bas de la fentre du navigateur via la proprit EnableCounter FrameRate linstanciation du lecteur Silverlight:
<div id="silverlightControlHost"> <object data="data:application/x-silverlight," type="application/ x-silverlight-2" width="100%" height="100%"> <param name="source" value="ClientBin/sitet.xap"/> <param name="onerror" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="3.0.40128.0" /> <param name="autoUpgrade" value="true" /> <param name="maxFrameRate" value="30" /> <param name="enableFrameRateCounter" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=141205" style="text-decoration: none;"> <img src="http://go.microsoft. com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/> </a> </object>

Vous pouvez galement dfinir ces deux paramtres lexcution en C#:

public MainPage() { InitializeComponent(); Loaded +=new System.Windows.RoutedEventHandler(MainPage_Loaded); MouseLeftButtonDown+= MainPage_MouseLeftButtonDown; } private void MainPage_Loaded(object sender, RoutedEventArgs e) { App.Current.Host.Settings.EnableFrameRateCounter = true; } private void MainPage_MouseLeftButtonDown (object sender, MouseButtonEventArgs e) { App.Current.Host.Settings.MaxFrameRate = 30; }

116

Partie II

Interactivit et cration graphique

Toutefois, comme dans nimporte quel autre moteur danimation, et ainsi que vous pouvez le constater grce la proprit EnableFrameRateCounter, la cadence nest pas constante. Ceci est d aux algorithmes de calcul et aux fluctuations de performance des systmes dexploitation, mais galement de nombreux autres facteurs, comme loccupation mmoire et processeur linstant o lanimation est visionne. La cadence maximum nest en ralit rien dautre quune valeur souhaite idale. Silverlight nest volontairement pas conu pour grer les animations traditionnelles de prime abord, cest--dire les animations image par image. Il est orient vers la diffusion dapplications riches avant tout. Il en dcoule deux spcificits essentielles propres Silverlight. La premire est que lunit de temps est exprime en secondes et non en images affichables comme sous Flash. La seconde particularit est que Silverlight dispose dun moteur vectoriel "autodgradable". Cela signifie que si une animation est trop lourde pour tre affiche correctement selon sa cadence, dans tous les cas, le moteur respectera au maximum le temps qui lui est imparti, mme sil lui faut ignorer laffichage dimages intermdiaires de lanimation. Autrement dit, mme saccade, une animation ne dpassera pas une dure dfinie, car Silverlight privilgie le temps plutt que laffichage de toutes les tapes. De manire gnrale, lil peroit lintervalle entre deux images si la cadence est infrieure 25images par seconde. Il vaut donc mieux viter les cadences trop faibles pour ne pas crer un effet saccad dis