Gestating your Metro Style App with Cocoon

Today's Metro Monday project is a framework that will help you in your creation of Windows 8 Metro Style applications, helping take a little of the grunt work out, while helping build applications with some separation of concerns. Plus I dig how it uses MEF to compose a navigable application.

Cocoon

Cocoon is a framework to support the development of .Net Windows 8 Metro-style applications, in particular those that link to web services. It simplifies accessing, displaying and editing data using standard Metro controls, and allows easy application of the MVVM pattern.

For more details, and news on the latest releases visit http://andyonwpf.blogspot.com

Current Features

• A navigation framework with,
  • Attribute based page and view model discovery using MEF
  • Automatic creation and wiring up of page and view model
  • Passing of parameters to view models upon activation
  • Persistence of navigation and state upon application suspension

• A data framework with,
  • Support for observable collections and data virtualization
  • An extensible framework for the retrieval, processing and display of data from the cloud

Documentation

• Introduction
• Base Types
  • ObservableVector<T>
  • VirtualizingVector<T>
• Cocoon Navigation Framework
  • Defining pages and view models
  • More to follow...
• Cocoon Data Framework (IDataListSource<T> and data lists)
  • Introduction
  • Example Code
  • SimpleDataListSource<T>
  • PagedDataListSource<T>
  • VirtualizingDataList<T>

Cocoon – A new framework for Windows 8 Development

To assist with Windows 8 Metro-style applications I would like to announce the Cocoon framework (http://cocoon.codeplex.com/). This aims to build on top of the learning from the Chrysalis project to provide a simple way to develop Metro-style applications in a manner that fits naturally with the MVVM design pattern.

It is likely that many Metro-style apps will be connected applications, downloading data from across the internet in response to user navigation. Modern applications are expected to do this in a seamless manner, retrieving data on demand and populating the user interface in response. In some ways this is at odds with the web API programming model that is based upon individual request-response calls, with paging used to retrieve large datasets. One of the first targets of the Cocoon framework is to simplify this process – bridging the world of stateless web API calls, with the “fast and fluid” interfaces expected by users.

 Navigation in Cocoon – MVVM for Metro-style apps

Navigation in Cocoon

Although not limited to this, the Cocoon framework is designed to work great with the Model-View-ViewModel (MVVM) pattern that has become common when designing XAML based applications. One problem when using this pattern is that you need some way of associating a view with a view-model. Often this is done by navigating directly to a page, and using a “ViewModelLocator” to identify and wire up the respective view-model.

In Cocoon a slightly different approach is used. Here, rather than navigating directly to a view, you navigate to a named page. Although the behaviour is extensible, by default Cocoon will use MEF (the built in composition framework included in .Net) to locate both the view and view-model associated with this page name, create and initialise instances of these and wire them together.

...

The Navigation Manager

In order to navigate between pages, Cocoon includes a navigation manager that can be accessed by importing the INavigationManager interface through MEF (simplified by the fact that all views and view models in Cocoon are themselves are composed by MEF).

Getting Started with Cocoon Navigation – The Cocoon Bootstrapper

Since the Cocoon navigation framework is built on top of the Managed Extensibility Framework (MEF), the application is composed with the required dependencies as the user navigates through the application. MEF is a composition framework that is built into the .Net framework, that enables the construction of loosely-coupled, easily maintainable and testable applications to be composed automatically at run time. An introductory guide for those who are not familiar with MEF is available here.

What I have not covered previously however was how to navigate to the application’s first page when it is launched,

Launching Navigation Using The Cocoon Bootstrapper

To simplify the initialization of Cocoon based applications the framework includes the ‘CocoonBootstrapper’ class that can be used at startup. This manages the configuration of MEF for the most common scenarios, initialization of services and activation of the application.

...

Here's a snip of the sample app running.

Note, to get the sample app to run, you'll need your own Flickr API Key.

Here's a snap of the Solution;

And some snaps of the code, showing a little bit of how MEF is used.

If you've thought, "I love MEF and I wonder if I can use it to compose Metro Style App's, without messing up navigation" or looking for a new data handling framework or just want to check out a cool framework, Cocoon, and all its source, is ready for you...