The 'E' Stands For 'Everywhere'

By Matt Duffin.

If you’re a regular reader of this newsletter and followed last issue’s article about creating Windows Vista^TM Sidebar Gadgets, then you probably unwittingly picked up a bit of JavaScript on the way. Well, this time I’m not going to disappoint those of you who are chomping at the bit to practise your new-found skills: this article is going to give you a brief introduction to WPF/E – Windows Presentation Foundation "Everywhere" – a slimmed-down version of the meatier WPF.

Well, what exactly is it? I’ve mentioned that it’s related to WPF. However, unlike WPF, it doesn’t require either Windows Vista or a hefty download for previous versions of Windows - WPF/E comes as a browser plug-in and is supported on Windows Vista, Windows XP and Apple Mac OS X, and is quite happy to sit inside Internet Explorer 6/7, Firefox and Safari. In fact, it’s only 1.1MiB (told you it was slimmed-down, didn’t I?).

WPF/E is a cross-browser, cross-platform technology that, using a subset of the XAML (eXtensible Application Markup Language) markup that you may have learnt while experimenting with WPF, and JavaScript, allows you to create and deliver really breathtaking interactive experiences that can include animation, graphics, audio and video.

So, cut through the marketing speak and you have a technology platform that lets you use the skills you’ve probably already learnt through playing around with WPF (and if not, there are plenty of resources out there to get you started) and your programming skills to create anything from user interfaces to animations to experimental pieces.

WPF/E doesn’t include all of the features of WPF: you won’t find 3D capability or databinding; responding to events and manipulating elements requires that you use JavaScript rather than .NET code, and some graphical features that give WPF its DPI and resolution independence – such as grids, flow-documents, etc. – are missing. However, you shouldn’t look at WPF/E as WPF’s poor cousin: WPF/E can still be used to create some great experiences, which is incredible given its size and reach.

Plus, keep it to yourself, but the next version of WPF/E is likely to include CLR and .NET code support, so if you’re already skilled-up with the technology and want to use those skills to create some great browser-based pieces, you’ll definitely want to get to grips with WPF/E.

Let’s get started! The first thing you’ll need to do if you want to experiment with this technology is download the plug-in itself; this will allow you to test out any content you create and sample content created by others.

Right now, WPF/E is in CTP (Community Technology Preview) stage, which means that it’s mature enough to be coded against, but isn’t yet ready for primetime. The latest CTP is the February 2007 edition; this will expire on 1st June 2007, at which time it will prompt users to install the latest version – a good reason for waiting to deploy it in a production environment.

On the WPF/E homepage, there are plenty of samples towards the bottom of the page that you can take a look at to get to grips with the technology – including a page turn demo reminiscent of the British Library’s Turning the Pages application, a simple video game and a playable piano. These will display in your browser using the plug-in you downloaded above.

If you want to check out the source code associated with the samples then you’ll need to download the sample pack; this includes everything you need to get the samples up and running on your own machine and to start creating your own variants.

As I mentioned before, WPF/E doesn’t include all of the capabilities of WPF, and at first it can be a bit confusing wondering why a certain snippet of XAML that works perfectly in WPF doesn’t work in WPF/E. Fortunately, the SDK for the February 2007 CTP is a great resource for learning about the capabilities of WPF/E and the differences between it and its bigger cousin.

Included in the SDK is a template for Visual Studio that makes creating WPF/E applications a snap.

Because WPF/E runs as an ActiveX control within Internet Explorer and as a plug-in in other browsers, detecting the browser, instantiating the correct object and handling any errors that may occur could be a daunting task. However, the SDK includes a helper file – aghost.js – which does all of the heavy lifting for you.

Creating a project using this template also creates an example HTML page that includes a reference to the aghost.js file as well as example content.
The template is compatible with the full version of Visual Studio (a free trial of Visual Studio 2005 is available at the Visual Studio 2005 Developer Center) as well as the Express Editions, which are free of charge.

Now that the SDK and the Visual Studio template are installed, let’s just take a quick poke inside the XAML file and the JavaScript file that handles events raised by the WPF/E engine.

As part of the initialization of the aghost object, the page passes a reference to ‘plugin.xaml’ as the XAML source file. This file is also included as part of the template. The file simply defines a Canvas containing a filled Rectangle with a TextBlock – a button. At the top of the page, the following code is found:

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

Of note is the Loaded=”...”, which causes a JavaScript function to be called when the page loads. This functionality is defined in ‘eventhandlers.js’ in the ‘js’ subfolder of the template. It simply ties further JavaScript events to the button defined in the XAML.

When these events occur, the corresponding JavaScript code simply manipulates the rectangle’s gradients to simulate the look and feel of a real button. To prove that any JavaScript code is valid, an alert is raised when the button is clicked.

This simple example isn’t groundbreaking. But take a look inside the samples and check out how you can achieve some really interesting user experiences using WPF/E.

I hope that this has given you a good introduction to WPF/E. Of course, you can take it much further than this! You may have noticed that, in the constructor of the aghost object, there is a reference to a SourceElement. Rather than specifying a file, you can specify a DOM element that contains the XAML you want to use.

This gives you a huge amount of flexibility: you can couple this with ASP.NET to dynamically generate WPF/E pages. Or, using ASP.NET AJAX, you can update WPF/E content on the fly!

This is a new technology, and there are already some great examples of what it’s capable of. As always, I encourage you to experiment with WPF/E, and if you create or come across any good examples of content implemented with WPF/E then please get in touch.

Best of luck!