A discussion about Rich Internet Applications, and user experience focusing on architecture, design patterns and methodologies.

Thursday, October 23, 2008

User Group Presentation

So I just presented at the Toronto Silverlight User Group (http://www.torontosilverlight.com/) and Toronto .NET User Group (http://www.torontoug.net/) and thought it would be a good idea to share the material with everyone. 

I'd like to thank the user group hosts and all that attended for allowing me to rush through what is clearly much more content than a person can absorb in an hour or so.  I will be breaking the solution down again in more detail on this blog, so stay tuned.

Powerpoint and source code.

Wednesday, August 6, 2008

Silverlight LOB Architecture Design

<- User Experience for Line of Business    

A Silverlight application by its nature is a distributed app with a front-end on the client and a web service to provide connectivity to the data store.

Application Diagram

In order to decouple dependencies between components, I use dependency injection.  All components consumed by other components define a strong contract through an interface, making them replaceable and making unit testing simpler.  Since the front-end connection with the business logic is handled declaratively, no contract is required. 

Sample Application

For our working example, we have a straightforward requirement:

  • Display a list of users
  • Allow adding, updating and deletion of users

So we are defining a simple CRUD operation on an entity.  The following class diagram describes the different components needed to implement this using the Model-View-ViewModel design pattern.


Class Diagram

The view binds to the data model for interaction with the entities.  To handle user interaction, we will be binding to a component called "ViewModelAction" which encapsulates event handling and availability, similar to WPF commands.  The components are relatively lightweight and are focused on streamlining the binding process.  This allows the view contain absolutely no code.

The common functionality for these components is defined in a central library that could be re-used for other applications.  The View, Model, ViewModel and ViewModelAction base classes are all derived from a abstract class called Component which mainly implements property change notification through the INotifyPropertyChanged interface. 


One of the obstacles I ran into with declarative binding is that the visual designer attempt to instantiate all objects.  In the case of the model, this was bad as Visual Studio was attempting to connect to the web service and failing.  I added an "IsDesignMode" flag to component to wrap calls to external resources in my components.  This is the same solution to a similar problem in ASP.Net.

Up Next

I'm going to take a top down approach to subsequent blogs to keep my non-developer audience interested longer.  I will show how the view is defined in XAML, followed by the ViewModel (with kung fu action) and lastly the Model. 

Wednesday, July 23, 2008

User Experience for Line of Business


I have long considered HTML to be a hindrance to user experience in business applications. This old "language" was designed for simple hypertext informational pages but patched and bandaged to support the ever-growing expectations of corporate clients. I was very excited to hear of Microsoft's new Presentation Foundation and have been working toward promoting it as a replacement to HTML for intranet style projects.


After much research, my path is chosen. I have focused my initial research on Silverlight for its flexibility and cross-platform support, but I plan on including WPF in my long-term efforts. I have also chosen Model-View-ViewModel (MVVM) as the design pattern for its intuitive elegance with Silverlight's declarative model. WPF has better support for some of the MVVM's architecture, so I have taken a simplistic approach to some of the challenges in order to keep the implementation relatively light-weight.

I have been inspired and guided by tutorials and blogs that I have seen, so thanks to the online community for the invaluable information they provide. Thanks to all.


It basically states that modern design patterns follow a simple philosophy:

  • Applications implement a model that represent the data store. This is the "Model".
  • The "View" renders the display and allows users to interact with data.
  • Business rules and application workflow are handled by the "ViewModel". This component provides endpoints for declaratively binding to data and actions.

More on this here.

There is also an article by Dr. WPF about Model-View-Poo that I enjoyed.

Practice Application

I chose to build an administration module for a web application as a goal to work towards. Basically, it would display a list of users and allow editing of a user in a detail screen.

The solution plan would be as follows:

AdminThe Silverlight app., implementing the Views and View Models
ClientLibraryFunctionality shared between Silverlight apps. including the Model
DataServiceA WCF service providing database operations to the client
WebThe web application hosting the Silverlight apps.
BaseCommon functionality for all MVVM style solutions

Next Up

For my next trick, I'd like to describe the Base and ClientLibrary projects in detail. The Web and DataService are not really relevant for UX discussion, so I will not be getting into them.

About Me

My photo
Toronto, ON, Canada
I am a technical architect at Navantis, with over 12 years experience in IT. I have been involved in various projects, including a Hospital information system called CCIS for which my team received the 2007 Tech-Net innovation award. I have been working with Silverlight since beta 1, and am very keen on practically applying this technology and WPF to line of business applications.