Big Screen Blog

Media Center, Windows Phone7 + Silverlight Goodness..

From 0 to Silverlight in 48 hrs (and then some) – the AllBlacks Sidebar Gadget

leave a comment »

This article could have also been called :

– "I accidentally wrote something for the Mac"

– "Goodbye WPF… Hello Silverlight"

– "Is Silverlight the next (and first) big thing for cross platform 10 foot?"

  So before I explain all that – I’m proud to report that the AllBlacks "Silverlight 1.0" Sidebar + Desktop Gadget – has just been launched and is now available from the AllBlacks website at :

http://www.allblacks.com/gadget/default.htm

As it’s made with Silverlight 1.0 – so that means it not just for Vista users – it will actually work on WinXP, Win2003, Mac’s and soon Linux and 2000…

<UPDATE>
 
There’s now a press release about this up on the Microsoft NZ site.  Note that my involvement was on a ‘need-to-know’ basis – and as such – I’ve embedded some javascript into this page that will (upon exiting) wipe any memories you have of this reading this article.
</UPDATE>

If you couldn’t be bothered trying it out (or don’t have a supported platform) – you can check out a video of it in action that Nigel Parker put together..

Otherwise here’s a couple of pics – pictured below is the Vista32 sidebar Gadget (in it’s undocked state) :

 

And tada –  below is it running on the Mac – playing back WMV video… (gotta admit the popup window border/title looks way sexier on Mac+Safari then what you get with browsers on Vista, XP – which show really ugly borders).

 

All Blacks Media-1

 

 

And now for the Technical Stuff…

So anyhow as per those pictures above – I’ve been fully immersed in Silverlight 1.0 for the second half of last week (inc a chunk of the weekend) – and this came about last Wednesday when I spotted the ‘Silverlight 1.0 SDK’ on MSDN Downloads at around 10am. (and gave a very clear indication that Silverlight 1.0 was about to be released within a few minutes/hours/days). Sure enough the announcements appeared a few hours later and the final release was launched.

Right at that very moment – I was battling with trying to optimize a WPF .exe/windows project (The AllBlacks desktop + sidebar gadget) that was due to be released this week. I was running out of ideas (had optimized everything as much as possible) – and two major showstoppers were looking to be unwinnable  – Excessive Memory/CPU consumption (WPF takes 60mb just to show a blank form with no code – and most transitions like fades use up lots of CPU) – and Video Playback/Graphics corruption on NVidia Cards (after waiting nearly 12 months – NVidia has still not fixed their drivers).

After looking a number of sample Silverlight apps that were around – it became very apparent that although Silverlight was essentially a subset (or cutdown version) of WPF – the core engine running it was an altogether different beast. The Silverlight implementation was lean, mean, and was able to do all the fancy shmancy animations without making much of a dent on the CPU at all (I don’t think I managed to push it past 5% utilization with lots of animations going at once).

So 48 hours later – I had managed to migrate the core functionality from a WPF.exe to a Silverlight 1.0 application – which basically involved the following :

  • creation of a ASP.NET (VB) website to serve up dynamic XAML content (processed from backend rss/etc feeds)
  • creation of Silverlight HTML/javascript Wrapper for hosting it in a browser and gadget.
  • migration of the underlying VB.NET code to javascript (for client) and VB.Net (for backend)
  • migration of ContentTemplates/ItemsControl WPF functionality to ASP.Net scripts.
  • Conversion of Full Blown WPF XAML to Silverlight 1.0 XAML (which supports a lot less tags/attributes)

At that point I had a Silverlight App that pretty much resembled the original WPF .exe – but performed/worked a whole lot better.

Having done a fair bit of WPF (and new XAML pretty well) – the learning curve for me was non existent for Silverlight – and really was just a matter of remember what elements/attributes/functionality wasn’t supported. (and learning the ways of the javascript plugin object).

