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

Advertisements

3 thoughts on “Simple Binding in Jounce (2)

  1. Great post! Question on how the button command is handled though? I don’t see any type of command binding, so how does it know to fire off?!? What about if you have two buttons and two output labels (don’t want to muddle the solution with multibinding, passing paramaters to commands, etc….at least not yet). So one ‘Say Hello’ and one ‘Say Goodbye’ button, that takes your TextBox name and updates your labels respectively?

  2. Ha….guess I should have looked at #3!!! LOL! Still though…do you happen to know how/why it is working without explicitly setting up a command binding? I think it is cool that you can drop a textbox, button, and label on a page and it fills in the blanks behind the scenes to wire in the command logic…just curious HOW it does it.

  3. In this example, when we change the name, I am not only notifying the view that name changed with INotifyPropertyChanged (RaisePropertyChanged), I am also notifying that the HelloWord also changed. Since both them are rasing notify property changed, both the view elements gets the new value.Hope this helps, if not let me know I will try to answer more clearly.

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