Hé, vous le scripteur !Que Silverlight soit

Les scripteurs Microsoft

Télécharger le code de cet article: HeyScriptingGuy2007_10.exe (156KB)

L'histoire de l'humanité a longtemps été marquée par des affrontements entre des forces diamétralement opposées : les Romains contre les hordes barbares ; les Hatfield contre les Mccoy ; les scripteurs contre ceux qui croient qu'une chronique sur les scripts d'administration système devrait vraiment parler de script d'administration système plutôt que de conflits historiques entre des forces diamétralement opposées. [Ou, par exemple, de crochets à viande... —Ed].

Le monde informatique n'est pas à l'abri de ces conflits entre forces diamétralement opposées. Nous pensons en particulier au conflit entre les développeurs et les administrateurs système. Comme l'a dit Karl Marx en examinant la situation : « Ou cet homme est mort ou ma montre s'est arrêtée ».

Heu... désolé, en fait c'était Groucho Marx. Karl Marx a dit, « l'Art est toujours et partout l'aveu secret et, simultanément, le mouvement immortel de son époque ». À dire vrai, nous n'avons aucune idée que ce que cela peut bien vouloir dire. En plus, Groucho Marx était bien plus drôle que Karl Marx, même si les mots d'esprit de Groucho ne s'appliquent pas particulièrement bien au conflit entre les développeurs et les administrateurs système.

Néanmoins, nous sommes assez sûrs que c'est Karl Marx qui obligeait les scripteurs à réciter le serment d'allégeance à l'automatisation chaque matin avant de commencer à travailler : « Les administrateurs système ne sont pas des développeurs ». Et c'était incontestablement vrai : les administrateurs système n'étaient pas des développeurs. Les développeurs étaient des personnes qui écrivaient des programmes logiciels alors que les administrateurs système étaient des individus qui ... eh bien, pour vous dire la vérité, nous ne sommes pas sûrs que quelqu'un chez Microsoft ait jamais vraiment su ce que faisaient les administrateurs système. Mais quoi qu'ils fissent, ils n'écrivaient assurément pas des programmes informatiques.

Bien sûr, Karl Marx a également écrit la chanson « Les temps changent » (Ou du moins, c'est ce qu'il nous a affirmé).

Grâce en partie au Centre de scripts TechNet (microsoft.com/TechNet/scriptcenter), les administrateurs système ont progressivement découvert VBScript et ont commencé à écrire leurs propres utilitaires qui, s'ils n'étaient pas aussi achevés et exhaustifs qu'un programme informatique classique, effectuaient néanmoins des tâches de gestion utiles. En écrivant ces utilitaires, les administrateurs système ont eu à faire appel à des compétences très semblables à celles utilisées par les développeurs.

Et ce n'est qu'une partie de l'histoire. L'avènement de Windows PowerShell™ (microsoft.com/technet/scriptcenter/hubs/msh.mspx) signifie que Microsoft® .NET Framework n'est plus hors de portée des administrateurs système et auteurs de scripts. Windows Vista® a familiarisé le monde avec les gadgets (microsoft.com/technet/scriptcenter/topics/vista/gadgets-pt1.mspx), mettant ainsi les administrateurs système (ou du moins les administrateurs système qui écrivent des scripts) sur un pied d'égalité avec les développeurs. Et maintenant (roulement de tambour, s'il vous plait) voici Microsoft Silverlight, le « plug-in internavigateur et interplates-forme conçu pour offrir la nouvelle génération d'expériences média basées sur .NET Framework et de riches applications interactives destinées au Web ».

Cela semble impressionnant, n'est-ce pas ? Vous vous demandez ce que cela a à voir avec des auteurs de scripts d'administration système tels que vous ? Pour être honnête, nous n'en sommes pas entièrement sûrs. Cependant, Silverlight facilite énormément la création d'interfaces utilisateur et de présentations multimédias particulièrement sympathiques. Et bien que la documentation marketing présente immanquablement Silverlight comme un moyen de créer des applications Web, voici un fait peu connu : Silverlight semble fonctionner aussi bien dans les applications HTML que HTA (microsoft.com/technet/scriptcenter/hubs/htas.mspx), un support très apprécié des rédacteurs de scripts. Par conséquent, vous auriez peut-être intérêt à prendre le temps d'essayer Silverlight.

Avant de poursuivre ...

Nous devons vous préciser que nous n'aborderons pas les nombreuses fonctionnalités et utilisations potentielles de Silverlight aujourd'hui ; notre objectif principal est de vous présenter suffisamment d'extraits de code pour vous permettre de commencer à expérimenter cette technologie. Si vous aimeriez installer Silverlight (à propos, c'est gratuit), rendez-vous sur la page d'accueil de Silverlight à l'adresse microsoft.com/silverlight. Vous trouverez également des SDK, exemples de projets et bien d'autres choses utiles à l'adresse silverlight.net/GetStarted.

