Pratique de Silverlight

Au sein de l'environnement .Net, trois logiciels de la gamme sont le théâtre de cette évolution : Expression Blend, Expression Design et Visual Studio.

1. Expression Design concerne essentiellement les graphistes. Il contient l'ensemble des outils nécessaires à la création vectorielle. Cependant il joue aussi le rôle de passerelle et permet d'importer nativement de nombreux types de fichiers dont le format Adobe Illustrator ou le format Photoshop psd.
2. Expression Blend cible avant tout les designers interactifs, les intégrateurs et les designers d'eXpérience Utilisateur. Les ergonomes peuvent aussi dans une certaine mesure créer des maquettes et prototype en partie réutilisables (voir Chapitre 9 Prototypage dynamique avec SketchFlow).
3. Visual Studio comme outil de développement principal est conçue pour les développeurs et possède un puissant outil de débogage que Blend ne fournit pas. À ce jour, il est considéré comme l'un des meilleurs produits délivrés par Microsoft.

Le tableau 1.2 indique la localisation de Blend / Design dans la chaîne de production, ainsi que l'investissement à prévoir en fonction du rôle de chacun. On remarque que chacun peut l'utiliser, Blend étant un outil polyvalent et multiforme.

Comme on peut s'en rendre compte, un nouveau profil émerge : le designer interactif. On peut considérer ce profil comme un nouveau genre de designer Web. Dans la majorité des cas, c'est un graphiste ayant évolué et acquis une réelle culture de développeur, ainsi qu'une connaissance aiguë de l'ergonomie. L'intégrateur HTML représente en partie ce type de profil. Il est à la fois confronté à des langages comme JavaScript, PHP (réalisation de modèles) et CSS, tout en conjuguant cette technique à une sensibilité de graphiste. La différence entre intégrateur 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, l'ergonomie, l'animation et les transitions. Il considère la logique applicative et la fonctionnalité comme importantes, mais coulant de source et plutôt dévolues aux développeurs.

Au sein des environnements WPF et Silverlight, le designer interactif tient un rôle crucial, puisqu'il fait le lien entre les profils situés à chaque extrémité de la chaîne de production. C'est un élément fédérateur. Silverlight et WPF proposent un modèle qui facilite la collaboration, mais c'est le profil de designer interactif qui formalise et permet cette communication. On pourrait y voir un mélange des genres douteux, mais sans lui, on se retrouverait dans une situation délicate où les graphistes n'auraient finalement que peu d'influence sur la production.

Tout projet conçu avec Blend s'inscrit dans le cadre WPF, les applications Silverlight sont un sous-ensemble de WPF. Cependant, au contraire des applications WPF bureautiques, les applications Silverlight sont multiplate-formes et multinavigateurs. Les projets Silverlight suivent la logique classique de tout développement applicatif avec un renforcement singulier de la collaboration entre chaque pôle métier. Voici le détail de chaque étape et son impact métier.

• Cahier des charges. Profils concernés : client, D.A. / D.T., chef de projet, graphistes, développeurs, ergonomes et utilisateur final…
• Maquette fonctionnelle et story-boards. Profils concernés : 50 % développeurs et 50 % graphistes ou ergonomes. Réflexion papier commune sur la disposition des objets de l'interface et sur l'ergonomie de l'application. La navigation et la cinématique doivent être pensées à ce stade.
• Squelette technique et maquettage. Les collaborateurs du projet sont dans le même bureau et travaillent ensemble à :
• - l'élaboration du squelette technique, profils concernés : 95 % développeurs et D.T., 5 % graphistes ou ergonomes,
  - la création de plusieurs maquettes sous Expression Design ou Illustrator "Look & Feel", profils concernés : 5 % développeurs et 95 % graphistes ou D.A. 
  Cette phase se termine lorsque l'une des maquettes est validée par le client.
• Production. Cycle de "va et vient" dit itératif entre chaque pôle métier qui est une interaction continue entre les profils. Durant cette phase chaque pôle métier fournit à l'autre les éléments dont il a besoin afin d'avancer dans le développement du projet.

Un designer interactif est toujours nécessaire. Toutefois, si le projet nécessite peu de ressources et qu'il est de faible envergure, ce rôle est dévolu à un graphiste ou à un développeur, ou encore aux deux à tour de rôle selon les besoins.

Plusieurs langages sont accessibles aux développeurs dans la gamme Expression Studio, ils sont catégorisés en trois types distincts. La première catégorie concerne les langages managés propres à la CLR (Common Language Runtime). On y compte :

• le langage déclaratif XAML : XAML signifie eXtensible Application Mark-up Language ; ce langage permet de formaliser le graphisme : les courbes vectorielles, les dégradés de couleurs ou les couleurs unies, les styles, les composants visuels, les animations, et les modèles 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 Le couple XAML / C#) ;
• Visual Basic : langage de haut niveau, comme C#, mais plus spécifique dans son écriture, nous ne l'utiliserons pas dans ce livre.
  La deuxième catégorie concerne les langages managés dynamiques gérés par la DLR (Dynamic Language Runtime). Ils ne seront pas couverts ici. Parmi eux on trouve :
• IronPython: c'est le portage du python pour la plate-forme .Net, vous trouverez plus d'informations à l'adresse suivante : http://www.codeplex.com/IronPython;
• IronRuby: c'est la version du langage Ruby propre à .Net, vous trouverez plus d'informations à l'adresse suivante : http://www.ironruby.net/;
• JScript : c'est un langage créé par Microsoft qui jouit de la norme ECMA ;
• JavaScript : version spécifique du langage du même nom, mais compilée par la DLR.

La troisième catégorie fait référence au langage non compilé (donc interprété) JavaScript, cela engendre moins de possibilités et d'accès au lecteur Silverlight, mais l'accès 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é présentation, c'est un langage déclaratif de type XML (voir Chapitre 2 Le couple XAML / C#).

Nous aborderons en détails les notions de CLR et de DLR au Chapitre 3 Hello World. Sachez simplement que la CLR est le compilateur gérant les langages natifs de la plate-forme .Net, donc de l'environnement Silverlight. Au sein de Silverlight, deux langages sont gérés par défaut dans les projets : Visual Basic et C#, mais la CLR donne accès à d'autres langages moins connus comme F# par exemple. D'une toute autre manière, la DLR ouvre et enrichit Silverlight et d'autres langages dynamiques qui ne sont pas forcément hérités de ou propres à .Net. Un langage dynamique est un langage capable de faire évoluer sa structure à l'exécution, autrement dit un langage dont il est facile d'étendre les capacités des classes ou objets natifs dynamiquement. Ce type de langage n'est pas réellement dans la culture originelle de Microsoft mais les anciens dogmes provenant des années 80 sont en cours de mutation. L'évolution de C# en est un flagrant exemple. La DLR est en réalité une surcouche à la CLR, elle permet à des langages dynamiques d'accéder au lecteur Silverlight en communiquant avec la CLR. JavaScript est un cas particulier, il peut être géré de deux manières, soit par la DLR, soit de manière transparente. Lorsqu'il est géré par la DLR, sa mise en production est, au départ, plus complexe mais dans ce cas, il accède entièrement à la CLR et bénéficie des avantages liés à cette dernière. Dans le cas d'une utilisation transparente, il donne directement accès à une petite partie des capacités du lecteur Silverlight, mais les performances à l'exécution sont beaucoup moins élevées puisqu'il n'y a pas de compilation.

Le choix du langage dépendra essentiellement de votre culture de développeur. Cependant, décider d'utiliser ou non directement JavaScript comme langage non compilé est un peu moins évident, vous devrez vous poser deux questions :

• Quel type de projet souhaitez-vous construire ?
• Quel est votre corps de métier ?

Pour notre part, nous utiliserons de façon significative le XAML et opterons pour le langage C#, assez proche de la norme ECMA (les origines de l'auteur…) sur de nombreux points. JavaScript ne nous servira qu'à l'intégration de Silverlight au sein d'une page HTML. Ce livre s'adresse en partie aux designers Web, dans ce cadre et pour diverses raisons, nous n'aborderons pas Visual Basic, IronRuby, IronPython ou JScript.

Au Chapitre 2 Le couple XAML / C#, 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 manière, vous les assimilerez plus facilement par la suite.

Le XML n'a qu'un seul objectif : présenter d'une manière structurée et universelle des données. Il n'y a pas de vocabulaire lié à ce langage, seule la grammaire est importante. Celle-ci est très simple et ne connaît que quelques règles importantes. XML se veut donc le plus générique possible. Au contraire du XAML qui est conçu pour afficher un visuel et qui possède un vocabulaire spécifique, le XML ne possède pas de vocabulaire spécifique. Écrire ou comprendre la structure d'un fichier XML est à la portée de tous, développeurs ou non. Les noms des balises ne sont donc pas prédéfinis ou figés, mais arbitrairement choisis par le développeur ou le fournisseur de la source XML. Le transit de fichier XML est indépendant du réseau, de la plate-forme ou de la connaissance préalable du fichiers XML. C'est aujourd'hui le format de communication le plus utilisé sur Internet. Vous connaissez sans doute les fameux flux RSS basés sur XML. Les flux RSS ne sont rien d'autre que des fichiers de données XML respectant la norme RSS. C'est pour cette raison qu'un lecteur de flux RSS est capable de lire n'importe quelle source d'où qu'elle provienne tant que la norme RSS est respectée. 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 day's Mystery nights”>
            …
        </ALBUM>
    </INTERPRETE>
        ...
