xaml ninja » MVVM

Its a POC don’t worry about the data…

rich — Thu, 11 Mar 2010 13:37:43 +0000

In the last post my aim was to start a conversation around the advantages of building a visual data model.

But this is a POC ? Why would you do this?

Well its an interesting question and I am sure that there are folks out there who like to build prototypes and POC’s in this way, but based on my experience this usually ends up taking longer as you find yourself adding a workaround to the existing workarounds resulting in friction between what you want to do and the limitations of the framework. So the approach that I prefer to use is to take some time out at the start of the process and deconstruct the visual designs and build out a data model to represent what information needs to be presented. We can then go off and create the simple factory classes to build these data structures and take full advantage of the features supported by the framework. In essence we are using the same techniques that we would use for a production quality application but slimming down a journey through the application using more appropriate patterns.

This simple process is not time consuming, helps clear up any potential misunderstanding of how the application will react based on certain interactions, and it means that when deconstructing the visual designs its easy to figure out what type of control you can use in order to build the visual and if the control you are thinking about using will support the interactions required. The additional bonus here is that if you want to go a step further then you easily wire in a simple MVVM pattern, again this is something that I do however its not an essential step.

What I also like about this approach is that POC’s are usually built in a short timeframe and are thus open to change on a regular basis and we need to have an approach which reduces churn. By having a good data model you can limit the pain when things change as you can easily change the data object to suit and then a simple change to the Xaml. The opposite of this can result in lots of conditional logic which becomes prone to bugs and also limiting the application to potentially just a clickable mockup.

The other benefit which results in this approach is the level of reusability that I can pull from the POC and move into the production application. By having taken the time to produce a data structure that is usable this means that I can potentially reuse all the existing data templates, data bindings, styles, templates and certain custom controls. Again from my experience this level of reusability is normally higher than when we push forwards with a more static and tightly coupled approach.

To put this into a better context, a number of Surface applications that I have been involved in recently have required a ScatterView with ScatterView Items as these control provide those all important gestures for NUI interactions out of the box. Cool, but we are faced with the options either; create a known number of items and potentially recreate the same style but with different hardwired data; or create a single data template and style and take advantage of the data bind features. This can easily be achieved by data binding to the DP’s provided by the ScatterView Item that controls its placement, its easy to maintain and manage when those known changes happen. It also provides us with the flexibility to extend certain aspects rapidly without getting freaked out by the amount of conditional logic being added to the app.

My approach here is a simple one, create a base class for all your data controlled visuals which allow you to provide point data information so that when the objects are created you can initialise them where they need to be placed on screen. You can also add into here some more properties such as Orientation and data bind your data object property to the Orientation DP. Properties such as CanScale etc I would manipulate in a Style for the ScatterView Item, however there is no reason why you could not add them into the base. My reasons for the using a Style is so that when I am working with the designer I can easily make changes to the Style when we are both using Blend, it also allows me to share the work with designers visually, this for me is essential, personally I am more of a visual guy I prefer to see something rather than read textual content a visual helps paint the picture in a more accurate way with less room for individual perceptions of a textual instruction or description.

This simple approach provides; the ability to place visual elements exactly where the designer wants them;animations can be built in order to animate these visual elements on and off screen, interrogating the strongly typed data types means that we can apply the required styles on demand; reduces the complexity of app by taking advantage of data binding.

Just to break this down a little further, with the Tag Heuer implementation, I created a bunch of data objects for the locations around the world, London, Los Angeles, Cape Town, Sydney etc; all of which subclass the same base called Location. Location, Travel and Watches, the three different states of the app all subclass a class providing the positioning logic which intern subclasses an abstract base implementing INPC. I then have a data templates for each of the locations that we need to visualise, London, Los Angeles, Cape Town, Sydney etc. The data templates deal nicely with presenting our data, however there is a problem with layout as some of the aforementioned locations need to be positioned from left to right and some need to be positioned from right to left. To achieve this visual effect I used a different style
one for left to right and a second for right to left and wired these into the data template. I could have written c# to flip the visual tree however in this instance it was more effective to rebuild the styles in Blend it also has the advantage that I can show the designer in Blend the visual created and make any additional tweaks required.

