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: ,,
Advertisements