</DISCOGRAPHIE>

Vous remarquez que les données sont structurées suivant des relations familiales. Ainsi la balise INTERPRETE contient plusieurs balises ALBUM qui contiennent elles-mêmes plusieurs balises CHANSON. Les balises ALBUM sont sœurs les unes par rapport aux autres, car elles sont situées sur le même niveau d'imbrication : elles sont toutes contenues par la balise mère INTERPRETE. Nous pouvons donc comparer une structure XML à un arbre généalogique. Toutefois les noms des balises sont arbitraires et ne relèvent pas du langage proprement dit. Nous allons maintenant étudier les règles d'écriture du XML qui s'appliquent également aux langages dérivés tels que XAML.

Le langage XML est constitué de balises et d'attributs. Les balises peuvent être ouvrantes, fermantes ou autofermantes. Les attributs sont définis au sein des balises ouvrantes ou auto-fermantes. Ils sont suivis de l'opérateur d'affectation = et leurs valeurs sont toujours entre guillemets (voir Figure 2.1).

Bien que les balises soient définies arbitrairement, il existe des règles d'écriture à respecter sous peine que le fichier ne soit pas lisible :

• la balise xml est proscrite, c'est une balise réservée, utilisée uniquement pour décrire l'encodage du fichier XML ;
• les balises ne doivent pas commencer par un chiffre ou par un caractère spécial ;
• le seul caractère spécial autorisé est _ ; les autres ne doivent pas être contenus dans un nom de balise, attention donc à éviter les caractères avec accent dont la langue française fourmille ;
• il doit y avoir un unique nœud racine ; dans le code XML précédent, la balise racine est DISCOGRAPHIE ;
• une balise ouverte doit impérativement être suivie d'une balise de fermeture qui commence par "</" ou être elle-même auto-fermante, c'est le cas de la balise JACQUETTE ;
• les attributs de balise, par exemple annee, ne doivent pas contenir de caractères spéciaux ;
• les valeurs des attributs de balise doivent toujours être entre guillemets ou entre simples apostrophes.

Vous pouvez également vous référer à des fichiers de type DTD (Document Type Definition). Ceux-ci contiennent une définition de type de document permettant de spécifier certaines règles.

Décider arbitrairement d'une structure de données basée sur des relations familiales peut s'avérer très risqué. Dans un arbre généalogique, la structure familiale représente la vie réelle, il est donc facile de concevoir des données XML basées sur ce modèle. Toutefois, l'exemple de la discographie est intéressant, car de nombreuses méthodes de tri existent dans ce cas. Nous avions classé notre discographie par interprète, 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, à l'intérieur des balises GENRE, nous aurions pu avoir des balises ALBUM. Les données contenues auraient été les mêmes, mais leur structure aurait été différente. 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 première structure aurait pu différer alors que nous avons les mêmes données. Il en est de même pour tous les langages dérivés du XML. Les conséquences pour les fichiers XML peuvent être importantes, car cela peut rendre difficile les opérations de tri et d'accès aux données. Pour les langages comme le XAML, les différentes approches d'imbrication de balises permettent une souplesse de conception unique. Nous allons donc nous intéresser d'avantage au XAML afin de comprendre en quoi ces relations peuvent engendrer des visuels différents et innovants.

Comme nous l'avons expliqué au Chapitre 2 Le couple XAML / C#, le XAML, dérivé de XML, est le nouveau langage apporté par .Net 3. Ce langage permet simplement à un graphiste de formaliser n'importe quel visuel. Créer des éléments graphiques, grâce à ce langage, peut donc être réalisé de deux manières.

1. La première consiste à écrire du XAML via n'importe quel traitement de texte ou éditeur de code. C'est l'approche que va adopter le développeur. Un outil comme Note-Pad suffit, mais Visual Studio est recommandé, car le développeur bénéficie de l'IntelliSense. Ce concept facilite grandement la programmation en évitant aux concepteurs de connaître le vocabulaire d'un langage dans sa totalité. Cela suppose que le graphiste code le visuel, ce qui n'est pas l'idéal, car concevoir du graphisme de cette manière se révèle être une démarche abstraite et indirecte, qui fait appel à peu de sensibilité. L'apprentissage technique du langage est tel que le coder directement dans un premier temps nuit à la création graphique.
2. La seconde méthode passe par l'utilisation d'un outil dédié aux graphistes ou aux designers interactifs. Dans ce cas, deux logiciels de la suite Expression répondent à cette problématique : Expression Blend et Expression Design. Avec ces deux logiciels, les graphistes peuvent concevoir le design d'éléments visuels ou d'une application. Ces logiciels ont la capacité de traduire le visuel en XAML. Une fois le design créé, le développeur peut non seulement en avoir un aperçu, mais aussi récupérer le code XAML généré de manière transparente. Si vous travaillez avec des outils tels que Adobe Illustrator ou Photoshop, il est tout à fait possible d'importer les fichiers produits par ces logiciels au sein d'Expression Design ou Expression Blend directement. Dans ce cas, les fichiers psd ou ai sont transformés en bitmap ou au format vectoriel XAML selon le type du fichier importé.
   Le code généré est directement réutilisable au sein d'une production, le développeur ne le modifiera que très peu et laissera la place au designer interactif. Le travail de ce dernier est donc réellement respecté. Voici une liste de ce qui peut être formalisé en XAML par le graphiste :
3. les tracés vectoriels ;
4. les couleurs unies ;
5. les dégradés de couleurs ;
6. les animations ;
7. les composants visuels ;
8. l'agencement d'une interface visuelle ;
9. les styles de composants ;
10. les modèles de composants ;
11. les filtres ;
12. la 3D.

Comme nous pouvons le voir, le XAML est un formidable outil de communication conçu pour chaque acteur d'une production. L'ergonome, le directeur artistique, le graphiste, le designer interactif, l'intégrateur, le développeur et le directeur technique peuvent participer pleinement à la création d'une application sans empiéter sur le travail des uns ou des autres.

Ces deux langages sont de même niveau. Cela signifie que tout ce qui est créé en XAML peut l'être via C#, bien qu'il ne soit pas adapté à la création graphique. L'inverse n'est pas vrai, XAML est orienté visuel avant tout, ainsi il n'est pas possible de créer d'algorithmes quelconques sans C# ou un autre langage logique, comme VB.

Voici l'écriture d'un 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 même é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>

L'exemple de la Figure 2.3 ne serait pas réellement ergonomique pour l'utilisateur, imbriquer une case à cocher au sein d'un bouton n'a pas de réelle utilité, toutefois cela montre à quel point le XAML s'appuie sur les relations familiales héritées du XML. Vous pourrez donc imaginer toutes sortes d'interfaces visuelles et de nouvelles ergonomies pour vos applications. Ce n'est qu'un aperçu de ce dont le XAML est capable. Vous allez maintenant créer votre premier visuel XAML.

L'exemple précédent est illustratif, mais nous ne bénéficions d'aucun moyen pour le moment d'en avoir un aperçu. Bien sûr, vous pourriez utiliser Expression Blend ou Visual Studio, mais ces logiciels s'inscrivent dans une logique de projet. Vous souhaiterez souvent avoir l'aperçu visuel d'un code XAML sans pour autant créer un projet ou une solution (voir Chapitre 3 Hello World). Pour cela, il existe quelques éditeurs de XAML dont l'un s'appelle Kaxaml. Il a été conçu par Robby Ingebretsen, vous pouvez le télécharger à cette adresse :http://www.kaxaml.com. Comme le dit son concepteur, l'objectif est de vous proposer une IntelliSense poussée tout en fournissant un aperçu de n'importe quel fichier XAML présent sur votre disque dur. Vous trouverez un fichier de démonstration, preview.xaml, dans le dossier chap2 des exemples du livre.

Cependant Kaxaml n'est pas obligatoire. Il existe une autre solution si vous souhaitez envoyer votre travail à un collègue ou à votre directeur artistique, mais que ces derniers ne possèdent pas d'éditeur XAML. En réalité, ils n'en ont pas forcément besoin tant qu'aucun code logique n'est lié au code déclaratif. Tout fichier XAML que vous créez 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 à l'exécution et l'affiche dans le navigateur (voir Figure 2.4).

Même si Kaxaml est pratique pour lire des fichiers, il ne permet pas réellement à un graphiste d'élaborer des éléments visuels complexes. Nous utiliserons donc exclusivement Expression Blend et Visual Studio pour concevoir nos projets.