The bit that I originally perceived to be the hardest/most tedious – conversion of WPF Xaml to Silverlight XAML (ie. WPF provides different layouts like Anchored, Flow, Stacked etc – Silverlight only has Canvas layouts with absolute positioning) – was actually made really really simple using Expression Blend.  The ‘Convert to‘ function was the real timesaver – and allowed me to quickly convert things like StackPanels (which had no Canvas.Top/Canvas.Left values) – into Canvases.  As I had severely stripped down the design+animations on the WPF .exe (in the quest to make it perform well) – there was also a lot less other conversion work (ie. <Labels> to <TextBlocks> etc etc)..

From then on in – I added a bunch of new animations/effects and layouts – as I was once again able to focus on the design/interaction (without being scared of creating a CPU + Memory hungry monster).

 

Silverlight – the great, the good and the bad (there’s no ugly)…

So after a few days with Silverlight – I’m really really impressed / blown away with it. I even didn’t mind having to use javascript instead of VB.Net (and Silverlight 1.1 will be a big bonus when we can use .NET).

Silverlight seems to be getting a lot of press as a ‘Video Playback’ technology (and the majority of samples are based around HD video on demand) – but it’s really a whole lot more than that.. (and it’s a lot more than a ‘flash killer’ as well)…

The number one thing I love about Silverlight is it’s great performance. It’s really right up there with MCPL (Media Center) and Flash (everything else).  In the past with WPF – I’d always spend the first 25% of my effort making a nice UI – and then the remaining 75% removing/enhancing bits of the UI to deal with performance issues. (a real waste of time). With Silverlight – that 75% was instead used to create new UI’s and new functionality (like the 3d team browser pictured above – which is actually 2d with smoke/mirrors – this was added for the Silverlight version – and  zero effort was spent on improving performance as it worked a treat from the get-go.). 

Silverlight is EVERYTHING WPF is Not…. In fact I’m now quite confused why WPF exists.. The official word is even to ‘not use it for business apps’, ‘not use it for gadgets’ – and I don’t think it was created to serve the needs of the coding4fun community. At least I have got some use out of it for Surface apps… (but have already worked out how to do all this with Silverlight – at much higher frame rate) and of course there’s of course still quite a few a lot of things you can’t do in Silverlight out of the box (like 3d etc…) – but in many of these cases there are other/better technologies (like DirectX/XNA etc).

So in a wrap on Silverlight 1.0 –


>> The Great

Awesome Performance, Low Memory Footprint

– Awesome Video Playback performance – no NVidia issues either. (even allows WMV on a Mac!)..

– Cross Platform… see picture above of it running on the Mac…need I say more…

– Good design tools available already (Blend 1+2)

– Full Integration with HTML scripting engine (so you can interact with the Silverlight addin and catch/create events).

– Full Screen Silverlight Mode also rocks (perfect for full screen apps – ie. I’m dying to use it for some Surface and UMPC apps).

– Excellent ability to reuse skills/assets/xaml and code from existing (legacy??) WPF projects. Make migration a lot less of a headache.


>> The Good

Works/Plays well with Vista Sidebar (32 Bit only)..

– Supports Javascript on client.

– Reduced set of tags means you spend less time going down the wrong path with layouts.

>> The Bad

1.0 doesn’t offer any DRM features for anything other than Video (and it’s easy to steal someone’s code, assets and XAML).

– Doesn’t work properly on Vista 64 bit (only via 32bit emulator). This means it will work in your browser – but won’t work inside a Sidebar Gadget. Unlike Flash, ActiveX etc – which can be ‘made to work’ on 64bit (by running the 32bit sidebar.exe) – Silverlight won’t work at all (which was a real pain in the butt for development).

– Reduced Tag Set means some common/well needed functionality is missing out of the box (and you instead need to custom create it from primatives). An example of this is support for Tooltips – which can be manually created by tracking MouseEnter/MouseLeave and adding a <Canvas> to handle your text display. Bits like this should have just been included in the core engine. (and as a result – you can’t actually use the ‘Tooltip’ attribute and have to find another technique to deliver the text to your client app).

