Erste Schritte mit Silverlight

Veröffentlicht: 07. Mai 2007 | Aktualisiert: 19. Jun 2007
Von Laurence Moroney

Dieses Whitepaper bietet einen Überblick über Silverlight (ehemals „WPF/E“) und darüber, wie es sich in die Entwicklung der nächsten Generation von Webanwendungen einfügt.

Microsoft Silverlight
Silverlight ist ein schlankes kostenloses Browser-Plug-In für alle gängigen Browser unter Windows, Apple Macintosh und Linux. Silverlight ermöglicht moderne Rich Internet Applications (RIAs), Multimediaerlebnisse und hochauflösende Videodarstellung sowie leistungsfähige plattformübergreifende .NET-Anwendungen im Web.

Silverlight besitzt ein flexibles Programmiermodell mit breiter Unterstützung für eine Vielzahl von Programmiersprachen und Frameworks wie AJAX, Visual Basic, .NET, C#, JavaScript, Python und Ruby – und lässt sich nahtlos in bestehende Webanwendungen und gängige Serverumgebungen integrieren. Silverlight ermöglicht schnelle Vektorgrafiken, Audiointegration sowie kostengünstige Videopräsentation und Videostreaming.

Besuchen Sie auch unser Silverlight Developer Center auf MSDN Online.

Auf dieser Seite

Was ist Silverlight?

Silverlight (ehemals „WPF/E“) ist eine neue Webpräsentationstechnologie, die auf verschiedenen Plattformen ausgeführt werden kann. Es erlaubt die Erstellung aufwändiger, visuell beeindruckender, interaktiver Funktionen, die überall ausgeführt werden können: innerhalb von Browsern und auf verschiedenen Geräten und Desktopbetriebssystemen (wie z. B. Apple Macintosh). In Übereinstimmung mit WPF (Windows Presentation Foundation), der Präsentationstechnologie in Microsoft .NET Framework 3.0, bildet XAML (Extensible Application Markup Language) die Grundlage für die Silverlight-Präsentationsfunktionen.

Dieses Whitepaper bietet eine schrittweise Einführung in die Grundlagen von Silverlight und die vielfältigen Microsoft-Tools zum Erstellen aufwändiger grafischer Websites, einschließlich Microsoft Expression Blend, Microsoft Visual Studio 2005 und XAML. Zunächst ein kurzer Überblick über die Hintergründe der Entwicklung von Silverlight und seine Einordnung in Bezug auf andere Entwicklungen.

Die Geschichte der Webentwicklung: Übergang zu Web.Next

Als das World Wide Web von Tim Berners-Lee am CERN erfunden wurde, entwickelte er es als netzwerkbasiertes System, das die Speicherung und Verknüpfung statischer Dokumente ermöglichen sollte. Im Verlauf der Jahre kamen weitere Neuerungen hinzu. Der nächste logische Schritt bestand darin, „aktive“ Dokumente mit zeit- oder benutzerspezifischen Informationen dann zu erstellen, wenn sie angefordert wurden. Dies wurde durch Technologien wie z. B. CGI ermöglicht. Mit der Zeit wurde die Möglichkeit, Dokumente im Web zu generieren, sehr wichtig, und die Technologie wurde mittels CGI, Java, ASP und schließlich ASP.NET weiterentwickelt.

ASP.NET war ein Meilenstein, da es Entwicklern ermöglichte, auf Grundlage des Paradigmas der Serverentwicklung und mithilfe von Best-of-Breed-Tools der Visual Studio-Produktfamilie schnell hochwertige Webanwendungen zu entwickeln.

Als ein großes Problem für Webanwendungen erwies sich die Benutzerfreundlichkeit. Technische Einschränkungen verhinderten, dass Webanwendungen die gleiche Benutzerfreundlichkeit wie Clientanwendungen mit lokalen Daten boten.

Das XMLHttpRequest-Objekt, das von Microsoft als Teil von Internet Explorer 5 im Jahr 2000 veröffentlicht wurde, wurde die Grundlage des asynchronen JavaScript und der XML (AJAX)-Technologie. Dadurch konnten Webanwendungen dynamischer auf Benutzereingaben reagieren, indem kleinere Teile einer Webseite aktualisiert wurden, ohne den Inhalt vollständig neu zu laden. Innovative Lösungen die auf AJAX aufbauten, wie z. B. Windows Live Local-Karten, ließen Webanwendungen einen weiteren Schritt in Richtung einer clientähnlichen Funktionalität für Benutzer machen.