Pour visualiser correctement un code déclaratif XAML, vous devez impérativement utiliser les espaces de noms conformes au développement XAML. Voici une portion du code où vous pouvez apercevoir les espaces de noms dans les lignes en gras ; il permet d'afficher 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 d'application 
            interactives riches” 
            TextWrapping=”Wrap” Margin=”0,39,0,20” />
         </Grid>
      </Border>
      …
   </Grid>
</UserControl>

Vous remarquez que le code précédent répond bien au standard XML. Outre de nombreuses balises permettant de générer du contenu graphique, il s'y trouve un nœud XML racine UserControl. Celui-ci représente le premier objet visuel de l'application Silverlight. Au sein de cette balise, deux attributs nous intéressent particulièrement : xmlns et xmlns:x. Les initiales xmlns signifient XML NameSpace. Ces attributs sont des espaces de noms, c'est-à-dire qu'ils font référence à des dictionnaires nécessaires au développement d'applications basées sur WPF et XAML. Ces espaces de noms doivent toujours se situer dans le conteneur XAML racine. Le premier fait référence à la bibliothèque WPF (Window Presentation Foundation) dont Silverlight émane. C'est l'espace de noms par défaut. Grâce à lui, nous avons accès aux objets complexes de cette bibliothèque, comme Border, Grid ou TextBlock. En interne, cette bibliothèque est basée sur le langage XAML. C'est pourquoi nous avons besoin d'un deuxième espace de noms, xmlns:x, qui fait pour sa part référence au langage XAML proprement dit. À chaque fois que nous ferons référence à cet espace de noms, les balises ou attributs devront être préfixés de x:. C'est, par exemple, le cas de l'objet grille qui contient l'attribut 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 référencée au sein du nœud racine de cette manière (voir Chapitre 3 Hello World pour les classes partielles) :

<UserControl x:Class="maClasse"  …

Cependant, gardez bien à l'esprit qu'un navigateur renverra une erreur d'affichage lors de la lecture directe d'un fichier XAML, si celui-ci référence 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.

Le langage C# est sorti dans sa première version avec la plate-forme .Net 1. D'après 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 révolution en soi. Pour ses versions 3 et 4, il a bénéficié d'améliorations visant à assouplir les règles et les méthodologies de développement. L'idée est de permettre des prises de décisions tardives dans les choix d'architecture en intégrant les avantages propres aux langages fonctionnels F# ou JavaScript. Au même titre que Visual Basic, il est géré par la CLR (Common Language Runtime), c'est-à-dire qu'il est tout d'abord compilé en langage intermédiaire avant de l'être en langage machine par le Just In Time Compiler (JITC). C# est un langage orienté objet. Les variables ou méthodes sont fortement typées. Toutefois les types (comme string ou double) n'appartiennent pas au langage lui-même, mais au Common Type System (CTS). Cela signifie qu'un type string en C# ou en Visual Basic est avant tout un type string géré par le CTS propre à .Net. C'est cela qui permet aux développeurs de coder dans différents langages. Le CTS est donc une composante importante de la CLR. Il permet l'interopérabilité des langages.

Le cœur du langage C# est totalement indépendant de l'API Silverlight. Une API est constituée d'une multitude de bibliothèques (ou espaces de noms). L'API (ou framework) Silverlight permet aux développeurs de concevoir des applications Silverlight. L'espace de noms principal est System.
Par exemple, l'une des bibliothèques accessibles dans le framework Silverlight permet de sauvegarder des données sur le poste client local. Il s'agit de la bibliothèque IsolatedStorage. Celle-ci contient plusieurs classes qui permettent d'atteindre cet objectif.

La programmation orientée objet s'oppose à la programmation procédurale. Jusqu'au début des années 1980, avec les langages bas niveau proche de la machine, le code était organisé de manière linéaire : il était lu de haut en bas à la manière d'une procédure que l'on suit. Par la suite, avec des langages comme C++, puis des langages de haut niveau, la programmation orientée objet s'est imposée. La POO part du principe que la plupart des fonctionnalités ou composants d'une application peuvent être décrits sous forme d'objets. Par exemple, si l'on crée une application de gestion de parc automobile, on peut considérer les voitures comme un composant essentiel de l'application, les voitures seront donc envisagées comme des objets. Les objets sont en réalité des exemplaires de modèles d'objets appelés classes. Chaque exemplaire de la classe Voiture sera différencié par les valeurs de ses propriétés et de ses champs (voir la section 2.3.4.6 Différencier les champs et les propriétés). Par convention, on privilégie la notation Pascal où chaque nom de variable ou de méthode commence par une majuscule : MaFonction, MaPropriété, MonChamp. Pour les paramètres de méthode, on utilise plutôt la notation Camel : monParametre. Le modèle de Voiture, appelé classe, permet de décrire tout ce que peut faire une voiture, ainsi que tout ce qui la définit. Le mot-clé class permet de créer une nouvelle classe. Voici en C# comment générer 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;

   //méthode 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 affichée
      Console.ReadLine();
   }

   //méthode qui permet à la voiture de s'arrêter
   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 méthodes (ou fonctions) propres au modèle Voiture. Toutefois, les valeurs affectées aux propriétés et aux champs pourront être différentes pour chacun d'eux, c'est cela qui permet de les différencier. Toutes les voitures ont une propriété couleur, mais celle-ci pourra posséder plusieurs valeurs : rouge, verte ou bleue, selon l'exemplaire. Le mot-clé new permet de créer un nouvel exemplaire de la classe Voiture. Voici comment vous pouvez créer des exemplaires (également appelés instances) du modèle Voiture :

//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 instanciée possède les mêmes champs mais que ceux-ci contiennent des valeurs différentes. La déclaration et l'affectation de variables seront abordées à la section 2.3.4 Les types.

Nous allons maintenant mettre en pratique notre apprentissage récent en créant 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 génère par défaut :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

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

Toute application console possède une classe par défaut qui s'appelle Program, contenue dans un espace de noms correspondant au nom du projet et celle-ci contient une méthode qui s'exécute par défaut : Main. Nous allons tracer un message dans la console Windows. Pour cela, ajoutez les lignes suivantes au sein de la méthode Main :

static void Main(string[] args)
{
   Console.WriteLine(";Bonjour tout le monde !!”);
        //ceci trace le message
   Console.ReadLine();
        //ceci empêche la fermeture de la console
}

Pour compiler notre première application et l'exécuter, 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 exécution. Si vous n'utilisez pas ce mode, votre application échouera en silence si elle contient des erreurs. Pour compiler et exécuter sans déboguer, il suffit d'appuyer sur les touches Ctrl+F5. Si vous souhaitez uniquement compiler sans lancer votre application, vous pouvez utiliser le raccourci Ctrl+Maj+F5.

2-3-4-1. Variables et champs d'objets▲

class Program
{
   int monEntier = 13;
}

class Program
{
   int monEntier;
   monEntier = 13;
}

2-3-4-2. Les types primitifs▲

2-3-4-3. Les types complexes▲

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

void TraceMesVoitures(){
   //Pour chaque élément de type Voiture dans le tableau MesVoitures
   foreach(Voiture V in MesVoitures){
      //cette ligne permet d'afficher le résultat dans une Console
      Console.WriteLine("j'ai une {0}", V.Marque);
   }
   //celle-ci permet de figer l'affichage de la console pour la lecture
   Console.ReadLine();
}

2-3-4-4. Les modificateurs d'accès▲

class Program{
   //ceci est une écriture pratique 
   //pour créer un nouvel exemplaire de voiture
   Voiture maDeLorean = new Voiture();
   maDeLorean.marque = "DeLorean";
}
class Voiture{
   public string marque;
   Guid numeroSerie = new Guid();
}

2-3-4-5. Conversion de type implicite et explicite▲

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.

byte MonByte2;
int MonEntier2 = 113;
MonByte2 = (byte)MonEntier2;
Console.WriteLine(";type de MonByte2 :: "; + MonByte2.GetType());

int MonEntier3 = 312;
byte MonByte3 = (byte)MonEntier3;
Console.WriteLine(";type de MonByte3 :: "; + MonByte3.GetType() + "; - 
                    valeur :: "; + MonByte3);

byte MonByte4;
int MonEntier4 = 312;
MonByte4 = Convert.ToByte(MonEntier4);
Console.WriteLine(";type de MonByte4 :: "; + MonByte4.GetType());

2-3-4-6. Différencier les champs et les propriétés▲

public string modele { get; set; }

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 chaîne de caractères
   private string _modele;
   public string Modele 
   { 
      get{ // on met la logique concernant la lecture de la propriété
           //si le modèle est défini alors je renvoie le nom du modèle
         if ( _modele.Length > 0) return _modele;
         else return "N.C."; //si non je renvoie Non Communiqué
      } 
      set{  // on met la logique concernant l'écriture de la propriété
            // si la valeur que l'on essaie d'établir n'est pas nulle
           // alors on affecte la nouvelle valeur du modèle
         if (value.Length > 0) _modele = value;
      }
   }
}

2-3-4-7. Le tas et 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);

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);

