The videos from NDC2009 are now published on the conference agenda site. The site isn’t the easiest to navigate, so Mark Nijhof went through the effort of creating a simple list of all the videos grouped by speaker. There is tons of great content available and the videos should be a great way to do some (relaxed) learning in the summer heat.

There is a problem with some of the links, and the link to the video of my second talk on .NET RIA Services is broken. I’ll make a new post when that video becomes available.

Click to view my Model-View-ViewModel presentation from NDC2009.

Separation of concerns is a key principle in object oriented software design. For GUI applications the separated presentation patterns help you separate your View, Model and interaction logic. Personally I’m a big fan of the Model-View-ViewModel for Silverlight and WPF applications as it enables heavy use of data binding. However, in some cases it is useful to combine the MVVM pattern with other members of the separated presentation family of patterns.

I’ve done a fair bit of blogging about the Model-View-ViewModel pattern in a Silverlight 2 context and gotten some good feedback on that. One of the questions I get asked often is how to implement scenarios like multi page navigation, or complex user interactions like and drag and drop within a Model-View-ViewModel context. It turns out that in many cases the problem is that the developer is so focused on implementing the pattern that they fail to see alternative approaches to solve their problems. I’m as guilty of this as anyone – once you get a new hammer everything becomes a nail.

The Model-View-ViewModel belongs to a family of software patterns commonly referred to as separated presentation patterns. These are patterns that try to clearly separate the different concerns of your GUI application. In most cases they separate the View (user interface), the Model (domain and/or data model) and “something else”, which in many cases is the main different between these patterns. Model-View-Controller is one; perhaps the original separated presentation pattern, which has gotten a lot of attention lately as it is proven to be very effective in web development. The popular Ruby on Rails framework is based on this pattern, and Microsoft just released a beta of their ASP.NET MVC framework implementation. The stateless request-response nature of the web makes the MVC pattern a good fit for web applications. You may have a front controller routing an incoming web request to the correct Controller, which in turn makes a decision on what to do. The Controller may fetch some data from the Model and pass it onto a View which will render the HTML.

Another popular pattern is the Model-View-Presenter, which comes in two flavors; Passive View and Supervising Controller. This pattern has many applications and implementations. The Passive View is about reducing the View to a dumb slave driven by the Controller. The View implements a finely grained interface, with properties and methods like Name, Age, Address, without any references to UI framework specific types. The Controller drives the View by setting these properties. The benefit of this approach is that the Controller becomes highly testable, and you can reuse the same Controller in different UI environments. You may implement the View interface for different UI platforms, like web, a Windows client or even a mobile device. The drawback of the Passive View is that you may not leverage the power of the UI platform you are targeting, for instance by using data binding if you’re targeting WPF or Silverlight.

The Supervising Controller flavor of MVP lets the View deal with simple synchronization and mapping against the Model. User input and complex view logic is handled by a Supervising Controller class. This lets you leverage some of the capabilities of the UI platform by accessing the Model directly, while keeping complex code that needs unit tests in a separate class. Later I will show this pattern can be combined with the Model-View-ViewModel pattern to implement drag-and-drop behavior in a WPF application.

Flickr Uploader Sample Application

To show how the Supervising Controller and the Model-View-ViewModel pattern can be combined I’m going to create facetious Flickr Photo Uploading application. I’m not going to implement any real integration with Flickr, but rather focus on how to implement drag-and-drop of photos to upload and how this fits in with the MVVM and Supervising Controller patterns. I picked this sample because I was faced with this exact problem earlier this week on one of the projects I’m working on. It’s a WPF application where we’re using the MVVM pattern for most of it. One of the requirements of the application was support for drag-and-drop import of files from client’s computer. It was not entirely obvious how to implement this in a true MVVM way, and it turned out the addition of a Supervising Controller was a good solution this time.

I’m not going to spend too much time covering the Model-View-ViewModel pattern in depth as I have already done that earlier. I would also recommend checking out Nikhil Kothari and John Gossmans blog posts for more information about the Model-View-ViewModel pattern. However, I will briefly touch on the key concepts of the pattern. The ViewModel part of the pattern is a View-specific class that supports data binding. Each View gets its DataContext property set to an instance of a ViewModel. The different UI elements in the View are data bound to properties on the ViewModel class. The ViewModel notifies the View of any changes by implementing the INotifyPropertyChanged interface and fire the PropertyChanged event whenever the underlying Model changes, or by using an ObservableCollection<T> for collections of data. The View interacts with the ViewModel by executing Commands. For instance clicking the Submit Photos button will execute the SubmitPhotos Command, which will push data back to the underlying Model. The following illustration shows a screenshot of the sample application, and a diagram of how the MVVM pattern is implemented.

