Creating Mobile Apps with Xamarin.Forms: Infrastructure

Version 4. I will notify you when the property changes

Let’s step back a moment.

So far, all the versions of the program have contained a class deriving from ContentPage that displays a user interface allowing a user to enter and edit two pieces of text. These two pieces of text are also stored in a class named Note. This Note class stores data that underlies the user interface of the page class.

These two classes are really two sides of the same data—one class presents the data for editing by the user, and the other class handles the more low-level chores, including loading and saving the data in the file system.

Optimally, at any time, both classes should be dealing with the same data. But this is not the case. The page class doesn’t know when the data in the Note class has changed, and the Note class doesn’t know when the text in the Entry and Editor views has changed.

Keeping user interfaces in synchronization with underlying data is a common problem, and standard solutions are available to fix that problem. One of the most important is an interface named INotifyPropertyChanged. It’s defined in the .NET System.ComponentModel namespace like so:

interface INotifyPropertyChanged
{
    event PropertyChangedEventHandler PropertyChanged;
}

The entire interface consists of just one event named PropertyChanged, but this event provides a simple universal way for a class to notify any other class that might be interested when one of its properties has changed values.

The PropertyChangedEventHandler delegate associated with the PropertyChanged event incorporates an event argument of PropertyChangedEventArgs. This class defines a public property of type string named PropertyName that identifies the property being changed.

What’s that? A property named PropertyName that identifies the property being changed? Yes, it sounds a little confusing, but in practice it’s quite simple.

The following NoteTaker4 program was created with the PCL template, but a Shared Asset Project could implement these changes as well.

A class such as Note can implement the INotifyPropertyChanged interface by simply indicating that the class derives from that interface and including a public event of the correct type and name:

class Note : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    ...
}

In theory, that’s all that’s required. However, a class that implements this interface should also actually fire the event whenever one of its public properties changes value. The PropertyChangedEventArgs object accompanying the event identifies the actual property that’s changed value. The property should have been assigned its new value by the time it fires the event.

In the previous versions of the Note class, the properties were defined with implicit backing fields:

public string Title { set; get; }

public string Text { set; get; }

Now they’re going to need explicit private backing fields:

string title, text;

Here’s the new definition of the Title property. The Text property is similar:

public string Title
{
    set
    {
        if (title != value)
        {
            title = value;

            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("Title"));
            }
        }
    }
    get
    {
        return title;
    }
}

This is very standard INotifyPropertyChanged code. The set accessor begins by checking if the private field is the same as the incoming string, and only continues if it’s not. Some programmers new to INotifyPropertyChanged want to skip this check, but it’s important. The interface is called INotifyPropertyChanged and not INotifyMaybePropertyChangedMaybeNot. In some cases, failing to check if the property is actually changing can cause infinite recursion.

The set accessor continues by saving the new value in the backing field and only then firing the event.

Here’s the complete Note class:

using System.ComponentModel;

namespace NoteTaker4
{
    class Note : INotifyPropertyChanged
    {
        string title, text;

        public event PropertyChangedEventHandler PropertyChanged;

        public string Title
        {
            set
            {
                if (title != value)
                {
                    title = value;

                    if (PropertyChanged != null)
                    {
                        PropertyChanged(this, new PropertyChangedEventArgs("Title"));
                    }
                }
            }
            get
            {
                return title;
            }
        }

        public string Text
        {
            set
            {
                if (text != value)
                {
                    text = value;
                    if (PropertyChanged != null)
                    {
                        PropertyChanged(this, new PropertyChangedEventArgs("Text"));
                    }
                }
            }
            get
            {
                return text;
            }
        }

        public void Save(string filename)
        {
            string text = this.Title + "\n" + this.Text;
            FileHelper.WriteAllText(filename, text, () => { });
        }

        public void Load(string filename)
        {
            FileHelper.ReadAllText(filename, (string text) =>
                {
                    // Break string into Title and Text.
                    int index = text.IndexOf('\n');
                    this.Title = text.Substring(0, index);
                    this.Text = text.Substring(index + 1);
                });
        }
    }
}

note.PropertyChanged += (sender, args) =>
    {
        switch (args.PropertyName)
        {
            case "Title":
                entry.Text = note.Title;
                break;

            case "Text":
                entry.Text = note.Text;
                break;
        }
    };

note.PropertyChanged += (sender, args) =>
    {
        Device.BeginInvokeOnMainThread(() =>
            {
                switch (args.PropertyName)
                {
                    case "Title":
                        entry.Text = note.Title;
                        break;

                    case "Text":
                        editor.Text = note.Text;
                        break;
                }
            });
    };

entry.TextChanged += (sender, args) =>
    {
        note.Title = args.NewTextValue;
    };

editor.TextChanged += (sender, args) =>
    {
        note.Text = args.NewTextValue;
    };

class NoteTaker4Page : ContentPage
{
    static readonly string FILENAME = "test.note";

    Note note = new Note();
    Button loadButton;

    public NoteTaker4Page()
    {
        // Create Entry and Editor views.
        Entry entry = new Entry
        {
            Placeholder = "Title (optional)"
        };

        Editor editor = new Editor
        {
            Keyboard = Keyboard.Create(KeyboardFlags.All),
            BackgroundColor = Device.OnPlatform(Color.Default,
                                                Color.Default,
                                                Color.White),
            VerticalOptions = LayoutOptions.FillAndExpand
        };

        // Create Save and Load buttons.
        Button saveButton = new Button
        {
            Text = "Save",
            HorizontalOptions = LayoutOptions.CenterAndExpand
        };
        saveButton.Clicked += OnSaveButtonClicked;

        loadButton = new Button
        {
            Text = "Load",
            IsEnabled = false,
            HorizontalOptions = LayoutOptions.CenterAndExpand
        };
        loadButton.Clicked += OnLoadButtonClicked;

        // Check if the file is available.
        FileHelper.Exists(FILENAME, (exists) =>
            {
                loadButton.IsEnabled = exists;
            });

        // Handle the Note's PropertyChanged event.
        note.PropertyChanged += (sender, args) =>
        {
            Device.BeginInvokeOnMainThread(() =>
                {
                    switch (args.PropertyName)
                    {
                        case "Title":
                            entry.Text = note.Title;
                            break;

                        case "Text":
                            editor.Text = note.Text;
                            break;
                    }
                });
        };

        // Handle the Entry and Editor TextChanged events.
        entry.TextChanged += (sender, args) =>
            {
                note.Title = args.NewTextValue;
            };

        editor.TextChanged += (sender, args) =>
            {
                note.Text = args.NewTextValue;
            };

        // Assemble page.
        this.Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 0);

        this.Content = new StackLayout
        {
            Children =
            {
                new Label
                {
                    Text = "Title:"
                },
                entry,
                new Label
                {
                    Text = "Note:"
                },
                editor,
                new StackLayout
                {
                    Orientation = StackOrientation.Horizontal,
                    Children =
                    {
                        saveButton,
                        loadButton
                    }
                }
            }
        };
    }

    void OnSaveButtonClicked(object sender, EventArgs args)
    {
        note.Save(FILENAME);
        loadButton.IsEnabled = true;
    }

    void OnLoadButtonClicked(object sender, EventArgs args)
    {
        note.Load(FILENAME);
    }
}