2-3-4-8. Les inférences de type▲

2-3-4-9. Les types anonymes▲

var MaVoitureAnonyme = new { Modele="307", Marque="Peugeot", 
                    Prix=8950, Annee=2004 };

2-3-5-1. Définition et appel de méthodes▲

class Voiture{
   public void Rouler(){
      Console.WriteLine("La voiture roule 100 km");
   }
}
class Program{
   static void Main(string[] args){
      //On invoque la méthode rouler sur l'instance de Voiture MaDeLorean
      MaDeLorean.Rouler();
      Console.ReadLine();
      //la console tracera le message définit au-dessus
   }
}

public class Voiture{
   public int Rouler(){
      Console.WriteLine("La voiture roule 100 km ")
      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 méthode rouler sur l'instance MaDeLorean 
      Console.WriteLine(";Elle rejette :: "; + MaDeLorean.Rouler() + 
                           "; g CO2 / Km”);
      Console.ReadLine();
      //la console tracera le message défini dans la méthode,
      //puis le message défini dans la méthode Main
    }
}

2-3-5-2. Les paramètres de méthode▲

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;
   }
}

static void Main(string[] args)
{
   //On invoque la méthode rouler sur l'instance maDeLorean 
   Console.WriteLine("Elle émet :: " + MaDeLorean.Rouler(113) + 
                         " g CO2 / km");
   Console.ReadLine();
   //la console tracera le message défini dans la méthode en 
   //prenant en compte le nombre de kilomètres parcourus 
}

2-3-5-3. Le tableau de paramètres▲

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 méthode CalculPrixMoyen
   Console.WriteLine(";prix moyen des voitures :: {0}”, CalculPrixMoyen 
  (MaDeLorean, MaPorsche, MaSuper5) );
}
//on utilise le tableau de paramètre et on précise un type de retour
//car cette fonction renvoie la moyenne calculée
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. Portée de variables▲

2-3-5-5. Les méthodes d'extension▲

static class MyExensionsMethods {
   public static bool IsBiggerThan (this int myInt, int compare)
   { 
      return myInt > compare; 
   }
}

int monEntier = 37;
bool myBoolean = monEntier.IsBiggerThan( 13 );

2-3-6-1. Principes▲

class Utilitaire : Voiture{
   public int Volume;
   public void Charger(){
      Console.WriteLine("on charge l'utilitaire");
      Console.ReadLine();
   }
   public void Decharger(){
      Console.WriteLine("on décharge l'utilitaire");
      Console.ReadLine();
   }
}

//une classe héritée de Voiture
Utilitaire MonKangoo = new Utilitaire() { Marque = "Renault", 
Longueur = 1.2, Modele = "Super5", TypeCarburant = "diesel", Volume=6 };

2-3-6-2. Surcharge de méthodes▲

Console.WriteLine( MaDeLorean.ToString());
//renvoie ParcAuto.Voiture

public override string ToString(){
   return "modèle :: " + Modele + " - marque :: " + Marque;
}

return "classe :: " + base.ToString()+" - modèle :: " 
            + Modele + " - marque :: " + Marque;

2-3-6-3. Déclarer des interfaces▲

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

Vous allez maintenant ajouter un champ texte centré. Pour cela, vous trouverez une icône de champ texte dans votre barre d'outils. Cliquez dessus et maintenez l'icône enfoncée. Trois pictogrammes apparaissent, correspondant aux trois types de champs texte que vous pouvez créer : TextBlock, TextBox et PasswordBox. Le contrôle de type TextBlock vous permet d'afficher du texte. Les deux autres types autorisent l'utilisateur à saisir du texte lors de l'exécution de l'application. Le composant PasswordBox est utile pour la saisie de mots de passe utilisateur. Sélectionnez le premier type de champ (TextBlock). Nous allons ajouter une instance de type TextBlock dans notre conteneur LayoutRoot. Double-cliquez sur l'icône. Un nouveau TextBlock est automatiquement créé en haut à gauche, dans la grille LayoutRoot. À sa création un TextBlock est en mode édition de texte (voir Figure 3.7). Pour en sortir, appuyez sur la touche Esc ou cliquez hors du composant.

Lors de sa création via un double-clic et au sein d'un contrôle de type Grid, un objet est toujours placé en haut à gauche. Vous allez centrer le champ texte au sein de la grille. Pour cela, sélectionnez-le dans l'arbre visuel, puis ouvrez l'onglet Properties. À l'intérieur de la catégorie Layout, vous trouvez deux séries d'icônes reflétant les options d'alignement ainsi que quatre champs de saisie juste en dessous. Ceux-ci permettent de spécifier des marges extérieures et doivent être utilisés conjointement avec les options d'alignement. C'est le paramétrage de l'ensemble de ces propriétés qui détermine le positionnement des objets au sein d'un conteneur. Assurez-vous que ces champs ont tous une valeur égale à zéro. Si un quelconque chiffre apparaît dans un de ces champs, il faut le remettre à zéro. Si vous avez créé le champ texte en le dessinant directement au sein de la grille, ces propriétés ne sont pas vides. Pour réinitialiser n'importe quelle propriété dans Blend, il vous suffit de cliquer sur l'icône carrée présente à droite de chacune des propriétés et de sélectionner Rétablir. Cliquez maintenant sur les deux pictogrammes qui permettent l'alignement horizontal et vertical (voir Figure 3.8).

Votre texte est maintenant centré. Les propriétés largeur et hauteur (Width et Height) possèdent une valeur Auto. Cela signifie que leur valeur s'adaptera automatiquement, soit au contenu du champ texte (la chaîne de caractères), soit au conteneur, en fonction des marges et de l'alignement spécifié. Vous allez paramétrer l'affichage de ce champ. Pour cela, ouvrez la catégorie Text du panneau Properties. Vous y trouverez plusieurs options, notamment pour choisir la police de caractères ou encore la mise en forme du texte. L'une d'entre elles, FontSize, permet de modifier la taille de la police en pixels. Choisissez une taille d'au minimum 24 pixels. Si vous avez correctement configuré les options d'alignement du texte, celui-ci devrait s'étendre dans les deux sens, mais rester centré dans la grille principale. Dans l'onglet Common Properties, pour la propriété Text, entrez la valeur "HelloWorld" ou la chaîne de caractères de votre choix. Une fois de plus, le TextBlock s'étend dans les deux directions pour s'adapter à son contenu (voir Figure 3.9).

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

• dans le panneau Project, après un clic droit sur la solution, sélectionnez Run Project ;
• au sein du menu Project, sélectionnez Run Project ;
• utilisez le raccourci clavier F5.

Ces trois méthodes compilent le projet et affichent le résultat dans votre navigateur configuré par défaut. Un lecteur autonome existe, mais tester ou déboguer une application Silverlight ne peut être réalisé qu'au sein d'un navigateur. Appuyez sur la touche F5. Une série de messages apparaît en fenêtre de sortie. Ils vous indiquent la progression de la compilation. La page HTML contenant votre application apparaît (voir Figure 3.10).

Vous remarquez qu'au sein de notre page, le composant TextBlock n'est pas centré. En réalité, il est correctement centré, mais par rapport à la page de notre application chargée par défaut. Il est donc centré par rapport au conteneur principal du fichier MainControl.-xaml et son composant racine UserControl. Si vous faites un clic droit n'importe où sur la page HTML, vous verrez un menu contextuel Silverlight. Celui-ci vous indique que l'instance du plug-in Silverlight occupe toute la place dans la page HTML. Cependant, par défaut, le UserControl racine possède des dimensions fixes (640 pixels de large par 480 de hauteur). Pour le vérifier, sélectionnez dans Blend le UserControl principal et vérifiez les valeurs de ses propriétés Width et Height. Pour résumer, la page HTML générée par défaut affiche l'instance du plug-in dans une balise de type DIV occupant 100 % de hauteur et de largeur, c'est-à-dire que l'instance Silverlight occupe toute la place au sein du navigateur. Toutefois, le UserControl racine possède des dimensions fixes exprimées en pixels (voir Figure 3.11).

Si vous souhaitez centrer le TextBlock dans la page HTML, il vous faut donc faire en sorte que le UserControl racine de MainControl.xaml s'adapte au navigateur continuellement. Pour cela il vous faut redéfinir la largeur et la hauteur du UserControl. Fermez votre navigateur et revenez sous Blend. Sélectionnez le UserControl dans l'arbre visuel, au-dessus du composant Grid, nommé LayoutRoot par défaut. Ensuite, définissez ses propriétés Width et Height sur Auto en cliquant sur le pictogramme situé à droite.La valeur Auto signifie que la largeur du composant va s'adapter à l'espace qui lui est permis dans la page HTML. Au sein de Blend, la largeur et la hauteur n'étant pas fixées en pixels, le composant s'adapte pour afficher au minimum le champ texte contenu dans la grille LayoutRoot. Des icônes apparaissent autour du contour, elles indiquent que vous pouvez agrandir les dimensions du UserControl racine (voir Figure 3.12).

