Can you see now – Bing maps

This will be a short post.

Nowadays if we want to find a location or driving direction we use internet maps. I am always fascinated by the complexity of the maps. Even though they are just two co-ordinates, Altitude and latitude.   I have seen application which has integrated maps in it. recently I came across a blog which took me to bing map sdk. I was thrilled to see the SDK to use Bing map inside. Anyone who ever wanted to learn how to integrate map inside the application, that is your solution.

Lately all experiments I am doing, is done in Silverlight, it is way to educate myself on Silverlight. So I started binging to see if there is a way I can use the maps in Silverlight and here it is. To my surprise with in 30 minutes I was able to get everything running and have my first program showing maps.

Technorati Tags: ,

Advertisements

Obey the commands in Jounce (3)

One of my favorite thing in Silverlight is command. It makes the code look very simple and elegant. This is build on top of part 2 of the blog. As always, lets first look at the result.

The default initial screen

This is same as previous now. Now if you type the name differently and focus out (do not click on ‘Say Hello’) You will get the following screen

Now click on the ‘Say Hello’ button which will render the following screen.

You see that, when I click on say hello, the word command get added to the name text block and in the bottom label as well. What I want to do demonstrate here is that, it is very easy to do commanding. Lets look at the code. In this one, my view XAML changed a bit (MainPage.XAML) as follows

<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, Mode=TwoWay}” />
<sdk:Label Height=”28″ HorizontalAlignment=”Left” Margin=”43,125,0,0″ Name=”label2″ VerticalAlignment=”Top” Width=”273″ Content=”{Binding HelloName}” />
<Button Content=”Say Hello” Height=”23″ HorizontalAlignment=”Left” Margin=”43,77,0,0″ Name=”button1″ VerticalAlignment=”Top” Width=”263″ Command=”{Binding SayHelloCommand}” CommandParameter=”{Binding ElementName=textBox1, Path=Text}”/>
    </Grid>

Nothing changed except the Button control. Now I have two additional attributes added. They are Command and CommandParameter. The Command in here says what command to execute when user click the button. The command parameter says what is the parameter for command. For command parameter, I am reading the Name text block and passing the text. Now lets look at the command implementation, it is implemented in the view model as follows

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

[ExportAsViewModel(“Shell”)]
public class MainPageViewModel:BaseViewModel
{
private string _name;
public string Name
{
get
{
if (_name == null)
_name = “Unni”;
return _name;
}
set
{
_name = value;
RaisePropertyChanged<string>(() => Name);
RaisePropertyChanged<string>(() => HelloName);
}
}

public string HelloName
{
get
{
return “Hello ” + Name;
}
}

public IActionCommand<string> SayHelloCommand { get; private set; }

        public MainPageViewModel()
{
SayHelloCommand = new ActionCommand<string>(name => Name = name + ” Command”);
}
    }
}

We declared new command called ‘SayHelloCommand’ of type IActionCommand and it gets instantiated at the view model constructor with delegate on what is it supposed to do. In the delegate what we are doing is setting the Name value with current value in the text block and then add text ‘Command’ to distinguish between the command execution and focusing out of the text block. Since we are setting the Name field, both the text block and the bottom label, which are bound field take the new values.

That is it.

Technorati Tags: ,,

Simple Binding in Jounce (2)

Building on what we have developed in my previous post, in this example we will display the name it is entered in the text block in another field. The final result would like the following

When the application starts the initial screen would like this

When the user change value in the Name field and hit ‘Say Hello’ and it will then put the new value in the bottom part like the following

This is to demonstrate the two way binding and making the second label aware of the changes.

 

The main page xaml will have the code like the following to add one button for ‘Say Hello’ and the second one to display the new text ‘Hello ‘ + name.

<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, Mode=TwoWay}" />
       <sdk:Label Height="28" HorizontalAlignment="Left" Margin="43,125,0,0" Name="label2" VerticalAlignment="Top" Width="273" Content="{Binding HelloName}" />
       <Button Content="Say Hello" Height="23" HorizontalAlignment="Left" Margin="43,77,0,0" Name="button1" VerticalAlignment="Top" Width="263" />
   </Grid>

The next change is in the viewmodel.

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

    [ExportAsViewModel("Shell")]
    public class MainPageViewModel:BaseViewModel
    {
        private string _name;
        public string Name
        {
            get
            {
                if (_name == null)
                    _name = "Unni";
                return _name;
            }
            set
            {
                _name = value;
                RaisePropertyChanged<string>(() => Name);
                RaisePropertyChanged<string>(() => HelloName);
            }
        }

        public string HelloName
        {
            get
            {
                return "Hello " + Name;
            }
        }
    }
}

The changes are, I have added the HelloName public variable, which is bound in the main view XAML.  One other new line is in the setter of ‘Name’, where I raise the property changed event for ‘HelloName’ when the Name field changes.

Normally when we raise property event change, we end up using constant values and then check the constant values in the places where it is used, those complexities are removed from developer perspective in Jounce which I really like.

That is it.

Technorati Tags: ,,

Baby steps in 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 "Unni";
            }
        }
    }
}

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…

Technorati Tags: ,,

Jounce – First look

When it comes to Silverlight, one of my favorite blog is none other than Jeremy Likness (Silverlight MVP). I follow his blogs religiously for the simplicity and straight to the point. If you haven’t seen his blog and you are working on Silverlight, make sure you subscribe to his blog.

Couple of weeks ago, in one of his blog he explained he is on to create a new guidance called Jounce for creating silverlight application. I have been looking for a good solution my self was very happy to see the guidance. I downloaded the frame work started playing with it. I really like the frame work. It is very simple, less code and easy to understand. One other reason I like this very much is that, he leverages MEF for most of the application development and MEF is now part of .Net Framework 4.

I am learning how to use Jounce myself thought, I will share my simple examples with you so that we can learn together. In the codeplex, there is excellent documentation and also the download will give you good quick start examples as well.

Technorati Tags: ,,