Xamarin Guide 2: Create the Model and the Data Source

This Xamarin Workshop Guide was created for the The Portuguese National Meeting of IT Students (ENEI) by Sara Silva and the original content is available here. With the goal to extend it to the global community, it was published in a new project called Xam Community Workshop with the main goal for any developer or user group to be able to customize it for their events.

Before reading this article you must read:

• Xamarin Guide 1: Create a Xamarin Forms Project

Create the model and data source

The model

Before creating the UI, you need to define the model, for it you will define:

• Session: class that defines a session from a 1010 ENEI event
• Speaker: class that defines a speaker

Each session should have a speaker (in real scenarios you can have more than one!). Figure 1 defines the class diagram from the model:


Figure 1: The model

In the ENEI.SessionsApp project create the Session and the Speaker class in a “Model” folder, as described in Figures 2 and 3:


Figure 2: Creating new Folder


Figure 3: Adding new file

The Session class can be defined by:

public class Session : INotifyPropertyChanged
    {
        private int _numLikes;
        private Speaker _speaker;
        private string _date;
        private string _description;
        private string _name;
        private bool _isFavorite;
        private string _schedule;
        private string _room;

        public string Name
        {
            get { return _name; }
            set { _name = value; OnPropertyChanged(); }
        }

        public string Description
        {
            get { return _description; }
            set { _description = value; OnPropertyChanged(); }
        }

        public string Date
        {
            get { return _date; }
            set { _date = value; OnPropertyChanged(); }
        }

        public int NumLikes
        {
            get { return _numLikes; }
            set { _numLikes = value; OnPropertyChanged();}
        }

        public Speaker Speaker
        {
            get { return _speaker; }
            set { _speaker = value; OnPropertyChanged(); }
        }

        public bool IsFavorite
        {
            get { return _isFavorite; }
            set { _isFavorite = value; OnPropertyChanged();}
        }

        public string Schedule
        {
            get { return _schedule; }
            set { _schedule = value; OnPropertyChanged(); }
        }

        public string Room
        {
            get { return _room; }
            set { _room = value; OnPropertyChanged(); }
        }

        public string Details
        {
            get { return string.Format("{0} | {1} | Sala {2} ", Date, Schedule, Room); }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            var handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }

And the Speaker class can be defined by:

 

public class Speaker : INotifyPropertyChanged
    {
        private string _name;
        private string _imageUrl;

        public string Name
        {
            get { return _name; }
            set { _name = value; OnPropertyChanged();}
        }

        public string ImageUrl
        {
            get { return _imageUrl; }
            set { _imageUrl = value; OnPropertyChanged(); }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            var handler = PropertyChanged;
            if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }

Both classes implement the interface INotifyPropertyChanged that allows notification of the UI about changes in the model and this way the data will be updated in the UI (when it is used in the bindings).

The data source

The data source will define the data that will be loaded by the application, at this moment you will have hard-coded data, but in real scenarios you should have a file, database or services to provide it.

Get the SessionsDataSource class here, or create your own data.