Les icônes les plus éloignées permettent d'étirer le projet pour simulant les dimensions fictives d'une page HTML. Vous pourrez par exemple obtenir un aperçu du redimensionnement de votre application dans une résolution plus faible. Pour gérer de manière précise les dimensions d'affichage fictives, vous devez passer en mode d'édition XAML. Pour cela, Blend propose un mode d'édition XAML. Cliquez sur l'icône représentant une balise en haut à droite de la fenêtre de design. C'est la deuxième icône en partant du haut (voir Figure 3.13). Elle permet d'accéder au mode XAML. La première icône, en haut, passera la vue en mode création. Vous pourrez également utiliser le mode mixte qui affiche à la fois le code XAML et le visuel en cliquant sur l'icône située en bas.

Une fois en mode XAML, modifiez les propriétés d:DesignWidth et d:DesignHeight du nœud UserControl racine en leur donnant respectivement les valeurs 800 et 600. Vous pouvez voir un aperçu 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 possède maintenant une résolution de 800 pixels de large et de 600 pixels 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 prévisualisation de la mise en page dans cette résolution. Elles ne sont pas prises en compte lors de l'exécution de l'application dans une page HTML. Quoi qu'il en soit, l'instance de l'application Silverlight est dans une balise à 100 %, le UserControl occupera le maximum d'espace dans la page HTML, car les propriétés 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 fenêtre du navigateur, le texte se repositionne dynamiquement (voir Figure 3.14).

Une fois l'application compilée, votre navigateur se lance et affiche la page Silverlight. Le site s'affiche via le serveur Web de développement lancé par Blend. C'est l'icône que vous pouvez apercevoir en bas à droite. Tous les fichiers relatifs à la création du site se situent dans le répertoire Debug (voir Figure 3.15).

Comme vous pouvez le voir, les fichiers produits à la compilation sont situés dans le répertoire Debug. Lorsque votre projet est en phase finale et prêt pour sa mise en ligne, vous pouvez, sous Visual Studio, définir l'application en mode Release. Cela permet de gagner en performances. Les bibliothèques nécessaires pour tracer des messages dans la fenêtre de sortie ou pour déboguer sont ignorées, le code est également beaucoup plus optimisé. De plus, c'est une bonne pratique, lorsque l'on 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 généré automatiquement lors de chaque compilation pour tester l'application Silverlight. Ce fichier propose une intégration minimale. Il contient simplement une balise object définissant l'instance du plug-in Silverlight dans la page Web. Voici un exemple de la balise générée par défaut :

   

  Sélectionnez

  <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 paramètre indique le chemin d'accès vers le fichier xap à lire (voir HelloWorld.xap au point suivant). Le deuxième paramètre, onerror, redirige quant à lui toutes les erreurs à l'exécution ou lors de l'ouverture du fichier vers une fonction JavaScript qui gère leur affichage dans une balise DIV dédiée. Le paramètre autoUpgrade est par défaut à true. Cela signifie que celui-ci permet la mise à jour automatique de Silverlight lorsqu'une nouvelle version est disponible.

• HelloWorld.xap. C'est le format de fichier lisible par le lecteur Silverlight. Malgré les apparences, il n'est pas le produit direct de la compilation mais un fichier zip renommé avec l'extension xap. Il contient la dll de l'application ainsi qu'un manifeste décrivant tout ce qui est à l'intérieur. Dans notre cas, il possède HelloWorld.dll, le fichier produit par la compilation.

• HelloWorld.dll. C'est exactement le même fichier que celui situé dans le document xap. Il peut être référencé par n'importe quel autre projet Silverlight. Cela permet au projet qui le référence de pouvoir créer des instances de notre application. Vous pourriez ainsi créer un portfolio de tous les sites que vous avez réalisés en Silverlight, simplement en référençant leur dll et en les instanciant sous forme de miniature au sein d'Expression 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 définit les informations indispensables permettant au lecteur Silverlight de lire le fichier xap. Le lecteur compare la version de Silverlight exposée par l'attribut RuntimeVersion à la valeur de la propriété minRuntime-Version définie dans la balise object au sein du document TestPage.html. Si les versions définies dans chacun de ces fichiers ne correspondent pas, le lecteur peut lever une erreur.

3-5-4-1. Les classes partielles▲

<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>

namespace HelloWorld
{
   public partial class MainPage : UserControl
   {
      public MainPage()
      {
         // Required to initialize variables
         InitializeComponent();
      }
   }
}

3-5-4-2. Just In Time Compiler▲

La compilation d'un projet Silverlight s'effectue toujours en deux étapes. La première consiste à transformer les langages de haut niveau gérés par la CLR comme C#, VB, XAML ou les langages gérées par la DLR, comme IronPython en langage intermédiaire. Quel que soit le langage d'origine, le langage intermédiaire résultant de la compilation est le même pour tous les langages gérés par .NET. La compilation est réalisée par le compilateur propre au langage dans lequel vous développez. Ce langage intermédiaire est contenu dans la dll qui est encapsulée au sein du fichier xap. Dans notre cas, elle se nomme "HelloWorld.dll" que nous avons évoquée plus haut. La deuxième étape est une compilation effectuée lors de la lecture du fichier xap par le plug-in Silverlight. L'implémentation du lecteur Silverlight diffère selon les systèmes d'exploitation et le navigateur utilisé. Cette compilation est donc à chaque fois différente mais l'objectif est le même : transformer le langage intermédiaire en langage machine. C'est le Just In Time Compiler qui gère cette étape. Son but est de compiler au dernier moment en langage machine afin d'obtenir les meilleures performances possibles selon le système. Comme il est différent et spécialisé selon les systèmes et les navigateurs, il produit du code machine plus adapté qu'un compilateur générique (voir Figure 3.16).

Dans le prochain chapitre, nous plongerons dans l'interface d'Expression Blend pour créer un site Silverlight très simple et gérer le redimensionnement des éléments visuels.

4-2-1-1. Créer 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 d'empiler verticalement ou horizontalement un ensemble d'objets. Dans notre cas, il s'agira de champs texte de type TextBlock. Tout contrôle visuel est cliquable au sein des projets Silverlight ou WPF. Le TextBlock n'échappe pas à cette règle, il peut donc jouer le rôle de liens ou de boutons. Commencez par créer un composant StackPanel. Dans la barre d'outils de Blend, cliquez en laissant appuyer sur l'icône représentant le composant Grid. Une série d'icônes apparaît. Sélectionnez l'icône représentant le StackPanel (voir Figure 4.3).

L'icône StackPanel remplace l'icône Grid au 1^er niveau, double-cliquez dessus. StackPanel est automatiquement placé en haut à gauche de la grille principale LayoutRoot. Il possède des dimensions de 100 pixels de hauteur comme de largeur. Vous allez définir une largeur et une hauteur en mode Auto, pour cela cliquez sur l'icône à droite de la propriété Width et Height. Le StackPanel n'a plus de largeur ni de hauteur, il s'est adapté à son contenu. Comme il n'en a pas encore, il possède des dimensions en largeur et hauteur égales à zéro pixel. Ce comportement est lié au fait qu'il est aligné en haut à gauche et qu'il n'est pas en mode Stretch (étirement).

Lorsqu'un conteneur vide possède une largeur en mode Auto, cela signifie que la valeur s'adapte, soit par rapport au contenu du conteneur, soit par rapport au conteneur parent de celui-ci. Au sein d'une grille, si son alignement horizontal est à gauche, à droite ou centré, cela implique qu'il s'adapte par rapport à son contenu. Si l'option d'alignement est en mode étirement (Stretch) et que des marges sont définies, il s'étirera pour correspondre à la largeur de son conteneur, moins les dimensions des marges qui sont définies à gauche et à droite. C'est exactement le même principe pour la propriété hauteur (Height). Le mode Auto est spécifique aux propriétés largeur et hauteur. Pas toujours facile à assimiler, il possède le même comportement que celui existant en XHTML. Il est bidirectionnel car les valeurs en pixels sous-jacentes sont récupérées, soit par le conteneur parent, la grille LayoutRoot dans notre cas, soit par le contenu. Ce mode permet de gérer des comportements avancés tout en étant cohérent.

Cliquez sur l'icône correspondant à un alignement horizontal à droite dans les options d'alignement (), puis définissez une marge à droite de 30 pixels. Spécifiez ensuite un alignement vertical vers le bas ainsi qu'une marge de 10 pixels par rapport à la bordure basse de la grille LayoutRoot. Ne spécifiez aucune marge à gauche (entrez la valeur  0). Pour finir, vérifiez bien qu'Orientation est en mode Horizontal. Ce mode indique la direction d'empilement des éléments contenus.

