Step into Caliburn.Micro World

This is my first attempt at Caliburn so this might be little crude. After some very busy time, I thought I will give it a go on Caliburn.Micro. To my surprise ‘Hello World’ was not that complicated as I thought it would be. So in this blog, we are going to look at writing simple Hello World program to understand the following

I. What are all the things required to build an application.

II. MVVM.

III. Simple data binding.

IV. Design time data or Blendability.

V. Distribution file size.

To create a simple application, I followed this introduction link and got the Hello World working in no time. The steps are simple.

1. Create a brand new silverlight application.

2. If you do not have NuGet please go get it, with NuGet in place. Go to Tools->Library Package Manager –> Manage NuGet Packages and install Caliburn.Micro.

Once you install, not only it brings down the required dll, but also it creates the shell template with View, ViewModel and interface for the view model.

3. Follow the steps in the links mentioned to clean up App.XAML and make sure you delete the MainPage.XAML and run the program. You will see Hello World.

4. In this process we really did not use ViewModel. If you look at the ShellViewModel.cs, there is no code. Lets modify the code little bit to have small taste of MVVM.

5. Go to ShellView.XAML and change the textblock as follows;

<TextBlock Name="HelloWorld"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   FontSize="20" />

What we did here is that, instead of passing the constant now we named the TextBlock so that it can get some data from view model.

6. Go to IShell.cs and add the following

public interface IShell 
    {
        string HelloWorld { get; }
    }

Same as Jounce, I am creating the variable in here so that I can use it for design time data.

7. Modify the SheViewModel.cs as follows

[Export(typeof(IShell))]
    public class ShellViewModel : IShell 
    {
        #region IShell Members

        public string HelloWorld
        {
            get { return "Hello Unni"; }
        }

        #endregion
    }

 

8. Now if you run the code, it will show ‘Hello Unni’ instead of hello word from Caliburn. We will look at how binding happened in a second.

 

In this process you deleted lot of code and added few lines.

I. What are all the things required to build an application.

With our first program running, lets look at the components required to write Silverlight using Caliburn. You need two dlls, the first one, of course is Calburn.Micro.dll and the second one is System.Interactivity.dll. If you use blend then this dll will be available in GAC for you, you need to add the reference to your solution.

II. MVVM.

Caliurn uses simple convention to identify View and ViewModels, it is pretty cool. All your view have to end with ‘View’ and the view model as you guessed it, it should end with ‘ViewModel’, thats about it. So in the ’HelloWorld’, our main View is Shell and is called ‘ShellView’ and its corresponding view model is ‘ShellViewModel’. but if you would look at the app.xaml.cs we did not say which one is our starting page. It is done in the bootstrapper. If you look at the class definition of bootstrapper

public class AppBootstrapper : Bootstrapper<IShell>

 

So if you want to specify a different page, all you have to do is to bootstrap off of its view mode.

III. Simple data binding.

Data Binding is super simple. In our Hello word program the TextBlock name was ‘HelloWorld’ and if you look at the view model, we have a property called ‘HelloWord’. So binding is done through Name in XAML and associated property in the view model.

IV. Design time data or Blendability.

Unfortunately, so far I am not successful in enabling design time data. Here is what I attempted. Created a new class called SampleShellViewModel.cs as follows

namespace HelloWorld
{
    public class SampleShellViewModel:IShell
    {

        #region IShell Members

        public string HelloWorld
        {
            get { return "Hello World"; }
        }

        #endregion
    }
}

Modified the ShellView.XAML as follows

<UserControl x:Class="HelloWorld.ShellView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             xmlns:sampleData="clr-namespace:HelloWorld"
             d:DesignHeight="287" d:DesignWidth="518"
             >

    <Grid Background="White" d:DataContext="{d:DesignInstance sampleData:SampleShellViewModel, IsDesignTimeCreatable=True}">
        <TextBlock Name="HelloWorld"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   FontSize="20" />
    </Grid>

</UserControl>

But view does not recognizes the design time data object. I will continue work on it and see what am I doing wrong here and update the post once I find the answer.

** By default Caliburn Micro naming convention will not work with design time data. So instead of using Name=”Hello World”, do Content=”{Binding HelloWorld"}” will do run time binding and design time data binding.”

V. Distribution file size.

The distribution dll for Caliburn is only 41K compressed.

 

This is my baby steps into Caliburn and so far what I found is that it is easy to use.

Comparing to Jounce, here are some of my observations;

1. Compare to Jounce the distribution dll, Caliburn is only 6K more, it is not a big deal.

2. Caliburn uses convention to do data binding and View, View Model binding while in Jounce, for every view, you have to write the ViewModelRoute binding.

3. Jounce is attribute based development, while Caliburn is convention based development.

4. Since I do not have definite answer on Blendability, I am not going to comment on it yet.

4. By default the convention binding will not work on Blendabilty. If you want design time data, add or replace Name with normal Binding.

5. You have to have a bootstrapper for Caliburn, while Jounce it is build in.

6. Caliburn can use any IoC container, while Jounce is build on top of MEF.

I will go more about binding, MEF and other features in a later blog.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s