Silverlight ist der nächste Schritt in der Entwicklung einer möglichst vielfältigen Funktionalität für Benutzer, die Anwendungsentwickler und Designer ihren Kunden bieten können. Dadurch sind Designer in der Lage, ihre Kreativität zu entfalten und ihre Arbeit in einem Format zu speichern, das im Web direkt funktioniert. In der Vergangenheit hätte ein Designer eine Website und die Funktionalität für Benutzer entworfen, indem er Tools verwendet, die vielfältige Ergebnisse liefern. Um sie aber bereitstellen zu können, hätte der Entwickler seine Ergebnisse an die Einschränkungen der Webplattform anpassen müssen. Im Silverlight-Modell können Designer die gewünschte Funktionalität für Benutzer erstellen und sie in XAML ausdrücken. Dieses XAML kann dann durch einen Entwickler mithilfe der Silverlight-Laufzeitumgebung direkt in eine Webseite eingefügt werden. Deshalb können beide besser als je zuvor zusammenarbeiten, um eine reichhaltige Clientfunktionalität für Benutzer bereitzustellen.

XAML ist XML und somit textbasiert. Es ist eine Firewall-freundliche und leicht zu prüfende Beschreibung reichhaltiger Inhalte. Obgleich es mit anderen Technologien (z. B. Java Applets, ActiveX und Flash) möglich ist, reichhaltigere Inhalte als DHTML, CSS und JavaScript bereitzustellen, senden diese Technologien ausnahmslos binären Inhalt an den Browser. Dies macht es schwierig, die Sicherheit zu überwachen – ganz zu schweigen davon, dass eine Aktualisierung schwierig ist, da jede Änderung bedeutet, dass die gesamte Anwendung neu installiert werden muss. Das ist nicht besonders benutzerfreundlich und kann zur Stagnation bei Seitenaufrufen führen. Wenn Silverlight verwendet und eine Änderung am reichhaltigen Inhalt notwendig wird, wird serverseitig eine neue XAML-Datei generiert. Wenn der Benutzer das nächste Mal die Seite besucht, wird dieses XAML heruntergeladen, und die Funktionalität ohne Neuinstallation aktualisiert.

Das Herzstück von Silverlight ist das Browsererweiterungsmodul. Dieses rendert das XAML und zeigt die entstandene Grafik im Browser an. Das Browsererweiterungsmodul steht als kleiner Download bereit (unter 2 MB), der bei Bedarf installiert werden kann, wenn der Benutzer eine Website aufruft, die Silverlight-Inhalt enthält. Dieses Modul macht das zugrunde liegende Framework des XAML für JavaScript-Entwickler verfügbar. Dadurch wird Interaktion mit dem Inhalt auf Seitenebene möglich. Deshalb kann der Entwickler zum Beispiel Ereignishandler schreiben oder den XAML-Seiteninhalt mittels JavaScript-Code ändern.

Als Nächstes können Sie selbst aktiv werden und einen Blick auf unser erstes Silverlight-Projekt werfen.

Erstellen einer einfachen Silverlight-Anwendung

Zunächst einige Informationen zur Software „Microsoft Expression Blend“ und zum Erstellen einer einfachen Anwendung in XAML für Silverlight. Um eine Silverlight-Anwendung in Blend zu erstellen, wählen Sie File (Datei) -> New Project (Neues Projekt). Das Dialogfeld „New Project“ wird geöffnet. Siehe Abbildung 1.

Abbildung 1: Erstellen eines neuen Silverlight-Projekts mit Blend
Abbildung 1: Erstellen eines neuen Silverlight-Projekts mit Blend

Klicken Sie auf OK, um ein neues Projekt zu erstellen. Dieses Projekt wird eine Standard-HTML-Seite, JavaScript-Codebehind für diese Seite, ein XAML-Dokument, JavaScript-Codebehind für das XAML-Dokument und Silverlight.js enthalten.

Silverlight.js enthält den Code zum Herunterladen und Instanzieren des Silverlight-Steuerelements. Dieses wird Ihnen als Teil des Silverlight-SDKs zur Verfügung gestellt.

Default.html ist eine Standard-HTML-Webseite. Sie enthält drei JavaScript-Skriptverweise, die auf Silverlight.js, Default.html.js (enthält den anwendungsspezifischen Code zum Instanzieren von Silverlight) und Scene.xaml.js (enthält die Ereignishandler für im XAML definierte Anwendungsereignisse) verweisen.