4-2-1-2. Ajouter des champs texte et notion de contexte conteneur▲

Lorsque vous avez double-cliqué sur l'icône du StackPanel, vous l'avez directement imbriqué dans la grille LayoutRoot. Ce n'est pas un hasard. Vous avez pu réaliser cette opération, car cette grille était sélectionnée comme contexte conteneur.

Le contexte conteneur est toujours entouré d'un liseré bleu ou jaune. Cela signifie que toutes les actions du graphiste, la création de composants, leur sélection ou encore leur modification, seront réalisées dans le conteneur sélectionné comme contexte actif. Pour créer une série de menus à l'intérieur du StackPanel, il vous faut donc cliquer sur celui-ci dans la vue de design pour le définir en tant que contexte actif. Ensuite, vous pouvez double-cliquer sur l'icône TextBlock dans la barre d'outils. Lors de chaque double-clic, vous imbriquez une nouvelle occurrence de TextBlock au sein du StackPanel. Répétez cette opération trois fois. Une fois les trois champs texte créés, définissez des marges à droite de 20 pixels pour les deux premiers. Vous pouvez sélectionner les deux éléments et spécifier leurs marges en même temps dans le panneau des propriétés. Ensuite, changez la valeur contenue dans la propriété Text, qui est accessible via le panneau des propriétés ou directement par double-clic sur le composant TextBlock dans la fenêtre de design (voir Figure 4.4). Vous pouvez également choisir une police afin d'affiner le visuel. Je vous conseille la police Trebuchet MS dans un premier temps car cela évite d'avoir à l'embarquer puisqu'elle est intégrée par défaut à Silverlight.

Vous remarquez que le StackPanel s'agrandit vers la gauche automatiquement à chaque nouvel élément visuel ajouté en son sein.

Nous allons maintenant créer le menu du haut. Le composant bouton (Button) propose des interactions visuelles avantageuses informant l'utilisateur que ce menu est réactif. Par exemple, le menu pourrait changer de couleur lorsqu'il 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 d'un conteneur. Afin de gérer les redimensionnements extrêmes de notre site, nous allons utiliser un composant WrapPanel. Celui-ci est proche du StackPanel dans son principe, c'est-à-dire qu'il empile les éléments les uns après les autres. Toutefois, il met à la ligne un élément visuel si jamais celui-ci tend à dépasser le bord droit ou le bord bas du conteneur selon son orientation (voir Figure 4.5).

Couplé au mode de redimensionnement Auto, propre aux propriétés largeur et hauteur, nous pourrions ajuster les dimensions dynamiquement à chaque remise à la ligne. Par exemple, si nous définissons la hauteur (Height) du WrapPanel sur Auto et son orientation à horizontale et un alignement vertical haut (éviter le mode Stretch dans ce cas, ainsi que les marges), alors le WrapPanel s'ajustera en hauteur pour chaque nouvelle ligne d'éléments visuels. Vous pouvez voir l'exemple précédent mis à jour en utilisant le mode Auto (voir Figure 4.6).

Comme vous pouvez le constater, sur le premier schéma de la Figure 4.6, les rectangles (22, 23, 24) ne sont plus coupés, la hauteur est réajustée en fonction du nombre de lignes. Sur le second schéma, il ne reste plus aucun espace à droite de l'élément 18 car la largeur du WrapPanel s'ajuste au contenu.

4-2-2-2. Créer et configurer le WrapPanel▲

Pour créer un conteneur de ce type, vous devez utiliser la bibliothèque de composants, car il ne se trouve pas dans la liste des conteneurs proposés par défaut. Cliquez sur la dernière icône de la barre d'outils, celle ressemblant à une double flèche (). Elle vous permet d'ouvrir la bibliothèque de composants. Sélectionnez le mode d'affichage avec grandes icônes pour identifier les contrôles disponibles (voir Figure.4.7).

Le champ de recherche sert de filtre, entrez-y les lettres wr. Le contrôle de type Wrap-Panel n'est pas visible dans la liste. C'est en fait très logique, il n'est pas instanciable par défaut au sein des projets Silverlight. Pour y remédier, il vous suffit de télécharger et d'installer la bibliothèque nommée Silverlight Toolkit. Elle est maintenue par l'équipe Silverlight de Microsoft et regroupe de nombreux avantages dont certains contrôles qui ne sont, par défaut, accessibles qu'au sein des projets WPF. Afin d'assurer un maximum de fonctionnalités au sein de Silverlight, ces composants ont été redéveloppés et mis à disposition dans le Silverlight ToolKit. Vous le trouverez à l'adresse : http://www.codeplex.com/Silverlight/. Cliquez sur le menu Download (voir Figure 4.8).

Une fois la bibliothèque installée, 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 bibliothèques de contrôles installées. Sélectionnez le contrôle WrapPanel, son icône apparaît juste en dessous de celle permettant l'accès à la bibliothèque. Double-cliquez dessus, une instance de type WrapPanel est automatiquement créée au sein du contexte conteneur sélectionné. Dans notre cas, cela doit être LayoutRoot.

Vous pouvez également accéder à la liste des contrôles via le panneau Assets situé en haut à gauche. Ce panneau est parfois plus pratique d'utilisation, cela dépendra essentiellement de la manière dont vous utilisez Blend.

Nous allons l'ancrer sur les bordures droite, gauche et haute de la grille principale. Pour cela, vous allez définir une largeur et une hauteur en mode Auto, comme nous avons fait pour le menu du bas avec le composant StackPanel. Ensuite, cliquez sur l'icône d'alignement vers le haut et spécifiez une marge de 10 pixels par rapport au bord haut. Cliquez sur l'icône étirement horizontal pour activer ce mode. Définissez des marges à 30 pixels pour la bordure gauche et à 90 pixels pour la bordure droite. Cliquez sur l'icône à droite des propriétés Width et Height. Le WrapPanel n'a plus de hauteur. Il s'est adapté à son contenu qui est vide. Il possède donc une hauteur égale à 0 pixel. Au contraire, comme nous avons défini des marges à gauche et à droite ainsi qu'un alignement horizontal étiré, il possède une largeur égale à la largeur totale de l'application moins les marges (voir Figures 4.9 et 4.10).

Comme vous pouvez le voir, le WrapPanel est ancré en haut, à gauche et à droite. Les icônes représentant un verrouillage indiquent l'ancrage des objets ou non sur les bords du conteneur Grid principal. Elles sont accompagnées de nombres indiquant la valeur en pixel de chaque marge. Elles sont cliquables et permettent de modifier les options d'alignement 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 Figure 4.2. Sélectionnez le WrapPanel, puis double-cliquez cinq fois sur l'icône représentant un bouton au sein de la barre d'outils. Vous venez à l'instant d'imbriquer cinq boutons dans le conteneur WrapPanel. Vous auriez pu les dessiner directement au sein de ce conteneur. Cette manière de faire présente l'avantage d'éviter de préciser, pour chaque bouton, les dimensions en hauteur et largeur. Avec cette méthode, celles-ci ont été définies en mode Auto pour chacun d'eux. Les valeurs des propriétés Width et Height s'ajustent en fonction de leur contenu textuel, qui est par défaut la chaîne de caractères Button. Dès cet instant, le WrapPanel possède une hauteur qui s'ajuste à chaque bouton. Si vous définissez une police différente ou une taille différente, le bouton réajustera sa hauteur qui réajustera celle du WrapPanel. Si vous avez défini des marges verticales sur l'un des boutons, celles-ci affecteront directement la hauteur finale du WrapPanel.

Sélectionnez chaque bouton en maintenant la touche Maj enfoncée. Ensuite, au sein du panneau des propriétés, dans l'onglet des propriétés communes, spécifiez la police Trebuchet MS, ainsi qu'une hauteur de caractères de 14 pixels.

Le corps des polices est exprimé par défaut en pixels et non en points. Il est toutefois possible de le modifier. Pour cela, ouvrez le menu Tools > Options… choisissez ensuite l'onglet Units. Dans la liste sélectionnez Points au lieu de Pixels.

Désélectionnez tous les boutons en cliquant n'importe où sur la scène, puis cliquez sur le premier bouton et entrez la chaîne de caractères Nouveautés dans la propriété Content. Procédez de même avec tous les autres afin d'avoir un menu correspondant à la Figure 4.2. Ensuite, créez un dernier bouton à l'extérieur du WrapPanel au sein du conteneur Layout-Root. Il doit être ancré en haut à droite et posséder des marges de 10 pixels en haut et de 8 à droite. Dans sa propriété Content, insérez la chaîne de caractères Plein écran. Ce bouton ne fait pas partie directement du WrapPanel car il ne donne pas accès au même niveau d'utilisation. Il nous permettra de passer alternativement du mode plein écran au mode d'affichage normal. Vous devriez maintenant avoir un visuel similaire à la Figure 4.11.

Pour finir, sélectionnez le UserControl racine et définissez 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 généré en arrière-plan par Blend, pour la totalité de la grille principale :

 