The next piece of functionality that needs to be implemented is drag-and-drop. I want to be able to drag files from my hard drive and onto the application. To implement this I need to handle the DragOver and Drop events on my MainWindow class. In my implementation of the MVVM pattern my View holds a reference to the ViewModel, but the ViewModel does not reference the View. So there is no obvious way for my ViewModel to handle these events. I could extend my ViewModel and add a property to give the ViewModel a reference to the View consuming it. I’m not sure if this is a good idea, or if this functionality should be handled by the ViewModel in the first place. Instead I decide to use a Supervising Controller to implement this functionality. The Supervising Controller class accepts the View to control in its constructor. Instead of taking a dependency on the concrete View class I implement a simple IDragDropSurface interface, which has the DragOver and Drop events. The Supervising Controller is created in the View constructor.

The Supervising Controller is responsible for listening to the DragOver and Drop events. When the Drop event executes the Supervising Controller will execute the Import Photos command. This enables the Supervising Controller to communicate with the ViewModel in a loosely coupled way. The ViewModel is responsible for iterating over the list of files and creating FileInfo objects that gets added to the ObservableCollection of FileInfo objects. The View is data bound to this collection and the ItemsControl data template will display the imported photos.

This is an updated diagram showing how the Supervising Controller relates to the view and the View Model.

Summary

Applying separated presentation patterns in your GUI applications is a great way to achieve separation of concerns, decoupling of components and higher level of testability. In this blog post you’ve seen how the Supervising Controller pattern can be combined with a Model-View-ViewModel pattern to implement drag-and-drop functionality. The specific example uses WPF, but the same concepts apply for Silverlight 2 applications as well.

Adobe Kuler is a great example of a Rich Internet Application that provide great value directly in the browser. Kuler is a tool that helps you create color themes by applying different rules to find matching colors. You start by selecting a base color, and Kuler will help you find four matching colors. You can even use Flickr photos as a basis for your color theme. Adobe Kuler has a social aspect to it as well. You can create an account and save your colors online and share them with the community. People can rate and commend on your themes, or create new color themes based on an excising one. Kuler is being a good Web 2.0 citizen and offers a REST-full API that lets you build your own applications using the colors of the community.

Whenever I find a service I like with an open API I just can’t leave it alone. So today I’m announcing the Colorful Expression add-In.

Colorful Expression is an add-in for Expression Blend and Expression Design that brings you the Adobe Kuler community directly into your toolbox. It adds a new palette to your design environment, making it easy to leverage the community to find the perfect color theme for your application or design. The add-in also available as a standalone application, making it useful for web developers working in Visual Studio or Expression Web to select colors for your CSS style sheets.

Expression Design

Last week Jose Fajardo blogged and complained that Expression Design doesn’t get enough love. I totally agree, and am going to give it some love by making it more colorful.

The key feature of the add-in is to select colors. The eyedropper tool in Design lets you click anywhere on the screen to select a color. Simply click the eyedropper in your color panel, and click on one of the colors in the Colorful Expression panel.

You can also copy colors to the clipboard by clicking the copy-button. When you paste the color theme onto the design surface you’ll get five rectangles and the name of the color. This lets you collect interesting themes directly in your design file by copying them onto the document.

Expression Blend supports exporting and importing color swatch libraries through a simple XML file format. Colorful Expression allows you to save a theme as a swatch library you can import into Design. The screenshot shows the “Buddah in Rain” theme imported to the swatch library.

Expression Blend

The add-in works almost the same way in Blend as in Design but with some minor differences. In Blend you can use the Ctrl+C key combination to invoke the copy command, making it a lot easier to copy/paste themes onto the design surface. When you paste a theme onto the surface you will get a grid containing five rectangles and a text block. The rectangles are painted with a solid color brush resource, and each of the colors gets added to the resource collection of the page. If you go into XAML-view and paste the theme you will get five solid color brush resource elements you can add to any resource collection. The Blend add-in also supports drag and drop, letting you drag color themes onto the design surface.

Standalone application

The standalone application gives you most of the same features as the Blend and Design add-in. You can copy or drag themes into Blend, and you can save Design swatch libraries. The stand alone application is useful if you don’t want to run the add-in all the time or if you don’t use Expression Studio. You can also hold down control and click a single color to copy it to the clipboard as a RGB HEX color. That way you can use the standalone application as a color picker for any application using HEX colors, such as CSS style sheets.

Ideas for next version

I want to keep the add-in simple and focused, but I do have some ideas for new features. The first thing I’m planning to implement is a color provider for the COLORLovers site. I also want deeper integration with Blend and Design, especially around managing resources in Blend.

It would also be nice to support Expression Web and Visual Studio 2008 so that web developers can use it to get CSS colors for their web projects.

Another feature missing is support for the light Expression Studio color theme. The current look and feel is based on Hadi Eskandari’s Expression Clone theme and only supports the dark theme. It should be fairly simple to create a new theme matching the light colors.

You can suggest new features in the discussion board or report bugs in the issue tracker.

Download and installation

The project is released on http://www.codeplex.com/colorful, and the initial release contains the compiled version of the add-in for Design 2.0, Blend 2.0, Blend 2.5 June CTP, Blend 2.0 SP1 Preview and as a standalone WPF application. To install the add-in simply copy the files into your Blend or Design director, and launch the EXE file with an extra parameter.