I used the same technique for the F1 GP races and the watches area all of which have strongly typed data objects to encapsulate the visual information providing me with the advantages mentioned above to create and adapt quickly with the changes to the visual designs, it also allows me to take advantage of OO when it comes to adding additional properties to the base classes which will have a ripple effect down the object hierarchy.

In your next POC or prototype in WPF I hope that you will feel confident enough to try out this technique and reap the benefits that are at your disposal. Unfortunately the current version of Silverlight does not support implicit data templates, which in my humble opinion is a fundamental missing part of the Silverlight framework. Hopefully we will see this in a future release.

In the next post I am going to dig into how I built the watches section of the application and also dive into how interactions with the watch chrome and its content were created.

JC Decaux and Tag Heuer Surface Application deployed to Heathrow T5

rich — Thu, 25 Feb 2010 15:13:37 +0000

This is really the start of a number of posts that I have been meaning to put together for a while now. These are centred around how to rapidly build prototypes. It’s a technique that I use on a regular basis both for WPF and for Silverlight. In order for me to get across how effective this is it seems only right to provide context of how you can also take advantage of this technique.

More about that later, for this particular implementation I partnered with Splendid in order to produce an interactive experience for travellers at London Heathrow T5 lounges. The brief was to help raise brand awareness of the new Tag Heuer watches available and take advantage of the collaborate aspects provided by Surface.

The Tag Heuer Surface application has three main areas of functionality, all driven by the concept of time.

Travel Guide: The application displays the current time at your departure destination, displayed on a Tag Heuer watch display with moving hands. Using a stylized world map passengers can choose popular destinations and explore local time, travel duration and view local landmarks.

Sports Finder: Tag Heuer have a number of sports stars as ambassadors, we chose Lewis Hamilton as the trial location was the UK. Passengers can explore the world find the next Grand Prix including a countdown and images of last years race.

Watch Explorer: A Tag Heuer Application wouldn’t be quite right without the ability to explore their classic watch collection, passengers can use gesture to explore high-res images of the men’s and women’s collections with the ability to sign-up for an email on your favourite watch. The email contains details of the watch and your nearest location to purchase.

For a UX developer there are some really rather cool interactions used in each of the areas. I am going to try and give a higher level overview of these areas below and then jump into the detail in separate posts. The first of these are interactions present in each of the different functional pillars of the experience illustrated above and were designed so that visual elements could be placed into specific areas, animation of these items on and off screen and designed in such away that data bound objects provided the visual positioning information. The solution I used here was a combination of strongly typed data templates with model objects that contained the required coordinates of where to be positioned on screen and styles to create the required interactions.

When deconstructing the visual design I knew that the ScatterView Control would do the job nicely and having the coordinates in the model meant that we can take full advantage of data binding as each ScatterView Item has a centre and orientation DP which can be used to achieve this layout. Using a different ScatterViewItem Style provided the ability to choose different interactions and visuals based on which area of functionality is in use. Note there are 2 styles for the map points; a style for map points which are right aligned and a style for those which are left aligned. Using the strongly typed data templates and the use of data binding provides a clean and easy to achieve solution that provided the required interactions. The application was aware of its state and by changing the data based on state the usage of the strongly typed data templates come into their own as these state changes are triggered resulting in the new visuals to be displayed all done using data and data bindings in the Xaml.

For the travel section animated clocks were used and the TimeZoneInfo class provided the ability to calculate the time in different time zones. Here I used a dispatch timer that was ticking away and then updating the value of the data object. Each of the different time zones were associated data objects of the current location using data binding and INPC meant that we can change the time in the data object and this will trigger the animations used to rotate the hands on the watch.

The watch section has cool interaction where there is a 2 level zoom mechanism, I broke this one down to be a ScatterViewItem which wraps a ScatterView. This allowed for an interaction which meant the user could use a pinch gesture in increase the size of the outer ring and then a second pinch gesture can be used to manipulate the watch being displayed. What I like about this interaction design is that it allows the user to easy move and collaborate with other users interested in seeing the detailing of the watch. More importantly this also meant that I could take full advantage of data binding and strongly typed data templates.

As you may have noticed there is an underlying theme happening here, data and Xaml. For me WPF is really all about your data, get the data structure right that needs to be presented on screen and we can take full advantage of the framework and reduce the amount of C# code we write to a minimum.

links

The Moodie Report http://www.moodiereport.com/document.php?c_id=1113&doc_id=23335

PDC09 – Meet the Griffs Code drop

rich — Thu, 19 Nov 2009 18:58:35 +0000

Ian and myself really enjoyed presenting our pre conference session “Getting the most out of Silverlight” and we both hope that you enjoyed the sessions. The slide decks will be posted at some point by the event team and I will update the post when this happens so that you can get copies of the decks.

As promised I have stashed all the final code examples up on my skydrive folder so that you can download and play with the samples. As we ran out of time in the last session what I will do in the next week or so is to record a Camtasia session and capture what I unfortunately did not get time to go over during the session.

I have named the zip files as intuitively as possible so these line up with the title of the session.

What I also wanted to briefly mention is that in the MEF and Ninject demos you will see that I am using Commands from the Silverlight Extensions project on CodePlex. The command pattern that is used here is a standard command pattern common to WPF. In the current release there is no support for Commands so what you will see included in the projects are the Command classes that I need in order to harness the power of Commands.

In a previous life I wrote a post on WPF commands that you may want to take a look at if you are not familiar to the Command pattern used in WPF and how it helps to separate out UI logic into you View Model and helps increase the testability of your code that responds to the behaviours in your application. The refactor that I did here was to remove the click event handler on the button and replace this with a command. There are 3 steps for refactoring out the event handler.

First we need to create a commands.cs file and create a Commands class which will hold all our commands associated with our view model. In essence we are going to be providing a list of possible actions that the View Model can perform in relation to the view. Once we have created the class we need to define our commands that we want which in our demo is called RefreshFeedItems then we need to add in public mechanism so that we can invoke the command from the view so that it can be wired up to a button.


using StandardViewModel.SLExtensions.Input;

public class Commands
{
      private static readonly Command refreshFeeds = new Command(RefreshFeedItems);

      public static Command RefreshFeedItems

      { get { return refreshFeeds; } } }

Now that we have defined the command that we want to fire we need to do the second part which is to wire up the command in the Xaml of the view.

     Input:CommandService.Command=RefreshFeedItems

We can now remove the click handler code behind of the view.

The finally part is to implement the CanExecute and Executed code in the ViewModel, so move into the Constructor of the ViewModel and here wire up the commands.

       Commands.RefreshFeedItems.CanExecute += (sender, args) args.CanExecute = true;
       Commands.RefreshFeedItems.Executed += delegate(object sender, ExecutedEventArgs args)
         {
                        Refresh();
         };

And we are done. Enjoy. One thing to note is that there are other types of commands, RelayCommand and DelegateCommand which are also very cool black belt ninja moves for dealing with separation when building your MVVM apps

MVVM, design time data, and Blendability

rich — Fri, 02 Oct 2009 08:44:15 +0000

With the introduction of design time data support in Blend I thought that I would try and take advantage of using design time data and MVVM. For a while now I have been using Ninject, with a Service Locator Pattern to provide the ability to build WPF and Silverlight apps in an MVVM pattern where I prefer to use a View first mechanism. There are a number of benefits from using this approach, one of the ones that we are good to drill to in this post is around Blendability of the controls that developers create. Prior to me using Ninject I would have a heavy reliance on the DesignerProperties IsInDesignMode call to check to see if the control was being render in Blend, as i would normally have to do something to stop the control from crashing and allow myself and the designer to use Blend in order for us to Style and Template the controls we created.

What we are going to cover here is the journey which i went on when adding support for design time data to my project, I really like it as the refactoring from the standard inbuilt mechanism in Blend to the final output is a nice series of steps that feel good.

The screen shot on the right shows the simple looking UI displaying contextual data in Blend allowing the designer to see how the control will look. I think providing the ability for your application to look exactly the same at design time as at run time is going to mean that you can produce better looking applications quicker as the designer is design the screens in the context of the data.

When first adding the design time data to your project Blend takes over control and this means that you need to use Blend to shape your design time data classes to match your data types used in the system. So if we were building a throw away prototype then I would agree this is the best way forwards, but when you are moving from prototype to production this does not really work. On of the reasons behind the research for this post is around the transition from prototype to production and even from sketch to prototype, once we have sign off from the client on a number of ideas and we want to start to build these out then there is a high potential one will become production quality and because of this its good to have the right architecture in place, so reshaping to MVVM early on will almost certainly cost your client less.

The Xaml below is what i put together to represent the shape of data that was in the mock classes. Blend then hooks this data up to the design time data context for you.

Xaml data for shopping cart

When the design time data shape matches your real data shape you can then go ahead and use the new d:DataContext Dependency Property and bind your design time data to this property.

Xaml Source code for the control

Nothing too tricky there, the new design time data context is the key to making all this happen, it also means that you can bind any sort of data you want to the design time data context to provide contextual data in Blend during design time. It was at this point that i started to think about how we can really bend the design time data features. My initial refactor was not a great result in that I ended up with 2 sets of mock data; one set of data would be used by the designers in Blend; and the second set of data would be used by the unit test, Not nice, management nightmare to ensure that both data sets are keep in sync.

So the goal was to provide design time data which was the same data used by the unit tests, meaning that we only have one data set to maintain and manage, allowing us to leverage the powerful features of design time data in Blend and also keeping our unit tests looking sweet, pleasing both the designers and the developers on the team.

In order to do this I needed to restructure the existing shape of my data classes that I use in my mock service layer classes, first I needed to change the OnCompleted method to be a virtual implementation and also the method which retrieves the data. This simple change means that we can now provide two mock services that can be injected in.

Refactored mock service class with new virtual methods

    using System;
    using System.Collections.ObjectModel;

    public class MockShoppingCartService : IShoppingCartService
    {
        public event GetShoppingCartCompletedHandler GetShoppingCartCompleted;

        public bool LoginToShoppingCart(string username, string password)
        {
            throw new System.NotImplementedException();
        }

        public virtual void RetrieveShoppingCart()
        {
            this.OnGetShoppingCartCompleted(null, MockShoppingCartData.CreateShoppingCartRuntime());
        }

        protected virtual void OnGetShoppingCartCompleted(Exception error, ShoppingCart result)
        {
            if (this.GetShoppingCartCompleted != null)
            {
                this.GetShoppingCartCompleted(new GetShoppingCartCompletedEventArgs(error, result));
            }
        }
    }

The new mock service class which is used specifically for working with Blend

namespace DesignDataSample.Mocks
{
    public class MockShoppingCartServiceDesignData : MockShoppingCartService
    {
        public override void RetrieveShoppingCart()
        {
            this.OnGetShoppingCartCompleted(null, MockShoppingCartData.CreateShoppingCartDesigntime());
        }
    }
}

How we can use ninject to inject the service we want to use, design time data, mock or real.

this.Bind().To().OnlyIf(c => isBrowser);
this.Bind().To().OnlyIf(c => isBlend);
this.Bind().To().OnlyIf(c => isBrowser);
this.Bind().ToSelf();

Xaml code for how we leverage the data context and the new design time data context for providing contextual data.

So I hope that this article has opened your eyes to how useful design time data can be to enhance the Blendability of the controls which you produce both lookless and user. In the majority of cases designers that you are working with really like that they can view the control at deign time how it will appear when running in your application and populated with data. When implementing the MVVM pattern in you application incorporating support for design time data is also possible and provides you with the ultimate Xaml Ninja experience.

You can download the source from my Skydrive.