Hey, Scripting Guy!Auch bei Skripts kommt es auf das Äußere an

Die Scripting Guys von Microsoft

Seit hunderten oder sogar schon tausenden von Jahren bestehen Philosophen und Weise darauf, dass beim Beurteilen von Menschen oder Dingen nicht rein auf Äußerlichkeiten geachtet wird. (Natürlich sollten Menschen überhaupt nicht beurteilt werden, schließlich liegt Schönheit im Auge des Betrachters.) Aber Sie wissen ja: Wahre Schönheit kommt von innen und nicht von außen, und Charakter ist entscheidender als Aussehen.

Dem können die Scripting Guys nur eines hinzufügen: Unsinn.

Sie haben richtig gehört, Unsinn. Die Scripting Guys geben gerne zu, dass die äußere Erscheinung in einer perfekten Welt keine Rolle spielt. Doch wir leben nicht in einer perfekten Welt. Wenn dem so wäre, würden Pommes frites und Schokoladeneis zu den zwei wichtigsten Nahrungsmitteln gehören. Ob es Ihnen gefällt oder nicht, Äußerlichkeiten sind wichtig. Das gilt ebenso für Ihre Skripts.

Die Scripting Guys wissen natürlich, dass nur wenige von der reinen Schönheit eines VBScripts, das in einem Befehlsfenster ausgeführt wird, zu Tränen gerührt sind. (Mit Ausnahme des Scripting Guy Dean Tsaltas vielleicht.)

Andererseits sind die Skriptersteller unseres Hightechzeitalters nicht mehr unbedingt auf Befehlsfenster angewiesen. Dank HTML-Anwendungen (HTAs) können Schreiber von Skripts mithilfe von DHTML grafische Benutzeroberflächen für ihre Skripts erstellen. Diese HTML-Fähigkeiten können auch zur Erstellung von Minianwendungen für Windows Vista™ eingesetzt werden. Dadurch könnte sich die bisher bekannte Skripterstellung für die Systemadministration grundlegend verändern. Aber wissen Sie was? Sobald das Gespräch auf grafische Benutzeroberflächen kommt, gelten herkömmliche Ansichten über oberflächliche Schönheit nicht mehr. Für Skripts, die in einer grafischen Umgebung ausgeführt werden, ist das Äußere ebenso wichtig wie Funktion und Leistung.

Aber das ist ein Problem. Schließlich sind wir Skriptersteller, was wissen wir schon über die Erstellung grafischer Benutzeroberflächen? Damit wäre die Sache dann wohl erledigt, oder?

Vielleicht. Dies hängt von den Umständen ab. Hat da gerade jemand gesagt: „Ohne die Scripting Guys wären wir aufgeschmissen?“

Wirklich. Das habe ich mir nicht eingebildet. Nun, vielleicht war es etwas genuschelt ...

Aber das macht nichts. Jemand hätte es zumindest sagen sollen, weil die Scripting Guys wirklich helfen wollen (ganz gleich, ob Sie Hilfe benötigen oder nicht).

Sehen wir uns zum Einstieg in die wunderbare Welt der grafischen Benutzeroberflächen eine einfache HTA an. (Weitere Informationen zum Erstellen von HTAs finden Sie im HTA-Entwicklercenter.)

In Abbildung 1 ist der erste Teil eines Desktopinformationssystems dargestellt. Wie Sie sehen, wurde zunächst in der oberen rechten Ecke des HTA-Fensters eine nette kleine Grafik erstellt. Die Idee ist, dass die HTA beim ersten Laden den Namen des angemeldeten Benutzers abfragt und diesen Namen zusammen mit den Computernamen über diesem Bild anzeigt. Dies ist erst der Anfang, später werden der HTA noch andere tolle Dinge hinzugefügt.

Abbildung 1** Der Anfang einer hübschen kleinen grafischen HTA-Schnittstelle **

Wir sind uns nicht wirklich sicher, wer das ist. Wahrscheinlich einer von diesen Philosophen. Vielleicht Voltaire. Es klingt jedenfalls nach Voltaire.