Auf diese Weise wird die Seiten- (default.html) von der Instanzierungslogik (default.html.js) sowie der Entwurfs- (Scene.xaml) vom Ereigniscode (Scene.xaml.js) getrennt. Lassen Sie uns nun eine einfache Anwendung erstellen.

Erstellen der Benutzeroberfläche für einen Videoplayer

Fügen Sie Ihrem Projekt eine Videodatei hinzu. Klicken Sie dazu mit der rechten Maustaste auf die Projektdatei im Fenster „Project Files“ (Projektdateien) rechts oben auf dem Bildschirm, und wählen Sie Add Existing Item... (Vorhandenes Element hinzufügen) aus.

Wenn Sie eine WMV Datei auswählen und Ihrem Projekt hinzufügen, wird die Datei im Projektexplorer angezeigt, und Ihrer Szene wird ein Medienelement hinzugefügt.

Abbildung 2: Hinzufügen eines Medienelements zur XAML-Szene
Abbildung 2: Hinzufügen eines Medienelements zur XAML-Szene

Wenn Sie Ihr Projekt jetzt ausführen, wird der Browser gestartet, und Ihr Video wird abgespielt.

Wenn Sie die automatische Wiedergabe des Videos beenden möchten, bearbeiten Sie das XAML. Auf der rechten Seite des XAML-Designers werden zwei Registerkarten angezeigt: Design und XAML. Wählen Sie die Registerkarte „XAML“ aus, um den XAML-Editor zu öffnen (siehe Abbildung 3.) Bearbeiten Sie den XAML-Text für MediaElement, um ein Attribut AutoPlay=False hinzuzufügen.

Abbildung 3: Bearbeiten des XAML im XAML-Editor
Abbildung 3: Bearbeiten des XAML im XAML-Editor

Wenn Sie die Anwendung jetzt ausführen, rendert der Silverlight-Inhalt den ersten Frame Ihres Videos, spielt ihn jedoch nicht ab.

Hinzufügen von Steuerelementen zu Ihrem Videoplayer

Fügen Sie der Anwendung zwei Textblöcke, hinzu, und geben Sie den Text Play und Stop sowie die Namen txtPlay und txtStop an. Das XAML sieht nun etwa folgendermaßen aus:

<Canvas
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="640" Height="480"
   Background="White">
   
<MediaElement AutoPlay="False"
              x:Name="Movie_wmv"
              Width="320"
              Height="240"
              Canvas.Left="128"
              Canvas.Top="56"
              Source="Movie.wmv"
              Stretch="Fill"/>
   
<TextBlock x:Name="txtPlay"
           Width="72"
           Height="24"
           Canvas.Left="136"
           Canvas.Top="336"
           Text="Play"
           TextWrapping="Wrap"/>
  
   <TextBlock x:Name="txtStop"
              Width="80"
              Height="24"
              Canvas.Left="136"
              Canvas.Top="368"
              Text="Stop"
              TextWrapping="Wrap"/>
</Canvas>

Fügen Sie anschließend dem XAML die Ereignishandlerdeklaration für die Textblöcke hinzu. Deklarieren Sie hierzu den Handler für einen Mausklick mithilfe des Attributs MouseLeftButtonDown. Fügen Sie dem Textblock txtPlay einen Ereignishandler für DoPlay und dem Textblock txtStop einen Ereignishandler für DoStop hinzu. Das XAML sieht nun folgendermaßen aus:

<TextBlock x:Name="txtPlay" Width="72" Height="24" Canvas.Left="136" 
      Canvas.Top="336" Text="Play" TextWrapping="Wrap"  
      MouseLeftButtonDown="javascript:DoPlay"/>
  
<TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" 
      Canvas.Top="368" Text="Stop" TextWrapping="Wrap" 
      MouseLeftButtonDown="javascript:DoStop"/>

Wenn der Benutzer auf einen der Textblöcke klickt, wird ein Ereignis ausgelöst, das Sie von einer JavaScript-Funktion aus abfangen und verarbeiten können.

Verarbeiten der Ereignisse in JavaScript

Mithilfe der Vorlage wurde eine Scene.xaml.js erstellt, mit der Benutzerereignisse in JavaScript aufgezeichnet und verarbeitet werden können. Die Ereignishandler DoPlay und DoStop wurden innerhalb des XAML angegeben. Deshalb sollten Sie sie hier Ihren Funktionscode implementieren. Der erforderliche Code sieht folgendermaßen aus:

function DoPlay(sender, eventArgs)
{
   var theHost = document.getElementById("SilverlightControl");
   var theMedia = theHost.content.findName("Movie_wmv");
   theMedia.Play();
}
  
function DoStop(sender, eventArgs)
{
   var theHost = document.getElementById("SilverlightControl");
   var theMedia = theHost.content.findName("Movie_wmv");
   theMedia.Stop();
}

In diesem Fall trägt das Silverlight-Steuerelement den Namen „SilverlightControl“, und es wird mit der JavaScript-Variablen „theHost“ darauf verwiesen. Diese wird anschließend verwendet, um das Media-Element zu finden, das in diesem Fall den Namen „Movie_wmv“ trägt. Als Sie dem Projekt den Film hinzugefügt haben, wurde dieses Medienelement für Sie erstellt und der Name des Films als Grundlage für den Namen verwendet. Wenn Ihr Film den Namen „Movie.wmv“ hat, entsteht daraus der Name „Movie_wmv“. Wenn Sie einen anderen Film verwenden, ändert sich der Name des Steuerelements entsprechend.

Das Medienelement verfügt über Play- und Stop-Methoden, mit denen die Wiedergabe des Mediums gestartet oder beendet werden kann.

Da nun ein Verweis auf das Medienelement vorhanden ist, können Sie diese Methoden aufrufen, um den Film anzuhalten oder zu starten. Betrachten Sie hierzu Abbildung 4.

Abbildung 4: Ausführen der Anwendung
Abbildung 4: Ausführen der Anwendung

Sie haben jetzt Ihre erste Silverlight-Anwendung erstellt! Weitere Ressourcen zu Silverlight finden Sie im neuen Silverlight-Entwicklercenter und unter http://www.silverlight.net/.

Erläuterungen zum Silverlight-Aufruf

Die HTML-Seite ruft createSilverlight() auf. Dieses Element ist in der Codebehind-Seite Default.html.js enthalten.

Sys.Silverlight.createObjectEx({
      source: "Scene.xaml",
      parentElement: document.getElementById("SilverlightControlHost"),
      id: "SilverlightControl",
      properties: {
         width: "100%",
         height: "100%",
         version: "0.9"
      },
      events: {
         onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad)
      }
   });

Hierfür ist eine Reihe von Eigenschaften erforderlich, einschließlich der Eigenschaften, die zum Definieren des zu rendernden XAML und des Erscheinungsbilds des Silverlight-Steuerelements verwendet werden, sowie der onLoad- und onError-Ereignishandler.

Die Eigenschaft source: wird verwendet, um das XAML zu definieren, das das Silverlight-Steuerelement rendern soll. Dies kann eine externe Datei (wie in diesem Fall) oder ein benanntes <script>-Tag auf der Seite sein, das XAML enthält.

Wenn Sie ein Silverlight-Steuerelement auf einer Seite platzieren, sollte es innerhalb eines benannten <DIV>-Elements platziert werden. Die Eigenschaft parentElement: sollte mit dem Namen dieses <DIV>-Elements belegt werden.

Die ID des Steuerelements wird über die Eigenschaft id: angegeben.

Die physischen Attribute des Steuerelements, z. B. Höhe, Breite und Version, werden über ein Array festgelegt, das in die Eigenschaft properties: geladen wird. Den kompletten Eigenschaftensatz finden Sie in der Dokumentation zum Silverlight-SDK.

Schlussbemerkung / Download: Silverlight

In diesem Whitepaper wurde Ihnen ein Überblick über Silverlight geboten. Sie haben erfahren, wie Silverlight sich in die Entwicklung der nächsten Generation von Webanwendungen einfügt. Sie haben gesehen, wie XAML verwendet wird, um die Spezifikationen des Designers mit den Tools des Entwicklers und der Bereitstellung für den Benutzer zu verbinden. Sie haben Expression Blend kennengelernt und gesehen, wie es verwendet wird, um Benutzeroberflächen für Ihre Webseite zu definieren, und wie diese Benutzeroberflächen mit JavaScript programmiert werden können.

Wir haben in diesem Artikel nur die Oberfläche von dem gestreift, was mit Silverlight alles möglich ist. Diese Technologie bietet eine reichhaltige Funktionalität, mit der Sie die Webanwendungen von morgen bereits heute erstellen können. Viel Spaß!

Download Silverlight:

Auf der folgenden Seite haben Sie die Möglichkeit Silverlight kostenlos herunteruladen: http://www.silverlight.net/

Weiterführende Links, Tipps und Tricks