MVVM, Silverlight, Xamling

Core Series Part 2b – Automatic template selection (this time real automatic selection!)

In the previous post I demonstrated the concept of automatic template selection in a very very simple way. The post was designed to demonstrate the concepts that will be applied in this post – you really shouldn’t use the methods described in the previous post in real projects!

This series is starting out covering off some very basic concepts that are important to understand before progressively up the complexity until we jump in the a full solution – so be patient if you find this stuff a little simple for your tastes!

In this post I will demonstrate a very simple way to apply convention to automatically select a View for the current ViewModel.

Convention is great – as long as you follow the convention (creating files with the correct names, and putting them in the correct spot) this it will “just work”. Yeah I know, never say it will “just work” – phrases like that curse software projects 🙂

Once again to reiterate, the ViewModels do not have any idea what View will be displayed… and you should always try to achieve this in your projects. As soon as the ViewModel knows about the View you are risking breaking all manner of software dev rules, but more importantly your code will lack elegance and be far harder to create and maintain. With this in mind, we “publish” the current ViewModel through a property in the “frame” – the frame being the VM (ViewModel) that looks after creating and displaying child VM’s, and eventually in later posts navigation and tombstoning etc. The VM is then picked up by a ContentControl which will then figure out which View to show. The frame is on the VM side of the fence, the ContentControl is on the View side of the fence. The link between the fence is DataBinding.

Example – automatic view selection using convention

First, you can download the example here.

You can view a video run through of the example here.

The code examines how to pass in a VM to the ContentControl and automatically resolve the view to show.

There are two concepts that are important to take away from this example: first is convention. Creating Views called xxxView and VMs called xxxViewModel. The ContentTemplateSelector is then called upon to look at the type names, figure out the View to show (by replacing ViewModel with View from the original VM type name), then dynamically building some XAML which contains a DataTemplate.

The second concept is of course the dynamic generation of a DataTemplate. It’s important to note that child controls in DataTemplates are not ingratiated when the DataTemplate is created – it’s not until the DataTemplate is applied against some content (in this case the VM) in the ContentControl. This is nice, it means we can cache the DataTemplate to negate the need to re-generate them when the same VM type is used next time.

The XamlReader is used to process the dynamic XAML and returns a DataTemplate, which the ContentControl sets to it’s ContentTemplate property at runtime.

So what’s the benefit?

Convention is great for writing code and building projects *fast*. To add a new View using this system takes minutes (if not seconds). Navigating to the new view is very simple also.

In the next post we will example some further benefits of letting the “View” side of the fence handle control resolution – mainly automatic, designer friendly, centrally managed content transitions!

MVVM, Silverlight

Core Series Part 1 – XamlingCore – a cross platform MVVM framework for Silverlight

Get the code from Codeplex

Well I’m the first to admit I’ve been rather slack with my blog lately! It’s for good reason I promise!

We’ve started a new business (Xamling) which is running nicely now, with three or four decent sized projects behind us now. Oh, if you think our site is a little plain, there is a new site coming soon!

It’s been mega busy the last couple of months, two of our big projects have been Windows Phone 7 launch apps for *big* companies – explaining my lack of blogging!

But it’s not all bad…

XamlingCore!

I was tasked a while ago with building a demo for Remix Australia using MS Surface, Phone 7, desktop and touch based slate PC’s. It was a very big job, and that was without the 20 (yes twenty) day time limit!

With this in mind, I had to re-think the way I build applications. The tech included Silverlight, WPF (with Surface SDK) and Silverlight for Windows Phone 7…

The framework has since been used in a range of production projects in Silverlight desktop and WP7…

The end result is a little framework called XamlingCore which allows you to build MVVM based applications on all these platforms very quickly and simply.

It’s doesn’t have all the bells and whistles of other MVVM frameworks, but XamlingCore has pragmatism at it’s heart – think of it as the pragmatic MVVM framework. In fact, we suggest using something like MVVM light for most of the base level MVVM stuff, like commanding and event aggregation etc – in conjunction with XamlingCore… why re-invent the wheel.

Whaaaa?

At it’s most basic level, XamlingCore is a set of classes coupled with convention to allow simple view selection and navigation. It’s a lot more than that, but that is it’s most important feature. This series of posts will demonstrate the various abilities of the framework.

One of the biggest problems facing a good MVVM framework is how to perform view selection. Another problem facing MVVM frameworks is that they must be simple enough to pass off to “end” developers. XamlingCore addresses these two issues. It’s extremely easy to use, and makes developing multi view applications extremely simple.

View Selection?

One of the tricky bits with MVVM is what is view selection / pairing them up with a ViewModel. Some call it the “triad” – the Model – View – ViewModel triad process. This process can be difficult to understand…

Normally in applications, the developer will decide they want to show View X, lets for example use a Login screen. In MVVM, the login screen will need a ViewModel, which will expose properties that the View (Login.xaml) will databind to. The process needs to somehow address:

  • Creation of a view
  • Creation of a view model
  • Pass in parameters to the view model
  • Join the view to the view model
  • Navigate to the view (once it is ready)
  • Some how transition to the new view (slide, 3d spinny thingo etc.)
  • Navigate back
  • Plus a whole lot more

So, there is a built in navigation framework in Silverlight and WP7 SDK’s right? Yes… but…

The navigation framework I’m referring to here only allows the developer to navigate to a URI, which points to a XAML file. It’s difficult/un-intuitive to then pair up the ViewModel… especially when you start navigating around a complex application (like navigating back etc). It also precludes you from a few “tricks” to make your dev effort even easier.

Separation of concerns

Any good developer will tell you separation of concerns is very important. In Silverlight, two such concerns are the View and the ViewModel. Each have very different semantics.

The idea in XamlingCore is to draw a very thick line between these two areas – let the view side worry about what to show, and let the ViewModel side worry about itself. It might not be immediately obvious what we mean by this, so read on 🙂

ViewModel first versus View first navigation

We briefly mentioned above the navigation framework in Silverlight – this is a view first scenario… you select the view to navigate to. Selecting a view kicks off the navigation process.

In XamlingCore, you select (create) a ViewModel then navigate to it… strange? Maybe at first – until you see how the view side is configured to handle this. The view side consists of a “NavigationFrame” which takes the selected ViewModel and automatically picks up which XAML file to show (creating it in the process).

This allows you to code in your ViewModel agnostically (i.e. pretty much ignore the view) – at the same time creating a really strong workflow with sample data etc for designers is very easy too. You can create Views and ViewModels very quickly and easily

This series of posts will go through how to get XamlingCore up and running, and show you how it can help you in your development effort. Most of the series will be screen cast based, with some text articles.

For now, check out XamlingCore on Codeplex – review the FlickrSample application to get started… first video coming very soon!

Silverlight, Xamling

And then there was light – Xamling is born

So the news is if you missed it: I quit my job at Readify and started a new company with my brother Alex.

Our new company is called Xamling (pronounced Zam-ling) ! Holy crap it took us ages to think of a name, we even ran a help name us site – which turned up some awesome results, but most of the good ones were already taken!!

Anyways, we finally settled on Xamling. Alex and I invented “Xamlings” – little flying Xaml icons for Remix 2009.

I like to think of Xamling as an anecdote: Fred – “Hey dude, what are you doing?” Jonsey – “I’m Xamling up some mad awesome”. Fred – “Oh sweet – want some pizza?”.

For those that don’t know Xaml stands for eXtensible Application Markup Language and is the markup that is used to build Silverlight and WPF applications (and Windows Workflows and other stuff too).

So, here is this new company – so what?

Well you may also know that Alex, who is not only my brother, is a very talented designer, who also happens to be a Xaml gun. So we decided to quit out jobs and try out something new.

What do we do?

Well – Alex and I have *a lot* of experience. At the moment Alex is working on UX design for Cochlea, and I’m working on some sekret stuff for Microsoft (not bad for our first gig in the new company!)

We specialise in Silverlight, MS Surface, WPF and Azure. But that is not what differentiates us…

What makes Xamling special is that we have developed an amazing designer developer workflow technique that we employ on our projects. We’ve even presented on it at the Melbourne Silverlight Code Camp, Silverlight Designer and Developer Network, Web DU and soon at Remix Australia 2010.

So what can we do?

Well, we can consult (UX, Design, Architecture etc), build (we have exclusive access to a development team with experienced developers, testers and project managers – which we manage and train, tailored training (SL!) and also pre-packaged/tailored architecture solutions to get your new project up to speed quickly (drop in architecture and training)…

Find us on twitter – I’m @jakkaj and Alex is @agkdesign.

Fun!