I.e: “Blend.exe –addin:Colorful.Blend.AddIn.dll” or “Design.exe –addin:Colorful.Design.AddIn.dll”.

You can also right click your application shortcut and select properties to change the target of the shortcut. Add the above parameters to the target to launch Blend or Design with the add-in every time you click the shortcut.

Getting involved

If you would like to get involved in the project drop me an e-mail at jonas@follesoe.no. You can also suggest features or report bugs in the discussion forum and the issue tracker.

To build the project you need to have Expression Blend or/and Expression Design installed. The add-in has a dependency on Microsoft.Expression.Framework.dll, which in turn has a dependency on Microsoft.Expression.Diagnostics.dll, Microsoft.Expression.Interop.dll and Microsoft.Expression.Licensing.dll. For licensing reasons these assemblies are not checked into the source control three.

If you want to run the add-in from Visual Studio I recommend running Visual Studio 2008 as administrator and then change the output directory of your debug build to the installation folder of Blend/Design. Then change the startup application to the Blend.exe/Design.exe with the correct startup arguments. That way you can hit F5 inside Visual Studio to launch Blend/Design in debug mode. You can set breakpoints in your code and test/debug the add-in this way.

Happy coloring!

After some initial struggles with Authentication Services and cookies in WCF it turned out porting the Dive Log Silverlight application to WPF was fairly straight forward. Once I had figured out how to authenticate from WPF it didn’t take more than a few hours to bring the entire application over from Silverlight. I’ll list some of the gotchas I ran into while porting the code

Authentication
The Silverlight version is protected using Forms Authentication and an ASP.NET membership provider. The WPF version uses WCF authentication services, and needs to manage the authentication cookie manually. Details about this are covered in post I did this weekend. After figuring out how handle authentication implementing the login screen was straight forward. It uses the same Model-View-ViewModel design as the rest of the application.

Presentation Models (ViewModel)
The Dive Log uses Presentation Model pattern (aka Model-View-ViewModel in WPF/Silverlight circles), so the majority of the application code is non-visual. I was able to port that code straight over to WPF with some minor adjustment. The WPF version has an extra dependency to a cookie manager (that’s how the Dive Log service gets the authentication cookie from the login service). I also had to change the event handlers for the commands.

Commands
In WPF commands are built into the framework so I could throw away some of the code from the Silverlight version. The command implementation used in the Silverlight application is very similar to the WPF commands, so porting the code wasn’t a big challenge.

Value Converters
Value Converters is the Swiss army knife of WPF and Silverlight programming. It lets you convert pieces of data during data binding. The Dive Log application has 8 value converters and I was able to port all of them straight to WPF with no code change.

IoC and Dependency Injection
The application uses Ninject for dependency injection. Ninject supports both Silverlight and WPF so I could reuse all that code. I had to make some changes in the configuration class. In Silverlight I use the HtmlPage.IsEnabled property to check if the code is consumed by Blend. In WPF you got a IsInDesignModeProperty dependency property you can use to check if the code is consumed by Blend or Cider.

The “basic” user interface version
The Dive Log application comes with two user interfaces, one done by a developer, one done with the help of a designer. The simple UI version ported nicely over to WPF, with a few minor changes. The first thing I had to change is that WPF supports Windows, while the top level element in Silverlight is a user control. Silverlight also got a couple of controls currently not available in WPF. One of these is the date time picker. In the WPF version I used a simple textbox instead. Other than that the UI pretty much just worked out of the box. It looked a little different since some of the default styles for some of the controls are a little different.

The “full” user interface version
The richer version of the user interface contains several template controls and I didn’t expect to be able to reuse a lot of the XAML. But since the styles and templates are defined as resources I was still able to copy-paste the skeleton of the UI with only a couple minor changes. The screen shot below shows the WPF version after a rough copy-paste. The problem with porting the UI is that Silverlight uses the Visual State Manager for styling and templates, while WPF uses triggers. So for this part of the application I had to do a lot of hand coding of the XAML, moving each template over piece by piece. I was still able to reuse a lot of the individual pieces, such as the XAML graphics used for the weather check boxes, the customized slider control, and some of the other graphical elements.

Conclusion
The Dive Log application is a fairly trivial application, yet complex enough to give a decent indication of what it would take to port an application from Silverlight to WPF. I was pleasantly surprised with how easy it was to port the application to WPF. However you will have to do some manual work, especially around styled controls. Patterns like the Model-View-ViewModel pattern make it easy to reuse your ViewModel classes between WPF and Silverlight, and code-only elements such as value converters ports straight over to WPF. But I think the biggest thing you gain from working with both Silverlight and WPF is reuse of skills. With little WPF knowledge I was able to build a fairly rich application using what I know from working with Blend 2.5 and Silverlight, which is huge! I've uploaded the current source code, as well as a compiled version of the WPF application if you want to try it. They're available as embedded downloads from Windows Live Sky Drive (might not be visible in your RSS reader).

Downloads