– Another couple of major missing features (that could have very easily been added and not cost performance) – is scroller/flow support and alignment (ie. you can’t supply text alignment hints – you instead need calculate the rendered width and alter it’s left offset after its displayed).

– The Downloader object doesn’t support cross domain access. This is really quite a stupid/dumb decision – AFIK – the downloader is used to get Images, Fonts, XAML and other Media – not scripts (nothing that could be used for a malicious attack or not caught by the silverlight host). This means that you can’t effectively use this downloader object for mixed applications (ie. Sidebar – where assets/code is hosted locally and on a remote site).  Given that you can inject images, videos, sound etc into your XAML (with no cross domain security) – it really doesn’t make a lot of sense.

– No Keyboard support in Fullscreen Mode… WHY WHY WHY???? This really kills the ability to use fullscreen Silverlight for 10 foot /remote control applications (although you could just host a browser window in kiosk mode i guess). As with the downloader object – it was stated that it was for ‘security’ reasons… ??? (would have thought the existing Silverlight/Browser security model and features would have taken care of this)..

– Basic 3d support would be really nice.. even if it was just 3d rotation of 2d planes (ie. no mesh support but ability to rotate a 2d element in 3 axis – as is provided with MCPL).

– No standalone/browserless Windowed mode (this would have been really nice to have). It could have been implemented similar to fullscreen mode (where it positions/displays itself outside the browser host) – but not taking up the full screen.

 

Using SilverLight for "Hybrid" Apps (Sidebar or Browser)…

As mentioned above – this app came in two flavors – a Vista 32bit sidebar gadget – and a popup Browser version.

Although the majority of the codebase/assets etc were shared between the two – some different techniques needed to be used to get it working in Sidebar.

– The main issue was that the Sidebar version had "mixed" local and remote content (where a lot of images and base XAML was preloaded into the gadget for speed) – and hence I wasn’t able to use the Downloader object to download XAML/data on the fly from a remote site. 

Instead – the fix was to use the javascript XMLHttp object to do it’s downloading instead – which worked both in the Sidebar gadget (as XMLHttp is run in full trust and can do cross domain) – and on the Browser version (as in this case the XMLHttp class was already running in remote domain and was allowed to download content without issue).

– The Sidebar gadget was designed so that when it’s docked – you just get a HTML gadget with rotating dynamic images – and when it’s undocked – it turns into the Silverlight app. This allows it to perform a little better (when adding/removing from sidebar) as the Silverlight initialization is delayed. I also used the ‘undocked’ state for the Silverlight gadget instead of a flyout – as the flyouts close if focus is lost – and this would really screw up ability to watch video (if you checked your email etc the whole flyout what disappear).

– I also chose to get prerendered XAML from the backend server and then inject into into the existing XAML Content model – rather than getting raw XML and parsing it AJAX style (as javascript can be very slow on some platforms/browsers). Although this added a bit of overhead on the requests/downloads – the automatic GZIP compression etc on HTTP would mean it was only a negligible/unnoticable difference from raw XML.

– Another technique I used included creating XAML required for placeholders + status messages via javascript – so that users wouldn’t be shown blank white pages which content was loading.

– For performance (and faster less intrusive loading in sidebar) – the Silverlight container is actually a rectangular area in the middle with no transparency etc (the transparent bits on the edge etc are from a png background in HTML) – and the buttons/panel up the top is actually HTML only. (so the user wouldn’t have to wait for these to load).  This was done due to recommendations in the Silverlight SDK that "windowless" mode may affect performance.

 

 

Anyhow – I’m looking forward to seeing some more gadgets being made with Silverlight. I’m also really excited about the potential for cross platform 10 foot, UMPC and Surface applications (ie the same areas XBAP/WPF .exe’s could have been used but didn’t perform well enough or wasn’t cross platform).

Advertisements

Written by mobilewares

September 14, 2007 at 3:51 am

Posted in .NETv3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: