Erste Schritte mit „WPF/E“

Veröffentlicht: 03. Jan 2007
Von Laurence Moroney

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

Auf dieser Seite

 Was ist „WPF/E“?
 Die Geschichte der Webentwicklung: Übergang zu Web.Next
 Erstellen einer einfachen „WPF/E“-Anwendung
 Vorbereiten einer Grafikdesigndatei für „WPF/E“
 Erstellen eines „WPF/E“-Projekts mit Visual Studio 2005
 Vorbereiten eines Visual Studio 2005-Projekts für „WPF/E“
 Bearbeiten Ihrer Webseite für das Rendern von „WPF/E“-Inhalt
 Erläuterung von Javascript
 Bearbeiten der XAML zum Hinzufügen von Text
 Bearbeiten der XAML für eine einfache Animation
 Bearbeiten der XAML für eine einfache Interaktion
 Hinzufügen von Medien
 Zusammenfassung
 Anhang I: Der Installationsablauf
 Anhang II: Konfigurieren von Server-MIME-Typen

Was ist „WPF/E“?

„WPF/E“ ist der Codename für 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 (der Windows-Programmierinfrastruktur), ist XAML (EXtensible Application Markup Language) die Grundlage der „WPF/E“-Präsentationsfunktionen.

Dieses Whitepaper wird Sie Schritt für Schritt in die Grundlagen von „WPF/E“ und die vielfältigen Microsoft-Tools zur Erstellung aufwändiger grafischer Websites einführen, einschließlich Microsoft Expression Graphic Designer, Microsoft Visual Studio 2005 und XAML. Zunächst ein kurzer Überblick über die Hintergründe der Entwicklung von „WPF/E“ und seine Einordnung in Bezug auf andere Entwicklungen.

Die Geschichte der Webentwicklung: Übergang zu Web.Next

Als das moderne Internet 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.

„WPF/E“ 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 direkt im Web 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 „WPF/E“-Modell können Designer die gewünschte Funktionalität für Benutzer erstellen und sie in XAML ausdrücken. Diese XAML kann dann durch einen Entwickler mithilfe der „WPF/E“-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 deshalb textbasiert. Sie ist eine firewallfreundliche und leicht zu prüfende Beschreibung von reichhaltigen Inhalten. Obgleich andere Technologien – wie z. B. Java Applets, ActiveX und Flash – benutzt werden können, um reichhaltigeren Inhalt als DHTML/CSS/JavaScript bereitzustellen, senden sie alle binären Inhalt zum Browser. Dies macht es aber 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 „WPF/E“ 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 diese XAML heruntergeladen, und die Funktionalität wurden ohne Neuinstallation aktualisiert.

Das Herzstück von „WPF/E“ ist das Browsererweiterungsmodul, das XAML rendert und die entstandene Grafik im Browser anzeigt. Dies ist ein kleiner Download (unter 2 MB), der installiert werden kann, wenn der Benutzer die Website aufruft, die „WPF/E“-Inhalt enthält. Dieses Modul macht das zugrunde liegende Framework der XAML für JavaScript-Entwickler verfügbar. Dadurch wird Interaktion mit dem Inhalt auf Seitenebene möglich, und 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 „WPF/E“-Projekt werfen.

Erstellen einer einfachen „WPF/E“-Anwendung

Zunächst einige Informationen zu Microsoft Expression Graphic Designer und zum Erstellen eine einfachen Grafik in XAML für „WPF/E“. Abbildung 1 zeigt das Produkt in Aktion.

Abbildung 1. Das Tool „Expression Graphic Designer“
Abbildung 1. Das Tool „Expression Graphic Designer“

Expression Graphic Designer ist ein neues Tool von Microsoft, das die Vorteile vektorbasierter und pixelbasierter grafischer Entwurfstools miteinander verbindet, damit Designer neue schöpferische Möglichkeiten ausprobieren können. Es ermöglicht Ihnen, Grafiken von anderen Anwendungen zu verwenden und Entwurfselemente in verschiedene Softwaretools zu exportieren, einschließlich XAML für WPF und „WPF/E“.

Vorbereiten einer Grafikdesigndatei für „WPF/E“

Öffnen Sie mit Expression Graphic Designer die Datei „Popcan.xpr“. Sie finden sie im Verzeichnis „Programme\Microsoft Expression\Design Beta 1\Samples“. Dies ist die grafische Datei, die in Abbildung 1 verwendet wird.

Wenn Sie die Datei geöffnet haben, sehen Sie, dass sie – in Pixel gemessen – ziemlich groß ist. Sie können die vertikalen und horizontalen Lineale benutzen, um zu erkennen, dass sie tatsächlich 1280 × 1024 Pixel groß ist. Abbildung 2 zeigt das horizontale Lineal, um die Breite des Bilds zu demonstrieren.