Pour le moment, nous allons supposer que vous avez déjà installé Silverlight. Nous supposerons également que vous vous êtes rendu dans la section de téléchargements de codes du site Web de TechNet Magazine (technetmagazine.com/code07.aspx) et que vous avez téléchargé les fichiers décrits à la figure 1.

Figure 1 Composants d'un projet Silverlight

Vous n'avez pas forcément besoin de SampleProject.js, du moins pas dans le cadre de la chronique de ce mois. Silverlight vous permet de joindre des scripts aux objets et événements de votre projet ; ces scripts peuvent être codés en dur dans votre fichier HTML ou (comme dans c'est le cas ici) être lus depuis un fichier « include » extérieur tel que celui-ci. Nous allons également transformer SampleProject Html en fichier HTA : il suffit de le renommer SampleProject hta. C'était facile, n'est-ce pas ?

Veillez à enregistrer tous ces fichiers dans un dossier. Ensuite, préparez-vous à vous amuser.

Le fichier XAML

Comme vous l'avez peut-être deviné, ce mois-ci Hé, vous le scripteur ! s'intéresse principalement au fichier XAML. (Incidemment, XAML est prononcé « zamel, », qui rime avec caramel. Ou avec hydromel. Ou même avec rimmel.) XAML est l'acronyme d'Extensible Application Markup Language. Entre autres choses, XAML fournit un moyen de créer des interfaces utilisateur à l'aide d'un langage semblable au XML. Est-ce qu'il est ainsi plus facile pour une personne, plus particulièrement un administrateur système, de créer des interfaces utilisateur ? C'est ce que vous allez découvrir.

Pour entamer cette quête, lancez le Bloc-notes et ouvrez le fichier SampleProject.xaml. Si vous voyez un code existant, remplacez-le par le code suivant :

<Canvas
 xmlns="https://schemas.microsoft.com/
    client/2007"
 xmlns:x="https://schemas.microsoft.com/
    winfx/2006/xaml">
</Canvas>

Remarque. SampleProject hta est déjà préconfiguré pour charger des informations provenant de SampleProject.xaml. Pour utiliser un fichier XAML différent, vous devez modifier le fichier CreateSilverlight.js.

Après avoir collé le code, enregistrez le fichier et double-cliquez ensuite sur SampleProject.hta. Devinez ce que vous allez voir ? C'est bien cela : un grand cadre gris et vide.

Mais attendez, ne partez pas ! C'est exactement ce que vous êtes censé voir.

S'il n'y a pas grand chose à voir, c'est que nous n'avons encore rien fait : en effet, jusqu'à présent, nous nous sommes contentés d'ajouter un canevas à notre fichier XAML. Mais c'est une étape importante. Après tout, si vous voulez vous essayer à la peinture à l'huile, vous devez commencer par trouver un canevas sur lequel peindre. Il en va de même dans Silverlight : pour pouvoir commencer à ajouter des éléments à notre projet, nous avons d'abord besoin d'un canevas sur lequel « peindre ». Et maintenant nous en avons un.

Au fait, pourquoi avons-nous obtenu une boîte grise de 300 pixels de large sur 300 pixels de haut ? C'est simple : il s'agit des spécifications figurant, par défaut, dans le fichier CreateSilverlight.js. Si vous n'aimez pas ces valeurs par défaut, il vous suffit d'ouvrir CreateSilverlight.js et de modifier les paramètres à votre gré. Est-ce que vous préfèreriez un canevas blanc de 800 pixels de large sur 300 pixels de haut ? (Ce qui serait préférable pour les exemples que nous sommes sur le point d'utiliser.) Alors assurez-vous simplement que CreateSilverlight.js contient les trois lignes suivantes :

width:'800', // Width of rectangular region of 
             // control in pixels.
height:'300', // Height of rectangular region 
              // of control in pixels.
background:'white', // Background color of
                    // control.

Remarque. Voilà une remarque judicieuse : dans le fichier .js d'origine, l'arrière-plan est défini sur #D6D6D6. Maintenant, nous l'avons défini sur blanc. Il se trouve que, dans un fichier XAML vous pouvez utiliser des valeurs RVB pour représenter des couleurs, ou vous pouvez utiliser des noms de couleur pour représenter des couleurs. (Voir msdn2.microsoft.com/bb188314.aspx pour obtenir la liste complète des valeurs de couleurs et des noms de couleurs.) Bien que les scripteurs aiment appeler les couleurs par leurs valeurs RVB (« Ma maison ? C'est une FFFFFACD avec un habillage FFCD5C5C »), nous avons décidé ici d'utiliser les noms de couleurs.

Petit tuyau cadeau : vous n'êtes pas tenu de vous limiter à des couleurs unies pour l'arrière-plan du canevas. Copiez et collez le code présenté à la figure 2 dans votre fichier XAML et voyez que vous obtenez.

Figure 2 Jolies couleurs

<Canvas
 xmlns="https://schemas.microsoft.com/client/2007"
 xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
 Width="800"
 Height="300">
 
 <Canvas.Background>
 <LinearGradientBrush>
 <GradientStop Color="Blue" Offset="0.0" />
 <GradientStop Color="Black" Offset="1.0" />
 </LinearGradientBrush>
 </Canvas.Background>

</Canvas>

Vous avez essayé ? Plutôt génial, pas vrai ?

Bien sûr, un canevas blanc tout bête n'a pas grand intérêt. C'est pourquoi nous allons poursuivre et ajouter des objets à ce canevas. Bien que Silverlight vous permette d'ajouter toutes sortes d'objets différents (y compris des ellipses, rectangles, lignes et polygones), nous ajouterons un bon vieux bloc de texte à notre canevas. Comment ? En insérant les balises suivantes entre les balises <Canvas> et </Canvas> tags dans notre fichier XAML :

<TextBlock 
 Name="Test"
 FontSize="40"
 FontFamily="Georgia"
 FontWeight="Bold"
 Canvas.Top="20" 
 Canvas.Left="20"
 Text="The TechNet Script Center">
</TextBlock>

Comme vous pouvez le voir, le XAML n'est vraiment pas difficile à utiliser. Nous allons commencer par utiliser la balise <TextBlock>, en veillant à faire figurer les paramètres TextBlock (tels que Name et FontSize) à l'intérieur de la balise. Nous indiquerons ensuite que nous en avons terminé avec notre TextBlock en utilisant la balise </TextBlock.> Ce qu'il y a de chouette à ça ? C'est à peu de choses près ainsi qu'il faut procéder pour ajouter n'importe vous quel objet à un fichier XAML. Vous souhaitez ajouter un rectangle de 300 pixels de large sur 100 pixels de haut ? Pas de problème :

<Rectangle
 Height="300" 
 Width="100" 
 Fill="Blue">
</Rectangle> 

Au fait, lorsque vous ajoutez une forme (un rectangle par exemple) à votre canevas, pensez à indiquer une couleur de remplissage et/ou une couleur de trait. Si ne vous faites pas, Silverlight ajoutera un rectangle transparent au canevas. Le rectangle sera bien présent, mais à moins de disposer de la vision laser de Superman, vous ne pourrez pas le voir.

Puisque nous parlons des couleurs de remplissage et de trait, sachez que c'est ainsi que vous pouvez colorer certains objets Silverlight. Pour d'autres objets, vous devez utiliser un pinceau, comme le LinearGradientBrush que nous vous avons montré (mais dont nous n'avons pas parlé) dans notre tuyau cadeau. Si vous préférez peindre les objets d'une couleur unie, vous pouvez utiliser ce que l'on appelle avec justesse le SolidColorBrush. Par exemple, examinez les balises XAML de la figure 3 qui « peignent » notre texte (techniquement, cela peint la propriété Foreground de TextBlock) en rouge.

Figure 3 Peindre un texte

<TextBlock 
 Name="Test"
 FontSize="40"
 FontFamily="Georgia"
 FontWeight="Bold"
 Canvas.Top="20" 
 Canvas.Left="20"
 Text="The TechNet Script Center">

 <TextBlock.Foreground>
 <SolidColorBrush Name="test_brush" Color="red"/>
 </TextBlock.Foreground>

</TextBlock>

Pour un effet encore plus intéressant, essayez la propriété ImageBrush, qui remplit le texte avec une image :

<TextBlock.Foreground>
 <ImageBrush Name="test_brush" ImageSource="Sunset.jpg"/>
</TextBlock.Foreground>

Et voici encore un autre tuyau : si vous essayez la propriété ImageBrush, vous voudrez sans doute augmenter la valeur de FontSize parce que plus le texte est grand, meilleur est l'effet produit.

Faites un essai et voyez ce que vous obtenez. Vous serez favorablement impressionné.

Mais attendez : vous n'avez encore rien vu.

Nous devons être honnêtes avec vous : jusqu'ici, nous nous étions réservé le meilleur. S'il est agréable de pouvoir afficher du texte dans Silverlight, il est encore plus agréable de pouvoir dessiner des rectangles, des ellipses et des polygones. Mais tout ceci n'est encore rien face aux animations qui peuvent être ajoutées à un projet Silverlight.

Une fois encore, rappelons que dans cet article, nous ne pouvons que vous présenter certaines des façons dont vous pouvez créer une animation Silverlight car nous n'avons tout simplement pas la place d'en expliquer davantage. (Ne nous en veuillez pas; nous n'arrêtons pas de suggérer que TechNet Magazine devienne Hé, vous le scripteur ! Magazine, mais apparemment nos messages électroniques n'atteignent pas leur destination.)

Sans plus de cérémonie, voici un effet intéressant grâce auquel notre texte s'estompe lentement (mais sûrement) et disparaît. Ajoutez le code de la figure 4 entre les balises <TextBlock> et </TextBlock> dans votre fichier XAML.

Figure 4 Astuces pour TextBlock

<TextBlock.Triggers>
 <EventTrigger RoutedEvent=
     "TextBlock.Loaded">
 <BeginStoryboard>
 <Storyboard>
 <DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="Opacity"
 From="0.0" To="1.0" 
 Duration="0:0:5" />
 </Storyboard>
 </BeginStoryboard>
 </EventTrigger>
</TextBlock.Triggers>

Il est vrai que cela peut sembler compliqué mais, heureusement, une bonne partie de tout ceci est tout simplement du balisage réutilisable. Pour commencer, vous ne pouvez pas simplement ajouter une animation à un fichier XAML : vous devez indiquer quand cette animation est supposée être lue. Pour cela, il convient de préciser une série de déclencheurs pour TextBlock. Dans le cas présent, nous allons créer un déclencheur qui démarrera l'animation chaque fois que TextBlock est chargé :

<EventTrigger RoutedEvent="TextBlock.Loaded">

Dans Silverlight, les animations doivent avoir lieu sur une table de montage séquentiel ou storyboard (un terme emprunté à l'industrie cinématographique). C'est à cela que servent les balises <BeginStoryboard> et <Storyboard.>

Pour que notre texte s'estompe, nous devons modifier la propriété Opacity. Nous augmenterons graduellement la valeur de 0,0 (transparent) à 1,0 (couleur unie). Comme la propriété Opacity se trouve être une propriété double (une propriété basée sur une valeur numérique à double-précision), nous utilisons une animation DoubleAnimation. Vous vous demandez comment faire pour utiliser une animation DoubleAnimation ? Eh bien, en indiquant l'objet que nous voulons animer (dans le cas présent il s'agit de Test, le nom nous avons donné au TextBlock), en précisant la propriété cible (Opacity) et en indiquant ensuite la plage d'animation (de 0,0 d'opacité à 1,0 d'opacité) et la durée de l'animation complète (5 secondes). En d'autres termes :

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="Opacity"
 From="0.0" To="1.0" 
 Duration="0:0:5" />

Remarque. Veillez à utiliser la syntaxe 0:0:5 (heures, minutes, secondes) afin d'indiquer 5 secondes. L'utilisation de la valeur 5 seule ne produira pas une erreur, mais l'animation prendra cinq jours pour s'achever.

Avez-vous essayé cela ? Maintenant, essayez ceci : Dans la balise DoubleAnimation, définissez la propriété AutoReverse sur True :

AutoReverse="True"

votre animation apparaîtra en fondu, puis disparaîtra à nouveau.

Définissez la propriété RepeatBehavior sur Forever et votre texte continuera d'apparaître et disparaître en fondu pendant... en fait, éternellement.

RepeatBehavior="Forever"

L'éternité vous semble-t-elle un peu longue ? Alors définissez RepeatBehavior sur 3x, par exemple, pour que l'animation s'exécute trois fois puis s'arrête.

RepeatBehavior="3x"

Plutôt sympa, à notre avis. Cependant, que faire si vous n'aimez pas que le texte apparaisse et disparaisse en fondu et que vous préférez qu'il change graduellement de couleur ? Dans ce cas, vous devriez utiliser une animation ColorAnimation :

<ColorAnimation 
 Storyboard.TargetName="test_brush"
 Storyboard.TargetProperty="Color"
 From="Red" To="Blue" Duration="0:0:5" />

Remarque. Pensez juste à vérifier que vous commencez avec un texte rouge si vous essayez cet effet. Rappelez-vous que nous vous avons déjà montré comment peindre votre texte en rouge.

C'était amusant, n'est-ce pas ? Et pourtant, vous semblez un peu déçu. En voilà sans doute la raison : l'animation ColorAnimation était plaisante, mais vous espériez pouvoir faire véritablement voler des choses tout autour de l'écran. Allons, ne boudez pas. Quel genre de logiciel serait donc Silverlight s'il ne vous permettait pas de faire voler des objets sur votre écran ? Essayez ce qui suit :

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="(Canvas.Left)" 
 To="150"
 Duration="0:0:5" />

Comme vous pouvez le voir, nous obligeons notre TextBlock à quitter lentement sa position de départ pour se diriger vers un endroit situé à 150 pixels du bord gauche du canevas (Canvas.Left). Si nous voulions déplacer TextBlock vers le haut et le bas, nous utiliserions simplement la propriété Canevas.Top :

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="(Canvas.Top)" 
 To="150"
 Duration="0:0:5" />

Serait-il alors possible (notre cœur bat à tout rompre) de combiner ces animations pour que TextBlock se déplace d'un côté à l'autre et de haut en bas ? Nous en restons sans voix. Mais voici une suggestion : Collez les deux animations dans votre fichier XAML (l'un juste après l'autre) et voyez ce qui se passe.

Remarque. OK, nous vous avons menti : nous savions dès le départ qu'il était possible d'associer ces animations. En fait, vous pourriez ajouter une foule d'animations dans un seul projet Silverlight. C'est un peu compliqué, et vous devrez probablement inclure des balises supplémentaires pour vous assurer qu'une animation s'achève avant que la suivante ne commence. Mais cela vous permet également de réaliser des animations plutôt sophistiquées simplement en saisissant quelques balises de type XML.

Désolé, les gars, c'est tout pour aujourd'hui.

Oui, oui, nous aussi nous détestons l'idée de vous quitter, surtout qu'on commençait à peine à s'amuser. Mais ne vous inquiétez pas, ce n'est pas un adieu. Si vous aimeriez en savoir plus sur Silverlight, envoyez-nous un petit mot à l'adresse scripter@microsoft.com. Si un nombre suffisant de personnes est intéressé, nous verrons ce que nous pouvons présenter à ce sujet dans les chroniques à venir. En outre, n'oubliez pas de visiter TechNet Script Center (microsoft.com/technet/scriptcenter/resources/tnmag/archive.mspx) car nous y afficherons des liens vers des exemples complets de XAML à votre intention. D'ici là, comme Karl Marx et Frederick Engels le disaient à la fin de leur Lettre du Comité de correspondance communiste de Bruxelles à G.A Kottgen : « Bonne nuit, et prudence sur la route ».

Les scripteurs Microsoft travaillent pour (enfin, sont employés par) Microsoft. Lorsqu’ils ne sont pas en train de jouer au base-ball, d’entraîner une équipe ou de regarder un match (ou de se livrer à de multiples autres activités), ils dirigent le Script Center TechNet. Vous pouvez le vérifier vous-même sur www.scriptingguys.com.

© 2008 Microsoft Corporation et CMP Media, LLC. Tous droits réservés. Toute reproduction, totale ou partielle, est interdite sans autorisation préalable.