Zugegeben, das ist eine einfache kleine Anwendung und ihre Schönheit würde wohl nicht einmal Scripting Guy Dean zu Tränen rühren. Doch Sie dient als nützliches Vorführungstool, dessen Grundkonzept sich auf unterschiedliche Situationen anwenden lässt. Schließlich arbeiten viele dieser Windows Vista-Minianwendungen nach einem ähnlichen Prinzip. Sie zeigen einfach eine Grafik (z. B. eine Skala oder Scheibe) an, über der Text geschrieben wird. So scheint es, als hätten Sie eine nette kleine Fortschrittsanzeige für verfügbaren Speicherplatz, wenn es sich letztendlich nur um eine generische Grafik handelt, über die dynamischer Text gelegt wurde.

Uns erscheint das eigentlich auch ziemlich sinnlos. Aber im Verlauf dieses Artikels dürften alle Unklarheiten beseitigt werden.

Es gibt nur ein Problem bei der Anzeige einer Grafik, über die dann Text geschrieben wird: Es funktioniert nicht. Unter Einsatz normaler HTML-Tags ergibt sich etwas Ähnliches wie in Abbildung 2. Das hatten wir uns eigentlich anders vorgestellt. Vielleicht hatte Nietzsche mit seiner Feststellung Recht, dass Menschen nie in der Lage sein würden Text über eine Grafik zu legen, zumindest nicht mit einer HTA.

Abbildung 2** Ein erster Versuch, Text zu überlagern **

Vielleicht lag Nietzsche aber doch falsch: Hat da nicht gerade jemand gesagt ... Aber lassen wir das jetzt lieber. Es stellt sich heraus, dass unser Ziel mit einfachem HTML nicht zu erreichen ist. Theoretisch könnten wir die Grafik in eine Hintergrundgrafik umwandeln und dann Tabellen und geschützte Leerzeichen und alle möglichen anderen Tricks einsetzen, damit der Text das Bild überlagert. Das Wort „theoretisch“ ist dabei allerdings wichtig. Außer in den einfachsten Fällen funktioniert diese Strategie nämlich nicht.

Es gibt aber eine wesentlich bessere Möglichkeit, attraktive Layouts in einer HTA oder Windows Vista-Minianwendung zu erstellen: Cascading Style Sheets, besser bekannt als CSS.

CSS wird zum Festlegen der Schriftarten, Ränder, Ausrichtungen, Farben und anderer Präsentationsaspekte eines Dokuments verwendet. (Das betrifft vor allem Webseiten. Da jedoch HTAs und Minianwendungen im Prinzip nichts anderes als Webseiten sind, ist CSS für sie gleichermaßen geeignet.) An dieser Stelle kann auf die Vielzahl an Möglichkeiten, die CSS bietet, nicht genau eingegangen werden. Weitere Informationen finden Sie jedoch in der praktischen und umfassenden CSS-Referenzdokumentation auf MSDN®. Im Rahmen dieses Artikels reicht die Feststellung, dass CSS zur exakten Steuerung des Layouts der HTA verwendet werden kann, einschließlich dem Überlagern eines Elements (des Texts) über ein anderes (die Grafik).

Im Folgenden wird erläutert, wie dabei vorzugehen ist. Werfen Sie zunächst einen Blick auf den Code für eine sehr einfache HTA in Abbildung 3.

Figure 3 Vielleicht kommen wir der ganzen Sache damit ja etwas näher ...

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

Wie Sie sehen, ist das wirklich nichts Besonderes. Es gibt eine Window_OnLoad-Unterroutine, die (wie der Name schon sagt) immer dann automatisch ausgeführt wird, wenn die HTA gestartet oder aktualisiert wird. Auf diese Unterroutine wird gleich noch näher eingegangen. Außerdem gibt es zwei HTML-Elemente: die Grafik und ein Span-Element Wie Sie wahrscheinlich wissen, werden diese Tags zum Einfügen der Grafik mithilfe des Ausrichtungsattributs verwendet, um sicherzustellen, dass das Bild auf der richtigen Seite des Fensters angezeigt wird:

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

Somit kommen wir zu den HTML-Tags für das Span-Element:

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

Hier wurde ein Span-Tag verwendet. Doch was ist ein Span-Tag eigentlich? Ein Span-Tag ist einfach ein benannter Bereich der HTA. Es ist ein begrenzter Abschnitt des HTA-Fensters, der programmatisch festgelegt werden kann (da dem Span-Tag die Kennung „UserData“ zugewiesen wurde). Nach dem Einrichten eines Span-Tags kann eine Unterroutine geschrieben werden, die dem Tag Text oder HTML-Code zuweist. Tatsächlich ist genau dies in der HTA erfolgt.

Aber wie gesagt, das wird später noch erörtert. Zuvor soll ein Blick auf den Stilparameter geworfen werden, der dem Span-Tag hinzugefügt wurde:

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

Dieser Parameter ist offensichtlich der Schlüssel für eine erfolgreiche Positionierung des dynamischen Texts über die Grafik. Tatsächlich werden an dieser Stelle drei getrennte Stilattribute festgelegt.

Position Der HTA wird mitgeteilt, dass die Position des Span-Tags absolut sein soll. Das bedeutet im Wesentlichen, dass sich das Span-Tag immer am selben Ort befinden soll, auch wenn das wie in diesem Fall heißt, dass der Text über die Fläche eines anderen Elements (z. B. der Grafik) geschrieben wird.

Left Legt einfach die Position des Span-Tags relativ zur linken Kante des HTA-Fensters fest. In diesem Fall soll das Span-Tag bei 770 Pixeln (770px) von links aus beginnen.

Top Diese Einstellung gleicht dem Left-Attribut, außer dass diesmal die Position des Span-Tags in Bezug auf die obere Kante des HTA-Fensters festgelegt wird. In diesem Fall werden vom oberen Rand des Fensters 150 Pixel (150px) nach unten gezählt, bevor das Span-Tag beginnt.

Woher wissen wir, dass die linke Seite der Spanne bei 770 Pixeln und der obere Rand bei 150 Pixeln festgelegt wird? Um die Wahrheit zu sagen, wir wussten es nicht. Wir haben die Grafik auf die Seite platziert, ein wenig herumgeraten und dem Span-Tag Werte für die Attribute „Top“ und „Left“ zugewiesen. Danach haben wir die HTA geöffnet und uns die Ergebnisse angesehen. Natürlich lag unsere Annnahme etwas daneben. Also wurden die Werte angepasst, die HTA aktualisiert und das Ergebnis erneut überprüft. Genau wie Goldlöckchen haben wir dann so lange herumprobiert, bis wir mit der Position zufrieden waren.

Hinweis: Sie kennen doch sicher Goldlöckchen und die drei Bären, die Geschichte von den Betten, den Stühlen und dem Brei, der zu heiß oder zu kalt war. Ob Goldlöckchen als große Philosophin zu bezeichnen ist, sei dahingestellt. Da sie jedoch keine Probleme damit hatte, in ein fremdes Haus einzubrechen, fremden Brei zu essen, auf fremden Stühlen zu sitzen und in fremden Betten zu schlafen, könnte man meinen, sie hatte auf jeden Fall ihre ganz eigene Philosophie.

Jedenfalls zeigt Abbildung 4, wie die HTA jetzt aussieht. Sie ist vielleicht kein Kunstwerk, aber wenn Picasso beispielsweise programmatisch Informationen über eine Grafik malt, sieht das auch nicht besser aus.

Abbildung 4** Stil ist wichtig **

Vielleicht sollte an dieser Stelle erwähnt werden, wie Informationen programmatisch über eine Grafik gedruckt werden. Nun kommen wir endlich auf den Punkt: Es ist an der Zeit, über die Window_OnLoad-Unterroutine zu sprechen, die in Abbildung 5 gezeigt wird.

Figure 5 Window_OnLoad-Unterroutine

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

Bei genauerer Betrachtung dieser Unterroutine stellt sich heraus, dass es darüber gar nicht so viel zu sagen gibt. Zunächst wird eine Instanz des Wscript.Network-Objekts erstellt. Mithilfe dieser Codezeilen wird der Benutzername, die Domäne und der Computername abgerufen:

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

