Corrado's Blog 2.0

Online thoughts of a technology funatic

MvvmStack for WinJS Part #1

At recent Community Days 2013 conference i had a talk about WinJS development where, at the end, i introduced a demo about MVVM development in HTML 5/Windows Store app, since i found near to zero documentation about this, i decided to share some personal experience.

I’m not going to explain what MVVM (Model-View-ViewModel) is, there is a lot of documentation in Internet, if you need a starting point have a look Laurent Bugnion’s article here, but, as seasoned XAML developer, i admit that I can no longer create production apps without it.

In this first post I’m going to describe what you get when you download the code from http://mvvmstack.codeplex.com.

Running the sample from Visual Studio 2012 open this starting page:

image

This is just a basic page that lets you navigate to anoter section passing a param depending on which choice you select, in both cases you land to a page where you can ‘flip’ some images

image

image

This section also includes an application bar with a couple of buttons that let you to select first and last image on set (not really helpful indeed, but it shows how to bind app bar commands to page ViewModel)

Demo also includes suspend and resume functionality, in any moment you can use Visual Studio 2012 Suspend command to trigger app Termination and Resume it to the exact point it was left.

image

Another interesting aspect is that it supports Expression Blend interactive mode: just open the default.html page in Expression Blend and click Turn on Interactive Mode to start interacting with the app.

image

navigate to the page you wish to edit, press the button again to exit interactive mode and start editing the live DOM.

image

Since navigating to a page from the start might be a cumbersome in some cases, the demo lets you generate some design time data and edit a page without navigation.

image

In previous screenshot you see section.html opened in Expression Blend with some dummy data.

Closing

Get the code from http://mvvmstack.codeplex.com and start playing with it, while far from complete and without presuming to be the best MVVM implementation, i hope you’ll find interesting hints for your next HTML5 Windows Store Application.

I’ll dig into more detail in coming posts…

 

The code is provided “as is”, without warranty of any kind, feedbacks are welcome!

No Responses to “MvvmStack for WinJS Part #1”

RSS feed for comments on this post. TrackBack URL

Leave a Response