Model-View-ViewModel in Silverlight and Flex
Last year I have been working a lot on Flex applications, and because of this I usually take my experience from Flex development and apply it to Silverlight. One example is the PureMVC framework that we use at Nascom for most RIA applications we build. The framework also has ports towards other technologies and one of these is the C# Silverlight port. I recently checked it out but they seem to have trouble keeping up with the speed of Microsoft's Silverlight releases.
So let's see if I can bring some of the patterns I learned while developing Silverlight into the world of Flex. One specific pattern that I want to talk about is the Model-View-ViewModel pattern. It's a specialization of the PresentationModel design pattern introduced by Martin Fowler specific for the Windows Presentation Foundation (WPF). Yeah, but what about the MVC pattern? Doesn't that already cover all our problems? In the MVC pattern, the model is the data, the view is the user interface, and the controller is the programmatic interface between the view, the model, and the user input. This pattern, however, does not seem to work well in declarative user interfaces like Windows Presentation Foundation (WPF) or Silverlight because the XAML that these technologies use can define some of the interface between the input and the view (because data binding, triggers, and states can be declared in XAML). And for the same reason it also applies to Flex, and even more to Flex4 because MXML will become more declarative in the future.
So what is the Model-View-ViewModel? The pattern is an adaptation of the MVC pattern in which the view model provides a data model and behavior to the view but allows the view to declaratively bind to the view model. The view becomes a mix of XAML and C#, the model represents the data available to the application, and the view model prepares the model in order to bind it to the view.
Probably most Silverlight developers out there are already familiar with this pattern, but I created two small sample applications (one in Silverlight 3 and one in Flex4 beta 2) to compare both technologies and give you an idea how it works. Both applications do exactly the same thing. They load an XML file with data (Phones) and display this data using data binding. You can change the amount so that you can see the total price changing. Yeah, this is definitely no rocket-science (doh, should have used rockets!) , but it works. The Silverlight client loads the XML file using LINQ. LINQ is pretty cool and powerful, but it still takes more code to parse an XML file in Silverlight than it does in Flex using e4x.
You can download the source files for the Silverlight 3 and Flex4 demos here.
Model-View-ViewModel in Silverlight 3
Model-View-ViewModel in Flex 4 (right click to view source)
What do you think? I find this pattern easy to use in applications that depend heavily on data binding like Silverlight and maybe also Flex. But I think I will still be using PureMVC for my next big Flex Project.
Silverlight 4 beta announced
Today at the Microsoft Professional Developer conference, Scott Guthrie announced the availability of Silverlight 4 Beta. Yes it's still a beta but the feature list is quite impressive:
- Webcam and Microphone access.
- Mousewheel and Right-click support.
- HTML Hosting in WebBrowser (not really sure if this is good or bad, cause it brings an embedded IE into every browser)
- Elevated thrust, Local File access, COM interoperability, Notifications "Toast" API.
- Network authentication, basically support for basic authentication, ...
- Right-to-left and bi-directional text
- Enhanced data-binding features.
- Official Google Chrome support.
- For more details and an extensive list of the new features check Tim Heuer's blog or the Silverlight.net site.
Some of the features were just missing and have been available in the Flash platform for a long time, but I am impressed by the speed that those features get implemented by the Silverlight development team. They have also added a lot of offline features that moves Silverlight even more towards Adobe AIR. One advantage I see here is that, once a user has installed the Silverlight plug-in he/she doesn't need an extra installation for running offline applications with access to the file system and elevated access.
I haven't seen the file size of the Silverlight 4 beta plug-in, but I am definitely curious to see how they can squeeze in all those features and still keep the download small enough.
If you want to try this out you will need at least the following tools:
Silverlight and Basic Authentication
After installing Visual Studio 2010 beta 1 I decided to play around with Silverlight 3 and the new IDE. What better example to try out than connecting a Silverlight client to the Basecamp REST API. But again like the Twitter API, the Basecamp API uses Basic Authentication (see my previous post: Flex HTTPService and Basic Authentication) and also in the case of Silverlight, it appeared to be a problem.
The first thing I tried was adding the Authorization header to the Webclient, like you can do in Actionscript.
String.Format("https://{0}/{1}", basecampUrl, "projects.xml");
var webclient= new WebClient();
Byte[] authbytes =
System.Text.UTF8Encoding.UTF8.GetBytes("username:password");
webclient.Headers["Authorization"] =
"Basic " + Convert.ToBase64String(authbytes);
webclient.DownloadStringCompleted += downloadStringCompleted;
webclient.DownloadStringAsync(new Uri(url));
This didn't work because the Authorization header can't be set through code because it is restricted. Check this page for the list of restricted headers. Some can be set through a specific property, but not the Authorisation header. The error message I got was this:
The 'Authorization' header cannot be modified directly
Then I checked out Silverlight 3 and discovered the Credential property. You can set the Credential property to an instance of a NetworkCredential object.
But too bad, the exception I got this time was even more strange:
Seems like there is still something missing in the beta 1 version of Silverlight 3, so please Microsoft fix this or just remove the property if it's not implemented.
So this means that the only way to get the Basic Authentication working from Silverlight at the moment is writing an extra server-side proxy class that delegates the calls and does the authentication. Or maybe there is another trick in the Silverlight Webclient class.
Visual Studio 2010 Beta 1 on Windows 7 RC
And now for something completely different!
After installing Microsoft Windows 7 RC on my Macbook in Boot Camp I decided to give the new Visual Studio 2010 beta 1 a try. If you want to try it out yourself checkout this blog post with various links to download pages. The installation of Windows 7 and Visual Studio both went pretty smooth. I already installed Windows 7 RC in VMware, but that was too slow for doing some actual development. So I decided to try out Boot Camp for the first time and install Windows 7 in all it’s glory and all.
However there were some issues:
- My sound didn't work. But this can be easily fixed. Go to the Realtek downloads page and click the “High Definition Audio Codecs (Software)” link and click Accept on the next screen. I downloaded the executable and after rebooting I got my sound back.
- The webcam is not supported. Actually that’s not that big of a deal, because my main OS is still OSX, and here I don’t really use it. But it would be nice if that was possible in the RTM version of Windows 7.
- And last but not least. Because it is a Macbook I don’t have a right click button. I’m still looking for a solution but working in Visual Studio without your trusty context menu is not that easy. I suppose connecting an extenal mouse will work, but I haven't tried it yet.
UPDATE: I found a small application that enables the right click if you hold the ctrl button while clicking. You can download the Apple Mouse Utility here.
If you want to install Visual Studio 2010 beta 1, you can download the ISO file or use the Web Installer. The advantage of the Web Installer is that the inital download is only 5 MB and it only downloads what you need. If you want to create a Silverlight 3 (or 2) project you will need to install the extra Silverlight Developer Runtimes
.
Here are my first impressions of the new Visual Studio 2010 beta 1:
- Nice fresh look and feel. It's not the Expression Blend design (luckily) because in the end it is still a tool for developers, so functionality is more important.
- It has support for .NET 2.0 up to the latest 4.0 beta. I know VS has already had backwards compatibility since 2008, but it's still a necessary feature.
- Startup time is pretty fast. Listen up you Eclipse/Flex Builder/Flash Builder!
- Support for Silverlight out of the box. You need to install the developer runtimes, but the tools are already in the IDE. Also some drag and drop design capabilities are available for basic UI design.
- You can start experimenting with Silverlight 3 beta 1, which is cool.
Well that wraps up my experiences with Windows 7 and Visual Studio 2010 for now. I am really looking forward for the RTM version of Windows 7 so I can upgrade the laptop I work on. I have been working with Vista for the last 2 years and if I could use the 64bit version I can finally use the full potantial of my 4GB RAM.
Now back to enjoying the good weather
What’s new in Silverlight 3
Today was the day of the MIX conference by Microsoft in Las Vegas. After the Techdays last week I was a bit disappointed in the Silverlight presentations. But on MIX they announced a lot of new features that will end up in the next version of Silverlight. I have found this list on a couple of blogs from Microsoft employees. Some of the stuff we can already do in Flash but other features might become interesting in the future.
- Video/Audio. Silverlight 3 now also supports the H.264 video format in addition to VC-1. It also supports the AAC audio format; both this and H.264 are implemented within the MP4 container format (i.e. .MP4 and .M4A files).
- GPU Acceleration. This is an opt-in feature that is available within the Silverlight 3 runtime, both in-browser and out-of-browser.You can add a parameter EnableGPUAcceleration, and set it to true, to enable final surface draw GPU acceleration. This could be something that can out performe the Flash player.
- 3D Support. Silverlight 3 includes perspective 3D, which gives you much of the benefit of 3D without the “productivity penalty” of having to write it from scratch.
- Animation Easing. There’s now a series of easing functions.
- Custom Dialogs. We now have SaveFileDialog support in Silverlight 3. For security reasons (because Silverlight runs in the sandbox), we don’t return a path to the developer.
- Effects. Effects (introduced in Silverlight 3) provide a low-level way to impact visual behavior (rather than functional behavior). We provide drop shadow and blur effects out of the box, but you can also create your own.Custom effects are implemented as HLSL shaders – these can be compiled into byte code using a DirectX SDK utility, which Silverlight 3 then consumes. Something similar to Pixelbender?
- Pixel and Media APIs. You can now read/write pixels from a bitmap. There are two ways this functionality is exposed: either as an in-memory bitmap or by saving a visual to a bitmap. Also supported are raw audio/video APIs that enable dynamic sound generation, custom video codecs or indeed alpha video channels.
- Local Messaging. One common challenge is messaging across multiple Silverlight plug-ins. In Silverlight 3, we now support “named pipes”-style messaging across not just objects on the same page, but even multiple Silverlight instances across multiple browsers.
- Out of Browser. A user can start a Silverlight out-of-browser “application” either by right-clicking on the Silverlight content, or by clicking on a custom button within the application itself. So now we can have Silverlight applications running on the Mac that can run offline.
- Tooling. The Silverlight 3 tools will introduce a new compression algorithm that will reduce the size of XAP files by 10-30%. So that's great news because Silverlight xap file tend to grow large very quick as they use extra dll files.
- eclipse4SL: the Mac version of eclipse4SL is available for download, so now you can develop Silverlight applications on the Mac.
UPDATE: Read more about these features in detail in Tim Heuer's blog post: A guide to Silverlight 3 new features.
It's a nice feature list, but most of this stuff can also be achieved using the Adobe Flash Platform. But given the fact that the .NET core runtime is a powerfull development platform and the vast amount of developers, we should see some cool stuff coming in the future. The only feature that I haven't read anything about is Silverlight for Mobile. Maybe I missed it, or maybe it is something for later on.
Microsoft Techdays 2009
This week I went to the Microsoft Techdays in Belgium. I have not been doing a lot of stuff with Silverlight lately, but still I was curious if I could catch something new or see some cool demos that finally show the power of Silverlight or WPF.
The first day started with the keynote from which I missed the introduction thanx to the massive traffic jams on the E313. It was a well rehearsed slick demo that showed how easy it is to develop an application using the different solutions. After the introduction by Hans Verbeeck, Gill Cleeren showed us the Silverlight implementation of an application that visualizes data gathered from a Garmin GPS called CycleTracks.
Peter Himschoot showed us how easy it was to recreate that same application into WPF. A lot of code and XAML can be shared between WPF and Silverlight. You can read more about the application in this article. Peter is an excellent presenter, but in this case I didn't see the added value of the WPF application because the only thing it it can do extra is parsing the Garmin XML file. Then Gregory Renard tried to show us how he created a similar application for the Microsoft Surface device. Surface is definitely a very cool device, and I wouldn't mind getting my hands dirty in writing an application for it. But with a price tag of minimum 11.000 Euros I suppose I would need a very generous sponsor
Katrien De Graeve showed us a preview of the new features in Windows 7 and especially the multi-touch features will be cool the play with in the future. Yep, multi-touch is the new hype, everything has to be multi-touch nowadays. I almost forgot Windows Azure which is Microsoft's answer on cloud computing and services. It makes it easy for developers to deploy their applications on Microsoft hosted servers.
The keynote was perfectly presented but yet, I expected more from it. One word of advice maybe: next time make an application that really shows of the power of Silverlight and WPF and put a bit more effort on the looks. Sure it is a conference for developers, but the as they said themselves User Experience becomes more and more important, also in the business applications of the future.
I didn't catch all the sessions but here is a small summary of what i have seen:
- .NET Continuum: ASP.NET, AJAX, Silverlight and WPF (Laurent Bugnion)
- Silverlight CoreCLR: Bringing the power of .NET to the net (Andrew Pardoe)
- Under the hood in Silverlight's controls skinning framework (Gill Cleeren)
- LINQ in breath - Querying everything everywhere (Bart De Smet)
- Live coding Silverlight and WPF (Laurent Bugnion)
- ASP.NET 4.0 what is coming? (Scott Galloway)
I really enjoyed the presentation of Bart De Smet about LINQ. I haven't used LINQ yet, and if there is one thing that Silverlight might have as an advantage over Flex is that cool stuff like LINQ is also available in Silverlight. I never saw Bart De Smet give a presentation before but this might as well be the most technical session of the conference and yet it was very good. He lost me from time to time, but the general idea was very clear to me. Pretty cool stuff what you can do with Extension methods and Lamba expressions.
I also liked the talk from Andrew Pardoe about the CoreCLR. First time I saw a guy from Microsoft using an non-MS application like VI in a demo. We got an insight about the implementation of the CoreCLR which is the plug-in that you download into your browser and which contains the Silverlight runtime.
In the other sessions I learned a couple of new things about Silverlight, but especially the WPF and Silverlight sessions could have been a bit more advanced (like the LINQ session). I had too many deja vue's from previous sessions. Seriously, if I see a developer create a linear (or why not radial) gradient brush one more time... That's a job for a designer, so take a designer with you on stage or don't
The Techdays are also a great opportunity to meet ex-colleagues, network with peers and collect pens (lot's of them). I have met some interesting people, saw some interesting sessions so I would say it was a succes (except for the power outage and the disappearing fridges on day two). I hope that Steve Ballmer will be there next year to cheer on the crowd.
Looking back at 2008
It has been a very interesting year and now might be the time to look back. I did several projects and used a lot of different technologies and frameworks like Flex, AIR, Silverlight, Java, Spring, BlazeDS, ... Last year I decided to start a blog because I finally had something to say, or so I thought
, I became the proud father of a beautiful boy named Robbe, I decided that RIA development would be my path, although I had to make a couple detours.
In the first part of the year I was involved in several Flex projects. The first project was a generic product selector build in Flex that was used by a very well known laptop manufacturer. It was used for a short time because the client decided to go for an AJAX version and my very generic product selector got replaced by the AJAX version. The other project was an internal time tracking interface that used Flex and AIR. We build this tool on top of the Basecamp API. For now the application is only used internal at Nascom, who knows what the future brings. I also released my first open source application Airbob.
Then I put on my other hat and did some Java development using Java, Spring, Hibernate and BlazeDS. We used the OpenAMF library for our server-side communication with Java, but BlazeDS makes the implementation a lot easier. You still had to code the Spring bindings yourself, but the good news is that Adobe is working with SpringSource to build it into the Framework. The other big project I worked on for most of the year was the footballfan.be community site. My role was building the HTML front end using SpringMVC. In a lot of ways it was an interesting project.
In between I did a Silverlight Research project, that has not been upgraded to the Silverlight 2 RTM version yet. The problem is that I used the agTweener library and the source has not been updated after Silverlight Beta 2. So for the time being Benny's Bus Stop is no more. It might come back in the future if I find a decent tweener library.
So what's up for 2009? I am reading the book "Beginning iPhone Development: Exploring the iPhone SDK" so that will be a challenge for next year. There are some cool Flex projects in the pipeline, more on that possibly later on. Will there be an interesting Silverlight project? Only Steve Ballmer knows
Happy Holidays and see you next year!
eclipse4SL
Silverlight development on Mac or Linux?
Up to now this is not possible, but there is good news for those who want to start developing Silverlight applications and are currently working on a Mac. I just read an interesting blog post about a project called eclipse4SL, a collaboration between Microsoft and Soyotac. The purpose of this project is the creation of open source tools integrated with the Eclipse development environment. This means that developers using Flexbuilder/Eclipse can start exploring Silverlight in their own environment. You still need to wait until spring 2009 for the cross platform capabilities (see the roadmap on the website), but there is already a CTP version available for Windows.
The other big news today is that Silverlight 2 has been officially released today. You can read the press release from Microsoft here. This means that I have to hurry and upgrade the Benny's Bus Stop app
Silverlight newsflash
Well, I have to admit that I haven't been busy with Silverlight lately. I try to follow up on the blogs and here is a list of blogs about Silverlight 2 Release Candidate:
- Scott Guthrie: Silverlight 2 Release Candidate Now Available
- Mike Snow: Silverlight Version 2 RC0 Released!!
- Silverlight Games 101: A much cleaner Game Loop in Silverlight 2 RC0
Here you can find more information about downloading and installing the Silverlight 2 RC0 runtime and developer tools. Also Microsoft released Service Pack 1 Preview for Expression Blend that adds full support building for Silverlight 2 applications.
Another interesting blog that I found is this one: Flash vs Silverlight Gallery. It just list a couple of nice visual apps and there are samples including source code in both Flash and Silverlight. So if you want to learn some nice effects in Silverlight her you go. They are all licence free.
Check our Project Rosetta
What is Project Rosetta?
Project Rosetta is a site dedicated to helping designers and developers build applications in Silverlight while taking advantage of skills they already know. Learn more about Project Rosetta.
To follow the progress of Project Rosetta, you can follow on Twitter or by subscribing to the RSS feed.



