Hé, vous le scripteur !Dans les scripts comme dans la vie, le look est important

Les scripteurs Microsoft

Pendant des centaines et même des milliers d’années, les philosophes et les sages nous ont convaincus que nous devions regarder au delà de l’apparence physique pour juger quelqu’un ou quelque chose. (Ce qui ne veut pas dire que nous devrions juger les autres, ne nous méprenons pas, la beauté est une affaire de goût.) Mais vous savez ce qu’on dit : la vraie beauté vient de l’intérieur, pas de l’extérieur, et votre personnalité est bien plus importante que votre apparence.

À cela, les scripteurs ne peuvent ajouter qu’une chose : foutaises !

Vous avez bien lu, foutaises. Les scripteurs sont les premiers à reconnaître que dans un monde parfait l’apparence physique ne ferait aucune différence. Cependant, nous ne vivons pas dans un monde parfait. Si c’était le cas, les frites et la glace au chocolat formeraient deux des principaux groupes d’aliments. Que cela vous plaise ou non, l’apparence a son importance. Et cela s’applique à vos scripts comme à tout le reste.

Les scripteurs sont conscients que peu de gens sont émus par la pure beauté d’un script VBScript s’exécutant dans une fenêtre de commande (à l’exception peut-être du scripteur Dean Tsaltas, mais il est le seul qui nous vient à l’esprit).

D’un autre côté, il est également vrai que dans le monde de la haute technologie qui est le nôtre, les scripteurs ne sont plus limités à l’écriture de scripts qui s’exécutent dans une fenêtre de commande. Grâce aux applications HTML (HTA), les scripteurs peuvent faire appel à la puissance de DHTML pour créer des interfaces utilisateur graphiques pour leurs scripts. Ces mêmes compétences HTML peuvent être utilisées pour créer des gadgets Windows Vista™, une nouvelle voie qui a le potentiel de révolutionner l’écriture de scripts d’administration de système par rapport à ce qui existe aujourd’hui. Mais devinez quoi ? Dès que vous abordez le sujet des interfaces utilisateur graphiques, les vieilles notions bien ancrées selon lesquelles la beauté est superficielle s’enfuient à toutes jambes. Pour les scripts qui s’exécutent dans un environnement graphique, le look est tout aussi important que le fonctionnement et les performances.

Et c’est tout le problème. Après tout, nous sommes scripteurs ; que savons-nous de la création d’interfaces utilisateur graphiques ? On dirait que notre chance a tourné, pas vrai ?

Peut-être. Mais en y réfléchissant, peut-être que non. Est-ce que j’ai entendu quelqu’un dire « Dieu merci, nous avons les scripteurs » ?

Non, honnêtement. Vous n’avez pas entendu ça ? Peut-être que quelqu’un l’a un peu murmuré...

Cela n’a pas beaucoup d’importance. Quelqu’un aurait dû le dire, parce que les scripteurs sont là pour nous aider (que nous le voulions ou non).

Pour démarrer dans le monde merveilleux des interfaces utilisateur graphiques, jetons un coup d’œil à une petite HTA toute simple. (Si vous souhaitez avoir plus d’informations sur la création des HTA, consultez le Centre des développeurs HTA.)

Ce que vous voyez à la figure 1 est la première partie d’un magnifique système d’informations de bureautique. Comme vous pouvez le voir, nous avons commencé en plaçant un joli petit graphique dans le coin supérieur droit de la fenêtre de HTA. L’objectif est, lors du premier chargement de la HTA, de récupérer le nom de l’utilisateur connecté et d’afficher ensuite son nom et le nom de l’ordinateur sur cette image. Nous ajouterons plus tard toute une panoplie de choses intéressantes à la HTA mais, comme on dit, commençons par le commencement.

Figure 1** Les débuts de notre interface graphique HTA vraiment très jolie **

Non, nous ne savons pas vraiment à qui correspond ce « on ». Sûrement un philosophe... Probablement Voltaire. Cela ressemble bien à du Voltaire.

Je vous l’accorde, c’est une bien jolie petite application, mais sa...beauté...ne fera probablement pas monter les larmes aux yeux de notre scripteur Dean. Mais elle fait office d’outil de démonstration pratique, avec un concept fondamental applicable à de nombreuses situations différentes. Après tout, nombre de ces gadgets Windows Vista de haut vol fonctionnent sur un principe similaire : ils affichent simplement un graphique épatant (disons une jauge ou un cadran) et écrivent ensuite un peu de texte au-dessus de ce graphique. Ainsi, vous obtenez une petite jauge qui affiche l’espace disque disponible, alors qu’en fait, il ne s’agit que d’un graphique générique auquel est superposé un texte dynamique.

OK, pour tout vous avouer, cet aveu ne nous éclaire pas beaucoup non plus. Mais les choses devraient se préciser un peu, plus nous avancerons dans cet article.

Il existe juste un problème avec la notion de pouvoir afficher un graphique et d’écrire ensuite du texte par dessus le graphique : ça ne marche pas. Avec les balises HTML standard, on obtient plutôt quelque chose du genre de la figure 2. Pas vraiment ce que nous avions à l’esprit. Peut-être que Nietzsche, qui a déclaré que « les êtres humains ne pourront jamais espérer placer du texte au-dessus d’un graphique, du moins pas dans une HTA », avait raison.

Figure 2** Une première tentative de superposition de texte **

Ou peut-être que Nietzsche avait tort : Est-ce que j’ai entendu quelqu’un dire... Ne faites pas attention à ce que je dis. Comme nous venons de le réaliser, nous ne pouvons pas faire ce que nous voulions en utilisant le HTML de tous les jours ; il ne fonctionne tout simplement pas de cette manière. Bien sûr, en théorie, nous pourrions faire de notre graphique un graphique d’arrière-plan et utiliser ensuite des tableaux et des espaces insécables et tout une panoplie d’autres petits trucs pour essayer de faire en sorte que le texte soit superposé à l’image. Mais nous ne disons pas « en théorie » pour rien, car à l’exception des cas les plus simples, cette stratégie ne fonctionne jamais.

Il se trouve qu’il existe une bien meilleure méthode pour créer des dispositions épatantes dans une HTA ou un gadget Windows Vista : les feuilles de style en cascade, mieux connues sous le nom de CSS.

Les CSS sont utilisées pour définir les polices, les marges et les alignements, les couleurs et autres aspects de présentation d’un document. (Ceci s’applique en particulier aux pages Web. Cependant, comme les HTA et les gadgets sont, fondamentalement, des pages Web, les CSS s’appliquent également bien à eux.) Il n’est même pas envisageable de commencer à décrire tout ce qu’il est possible de faire avec les CSS donc, pour plus d’informations, vous pourriez souhaiter consulter la documentation de référence CSS pratique et détaillée sur MSDN®. Pour le moment, il est suffisant de dire que nous pouvons utiliser les CSS avec précision pour contrôler la disposition du HTA, y compris la capacité de superposer un élément (notre texte) sur un autre (notre graphique).

Nous allons expliquer comment nous parvenons à faire tout cela. Mais avant de nous lancer dans cette explication, jetons un coup d’œil au code d’une HTA très simple à la Figure 3.

Figure 3 Pour terminer, le script...

<SCRIPT LANGUAGE=”VBScript”>

Sub Window_OnLoad
 Set objNetwork = CreateObject(“Wscript.Network”)

 strUser = objNetwork.UserDomain & “\” & objNetwork.UserName
 strComputer= objNetwork.ComputerName

 UserData.InnerHTML = “<p align = ‘center’> “ & _
 “<font style=’font-size:18pt;color:white’>” & _
 strUser & “<br>” & strComputer & “</font></p>”
End Sub

</SCRIPT>

<img src=“test2.jpg“ align=“right“>
<span id=UserData style=“position:absolute;left:770px;top:150px“></span>

Comme vous pouvez le voir, ce n’est pas vraiment impressionnant. Nous avons une sous-routine Window_OnLoad qui, comme l’indique son nom, s’exécute automatiquement chaque fois que notre HTA est démarrée ou actualisée. Nous parlerons de cette sous-routine dans une minute. En outre, nous avons deux éléments HTML : notre graphique et une balise span. Comme vous le savez sans aucun doute, nous utilisons ces balises pour insérer le graphique, en utilisant l’attribut align pour nous assurer que l’image apparaît sur le côté droit de la fenêtre :

<img src=”test2.jpg” align=”right”>

Ce qui nous amène aux balises HTML pour le span :

<span id=UserData style=”position:absolute;
left:770px;top:150px”></span>

OK, nous avons donc utilisé ici une balise span. Qu’est-ce qu’une balise span ? Eh bien, pour toutes sortes d’utilisations, une balise span correspond tout simplement à une zone nommée de votre HTA. C’est une section « démarquée » de la fenêtre de HTA que nous pouvons identifier par programmation (principalement parce que nous lui avons affecté l’identificateur UserData). Une fois que nous avons configuré une balise span, nous pouvons écrire une sous-routine qui lui affecte du texte ou du code HTML. En fait, non seulement nous pouvons le faire, mais c’est précisément ce que nous avons fait pour notre HTA.

Toutefois, comme nous l’avons dit précédemment, nous parlerons de cela plus tard. Avant cela, nous devons jeter un œil au paramètre style ajouté à la balise span :

style=”position:absolute;left:770px;top:150px”

Ce paramètre, comme vous pourriez le suspecter, est l’astuce qui permet de positionner notre texte dynamique sur le graphique. Nous spécifions en fait ici trois attributs style séparés.

Position Nous avons indiqué à notre HTA que nous voulions que la position de notre balise span soit absolue. Cela signifie essentiellement que nous voulons toujours que la balise span soit au même emplacement, même si cela implique, comme c’est le cas ici, que le texte est écrit au-dessus d’un autre élément (tel que, pourquoi pas, un graphique).

Left Ceci spécifie simplement la position de la balise span par rapport au bord de l’extrême gauche de la fenêtre de HTA. Dans ce cas, nous souhaitons que la balise span commence à 770 pixels (770px) de la gauche.

Top Ce paramètre est très similaire à l’attribut Left, à ceci près que nous spécifions la position de la balise span par rapport au bord supérieur de la fenêtre de HTA. Dans ce cas, nous voulons démarrer en haut de la fenêtre et compter 150 pixels (150px) avant de commencer la balise span.

Comment avons-nous su que nous voulions définir le côté gauche de notre balise span sur 770 pixels et le côté supérieur sur 150 pixels ? Eh bien, pour être franc, nous n’en savions rien. Nous l’avons en fait deviné, en plaçant le graphique sur la page et en affectant des valeurs aux attributs Left et Top de la balise span. Nous avons ensuite ouvert le HTA et regardé le résultat. Comme vous pouvez le prévoir, nous étions un petit peu décalés et nous avons donc ajusté les valeurs, actualisé le HTA et regardé encore une fois. Nous avons fait ceci plusieurs fois jusqu’ à ce que, comme Boucles d’or, nous ayons trouvé quelque chose de parfait.

Remarque : vous connaissez l’histoire de Boucles d’or et des trois ours, leurs lits et leurs chaises, la soupe qui était trop chaude ou trop froide et ainsi de suite. Soit dit en passant, nous ne sommes pas sûrs que Boucles d’or puisse être considérée comme une grande philosophe. Il est intéressant de remarquer qu’elle n’a pas hésité à pénétrer dans la maison des ours, à manger leur soupe, à s’asseoir sur leurs chaises et à dormir dans leurs lits ; elle semble posséder une philosophie tout à fait unique.

Quoi qu’il en soit, la figure 4 illustre à quoi notre HTA ressemble maintenant. Je vous l’accorde, ce n’est peut-être pas une œuvre d’art, mais on ne peut demander à Picasso d’écrire par programmation des informations sur un graphique.

Figure 4** Gare à la puissance du style **

Puisqu’on en parle, comment avons-nous écrit par programmation des informations sur un graphique ? Eh bien, j’ai une bonne nouvelle : il est enfin temps de parler de notre sous-routine Window_OnLoad, qui apparaît à la figure 5.

Figure 5 Sous-routine Window_OnLoad

Sub Window_OnLoad
 Set objNetwork = CreateObject(“Wscript.Network”)

 strUser = objNetwork.UserDomain & “\” & objNetwork.UserName
 strComputer= objNetwork.ComputerName

 UserData.InnerHTML = “<p align = ‘center’> “ & _
  “<font style=’font-size:18pt;color:white’>” & _
  strUser & “<br>” & strComputer & “</font></p>”
End Sub

Maintenant que nous regardons cette sous-routine d’un peu plus près, nous voyons qu’il n’y a vraiment pas grand chose à en dire, n’est-ce pas ? Comme vous pouvez le voir, nous commençons par créer une instance de l’objet Wscript.Network. Nous utilisons ensuite ces lignes de code pour récupérer le nom d’utilisateur, le domaine et le nom d’ordinateur :

strUser = objNetwork.UserDomain & “\” & _
  objNetwork.UserName
strComputer= objNetwork.ComputerName

Ceci, bien sûr, se trouve être exactement les informations que nous voulons écrire dans notre fenêtre de HTA. Tout ce que nous avons à faire est de combiner les variables strUser et strComputer avec une petite balise HTML et d’affecter ensuite la chaîne résultante à la propriété InnerHTML de notre balise span :

UserData.InnerHTML = _
  “<p align = ‘center’> “ & _
  “<font style=’font-size:18pt;color:white’>” _
  & strUser & “<br>” & strComputer & _
  “</font></p>”

Oui, nous savons que ce morceau de code a l’air compliqué. Mais il n’est vraiment pas si mauvais que ça. Il paraît compliqué simplement parce que nous combinons plusieurs éléments dans une seule chaîne. Nous démarrons par une balise paragraph ouvrante, qui spécifie que nous voulons centrer le texte dans le paragraphe.

“<p align = ‘center’> “

Ensuite, nous faisons appel à une balise ouvrante font, qui spécifie que nous allons utiliser un texte blanc de 18 points :

“<font style=’font-size:18pt;color:white’>”

StrUser est la variable qui contient notre nom d’utilisateur, au format Domaine\Nom d’utilisateur. "<br> insère un saut de ligne. Nous l’insérons pour que le nom d’utilisateur apparaisse sur une ligne et le nom d’ordinateur sur une deuxième ligne. strComputer est la variable contenant le nom de notre ordinateur. Enfin, nous ajoutons les balises fermantes font et paragraph :

“</font></p>”

En examinant ces éléments individuellement, vous voyez que le code n’est pas du tout aussi compliqué qu’il y paraissait.

À propos, il est possible de positionner à peu près tout élément HTML de votre choix. Supposez par exemple que vous vouliez centrer un bouton sous le graphique. Pour cela, ajoutez simplement ceci à votre code de HTA :

<input type=”button” value=”Test Button” style=”position:absolute;left:820px;top:300px”>

Cela devrait vous donner une HTA ressemblant à celle de la figure 6.

Figure 6** Quel charmant bouton **

Ici encore, vous devrez faire plusieurs essais pour que le bouton soit positionné à la perfection, mais cela ne devrait pas prendre très longtemps. En fait, si vous êtes prêt à effectuer des calculs, vous pouvez probablement déterminer la position correcte à l’avance. Tout ce que vous devez connaître est la largeur et la hauteur de chaque objet (ce que vous pouvez spécifier à l’aide du paramètre style) ainsi que la largeur et la hauteur de la fenêtre de HTA. Par défaut, tout du moins sur l’ordinateur de test des scripteurs, les HTA mesurent approximativement 1020 pixels de large par 685 pixels de haut (ces résultats peuvent bien sûr varier). Faute de mieux, vous pouvez démarrer avec ces nombres et les ajuster ensuite pour convenir à vos exigences.

Ceci est bien entendu une présentation beaucoup trop brève de CSS, mais elle devrait suffire pour vous lancer dans la voie qui vous permettra de rendre vos scripts magnifiques. Les philosophes ridiculiseront sans doute ces efforts et vous diront que la véritable beauté d’un script vient de l’intérieur et non de l’extérieur. Mais réfléchissez une seconde. Qui sont les plus grands philosophes de tous les temps ? Bingo. Platon, Socrate, Aristote, les suspects habituels. En gardant ça à l’esprit, j’aimerais vous poser une question : avez-vous déjà vu une photo de ces philosophes ? Vous ne trouvez pas bizarre qu’il n’existe aucune photo de ces personnes qui disent que la beauté n’a pas d’importance ? Cela ne vous paraît pas bizarre ? Je vous invite à y réfléchir.

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.