deedee.brainstream.net - WPF/E HelloWorld

xs.Serialize(brainstream,deedee)

Wednesday, December 13, 2006

« Windows und MacOSX Anwendungen... | Home | WPF/E der Flashkiller? »

WPF/E HelloWorld

WPF/E ist ein Control das per Object/Embed ähnlich dem Flashplugin in HTML-Seiten eingebunden werden kann um WPF Inhalte im Browser darzustellen. WPF/E basiert auf der neuen Windows Presentation Foundation Technologie von Microsoft.NET 3.0 und XAML (eXtensible Application Markup Language).
Derzeit ist das Plugin für Windows und MacOSX als CTP verfügbar [1] [2] und läuft unter Internet Explorer 6.0/7.0 und Mozilla Firefox 1.5.0.8/2.0 unter Windows sowie Safari und Firefox 1.5.0.8 unter MacOSX 10.4.8.

Zum Erstellen von WPF/E Projekten gibt es ein Template für Visual Studio, das allerdings mehr verwirrt als Erleichterung zu bringen. Deshalb hier zur Einführung in die grundlegende Erstellung eines WPF/Projekts anhand des obligatorischen Hello World Beispiels.

HelloWorld.xaml
Der Inhalt der XAML-Datei ist die Basis der WPF/E Anwendung. Hier werden das grundlegende Interface sowie Animationen definiert. Zur Erstellung kann man Expression Blend, Expression Designer, Visual Studio oder ganz simpel Notepad verwenden. Mit Visual Studio hat man Intellisense was durch Code Vervollständigung die Sache erleichtert, da XAML aber XML basiert ist kann man auch jeden beliebigen XML-Editor verwenden.
Unser HelloWorld Beipiel benötigt ein sogenanntes Canvas als Root-Element mit zwei Namespace Definitionen und enthält einen simples TextBlock Element:

   1:  <Canvas xmlns="http://schemas.microsoft.com/client/2007"

   2:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

   3:    <TextBlock> Hello world! (WPF/E)</TextBlock>

   4:  </Canvas>

HelloWorld.html
Genau wie bei Flash wird eine WPF/E Applikation per OBJECT/EMBED tag in die HTML-Seite eingebunden. Um die Sache zu erleichtern stellt Microsoft ein Javascript Names aghost.js zur Verfügung das den korrekten Code erstellt. (Download aghost.js). Hier die HTML-Seite um unsere HelloWorld Anwendung einzubinden:

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   2:  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   3:  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

4:

   5:  <head>

   6:      <title>Hello World</title>

7:

   8:     <!--  Import the ObjectEmbed JavaScript file -->

   9:    <script type="text/javascript" src="aghost.js"></script>

  10:  </head>

  11:  <body>

12:

  13:   <!-- Where the WPF/E ActiveX control will go -->

  14:  <div id="agControl1Host">

  15:  </div>

16:

17:

  18:      <script type="text/javascript">

  19:      // Create the WPF/E ActiveX control.

  20:          // Doing it this way avoids the user having to click on the

  21:          // ActiveX control before WPF/E will receive input.

  22:         new agHost("agControl1Host",

  23:                                   // hostElementID (HTML element to put WPF/E

  24:                     // ActiveX control inside of -- usually a <div>)

  25:                         "agControl1",

  26:                                  // ID of the WPF/E ActiveX control we create

  27:                         "420px",

  28:                                // Width

  29:                         "20px",

  30:                               // Height

  31:                         "#CCCCCC",

  32:                              // Background color

  33:                         null,

  34:                           // SourceElement (name of script tag containing xaml)

  35:                         "HelloWorld.xaml",

  36:                           // Source file

  37:                         "false",

  38:                           // IsWindowless

  39:                         "24",

  40:                             // MaxFrameRate

  41:                         null);

  42:                           // OnError handler (method name -- no quotes)

43:

  44:  // for convenience, create a global variable for the WPF/E ActiveX control,

  45:  // which we can use to find Name'd xaml elements

  46:          var agControl = document.getElementById("agControl1");

  47:      </script>

48:

  49:  </body>

  50:  </html>

Das ist im Prinzip alles was benötigt wird. Um weitere Funktionalität hinzuzufügen können natürlich Javscript-Funktionen eingebunden werden um mit den Elementen in der XAML-Datei zu kommunizieren. Für grundlegene Tests mit WPF/E reicht aber im Prinzip das installierte Plugin sowie Notepad und ein Browser. Das Ergbnis kann man hier sehen (falls das Plugin installiert ist.):

[1] WPF/E Plugin Windows
[2] WPF/E Plugin MacOSX
Geschrieben am , Comments [0]

Categories: .net 3.0 | WPF/E