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.
| <- 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.
For our working example, we have a straightforward requirement:
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.
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.
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:
There is also an article by Dr. WPF about Model-View-Poo that I enjoyed.
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:
| Project | Description |
| Admin | The Silverlight app., implementing the Views and View Models |
| ClientLibrary | Functionality shared between Silverlight apps. including the Model |
| DataService | A WCF service providing database operations to the client |
| Web | The web application hosting the Silverlight apps. |
| Base | Common functionality for all MVVM style solutions |
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.
Posts
All Comments
.jpg){kind=small}
