I've caught the WPF/E (Windows Presentation Foundation / Everywhere ) buzz and so I decided to start playing with it. As it happens I have all the right tools:
As I'm not a programmer day to day I don't have as much time as colleague John Rayner who is doing some serious WPF/E. However what's really impressive about WPF/E is that, from Microsoft we have a ground-up cross-platform initiative. WPF/E ties in extremely well with javascript. In fact, here's me debugging my 'hello world' WPF/E app below, in my preferred browser Firefox, using Firebug Javascript debugger. Don't get me wrong -- I'm not debugging WPF/E itself, just the javascript event handlers, which called from the client-side WPF/E runtime. Neat eh!
The 'Click Me' button is writtten in WPF/E -- I'm not sure at this stage whether there is a widget framework; I'll have to assume so. The button above was defined in XML like this:
<Canvas x:Name="button">
<Rectangle Stroke="#FF8E8E8E" StrokeThickness="2" RadiusX="2" RadiusY="2" Height="23" Width="75">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,2.109" EndPoint="0.5,-1.109" >
<GradientStop x:Name="gradientStop1" Color="#FFFF9E00" Offset="1"/>
<GradientStop x:Name="gradientStop2" Color="#FFEAEAEA" Offset="0.218"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Top="3" Canvas.Left="13" FontSize="12" Foreground="#FF5A5A5A" Text="Click Me" />
</Canvas>
As John pointed out, the VS 2005 plugin for WPF/E has intellisense for the bits above, so you get guidance as you type for the options. Very nice. But you can see at this stage it's pretty low level -- at this level WPF/E is competing against Flash, rather than Macromedia Flex, which adds all the widgety bits on top to make RIAs really simple.
Looking at the generated code
So how does it work? Well it's a bit tricky to see what it does in Explorer, but luckily Firefox's Web Designer plugin has this wizzy feature 'view generated source' which shows the code used to present the page at the current instant. And this is what it looks like:
<script type="text/javascript" src="js/aghost.js"></script>
<script type="text/javascript" src="js/eventhandlers.js"></script></head><body>
<form>
<div id="wpfeControl1Host">
<embed id="wpfeControl1"
pluginspage="http://go.microsoft.com/fwlink/?LinkID=77792&clcid=0x409"
source="plugin.xaml" maxframerate="30"
onerror="aghost_errorhandler" backgroundcolor="white"
windowlessmode="false" type="application/ag-plugin" height="400" width="400">
</div>
</form>
Well still not a whole lot there but it's a step in the right direction in understanding. The WPF/E SDK documentation is very helpful in describing the relationship between the declarative GUI description language (XAML) and the event handling bits (in good old javascript).
Next Steps
My motivation for hacking around with this is that I'm looking at a nice way to visualise some concepts -- my first goal is to do a demo in WPF/E for how to visualise the social computing network effect. I like it over Flash because Flash SWF files have to be compiled and require learning ActionScript and a slightly arcane GUI. WPF/E is more of a developer's tool from the ground up, and natively working with javascript is really attractive.
Stay tuned!