Sélectionnez

<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="Nouveautés" 
        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="Médias" 
        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" 
        FontWeight="Bold"/>
   </Grid>
</Grid>

En très peu de lignes, nous sommes parvenus à créer une interface redimensionnable. Vous remarquez que la balise WrapPanel est préfixée de controlsToolkit. Cela signifie qu'il n'est pas référencé dans l'assembly System.Windows.dll par défaut. En réalité, lorsque vous avez ajouté ce composant dans l'application, Blend a automatiquement référencé deux bibliothèques issues du Silverlight ToolKit : System.Windows.Controls.dll et System.Windows.Controls.Toolkit.dll. Pour le vérifier, il suffit d'ouvrir votre panneau projet et de déplier le répertoire Reference. Blend a également fait en XAML l'équivalent d'un using C# pour référencer l'espace de noms controlsToolkit. Voici le code ajouté dans le UserControl racine :

 

Sélectionnez

xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Toolkit"

Lorsque vous concevrez et partagerez vos composants personnalisés, les personnes désirant les utiliser agiront de la même manière. Elles devront donc ajouter la bibliothèque contenant vos composants en tant que nouvelle référence. Toutefois Blend fait ce travail pour vous dans la plupart des situations. Pour l'instant, ce visuel est un peu brut, mais nous apprendrons rapidement à créer des composants et des styles personnalisés.

Vous allez créer un conteneur Grid situé au centre de la grille principale. Il contiendra le contenu des pages de notre site plein écran. Sélectionnez le conteneur LayoutRoot pour le définir comme contexte conteneur, puis dessinez une grille au centre.

4-2-3-1. Gérer le redimensionnement▲

Affectez à cette grille une hauteur et une largeur automatique avec un alignement étiré (Stretch). Pour éviter qu'elle ne recouvre les autres objets, elle doit posséder des marges d'environ 30 pixels à gauche, 60 pixels en haut, 30 pixels à droite et 30 pixels en bas (voir Figure 4.12).

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

4-2-3-2. Modifier la couleur d'arrière-plan▲

Afin de rendre la grille plus visible lors de la compilation, définissez une couleur
d'arrière-plan gris clair. Pour cela sélectionnez, en haut du panneau des propriétés, l'attribut Background présent dans l'inspecteur de couleurs. Ensuite, cliquez sur la deuxième icône en partant de la gauche. Elle permet de spécifier une couleur unie (voir Figure 4.13).

Comme vous pouvez le remarquer, le code couleur hexadécimal est codé sur quatre octets soit #FFFFFFFF.

Un octet représente 8 bits, c'est pour cela que l'on parle d'images 32 bits (4x8). Un bit possède une valeur 0 ou 1. Une valeur 8 bits représente donc une combinaison de 8 chiffres possibles de 0 ou 1, soit 28 possibilités. En hexadécimal, cela se traduit par FF, ce qui donne en tout 256 possibilités, de 0 à 255. Dans la plupart des logiciels de graphisme, la couche de transparence n'est pas directement affichée dans le code hexadécimal mais elle est plutôt affichée sur une échelle qui va de 0 à 100 % d'opacité. Blend propose les deux affichages, ce qui évite les ambiguïtés. La couleur #00FF0000 ne sera donc pas visible, car le premier couple de 0 indique qu'il n'y a aucune opacité.

Donner un nom d'exemplaire aux objets permet d'y accéder facilement depuis le code logique. Une fois nommés, les objets deviennent des champs de la classe associée au UserControl. Ces champs sont définis par défaut avec le modificateur d'accès internal. Ainsi vous pourrez atteindre leurs méthodes, cibler leurs propriétés dynamiquement ou encore écouter les événements qu'ils diffusent (comme le clic de la souris). Sélectionnez le bouton plein écran, celui-ci ne possède pour l'instant pas de nom d'instance. Pour savoir si un composant possède un nom d'exemplaire, il suffit de regarder dans l'arbre visuel. Si le composant est décrit par son type entre crochet, cela signifie qu'il n'est pas nommé. Vous pouvez également regarder dans le panneau des propriétés si son attribut Name, situé tout en haut, est défini. Définir un nom d'instance est assez simple, vous pouvez soit double-cliquer sur l'occurrence directement dans l'arbre visuel, soit insérer une chaîne de caractères dans sa propriété Name. Définissez Plein-EcranBT comme nom d'instance. Par la suite, nous définirons un comportement propre à ce bouton pour passer en mode plein écran (voir Figure 4.14).

On peut assigner un ToolTip à tout élément visuel. Cette propriété est dite attachée, elle n'est pas définie sur l'objet, elle est fournie par la classe statique ToolTipService. Pour mieux comprendre ce principe, insérez la phrase suivante dans l'attribut ToolTip : « Ce bouton permet de passer d'un mode d'affichage normal à un mode d'affichage plein écran ». Ouvrez le mode d'édition XAML. Voici ce que vous pouvez voir dans la balise Button :

ToolTipService.ToolTip="Ce bouton permet de passer d'un mode d'affichage 
                  normal à un mode d'affichage plein écran"

Compilez votre application en appuyant sur le raccourci F5 (voir Figure 4.15).

Comme vous pouvez le constater, la propriété ToolTip est fournie par ToolTipService :

ToolTipService.ToolTip="…"

Pour finir, si vous souhaitez aligner le bouton Newsletter et le bouton plein écran verticalement à gauche (voir Figure 4.15), il suffit de définir une marge de 30 pixels à droite pour le bouton PleinEcranBT.

Tout élément visuel possède par défaut la propriété Cursor. Celle-ci permet de définir un curseur système lors du survol d'un objet. Selon le système d'exploitation sur lequel vous serez, vous aurez donc des curseurs avec des visuels différents. Cela peut vous permettre, par exemple, d'indiquer à l'utilisateur un chargement de données en cours de progression. Il vous suffirait de spécifier un curseur d'attente (Wait) pour une liste de données. Lors de la réception des données, vous pourriez ensuite redéfinir un curseur standard. Cette propriété prend comme valeur une constante de la classe Cursors (au pluriel).

4-3-3-1. Définir un curseur en C#▲

public partial class MainPage : UserControl
{
   public MainPage()
   {
      InitializeComponent();
      PleinEcranBT.Cursor = Cursors.Hand;
   }
}

4-3-3-2. Définir un curseur avec Expression Blend▲

Expression Blend permet de simplifier le processus pour accomplir cette opération. Il vous suffit d'ouvrir le panneau des propriétés propre au bouton plein écran, puis de définir un curseur de type Hand (voir Figure 4.16).

La propriété Content est assez difficile à cerner au premier coup d'œil. Jusqu'à maintenant, nous l'avons utilisée pour afficher un texte au sein des boutons, ce qui constitue son comportement par défaut. Nous pourrions donc nous demander pourquoi cette propriété ne se nomme pas Label ou Title. Dans les faits, elle est capable de stocker beaucoup plus qu'une simple chaîne de caractères. Elle est typée Object, ce type représente la classe située au niveau le plus haut de l'arbre d'héritage. Des classes aussi différentes que String, Panel ou Button-Base héritent par conséquent de la classe Object. La propriété Content permet donc d'afficher n'importe quel objet visuel ou non. Si l'objet à afficher n'est pas de type visuel (UIElement), il est converti en chaîne de caractères de type string, et cette dernière est affichée. Toutefois, la propriété Content ne peut contenir qu'un seul enfant. Tous les objets héritant de la classe abstraite ContentControl héritent par défaut de la propriété Content. Nous y reviendrons au Chapitre 5 L'arbre visuel et logique dédié à l'arbre visuel et logique.

4-3-4-1. Créer l'icône de redimensionnement▲

Nous allons créer une icône de redimensionnement que nous placerons au sein du bouton plein écran. Cette icône est très simple à réaliser, et elle va nous permettre d'apprendre les opérations de base que Blend propose pour les tracés vectoriels (voir Figure 4.17).

Dans un premier temps, faites un carré de 16 pixels de côté via la primitive Rectangle. Ensuite, légèrement en dessous, créez deux rectangles allongés de 6 pixels de hauteur par 14 de longueur. Alignez-les horizontalement côte à côte en gardant un espace entre eux de 8 pixels (voir Figure 4.18).

Une fois les rectangles réalisés, sélectionnez-les, puis ouvrez le menu Object et, au sein de l'onglet Combine, cliquez sur l'option Unite. Vous obtenez une primitive de type Path. Les deux rectangles ont donc été convertis en tracé vectoriel. Dans l'arbre visuel, en lieu et place des deux rectangles, vous remarquez qu'est apparu un objet [Path]. Sélectionnez le carré, puis le nouveau tracé et cliquez droit dessus. Grâce au menu Align, centrez les deux objets horizontalement et verticalement. Ensuite, au sein du panneau des propriétés, dans l'onglet des transformations RenderTransform, cliquez sur la deuxième icône en partant de la gauche. Vous ouvrez ainsi le panneau qui gère la rotation des objets. L'onglet RenderTransform est commun à tous les objets graphiques. Entrez la valeur de 45 degrés dans le champ Rotation (voir Figure 4.19).

