WPF/E: A New Paradigm to Web Apps

Windows Vista is not just a new operating system from Microsoft. Yes, it has

a ton of features that you can either love or hate if you're a user. However,

if you're a developer, there are so many new platforms and technologies built

into Vista that you can have a field day learning and using them all. One of the

biggest new features of Vista in the development space is the Windows

Presentation Foundation (WPF)-a part of the new .NET 3.0 stack.

WPF allows developers to create extremely powerful and rich user interfaces-including

standard controls, 2D, 3D, animation and more. WPF uses a new XML-based

programming model, named XML Application Markup Language (XAML) that allows you

to create these extremely rich applications using not the standard VB/C# code

but rather XML “pages” that contain most of the code that you want. Yes, you

can still continue to use VB/C# to these XAML applications as well to get even

more functionality. All this leads to great developer productivity as well as a

rich end-user experience with the application. A prime example is new Yahoo!

Messenger being released for Windows Vista that's been built from ground up on

WPF.

However, till now WPF has been available only on Windows Vista (and to some

extent Windows XP/2003 with .NET 3.0 installed). But WPF/E (The “E” standing

for “Everywhere”) lets you embed WPF “applets” into a Web page that can

then be viewed by different browsers. Currently in a CTP stage, the WPF/E

runtime is available for Windows as well as for the Mac. In fact, WPF/E

applications run very well on a Mac as well.

How it works



WPF/E is given out as a cross platform runtime (for end-users) and as an SDK
(for developers). The runtime currently runs on Windows XP SP2 or above and

MacOS 10 or above. Cross platform also supports browsers like IE6/7, Firefox

1.5/2.0 and Safari. The runtime itself is tiny in size: the current build is

only 1.1 MB to install. Once installed, the supported browsers become WPF/E

aware on these platforms. The runtime itself contains a super-subset of the

entire WPF development stack. This stack is attached as a browser plug-in that

in turn talks directly to the specific platforms' (OS and browser) JavaScript,

AJAX, DOM and multimedia APIs. For instance, when running in Safari under MacOS,

the runtime specifically targets the Safari DOM and the MacOS multimedia APIs.

This framework also contains the XAML runtime that translates the generic XAML

code written to run within the browser.

Running the Page Turn SDK Sample of WPF/E in Safari on MacOS. This sample shows how images can be manipulated in a rich GUI on a page

Create a WPF/E Web page



There are many ways of doing this currently. The Microsoft Expression Design
Suite contains extremely powerful tools to create very rich WPF applications

that can then be hosted within a Web browser. You can also use the “Orcas”

extensions for Visual Studio 2005 that adds the ability to create WPF

applications within it. Or the option that we use here for demonstration WPF—

good old Notepad! We are going to create a couple of things first. When you

install the WPF runtime, a file named as agHost.js is installed into your system

(or can be downloaded from the MSDN WPF/E page). This JavaScript file enables

the hosting of WPF/E applications in different browsers and on different

platforms. Which means that your page needs a reference to this file. Our

skeleton HTML file will look like this:

A set of 3 samples in the article that shows different things you can do with WPF/E on a Web page-static vector image, rich text rendering and animation. These are of course simple samples. Take a look at the SDK for more richer ones

Some WPF/E content to come



below:

The empty DIV is the location at which the WPF/E application will actually

appear. The script below it is what initializes the application and displays it

in the DIV tag. The parameters for the function are as follows:


1. The HTML element ID that will contain the WPF/E application. In our case, the

id of the DIV tags.


2. The name by which the application can be accessed in the DOM (using
JavaScript).


3. Width of the application.


4. Height of the application.


5. Background color of the application.


6. ID of any script tag containing XAML (null in this case).


7. The name of the XAML file (can be a relative/absolute URL).


8. Whether to show a window or not (windowless in our case).


9. Maximum Framerate in frames per second.


10. Name of an error handler Javascript function for callback (null in this
case).

Page Turn Sample running in full glory on IE7 on Vista. This allows richer apps than even AJAX ones

Now let us also create the XAML file which is referenced above. For our first

case, let's just make a simple XAML file as follows:

Height="300" xmlns="http://schemas.microsoft.com/client/2007"

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



Stroke="Black" StrokeThickness="10" Fill="LightBlue"
/>



Canvas.Left="75" Canvas.Top="100" />


Canvas.Left="200" Canvas.Top="100" />


Canvas.Left="50" Canvas.Top="200" />

When you open the HTML created above, the XAML renders a small “face” on

the screen using the simple XML syntax you see. Here are a couple of samples

more:

Height="300" xmlns="http://schemas.microsoft.com/client/2007"

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






FontFamily="Arial Black">














WPF/E













Width="300" FontSize="64" FontFamily="Arial
Black">















is really















FontFamily="Arial Black">














cool!

This displays the text “WPF/E is really cool” with the different image

patterns rendered in it.

Height="300" xmlns="http://schemas.microsoft.com/client/2007"

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









Storyboard.TargetProperty="(Canvas.Left)" To="300"
Duration="0:0:10" />



To="80" Duration="0:0:10" />






Canvas.Left="0" Canvas.Top="30" Fill="Blue"/>

This code displays a simple animation that animates a small ball moving from

left to right as well as increasing its width over a period of 10 seconds. All

of these work flawlessly within the WPF/E framework in a Web page. Although the

examples are simple, as you can see, the WPF/E technology allows you to create

extremely rich Web applications that can give a rich presentation UI on multiple

platforms as well as use the power of .NET 3.0 to perform various other tasks.

This will be a technology worth watching till it is



finally released.