Das sind natürlich genau die Informationen, die in das HTA-Fenster geschrieben werden sollen. Es müssen lediglich die strUser- und strComputer-Variablen mit einem HTML-Tag kombiniert und dann die sich ergebende Zeichenfolge an die InnerHTML-Eigenschaft des Span-Tags zugewiesen werden.

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

Der Code sieht etwas kompliziert aus. Aber so schlimm ist es gar nicht. Er sieht einfach kompliziert aus, weil verschiedene Elemente in einer Zeichenfolge kombiniert werden. In einem Tag für den Anfangsabsatz wird zunächst angegeben, dass der Text im Absatz zentriert werden soll.

“<p align = ‘center’> “

Darauf folgt ein Tag für die Anfangsschrift, in dem angegeben wird, dass weißer Text mit der Schriftgröße 18 verwendet werden soll:

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

Die Variable, die den Benutzernamen im Format Domäne/Benutzername enthält, lautet strUser. "<br>" fügt einen Zeilenumbruch ein. Dieser wird eingefügt, damit der Benutzername auf einer Zeile erscheint und der Computername auf der nächsten. Die Variable, die den Namen des Computers enthält, lautet strComputer. Schließlich werden die Tags für Abschlussschrift und Abschlussabsatz hinzugefügt:

“</font></p>”

Die einzelnen Codeteile sehen gar nicht so kompliziert aus, wie auf den ersten Blick zu vermuten war.

Auf diese Weise kann fast jedes beliebige HTML-Element positioniert werden. Angenommen es soll eine Schaltfläche unterhalb der Grafik positioniert werden. Fügen Sie dem HTA-Code dafür einfach Folgendes hinzu:

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

Dadurch ergibt sich die in Abbildung 6 aufgeführte HTA:

Abbildung 6** Was für eine schöne Schaltfläche **

Auch hier müssen Sie wieder etwas experimentieren, bis die Schaltfläche richtig positioniert ist, doch das sollte nicht allzu lange dauern. Wenn Sie jedoch nicht vor etwas Rechenarbeit zurückschrecken, können Sie die korrekte Position bereits im Vorfeld bestimmen. Es müssen lediglich die Breite und Höhe jedes Objekts bekannt sein – diese können eventuell mithilfe des Stilparameters bestimmt werden – sowie die Breite und Höhe des HTA-Fensters. Standardmäßig, zumindest auf dem Testcomputer der Scripting Guys, sind HTAs ungefähr 1020 Pixel breit und 685 Pixel hoch (selbstverständlich können die Ergebnisse abweichen). Nehmen Sie diese Zahlen ggf. zunächst als Grundlage, und passen Sie sie auf Ihre Bedürfnisse an.

Diese Einführung in CSS ist offensichtlich viel zu kurz, doch mit ihrer Hilfe können Sie hoffentlich in Zukunft schönere Skripts erstellen. Philosophen mögen weiterhin darauf bestehen, dass die wahre Schönheit eines Skripts von innen kommt und nicht von außen. Überlegen Sie sich aber einmal Folgendes: Wer sind die größten Philosophen aller Zeiten? Stimmt: Platon, Sokrates, Aristoteles usw. Vor diesem Hintergrund möchten wir eine Frage stellen: Haben Sie je ein Foto von einem dieser Philosophen gesehen? Finden Sie es nicht auch interessant, dass es keine Fotos von den Menschen gibt, die behaupten, Schönheit spiele keine Rolle? Schon ziemlich seltsam. Darüber sollte einmal nachgedacht werden.

Die Scripting Guys von Microsoft arbeiten für (und sind Angestellte von) Microsoft. Wenn sie nicht gerade ihrem Hobby, dem Baseball (oder verschiedenen anderen Aktivitäten) nachgehen, betreiben sie das TechNet-Skriptcenter. Besuchen Sie es unter www.scriptingguys.com.

© 2008 Microsoft Corporation und CMP Media, LLC. Alle Rechte vorbehalten. Die nicht genehmigte teilweise oder vollständige Vervielfältigung ist nicht zulässig.