Pour finir, désélectionnez tout, et dans l'ordre, cliquez sur le tracé (les deux anciens rectangles), puis sur le carré, en maintenant la touche Maj enfoncée. Ensuite, ouvrez le menu Object, puis Combine et sélectionnez l'option Substract. Le carré s'est vu retirer tout l'espace occupé par le tracé vectoriel (voir Figure 4.16). Il ne nous reste plus qu'à insérer cette image dans notre bouton plein écran en l'affectant à sa propriété Content. Cela est assez simple à faire : glissez l'icône au-dessus du bouton. Dès que le message vous indiquant la possibilité d'imbriquer l'élément apparaît, cliquez sur la touche Alt et relâchez le bouton de la souris. C'est fait, l'icône est intégrée au bouton plein écran. Afin d'obtenir un visuel élégant, vous pouvez redimensionner le bouton à 18 pixels de hauteur et de largeur, puis sélectionner le tracé à l'intérieur et lui affecter des dimensions en mode Auto. Cette dernière modification lui permet de s'adapter à son conteneur (le bouton). Pour ma part, j'ai également défini des marges extérieures (Margin) en haut et à droite de 8 pixels sur le bouton (voir Figure 4.20).

Finalement, on considère les objets bénéficiant de la propriété Content comme des conteneurs à enfant unique. Au sein de la plate-forme Silverlight, de nombreux composants utilisateur en bénéficient. 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 propriété Content en C#▲

public MainPage()
{
   InitializeComponent();
   PleinEcranBT.Cursor = Cursors.Hand;
   //on écoute l'événement 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 crée un composant Image
   Image myImage = new Image();
   // 2 - puis on définit son mode de redimensionnement
   myImage.Stretch = Stretch.None;
   // 3 - on crée ensuite un objet Uri qui pointe vers 
   // notre fichier image à utiliser
   Uri adresseImage = new Uri("IconeContact.png",UriKind.Relative);
   // 4 - on crée un objet de type ImageBitmap en lui spécifiant 
   // l'adresse relative que nous venons de définir
   BitmapImage bi = new BitmapImage( adresseImage );
   //5 - on précise au composant la source de l'image qu'il doit afficher
   myImage.Source = bi;
   //6 - pour finir, on ajoute le composant Image à la 
   // propriété Content de notre bouton Contact
   ContactBtn.Content = myImage;
}

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 bibliothèque, puis l'onglet Behaviors. Celui-ci contient une liste de comportements. Glissez, puis déposez le comportement [ChangePropertyAction] sur le premier bouton du menu. Le comportement apparaît dès lors dans l'arbre visuel (voir Figure 4.21).

Nous allons maintenant configurer ce comportement pour qu'il change le champ texte TitrePage lors d'un clic sur le bouton. Pour cela, après avoir sélectionné le comportement dans l'arbre visuel, ouvrez le panneau des propriétés. À chaque fois que l'utilisateur cliquera sur le premier menu, nous affecterons dynamiquement la propriété Text du champ TitrePage avec la valeur Nouveautés (voir Figure 4.22).

L'événement Click représente l'interaction utilisateur qui déclenchera le changement de valeur. Le paramètre SourceName est optionnel, il indique quel objet est à la source de l'événement diffusé. Comme le comportement est créé sur le bouton, c'est lui qui, par défaut, diffusera l'événement Click. PropertyName permet de spécifier la propriété affectée lors du Click. Pour modifier le contenu textuel d'un composant TextBlock, il faut affecter la propriété Text. Le champ Value représente la valeur de cette propriété. TargetName est l'objet ciblé, dans notre cas c'est le champ texte TitrePage. L'icône avec les trois points, située à droite du champ de saisie (), vous permet de naviguer dans l'arbre visuel et logique afin de rechercher l'objet cible. Vous devez maintenant répéter cette opération pour les autres menus. Pour accomplir cette tâche rapidement, vous pouvez copier-coller ce comportement sur les autres menus, puis changer le paramètre Value pour chaque menu.

Le mode d'affichage plein écran est très pratique pour certains types d'applications, par exemple pour afficher de la vidéo ou un contenu nécessitant une grande résolution. Cela permet à l'utilisateur de s'immerger complètement dans l'application en faisant abstraction des menus propres au navigateur. Pour des raisons de sécurité, certaines possibilités du lecteur Silverlight sont désactivées dans ce mode. Pour passer d'un affichage normal au mode plein écran, une seule ligne de code C# et un paramétrage XAML suffisent.

La première chose à faire est de définir une méthode C# qui se déclenchera lorsque l'événement Click est diffusé par le bouton plein écran. Pour cela, sélectionnez ce bouton, puis ouvrez le panneau des propriétés. Cliquez sur l'icône en forme d'éclair qui se trouve en haut à droite de ce panneau. Vous venez d'ouvrir la liste des événements disponibles pour le bouton plein écran. Pour l'événement Click, définissez la méthode SetFullScreen (voir Figure 4.23).

Voici le code du bouton généré 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 d'un mode d'affichage 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 déclarer des méthodes d'écoute sur les événements diffusés. Ce n'est pas toujours l'idéal, 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 développement, c'est plutôt au développeur de gérer la diffusion et l'écoute des événements. Les performances de l'application sont en partie liées à la notion de programmation événementielle (voir Chapitre 7 Interactivité et modèle événementiel). Lorsque vous avez défini la fonction d'écoute, Blend a automatiquement créé une méthode correspondante dans le fichier MainPage.xaml.cs et a ouvert ce fichier. Supprimez la ligne commentée 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 précédent est déclenché lorsque l'utilisateur clique sur le bouton. La ligne C# en gras est assez simple, la propriété booléenne IsFullScreen est affectée de l'opposé de sa valeur actuelle. Par exemple, si celle-ci est false (donc si l'application n'est pas en mode plein écran), alors elle passe en mode plein écran. Si elle est true, c'est-à-dire en mode plein écran, alors on repasse en mode normal. Cette syntaxe nous a évité d'utiliser une condition if, ainsi qu'un code fastidieux. Testez votre site, redimensionnez la fenêtre du navigateur et cliquez sur les menus. Le positionnement et l'affichage des menus s'adaptent automatiquement, même au sein d'une fenêtre de 640 par 480 pixels. Le WrapPanel gère le retour à la ligne des menus, si besoin est. Pour finir, cliquez sur le bouton plein écran plusieurs fois pour vérifier que le code logique C# correspond au besoin.

Pour des raisons de sécurité, dès lors que vous êtes passés en mode plein écran, un message vous l'indiquant est apparu durant quelques secondes (voir Figure 4.24).

Ce n'est pas la seule contrainte de sécurité imposée par le mode plein écran. Ce mode ne peut pas être défini par d'autres événements que ceux découlant des interactions utilisateur. Ainsi, vous ne pouvez pas forcer le mode plein écran dès le démarrage de l'application, par exemple. Dans ce cas, affecter la propriété IsFullScreen ne provoque aucun changement d'affichage. Le mode plein écran limite également l'utilisation du clavier. Cela évite à l'utilisateur de saisir des données confidentielles. Ce mode d'affichage peut en effet simuler n'importe quel type d'interface. Voici la liste des touches auxquelles vous pouvez accéder :

• le pavé des flèches directionnelles (Up, Down, Left et Right) ;
• la barre d'espace (Spacebar) ;
• la touche Tabulation (Tab) ;
• les touches Page Précédente et Suivante (Page Up, Page Down) ;
• la touche Maison et Fin (Home, End) ;
• la touche Entrée (Enter).

Plusieurs instances du plug-in Silverlight ne peuvent pas être en même temps en mode plein écran. En réalité, lorsqu'une application Silverlight plein écran perd le focus, celle-ci revient à un mode d'affichage normal. Par exemple, le simple fait, sur Windows, de basculer via la combinaison de touches Alt+Tab d'une application à une autre, fait perdre le focus à l'application Silverlight. Deux applications Silverlight ne peuvent donc pas être en mode plein écran en même temps, car l'une d'entre elles a forcément perdu le focus utilisateur.

Il peut être très utile d'écouter l'événement FullScreenChanged de l'instance du plug-in. Cet événement est déclenché lors du changement de mode. Le code suivant permet d'afficher la résolution de l'écran utilisateur dans le champ TitrePage à chaque changement de mode :

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
   …
   //cette ligne permet d'écouter l'événement 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 l'application ne sont pas récupérées grâce aux propriétés Width et Height car celles-ci ont été définies en mode Auto. Par contre, elles peuvent l'être via les propriétés ActualWidth et ActualHeight. Ces propriétés contiennent les valeurs absolues en pixels du conteneur racine UserControl. Le Chapitre 7 Interactivité et modèle événementiel fournit plus d'information sur l'écoute d'événements.