My First program using Jounce

This is the first program I wrote to see how much code I need to write and how hard to do simple data binding. Jeremy is doing getting started on Jounce in his blog. What I am doing here is related to his Jounce Part 2.  Here is the final result of the program

All this program does is to shows my name in the text box, nothing else. When i started the application I dreaded I will ended up writing lot of code or the process will be complex but to my surprise it is very easy. To make this work, make sure you head down to Code Plex and download the Jounce. We need following three dll from jounce and one from MEF (Which is already part of Framework 4).

Ok Lets start. Fire up VS 2010, create new Silverlight application. Add the above references into the project. Now we are going to add Jounce Framework in the XAML like the following

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="simplelabel.App"
             xmlns:Service="clr-namespace:Jounce.Framework.Services;assembly=Jounce.Framework"
             >
    <Application.ApplicationLifetimeObjects>
        <Service:ApplicationService />
    </Application.ApplicationLifetimeObjects>
    <Application.Resources>
    </Application.Resources>
</Application>

xmlns:Service is the reference to Jounce Framework. Next we add the Jounce to silverlight application lifetime object. Ok, lets start coding, lets go to  app.xaml.cs and remove everything except the InitializeComponent, so the code will look like the following

namespace simplelabel
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
        }       
    }
}

Simple huh? What is happenings here is that, since we interjected Jounce to the application life time object, Jounce does all the plumbing for us. Now that we have everything cleaned up in the app side, lets look at the view and view model. I left MainPage.XAML as our view. There is nothing special in here

<Grid x:Name="LayoutRoot" Background="White">
        <sdk:Label Height="28" HorizontalAlignment="Left" Margin="38,32,0,0" Name="label1" VerticalAlignment="Top" Width="47" Content="Name:" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="81,28,0,0" Name="textBox1" VerticalAlignment="Top" Width="235" Text="{Binding Name}" />
    </Grid>

I have one label and one textbox. In the text box, I am binding it to a variable called Name. Which will be discovered by silverlight when running. Lets look at the code behind of mainpage

namespace simplelabel
{
    using Jounce.Core.View;
    using System.ComponentModel.Composition;
    using Jounce.Core.ViewModel;

    [ExportAsView("Shell", IsShell=true)]
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        [Export]
        public ViewModelRoute Binding
        {
            get
            {
                ViewModelRoute route = ViewModelRoute.Create("Shell", "Shell");
                return route;
            }
        }       
    }
}

In this example code, I have one view and viewmodel. Since ‘MainPage’ is my view I need to decorate the view as ‘ExportAsView’ and for view model, decorate it with ‘ExportAsViewModel’. It has name, to bind view and viewmodel, the name must be same. We named the view as ‘Shell’ so make sure the mainpageviewmodel will have the same name as Shell as well. Also since Main page is the start up page for us, add IsShell=true.

Next the most important part, is making sure jounce know which viewmodel belongs to which view, by doing the viewmodel routing. Here we are binding view with name ‘Shell’ (Decorated in attribute ExportAsView) to view model with name ‘Shell’ (will see next). Make sure you decorate the property as [Export] so that jounce finds it.

Time to create view model by creating a class called MainPageViewModel.cs and add the following code

namespace simplelabel
{
    using Jounce.Core.ViewModel;
    using Jounce.Core.View;
    using System.ComponentModel.Composition;

    [ExportAsViewModel("Shell")]
    public class MainPageViewModel:BaseViewModel
    {
        public string Name
        {
            get
            {
                return "Kiran";
            }
        }
    }
}

First thing when we create view model, we make sure we tell Jounce which view it belongs to by decorating it with ‘ExportAsViewModel’ with a name. Next make sure the view model is derived from ‘BaseViewModel’. If you remember in the view, we bound ‘Name’ field to the text block which is coming from this view model. That is it. Now if you run the application, you will the screen shot I showed in the beginning.

I am still learning, long way to go…