Abbildung 2. Horizontales Lineal in Expression Graphic Designer
Abbildung 2. Horizontales Lineal in Expression Graphic Designer

Sie können dies auch im Dialogfeld Dokumentgröße (Datei, Dokumentgröße) sehen (siehe Abbildung 3).

Abbildung 3. Dialogfeld „Dokumentgröße“
Abbildung 3. Dialogfeld „Dokumentgröße“

Benutzen Sie das Dialogfeld Dokumentgröße, um die Bildabmessungen in 300 Pixel mal 150 Pixel zu ändern. Sie erreichen dies, indem Sie 300 ins Textfeld Breite und 150 ins Textfeld Höhe im Dialogfeld Dokumentgröße eingeben (siehe Abbildung 4).

Abbildung 4. Einstellen der Abmessungen auf 300 mal 150 Pixel einstellen
Abbildung 4. Einstellen der Abmessungen auf 300 mal 150 Pixel einstellen

Wenn Sie in diesem Dialogfeld auf OK klicken, wird die Größe des Bilds geändert. Jetzt sieht das Bild verzerrt aus (siehe Abbildung 5).

Abbildung 5. Dokument mit den neuen Abmessungen 300 mal 150 Pixel
Abbildung 5. Dokument mit den neuen Abmessungen 300 mal 150 Pixel

Weil die Zeichnung eine vektorbasierte Zeichnung ist, können Sie die Größe ändern, ohne deren Genauigkeit zu verlieren. Wenn Sie in der Entwurfsoberfläche sind, drücken Sie STRG+A, um alle Elemente der Zeichnung zu auszuwählen. Eine grüne Gliederung mit den ausgewählten Elementen wird angezeigt (siehe Abbildung 6).

Abbildung 6. Alle Bildelemente wurden ausgewählt (Klicken Sie auf das Bild, um die Darstellung zu vergrößern.)
Abbildung 6. Alle Bildelemente wurden ausgewählt (Klicken Sie auf das Bild, um die Darstellung zu vergrößern.)

Sie können jetzt das Bild am Rahmen und an den Ecken ziehen, bis die Größe ein für Sie angenehmes Seitenverhältnis besitzt. Abbildung 7 zeigt, wie das Bild geändert wurde, um realistischer zu wirken, und in der oberen linken Ecke des Dokuments platziert wurde.

Abbildung 7. Größenänderung des Bilds für ein besseres Seitenverhältnis
Abbildung 7. Größenänderung des Bilds für ein besseres Seitenverhältnis

Sie können es nun als „WPF/E“-XAML-Bild exportieren.

Klicken Sie dazu auf Datei, Export, XAML, oder verwenden Sie STRG+ALT+X. Dadurch wird ein Dialogfeld zum Speichernaufrufen, in dem Sie angeben können, wo Sie die XAML-Datei erstellen möchten. Rufen Sie die Datei „Popcan.xaml“ auf, und wählen Sie Speichern aus. Das Dialogfeld XAML-Export wird angezeigt. Dieses Dialogfeld ermöglicht Ihnen, einige weitere Spezifikationen an der Exportdatei vorzunehmen, einschließlich der Angabe, dass Sie „WPF/E“-kompatible XAML exportieren wollen (siehe Abbildung 8).

Abbildung 8. Exportieren von „WPF/E“-XAML
Abbildung 8. Exportieren von „WPF/E“-XAML

Die rechte Seite des Bildschirms besitzt ein Vorschaufenster, in dem Sie Ihr Bild prüfen können, indem Sie Zoomen und Schwenken verwenden, um sicherzustellen, dass es gut aussieht, bevor Sie fortfahren. Auf der rechten Seite ermöglichen Ihnen die Registerkarten, zwischen der Bildansicht und dem XAML-Code, der das Bild repräsentiert, zu wechseln. Wenn XAML noch neu für Sie ist, sollten Sie sich den XAML-Codeauf der entsprechenden Registerkarte ansehen. Dadurch können Sie vergleichen, wie er sich auf das Bild auswirkt.

Die Dropdownoptionen zur Rechten ermöglichen Ihnen, Attribute für den Export anzugeben, einschließlich der Information, wie gerasterte Bilder behandelt werden sollen, ob sie vektorbasiert dargestellt oder nur in ein bestimmtes Verzeichnis ausgegeben werden sollen. Momentan können die Standardwerte beibehalten werden. Stellen Sie aber sicher, dass „WPF/E“ unter Dokumentformat ausgewählt ist (siehe Abbildung 8).

Wenn Sie bereit sind, klicken Sie auf die Schaltfläche Exportieren, und der „WPF/E“-XAML-Code wird auf dem Datenträger gespeichert. Sie werden ihn etwas später für Ihr Visual Studio 2005-Webprojekt benötigen. Im nächsten Schritt werden Sie sehen, wie ein Webprojekt eingerichtet und für XAML vorbereitet wird.

Erstellen eines „WPF/E“-Projekts mit Visual Studio 2005

Das „WPF/E“-SDK enthält eine Vorlage für Visual Studio 2005, die es Ihnen ermöglicht, „WPF/E“-Projekte zu erstellen. Um sie in Visual Studio 2005 verwenden zu können, müssen Sie zuerst die folgenden Add-Ons in die IDE herunterladen.

Als Erstes benötigen sie ein Update, um Webanwendungsprojekte unterstützen zu können, die von der Microsoft-Website heruntergeladen und installiert werden können.

Nachdem das Update erfolgreich installiert wurde, können Sie das Add-On „Visual Studio 2005 Web Applications Projects“ installieren. Klicken Sie auf den folgenden Link, um WebApplicationProjectSetup.msi herunterzuladen und zu installieren. Der Download für das „WPF/E“-SDK umfasst eine gezippte Datei mit dem Namen "WPF/E" JSApplication.zip. Erstellen Sie einen „WPF/E“-Ordner im Verzeichnis „Programme\Microsoft Visual Studio 8\Common7\IDE\ProjectTemplates\CSharp“, und kopieren Sie die gezippte Datei hinein. Stellen Sie dann sicher, dass Ihre Entwicklungsumgebung geschlossen wurde, und führen Sie an einer Eingabeaufforderung devenv.exe/setup aus.

Visual Studio ist jetzt bereit für das Erstellen von „WPF/E“-Projekten. Starten Sie dazu die Visual Studio-IDE, und klicken Sie auf Datei, Neues Projekt. Sie sehen „WPF/E“ unter den verfügbaren Projekttypen, sowie die „WPF/E“-JavaScript-Anwendungsvorlage, die verwendet wird, um eine neue „WPF/E“-Anwendung zu erstellen (siehe Abbildung 9).

Abbildung 9. Verwenden der Visual Studio-Vorlage
Abbildung 9. Verwenden der Visual Studio-Vorlage

Dadurch wird ein neues Projekt erstellt, das eine einzelne HTML-Seite und eine XAML-Datei enthält, die eine einfache Schaltfläche darstellt. Im HTML-Code können Sie sehen, wie JavaScript zur Einrichtung des „WPF/E“-Steuerelements verwendet wird (mehr dazu später) und wie XAML ein Ereignis verfügbar macht, das erfasst und in Javascript verarbeitet werden kann.

Vorbereiten eines Visual Studio 2005-Projekts für „WPF/E“

Da Sie nun eine Anwendung mithilfe der Vorlage aus dem letzten Abschnitt erstellen können, wäre es gut zu verstehen, wie „WPF/E“ arbeitet und bereitgestellt wird. Sie können so erkennen, wie einfach es ist, eine vorhandene Website zu konfigurieren, um das „WPF/E“-Modul für den Browser bereitzustellen. In diesem Abschnitt sehen Sie, wie Sie Ihre Website manuell konfigurieren können, damit sie zu einer „WPF/E“-Website wird.

Als ich dieses Whitepaper schrieb, habe ich Visual Studio 2005 und „Orcas“ CTP benutzt. Sie brauchen „Orcas“ nicht, aber wenn Sie es installiert haben, ist es etwas leichter, den XAML-Code einzugeben, bis Sie IntelliSense und eine Vorschau der fertigen XAML im „Cider“-XAML-Designer haben. Jedoch wurde Cider für WPF entworfen, nicht für „WPF/E“. Deshalb sollte es momentan nicht verwendet werden, um Ihren XAML-Code für „WPF/E“ zu entwickeln.

Um anzufangen, starten Sie Visual Studio 2005, und erstellen Sie eine neue Website mithilfe des Dialogfelds Neue Website unter Datei (siehe Abbildung 10).

Abbildung 10. Erstellen einer neuen Website in Visual Studio 2005
Abbildung 10. Erstellen einer neuen Website in Visual Studio 2005

Dadurch wird eine neue Lösung erstellt, die eine einfache Default.aspx ASP.NET-Seite erstellt, die bei ihrer Ausführung HTML generiert, die im Browser gerendert wird. Dies liefert die Grundlage für Ihre erste „WPF/E“-Seite.

Danach müssen Sie die Bereitstellungsdateien für das Plug-In importieren. Erstellen Sie dazu zuerst ein BIN-Verzeichnis auf Ihrer Website, indem Sie mit der rechten Maustaste auf das Projekt (http://localhost/MyFirstWPFE) im Projektmappen-Explorer klicken und Neuer Ordner auswählen. Benennen Sie den neuen Ordner in „Installieren“ um, und fügen Sie dann die folgenden Dateien aus dem „WPF/E“-Download diesem neuen Verzeichnis hinzu: install.msi, MozillaControl1712.exe, WPFE.dmg, xcpctrl.cab und xcpctrl.xpi. (Sie können sie vom Windows Explorer direkt in das BIN-Verzeichnis des Projektmappen-Explorer-Fensters in Visual Studio 2005 ziehen.) Sie können diese Dateien auch durch jedes Projekt erhalten, das Sie mithilfe der Visual Studio 2005-Vorlage entwickelt haben, etwa aus dem vorherigen Abschnitt.

Danach sollten Sie die Datei „aghost.js“ Ihrer Website hinzufügen. Ziehen Sie sie dazu wieder vom Windows Explorer in Ihre Lösung. Erstellen Sie zum Schluss einen zusätzlichen neuen Ordner in Ihrer Lösung mit dem Namen „XAML“, und kopieren Sie die Datei „Popcan.xaml“ hinein, die Sie zuvor erstellt haben.

Bearbeiten Ihrer Webseite für das Rendern von „WPF/E“-Inhalt

Nun wird Ihre Webseite so bearbeitet, dass sie eingebetteten „WPF/E“-Inhalt verarbeiten kann. Dies ist sehr einfach, da es nur erfordert, einen einzelnen JavaScript-Verweis und den Aufruf eines JavaScript-Objekts hinzuzufügen, der in aghost.js definiert wurde. Die JavaScript-Bibliotheken und die „WPF/E“-Installationsprogramme erledigen den Rest.

Bearbeiten Sie zuerst Ihre Seite, damit sie so wie in Codebeispiel 1 aussieht. Es wurde lediglich der Titel „Untitled Page“ geändert, aghost.js wurde eine JavaScript-Verknüpfung hinzugefügt, und ein neues Div, das den Aufruf zum agHost-Objekt enthält, wurde dem Seitentext hinzugefügt. Dies wurde in Codebeispiel 1 hervorgehoben.

Codebeispiel 1. Der default.aspx-HTML-Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html  >
<head id="Head1" runat="server">
    <title>My first "WPF/E" Page!</title>
   <script type="text/javascript" src="agHost.js "></script>
</head>
<body>
    <form id="form1" runat="server">
    
    <div id="AgControl1Host">
    <script type="text/javascript">
    new agHost("AgControl1Host", "AgControl1", "400",
                 "400", "#00000000", null, "xaml/Popcan.xaml",
                 "True", "30", null);
        </script>
    </div>
    </form>
</body>
</html>

Der JavaScript-Aufruf von „new AgHost“ mag etwas unverständlich aussehen, aber das ist kein Problem. Damit befassen wir uns später. In den nächsten Abschnitten beschäftigen wir uns zunächst mit dem Ablauf, wie diese Anwendung in Internet Explorer und Mozilla Firefox ausgeführt wird. Danach untersuchen wir das JavaScript-Objekt, das „WPF/E“ steuert, und fügen einige Animationen hinzu, die die Grafik etwas lebendiger erscheinen lassen. Ihre Anwendung kann jetzt ausgeführt werden. ASP.NET generiert dann eine Seite mit „WPF/E“-Inhalt. Drücken Sie F5 in Visual Studio 2005, um die Anwendung zu starten. Wenn Sie das erste Mal eine Anwendung ausführen, erkennt der Browser, ob „WPF/E“ installiert ist oder nicht. Wenn es nicht installiert ist, während Ihre Seite aufgerufen wird, werden Sie in einem Dialogfeld gefragt, ob Sie das „WPF/E“-Modul installieren möchten. Anhang I zeigt detailliert, wie die Installation für Internet Explorer und Mozilla Firefox unter Windows abläuft.

Erläuterung von Javascript

Es folgt der JavaScript-Code, der diese XAML mithilfe von „WPF/E“ in die Seite eingebettet hat.

new agHost("AgControl1Host", "AgControl1", "400", "400", "#00000000", 
null, "xaml/Popcan.xaml", 
            "True", "30", null);

Dadurch wird eine neue Instanz des „WPF/E“-Plug-In erstellt. Mithilfe einer Liste von Parametern kann die Erstellung gesteuert werden. Diese Parameter sind (geordnet):

hostElementID: Dies ist der Name des HTML-Elements, in dem das Plug-In-Steuerelement gehostet wird. Wenn Sie also ein <div> auf der Seite haben, das das Plug-In enthält, geben Sie dem <div> einen Namen, und benutzen Sie den Namen hier.

controlID: Dies ist die ID des Plug-In.

height: Dies ist die gewünschte Höhe des Steuerelements in Pixel.

width: Dies ist die gewünschte Breite des Steuerelements in Pixel.

backgroundColor: Dies ist die gewünschte Hintergrundfarbe für das Steuerelement.

sourceElement: Dies ist der Name des Seitenelements, das XAML für das Steuerelement enthält. Dies ist eine Möglichkeit, XAML für das Steuerelement zu konfigurieren – wo sich die XAML auf der Seite befindet – das in einem <script>-Element enthalten ist. Sollten Sie diesen Ansatz verwenden, verwenden Sie die ID des <script>-Elements in diesem Parameter, und das Steuerelement wird sie von dort abrufen.

sourceURL: Dies ist der Standort einer externen XAML-Datei.

isWindowless: Dies ist ein boolescher Wert. Setzen Sie ihn auf True, wenn Sie wollen, dass das „WPF/E“-Steuerelement fensterlos bleibt. Das bedeutet, dass in einer HTML-Seite das „WPF/E“-Steuerelement inline mit der HTML ist, und wenn Sie z. B. festlegen, dass es transparent sein soll, wird die HTML „dahinter“ angezeigt. Wenn es nicht fensterlos sein soll (wenn der Wert also auf False gesetzt wird), befindet sich der „WPF/E“-Inhalt in einem bestimmten Bereich der Seite, und HTML-Markup fließt um ihn herum.

maxFrameRate: Dies ist eine Zahl, die die maximale Framerate angibt, mit der „WPF/E“ animierten Inhalt rendert.

loadHandler: Dies ist der Name eines <script>-Elements auf der Seite, das gestartet wird, wenn das Steuerelement geladen wird

errorHandler: Dies ist der Name eines <script>-Elements auf der Seite, das gestartet wird, wenn ein Fehler beim Steuerelement auftritt.

Wenn Sie eine neue Instanz eines agHost-Steuerelements erstellen, das diese Parameter verwendet, wird agHost.js aufgerufen (deshalb werden Sie einen Skriptverweis zu dieser Datei in Ihrer HTML brauchen). agHost.js generiert das <object>-Tag, das das Steuerelement enthält. Deshalb wird im vorherigen Fall das folgende <object>-Tag generiert, wenn Sie Internet Explorer verwenden.

<object id="AgCotnrol1" height="400" width="400"
    Codebase="install/xcpctrl.cab"
    classid="CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA">
    <param name="Source" value="xaml/Popcan.xaml" />
    <param name="MaxFrameRate" value="30" />
    <param name="BackgroundColor" value="#00000000" />
    <param name="WindowlessMode" value="True" />
</object>

Wenn Sie es bevorzugen, können Sie diesen Code immer direkt auf Ihrer Seite verwenden, aber die Verwendung des JavaScript-Objekts ist viel ausführlicher, und dadurch können Sie sich nicht in den Implementierungsdetails der <object>-Tags Ihrer HTML-Seite verzetteln.

Bearbeiten der XAML zum Hinzufügen von Text

Sie können XAML direkt innerhalb von Visual Studio 2005 bearbeiten, um etwas hinzuzufügen. In diesem Beispiel fügen Sie der XAML ein TextBlock-Steuerelement hinzu, damit sie einfachen „Hallo, Welt“-Text enthält.

Öffnen Sie die XAML-Datei in Visual Studio 2005. Wenn Sie „Orcas“ CTP installiert haben, können Sie eine Vorschau der XAML im „Cider“-Editor sehen (siehe Abbildung 11). Beachten Sie, dass Sie nicht die Toolbox verwenden können, um „WPF/E“-XAML-Steuerelemente hinzuzufügen, da der „Cider“-Designer nur für WPF-Anwendungen geeignet ist. Andernfalls öffnen Sie lediglich den XML-Editor.

Abbildung 11. Verwenden von Visual Studio 2005 zum Bearbeiten der XAML (Klicken Sie auf das Bild, um die Darstellung zu vergrößern.)
Abbildung 11. Verwenden von Visual Studio 2005 zum Bearbeiten der XAML (Klicken Sie auf das Bild, um die Darstellung zu vergrößern.)

Um Ihrer XAML einen Textblock hinzuzufügen, scrollen Sie nach unten, und fügen Sie direkt vor dem abschließenden </Canvas>-Tag den folgenden Code ein.

<Canvas x:Name="Layer_3">
  <TextBlock x:Name="MyLink" Canvas.Left="150" Canvas.Top="0"
      FontFamily="Verdana" FontSize="18"
      Width="250" TextWrapping="Wrap">
          Drink some of this yummy WPFE soda!
          Much better than a Hello, World App, right?
   </TextBlock>
</Canvas>

Sie können seine Wirkung auf Ihre Webseite in Abbildung 12 sehen.

Abbildung 12. XAML mit Textblock
Abbildung 12. XAML mit Textblock

Bearbeiten der XAML für eine einfache Animation

XAML spezifiziert Storyboards für Animationen. In diesem Beispiel fügen Sie der „WPF/E“-Seite eine einfache Animation hinzu, die bewirkt, dass der Text von den oberen und unteren Rändern des Bildschirms abprallt. Fügen Sie dazu einen Ereignistrigger (EventTrigger) hinzu, der ausgelöst wird, wenn der Zeichnungsbereich (Canvas) geladen wird. Dieser Ereignistrigger kann eine Aktion enthalten. Die angegebene Aktion besteht darin, ein Storyboard zu starten, das eine „DoubleAnimation“ enthält. Diese Art von Animation wird verwendet, um eine Zahl einen Bereich durchlaufen zu lassen, der bei „From“ (Von) startet und bei „To“ (Bis) endet. Der Vorgang kann so eingestellt werden, dass der sich fortwährend wiederholt und rückwärts läuft. Folglich können Sie festlegen, dass der Text „springt“, indem Sie Top von 0 bis zu einem angegebenen Betrag animieren. Wenn dieser erreicht ist, läuft der Vorgang rückwärts ab, und all das wird endlos wiederholt. Das entsprechende Storyboard lautet wie folgt.

<Storyboard Storyboard.TargetName="MyLink"
            Storyboard.TargetProperty="(Canvas.Top)" >
  <DoubleAnimation AutoReverse="True" RepeatBehavior="Forever"
                   BeginTime="0" Duration="0:0:1"
                   From="0" To="90">
  </DoubleAnimation>
</Storyboard>

Die vollständige Zeichnungsbereichsspezifikation, die den Text und die Trigger zum Auslösen der Animation enthält, lautet wie folgt.

<Canvas x:Name="Layer_3">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard Storyboard.TargetName="MyLink"
                      Storyboard.TargetProperty="(Canvas.Top)" >
            <DoubleAnimation AutoReverse="True" RepeatBehavior="Forever"
                             BeginTime="0" Duration="0:0:1"
                             From="0" To="90">
            </DoubleAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <TextBlock x:Name="MyLink" Canvas.Left="150" Canvas.Top="0"
             FontFamily="Verdana" FontSize="18" Width="250"
             TextWrapping="Wrap">
               Drink some of this yummy "WPF/E" soda!
               Much better than a Hello, World App, right?
  </TextBlock>
</Canvas>

Wenn Sie nun Ihre Website in Aktion sehen, „springt“ der Text auf der rechten Seite auf und ab.

Bearbeiten der XAML für eine einfache Interaktion

„WPF/E“ ermöglicht Javascript-Programmierern, mit XAML zu interagieren. In diesem Beispiel sehen Sie, wie ein aufgetretenes Ereignis verarbeitet wird, wenn der Benutzer mit der XAML-Datei interagiert. Der „springende“ Text des letzten Beispiels wird zu einem Hyperlink, den Sie verwenden können, um auf eine andere Seite zu verweisen.

Spezifizieren Sie dazu den Ereignishandler in der TextBlock-Deklaration. Sie werden einen Mausklick aufzeichnen. Deshalb verwenden Sie den MouseLeftButtonDown-Ereignishandler, um die JavaScript-Funktion anzugeben, die den Klick behandeln wird. So sieht der Textblock mit einer Deklaration für einen Javascript-Handler mit dem Namen „hyperlink_MouseLeftButtonDown“ aus.

<TextBlock MouseLeftButtonDown="javascript:hyperlink_MouseLeftButtonDown"
    x:Name="MyLink" Canvas.Left="150" Canvas.Top="0"
    FontFamily="Verdana" FontSize="18"
    Width="250" TextWrapping="Wrap">Channel 9 is cool!</TextBlock>

Jetzt können Sie dieses Ereignis folgendermaßen behandeln, indem Sie JavaScript auf der Hostseite verwenden (oder in einer externen Bibliothek, auf die die Seite verweist).

<script language="javascript">
       function hyperlink_MouseLeftButtonDown(sender, args) {
            window.open("http://channel9.msdn.com");
        }
    </script>

Wenn Sie Ihre Seite ausführen, sehen Sie einen animierten Hyperlink, und wenn Sie auf ihn klicken, gelangen Sie zur MSDN-Channel 9-Website.

Hinzufügen von Medien

„WPF/E“ stellt Webentwicklern Best-of-Breed-Windows-Medien zur Verfügung. Sie können leicht „WPF/E“-Anwendungen Medieninhalte hinzufügen, indem Sie das <MediaElement>-Tag in XAML wie folgt verwenden.

<Canvas x:Name="Layer_4">
    <MediaElement x:Name="VideoLayer" Source="Butterfly.wmv"
                  Canvas.Top="0" Canvas.Left="130"
                  Height="200" Width="200">
    </MediaElement>
</Canvas>

Beachten Sie, dass sich die Datei „Butterfly.wmv“ im Stammverzeichnis Ihrer Website befinden muss, damit dies funktioniert. Diese WMV-Datei ist eines der Beispielvideos, die mit Windows Vista geliefert werden, und befindet sich im Ordner „Dokumente“. Wenn sie nicht verfügbar ist, ersetzen Sie sie durch eine beliebige WMV-Datei.

Das MediaElement stellt Methoden bereit, die verwendet werden können, um das Video wiederzugeben, zu stoppen, anzuhalten oder zu durchsuchen. Schauen Sie sich die „WPF/E“-Dokumentation und die Beispiele für weitere Informationen an.

Die „WPF/E“-Anwendung mit eingebettetem Video ist in Abbildung 13 dargestellt.

Abbildung 13. „WPF/E“ mit eingebettetem Video
Abbildung 13. „WPF/E“ mit eingebettetem Video

Zusammenfassung

In diesem Whitepaper wurde Ihnen ein Überblick über „WPF/E“ geboten, und darüber, wie es 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 Graphic Designer kennengelernt und gesehen, wie es verwendet wird, um Grafiken für Ihre Webseite zu definieren, und wie diese Grafiken in „WPF/E“-XAML exportiert werden. Sie haben diese XAML in ein Visual Studio 2005-Webprojekt importiert und gesehen, wie es konfiguriert wird, damit die XAML-Laufzeitumgebung für Internet Explorer und Firefox bereitgestellt werden kann, um die „WPF/E“-XAML des Designers zu rendern. Schließlich haben Sie erfahren, wie Sie die XAML bearbeiten können, um Animationen, Interaktionen und Medien hinzuzufügen.

Wir haben in diesem Artikel nur die Oberfläche von dem gestreift, was mit „WPF/E“ alles möglich ist. Diese Technologie bietet eine reichhaltige Funktionalität, mit der Sie die Webanwendungen von morgen bereits heute erstellen können.

Anhang I: Der Installationsablauf

Um Webseiten anzuzeigen, die „WPF/E“-Inhalt besitzen, müssen Sie den Browser mit „WPF/E“ erweitern. Dazu können Sie entweder eine Objekttagmethode verwenden, die den Benutzer zur Installation auffordert, oder Sie können herausfinden, ob der Browser mit „WPF/E“ erweitert wurde und den Benutzer zur passenden Downloadseite verweisen, um das Modul abzurufen:

In unserer Anwendung verwenden wir ein Objekttag, durch das der Benutzer auffordert wird, das passende „WPF/E“-Modul zu installieren, wenn nicht bereits geschehen. Wenn zum ersten Mal eine Anwendung ausgeführt wird, erkennt der Browser, ob „WPF/E“ installiert ist oder nicht. Wenn es noch nicht installiert ist und Ihre Seite startet, werden Sie in einem eingeblendeten Dialogfeld gefragt, ob Sie „WPF/E“ installieren möchten. Die folgenden Abschnitte schildern detailliert den Ablauf aus Sicht von Benutzern, die Microsoft Internet Explorer oder Mozilla Firefox verwenden.

Ausführen der Seite in Internet Explorer

Das Dialogfeld Internet Explorer - Sicherheitswarnung wird angezeigt (siehe Abbildung 14). Wenn Sie Installieren auswählen, wird das Plug-In herunterladen und wie in den folgenden Abschnitten beschrieben installiert.

Abbildung 14. Browsersicherheitswarnung für die „WPF/E“-Installation.
Abbildung 14. Browsersicherheitswarnung für die „WPF/E“-Installation.

Wählen Sie Installieren aus, und der Installationsassistent wird gestartet (siehe Abbildung 15).

Abbildung 15. Starten des „WPF/E“-Setup
Abbildung 15. Starten des „WPF/E“-Setup

Lesen Sie den Endbenutzer-Lizenzvertrag sorgfältig durch, und wenn Sie bereit sind fortzufahren, wählen Sie Ich stimme zu. Die WPFE-Installation beginnt dann wie in Abbildung 16 dargestellt.

Abbildung 16. Installation von „WPF/E“
Abbildung 16. Installation von „WPF/E“

Wenn die Installation erfolgreich abgeschlossen ist, werden Sie in einem Dialogfelddarüber informiert (siehe Abbildung 17).

Abbildung 17. Installation von WPF/E
Abbildung 17. Installation von WPF/E

Klicken Sie zum Abschluss auf Fertig stellen. Tatsächlich wird Ihre XAML sofort gerendert (siehe Abbildung 18).

Abbildung 18. Ihre im Browser gerenderte XAML
Abbildung 18. Ihre im Browser gerenderte XAML

Im nächsten Abschnitt wird der Ablauf der Installation des Plug-In in Mozilla Firefox Browser beschrieben.

Ausführen der Seite in Mozilla Firefox

Im letzten Abschnitt haben Sie gesehen, wie Internet Explorer durch „WPF/E“ erweitert wird. Aber „WPF/E“ ist eine Multibrowser- und Multiplattformtechnologie. In diesem Abschnitt sehen Sie, wie es innerhalb von Mozilla Firefox funktioniert, das unter Microsoft Windows Vista ausgeführt wird.

Wenn „WPF/E“ nicht installiert ist, sehen Sie etwas Ähnliches wie in Abbildung 19, wenn Firefox ausgeführt wird.

Abbildung 19. Ausführen von „WPF/E“ in Firefox
Abbildung 19. Ausführen von „WPF/E“ in Firefox

Klicken Sie auf die Optionzum Installieren fehlender Plug-Ins oben rechts auf dem Bildschirm. Firefox sucht bekannte Plug-Ins, die dem „WPF/E“-Typ entsprechen (application/xcp-plugin), wird aber keine finden. Dies ist so, weil „WPF/E“ noch kein veröffentlichtes Produkt ist und das Plug-In noch nicht für Firefox Plugin Finder Service Directory veröffentlicht wurde. (Dies geschieht nach der Veröffentlichung des Produkts.) Siehe Abbildung 20.

Abbildung 20. Firefox Plugin Finder Service
Abbildung 20. Firefox Plugin Finder Service

Sie können auch eine manuelle Installation über das Dialogfeld Plugin Finder Service durchführen. Sie gelangen zu einer Website, die die MSI-Datei enthält, die gestartet werden kann, um die „WPF/E“-Laufzeitumgebung zu installieren. Der Installationsablauf von diesem Punkt an ist identisch mit dem für Internet Explorer (siehe vorheriger Abschnitt).

Wenn Sie fertig sind, führen Sie Ihre Seite aus, und die XAML wird von „WPF/E“ innerhalb vom Mozilla Firefox gerendert (siehe Abbildung 21).

Abbildung 21. Rendern der XAML in Mozilla Firefox
Abbildung 21. Rendern der XAML in Mozilla Firefox

Anhang II: Konfigurieren von Server-MIME-Typen

Konfigurieren von IIS 6.x

Es ist sehr einfach, IIS für die MIME-Typen zu konfigurieren, die notwendig sind, um „WPF/E“-Anwendungen bereitzustellen. Wenn Sie eine leere Seite statt der gerenderten XAML erhalten, könnte es sein, dass Sie die XAML nicht konfiguriert haben, damit sie ein erkennbarer XML-Typ in IIS ist. Rufen Sie dazu das Dialogfeld Eigenschaften Ihrer Website auf, und wählen die Registerkarte HTTP-Header aus (siehe Abbildung 22).

Abbildung 22. IIS 6.x-Konfiguration
Abbildung 22. IIS 6.x-Konfiguration

Im unteren Bereich dieses Dialogfelds befindet sich eine Schaltfläche, die es Ihnen ermöglicht, diese Typen festzulegen. Beachten Sie, dass nur IIS-eigene Serverdateien mit Erweiterungen in dieser Liste registriert sind. Falls also .xaml nicht registriert ist, können Sie diese Dateien nicht bereitstellen und die XAML nicht in Ihr „WPF/E“-Steuerelement aufnehmen. Abbildung 23 zeigt, wie die Konfiguration vorgenommen werden sollte. Verwenden Sie die Schaltfläche Neu in diesem Dialogfeld, um es wenn nötig hinzuzufügen.

Abbildung 23. Konfigurieren des MIME-Typs in IIS
Abbildung 23. Konfigurieren des MIME-Typs in IIS

Beachten Sie, dass Sie den MIME-Typ „application/octet-stream“ für die .DMG-Dateierweiterung verwenden sollten, wenn Ihre Anwendung auf einem Macintosh installierbar sein soll, auch wenn dies in Abbildung 23 nicht dargestellt ist.

Konfigurieren von IIS 7.x

Um IIS 7.x in Windows Vista zu konfigurieren, sollten Sie zuerst mit der rechten Maustaste auf Computer im Menü „Start“ klicken und dann Verwalten auswählen. Dadurch wird die Computerverwaltung gestartet, in der Sie IIS auswählen können (siehe Abbildung 24).

Abbildung 24. Computerverwaltung in Windows Vista (Klicken Sie auf das Bild, um die Darstellung zu vergrößern.)
Abbildung 24. Computerverwaltung in Windows Vista (Klicken Sie auf das Bild, um die Darstellung zu vergrößern.)

Scrollen Sie durch die Liste der Einträge, bis Sie das Applet „MIME-Typen“ sehen. Starten Sie es, um MIME-Typen zu konfigurieren (siehe Abbildung 25).

Abbildung 25. Konfiguration von IIS 7-MIME-Typen (Klicken Sie auf das Bild, um die Darstellung zu vergrößern.)
Abbildung 25. Konfiguration von IIS 7-MIME-Typen (Klicken Sie auf das Bild, um die Darstellung zu vergrößern.)

Sie können den Fensterbereich Aktion verwenden, um die nötigen MIME-Typen hinzuzufügen.

.XAML : text/xml
.DMG: application/octet-stream

Anzeigen: