Hey, Scripting Guy!Und es werde Silverlight

Die Scripting Guys von Microsoft

Laden Sie den Code für diesen Artikel herunter: HeyScriptingGuy2007_10.exe (156KB)

Die Menschheitsgeschichte zeichnet sich seit langem durch einen Schlagabtausch entgegengesetzter Kräfte aus: die Römer gegen die barbarischen Horden, die Griechen gegen Troja, die Scripting Guys gegen jene, die der Meinung sind, dass es in einem Artikel über Systemverwaltungsskripting tatsächlich um Systemverwaltungsskripting gehen sollte und nicht etwa um den historischen Schlagabtausch entgegengesetzter Kräfte.

Die Computerwelt ist gegenüber Konflikten zwischen entgegengesetzten Kräften nicht immun, wobei speziell an den Konflikt zwischen Entwicklern und Systemadministratoren zu denken ist. Wie schon Karl Marx bei der Lagebetrachtung sagte: „Entweder ist dieser Mann tot, oder meine Uhr ist stehen geblieben.“

Verzeihung – das stammt natürlich von Groucho Marx. Karl Marx hat gesagt, dass Kunst immer und überall ein geheimes Geständnis und gleichzeitig die unsterbliche Bewegung ihrer Zeit ist. Ehrlich gesagt haben wir keine Ahnung, was das zu bedeuten hat. Außerdem war Groucho Marx sehr viel amüsanter als Karl Marx, selbst wenn Grouchos geistreiche Bemerkungen für den Konflikt zwischen Entwicklern und Systemadministratoren nicht besonders relevant sind.

Unserer Ansicht nach war es Karl Marx, der dafür gesorgt hat, dass die Scripting Guys jeden Morgen vor der Arbeit den Automatisierungstreueschwur leisteten: „Systemadministratoren sind keine Entwickler.“ Und das stimmte mit Sicherheit: Systemadministratoren waren keine Entwickler. Entwickler waren Leute, die Computerprogramme schrieben, während Systemadministratoren Leute waren die ... ehrlich gesagt, sind wir uns nicht sicher, ob bei Microsoft wirklich jemand wusste, was Systemadministratoren taten. Auf jeden Fall schrieben sie keine Computerprogramme.

Natürlich schrieb Karl Marx auch den Song „The Times, They Are A-Changing“. (Zumindest hat er uns das so erzählt.)

Zum Teil ist es dem TechNet-Scriptcenter (microsoft.com/TechNet/scriptcenter) zu verdanken, dass Systemadministratoren allmählich VBScript entdeckten und damit begannen, eigene Dienstprogramme zu schreiben – Dienstprogramme die zwar nicht so vollständig und umfassend wie das typische Computerprogramm waren, aber dennoch nützliche Verwaltungsaufgaben durchführten. Beim Schreiben dieser Dienstprogramme mussten Systemadministratoren auf Fähigkeiten zurückgreifen, die den Fähigkeiten von Entwicklern sehr ähnlich sind.

Das ist aber noch nicht alles. Die Veröffentlichung von Windows PowerShell™ (microsoft.com/technet/scriptcenter/hubs/msh.mspx) bedeutet, dass das Microsoft® .NET Framework nun auch von Systemadministratoren und Skriptentwicklern genutzt werden kann. Mit Windows Vista® wurden technische Spielereien eingeführt (microsoft.com/technet/scriptcenter/topics/vista/gadgets-pt1.mspx), die zu einer Gleichberechtigung von Systemadministratoren (oder zumindest Systemadministratoren, die Skripts schreiben) und Entwicklern geführt haben. Und jetzt – Trommelwirbel, bitte – gibt es Microsoft Silverlight, das „browserübergreifende, plattformübergreifende Plug-In für die nächste Generation der .NET Framework-basierten Medienerfahrungen und umfassenden interaktiven Anwendungen für das Web“.

Das klingt eindrucksvoll, nicht wahr? Doch wahrscheinlich fragen Sie sich, was das mit Skripterstellern im Bereich Systemverwaltung zu tun hat, wie Sie es sind. Ehrlich gesagt, sind wir uns da nicht ganz sicher. Silverlight erleichtert jedoch das Erstellen äußerst cooler Benutzeroberflächen und Multimediapräsentationen. Obwohl das Marketingmaterial Silverlight ausnahmslos als Möglichkeit zum Erstellen von Webanwendungen vorstellt, hier eine wenig bekannte Tatsache: Silverlight scheint gleichermaßen gut in HTML-Anwendungen oder HTAs (microsoft.com/technet/scriptcenter/hubs/htas.mspx) zu funktionieren, ein Medium das bei Skripterstellern sehr beliebt ist. Vielleicht lohnt es sich daher für Sie, Silverlight einmal auszuprobieren.

Zunächst aber noch ein Hinweis:

Es sollte klargestellt werden, dass die vielen Funktionen und das Potenzial von Silverlight in diesem Artikel nicht erörtert werden. Vielmehr werden Codeausschnitte vorgestellt, um Sie zu Spielereien mit der Technologie anzuregen. Wenn Sie Silverlight (kostenlos) installieren möchten, besuchen Sie die Silverlight-Homepage unter microsoft.com/silverlight. Zudem finden Sie die SDKs, Beispielprojekte und viele andere nützliche Dinge unter silverlight.net/GetStarted.

Hier wird davon ausgegangen, dass Sie Silverlight bereits installiert haben. Außerdem wird angenommen, dass Sie den Bereich mit den Codedownloads auf der TechNet Magazin-Website (technetmagazine.com/code07.aspx) besucht und die in Abbildung 1 beschriebenen Dateien heruntergeladen haben.

Figure 1 Silverlight-Projektkomponenten

SampleProject.js ist nicht unbedingt erforderlich, zumindest nicht für den Artikel dieses Monats. Silverlight ermöglicht das Anfügen von Skripts zu Objekten und Ereignissen in einem Projekt. Diese Skripts können entweder in der HTML-Datei hartcodiert sein oder (wie in diesem Fall) aus einer externen „include“-Datei wie dieser eingelesen werden. Außerdem wird SampleProject.html in eine HTA-Datei konvertiert: die Datei wird einfach in SampleProject.hta umbenannt.

Speichern Sie alle diese Dateien in einem Ordner. Jetzt kann es losgehen.

Die XAML-Datei

Wie Sie vielleicht bereits erraten haben, dreht sich im Artikel dieses Monats alles um die XAML-Datei. (Übrigens wird XAML „samel“ ausgesprochen, mit Betonung auf dem „a“. XAML ist die Abkürzung von Extensible Application Markup Language. Unter anderem bietet XAML die Möglichkeit, Benutzeroberflächen mithilfe einer XML-ähnlichen Sprache zu erstellen. Erleichtert dies die Aufgabe (speziell von Systemadministratoren) beim Erstellen von Benutzeroberflächen? Das werden Sie gleich herausfinden.

Starten Sie den Editor, und öffnen Sie die Datei „SampleProject.xaml“. Wenn Sie vorhandenen Code sehen, ersetzen Sie ihn durch Folgendes:

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

Anmerkung. SampleProject.hta ist bereits so vorkonfiguriert, dass Informationen aus SampleProject.xaml geladen werden. Zum Verwenden einer anderen XAML-Datei müssen Sie die Datei „CreateSilverlight.js“ bearbeiten.

Nach Einfügen des Codes speichern Sie die Datei, bevor Sie auf SampleProject.hta doppelklicken. Was sehen Sie nun? Richtig: ein großes, langweiliges, graues Feld.

Wahrscheinlich sind Sie enttäuscht, aber das ist schon richtig.

Es gibt einfach noch nicht viel zu sehen, weil noch nichts ausgeführt wurde: bisher wurde der XAML-Datei nur eine Leinwand hinzugefügt. Doch das ist ein wichtiger Schritt. Wenn Sie in Öl malen, ist eine Leinwand schließlich das Erste, was Sie brauchen. Dasselbe gilt für Silverlight: bevor dem Projekt Elemente hinzugefügt werden können, ist eine Leinwand zum „Malen“ erforderlich. Die liegt also jetzt vor.

Warum handelt es sich übrigens um ein graues Feld, das 300 Pixel breit und 300 Pixel hoch ist? Die Antwort ist ganz einfach: es sind die in der Datei „CreateSilverlight.js“ vorhandenen Standardspezifikationen. Wenn Sie diese Standardwerte nicht mögen, öffnen Sie einfach CreateSilverlight.js und optimieren die Einstellungen nach Bedarf. Sie bevorzugen eine weiße Leinwand von 800 Pixeln Breite und 300 Pixeln Höhe? (Eine Größe, die für die hier verwendeten Beispiele wahrscheinlich besser angebracht ist.) Sorgen Sie einfach dafür, dass diese drei Zeilen in CreateSilverlight.js enthalten sind:

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.

Anmerkung. Richtig bemerkt: In der ursprünglichen .js-Datei ist der Hintergrund auf #D6D6D6 eingestellt. Jetzt wurde Weiß als Farbe festgelegt. Wie sich herausstellt, können Sie in einer XAML-Datei RGB-Werte oder Farbbezeichnungen zur Darstellung von Farben verwenden. (Unter msdn2.microsoft.com/bb188314.aspx finden Sie eine vollständige Liste von Farbwerten und Farbbezeichnungen.) Obwohl die Scripting Guys Farben am liebsten mit ihren RGB-Werten bezeichnen („Mein Haus? Es ist ein FFFFFACD mit FFCD5C5C-Dekor“), wurde entschieden, hier Farbbezeichnungen zu verwenden.

Ein zusätzlicher Tipp: Sie sind nicht darauf beschränkt, Volltonfarben als Leinwandhintergrund zu verwenden. Fügen Sie den Code aus Abbildung 2 in die XAML-Datei ein, und sehen Sie sich das Ergebnis an.

Figure 2 Hübsche Farben

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

Fertig? Ziemlich cool, nicht wahr?

Natürlich ist eine leere Leinwand für sich nicht besonders interessant. Daher soll nun dieser Leinwand ein Objekt hinzugefügt werden. In Silverlight können zwar alle möglichen verschiedenen Objekte (einschließlich Ellipsen, Rechtecken, Linien und Vielecke) hinzugefügt werden, wird in diesem Beispiel der Leinwand einfach ein herkömmlicher Textblock hinzugefügt. Wie? Durch Einfügen der folgenden Tags zwischen die <Canvas>- und </Canvas>-Tags in der XAML-Datei:

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

Wie Sie sehen, ist XAML wirklich nicht besonders schwer. Nehmen Sie sich zunächst den <TextBlock>-Tag vor, wobei sichergestellt werden muss, dass verschiedene TextBlock-Parameter (beispielsweise Name und FontSize) in den Tag aufgenommen werden. Dann wird mithilfe des </TextBlock>-Tags angezeigt, dass der TextBlock fertig bearbeitet ist. Was daran so cool ist? Es ist praktisch die Art und Weise, wie jedes beliebige Objekt einer XAML-Datei hinzugefügt wird. Sie möchten ein Rechteck von 300 Pixeln Breite und 100 Pixeln Höhe hinzufügen? Kein Problem:

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

Wenn Sie übrigens der Leinwand eine Form (beispielsweise ein Rechteck) hinzufügen, stellen Sie sicher, dass Sie eine Füllfarbe und/oder eine Strichfarbe angeben. Falls Sie dies nicht tun, fügt Silverlight der Leinwand ein transparentes Rechteck hinzu. Das Rechteck ist dann zwar vorhanden, aber wenn Sie nicht über Röntgenaugen verfügen, können Sie es nicht sehen.

Apropos Füllfarben und Strichfarben: mit ihrer Hilfe werden einige Silverlight-Objekte mit Farbe versehen. Bei anderen Objekten muss ein Pinsel, beispielsweise der LinearGradientBrush, verwendet werden, der im Bonustipp vorgestellt (aber nicht erläutert) wird. Wenn Sie Objekte in Volltonfarbe bevorzugen, können Sie den entsprechenden SolidColorBrush verwenden. Sehen Sie sich beispielsweise die XAML-Markierung in Abbildung 3 an, mit der der Text (technisch gesehen die Foreground-Eigenschaft von TextBlock) rot „angemalt“ wird.

Figure 3 Text malen

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

Für eine noch coolere Wirkung probieren Sie die ImageBrush-Eigenschaft aus, die Text mit einem Bild füllt:

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

Hier noch ein weiterer Tipp: Wenn Sie die ImageBrush-Eigenschaft ausprobieren, sollten Sie wahrscheinlich den FontSize-Wert erhöhen, denn je größer der Text ist, desto besser die Wirkung.

Probieren Sie es aus, und sehen Sie sich das Ergebnis an. Es ist wirklich beeindruckend.

Doch halt: Es kommt noch besser

Zugegebenermaßen haben wir das Beste bisher für uns behalten. Text in Silverlight anzuzeigen ist wirklich eine tolle Sache, genau wie das Zeichnen von Rechtecken, Ellipsen und Vielecken. Doch das ist nichts im Vergleich zu den Animationen, die einem Silverlight-Projekt hinzugefügt werden können.

In diesem Artikel können wiederum nur einige Möglichkeiten zum Erstellen von Silverlight-Animationen vorgestellt werden. Es ist einfach nicht genug Platz vorhanden, um in die Tiefe zu gehen. (Das ist allerdings nicht unsere Schuld. Wir schlagen ständig vor, dass das TechNet Magazin zum „Hey, Scripting Guy!“- Magazin umbenannt werden sollte, aber aus irgendeinem Grund scheinen unsere E-Mails nicht durchzukommen.)

Hier ist ein cooler Effekt, der dafür sorgt, dass der Text langsam (aber sicher) eingeblendet wird. Fügen Sie den Code in Abbildung 4 zwischen dem <TextBlock>- und </TextBlock>-Tag in der XAML-Datei hinzu.

Figure 4 TextBlock-Tricks

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

Zugegeben: es sieht aus, als ob hier jede Menge passiert, aber glücklicherweise handelt es sich bei vielem nur um herkömmliche Tags. Zunächst einmal können Sie nicht einfach eine Animation zu einer XAML-Datei hinzufügen. Sie müssen angeben, wann diese Animation wiedergegeben werden soll. Dazu ist es erforderlich, einen Satz Trigger für den TextBlock anzugeben. In diesem Fall wird ein Trigger erstellt, der die Animation jedes Mal startet, wenn der TextBlock geladen wird:

<EventTrigger RoutedEvent="TextBlock.Loaded">

In Silverlight müssen Animationen auf einem Storyboard stattfinden (ein Begriff, der der Filmindustrie entliehen wurde). Aus diesem Grund gibt es das <BeginStoryboard>- und das <Storyboard>-Tag.

Damit der Text allmählich eingeblendet wird, muss die Opacity-Eigenschaft geändert werden. Der Wert wird allmählich von 0,0 (transparent) auf 1,0 (Volltonfarbe) erhöht. Da Opacity eine Double-Eigenschaft ist (eine auf einem numerischen Wert mit doppelter Genauigkeit basierende Eigenschaft), wird eine DoubleAnimation-Animation verwendet. Dies geschieht folgendermaßen: Das zu animierende Objekt (in diesem Fall Test, der Name des TextBlock), die Zieleigenschaft (Opacity) und dann sowohl der Animationsbereich (von 0,0 bis 1,0 Deckkraft) als auch die Dauer für die gesamte Animation (5 Sekunden) werden angegeben. Anders ausgedrückt:

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

Anmerkung. Verwenden Sie unbedingt die Syntax 0:0:5 (Stunden, Minuten, Sekunden), um 5 Sekunden anzugeben. Die Verwendung des Werts 5 allein generiert keinen Fehler, aber die Animation braucht dann 5 Tage.

Haben Sie es versucht? Versuchen Sie jetzt Folgendes: Legen Sie die AutoReverse-Eigenschaft innerhalb des DoubleAnimation-Tags auf „True“ fest:

AutoReverse="True"

Die Animation wird ein- und dann wieder ausgeblendet.

Legen Sie die RepeatBehavior-Eigenschaft auf „Forever“ fest, und der Text wird für immer und ewig ein- und ausgeblendet:

RepeatBehavior="Forever"

Ist ewig ein bisschen zu lang? Dann legen Sie RepeatBehavior auf „3x“ fest, damit die Animation dreimal abgespielt und dann beendet wird.

RepeatBehavior="3x"

Für diesen coolen Entwurf müssen wir uns wirklich einmal selbst loben. Wenn Sie keinen Text mögen, der langsam ein- und dann ausgeblendet wird, sondern lieber Text, der langsam die Farbe ändert, sollten Sie eine ColorAnimation-Animation verwenden:

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

Anmerkung. Stellen Sie sicher, dass Sie mit rotem Text beginnen, wenn Sie dies ausprobieren. Sie wissen bereits, wie Sie den Text mit roter Farbe versehen können.

Das war doch unterhaltsam, oder? Dennoch scheinen Sie ein wenig enttäuscht. Ach so, deshalb: Die ColorAnimation war recht nett, aber eigentlich hatten Sie erhofft, dass Dinge auf dem Bildschirm herumfliegen würden. Kein Problem. Was für eine Software wäre Silverlight wohl, wenn es nicht möglich wäre, Dinge auf dem Bildschirm herumfliegen zu lassen? Probieren Sie Folgendes aus:

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

Der TextBlock bewegt sich nun langsam von seiner Ausgangsposition an eine Position, die 150 Pixel vom linken Rand der Leinwand entfernt ist (Canvas.Left). Wenn sich der TextBlock nach oben und unten bewegen soll, wird einfach die Canvas.Top-Eigenschaft verwendet:

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

Könnten diese Animationen kombiniert werden, sodass sich der TextBlock von einer zur anderen Seite und nach oben und unten bewegt? Keine Ahnung. Aber hier ist ein Hinweis: fügen Sie beide Animationen (gleich hintereinander) in die XAML-Datei ein, und warten Sie ab.

Anmerkung. Also gut, wir haben gelogen. Uns war natürlich bekannt, dass sich diese Animationen kombinieren lassen. Tatsächlich können Sie alle erdenklichen Animationen zusammen in ein einzelnes Silverlight-Projekt einfügen. Es ist ein wenig knifflig. Möglicherweise müssen Sie zusätzliche Tags einfügen, um sicherzustellen, dass eine Animation endet, bevor die nächste beginnt. Doch durch die einfache Eingabe von ein paar XML-ähnlichen Tags können Sie wirklich tolle Animationen erstellen.

Tut uns Leid, Leute, aber die Show ist zu Ende.

Wir müssen Schluss machen, obwohl es doch gerade erst interessant wird. Aber es ist ja kein Abschied auf ewig. Wenn Sie mehr über Silverlight erfahren möchten, schreiben Sie uns unter scripter@microsoft.com. Wenn genug Interesse besteht, kommen wir vielleicht in einem zukünftigen Artikel auf dieses Thema zurück. Außerdem sollten Sie das TechNet Script Center (microsoft.com/technet/scriptcenter/resources/tnmag/archive.mspx) besuchen. Dort finden Sie Links zu vollständigen XAML-Beispielen (eXAMLs?). Wie Karl Marx und Friedrich Engels schon am Ende ihres Manifests sagten: „Gute Nacht und gute Heimfahrt.“

Die Scripting Guys von Microsoft arbeiten für Microsoft (oder sind zumindest dort angestellt). 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.