52 Weeks of Xamarin: Week 10 – The UI for our database program

Last week we created the code to add and find a “person” in our SQLite database.  This PersonDBUIweek we’ll finish up by creating the View and the ViewModel.

The View is where most of the action is, in this small demo project.  We’ll have two views: one to capture the information and one to display it (see figure).

Create a page named EnterPerson.xaml to capture the user name.  The user interface is very simple: there is a label to indicate that we are capturing a new person’s name, two entry boxes: one for the first and one for the last name, and three buttons: one for save, one for cancel and one for review that takes you to the second page.

Here is the XAML:

 <?xml version="1.0" encoding="UTF-8"?>
 <ContentPage
   xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   x:Class="DataBases.EnterPerson">
   <ContentPage.Content>
     <StackLayout
       Padding="20">
       <Label
         Text="New Person"
         TextColor="Blue"
         FontSize="18" />
       <Entry
         x:Name="FirstName"
         Placeholder="First Name"
         WidthRequest="150" />
       <Entry
         x:Name="LastName"
         Placeholder="Last Name"
         WidthRequest="150" />
       <StackLayout
         Orientation="Horizontal"
         HorizontalOptions="Center">
         <Button
           BackgroundColor="Green"
           TextColor="White"
           WidthRequest="75"
           Text="Save"
           Clicked="OnSave" />
         <Button
           BackgroundColor="Red"
           WidthRequest="75"
           TextColor="White"
           Text="Cancel"
           Clicked="OnCancel" />
         <Button
           BackgroundColor="Blue"
           WidthRequest="75"
           TextColor="White"
           Text="Review"
           Clicked="OnReview" />
       </StackLayout>
     </StackLayout>
   </ContentPage.Content>
 </ContentPage>

Code Behind and View Model

The code-behind that goes with this has quite a bit of work that could be pushed into the ViewModel, but which I’ve kept where it is for the sake of simplicity  (though I do use the ViewModel for saving the new person).

We begin, in the constructor by setting up…

 public partial class EnterPerson : ContentPage {
     private EnterPersonViewModel vm;
     private int updateID = 0;
 
     public EnterPerson() {
         vm = new EnterPersonViewModel();
         BindingContext = vm;
         InitializeComponent();
     }

…or, if we have an id, by obtaining the person for that ID:

 public EnterPerson(int id) {
     vm = new EnterPersonViewModel();
     BindingContext = vm;
     InitializeComponent();
     Person Person = App.Database.GetPerson(id);
     FirstName.Text = Person.FirstName;
     LastName.Text = Person.LastName;
     updateID = id;
 }
 

The OnCancel method just clears out the controls,

 public void OnCancel(object o, EventArgs e) {
     Clear();
 }
private void Clear() {
     FirstName.Text = LastName.Text = String.Empty;
 }
 

And the OnSave method delegates the work of saving the the ViewModel (shown below).  The Review button moves us to the ListPeoplePage (not seen yet),

 public void OnReview(object o, EventArgs e) {
     Clear();
     Navigation.PushAsync(new ListPeoplePage());
 }

Here is the ViewModel,

 public class EnterPersonViewModel {
 
     public void AddPerson(string firstName,
                           string lastName, 
                           int updateID) {
         var newPerson = new Person {
             FirstName = firstName,
             LastName = lastName,
             ID = updateID,
         };
         App.Database.SavePerson(newPerson);
 
     }
 }
 

You can see that it receives data from the page and adds that data (as a Person object) to the database.

The List People Page

The ListPeoplePage displays all the people in the database in a list, using a data template to dictate how they should appear (see image at top).  Here is the XAML

 <?xml version="1.0" encoding="UTF-8"?>
 <ContentPage
   xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   x:Class="DataBases.ListPeoplePage">
   <ContentPage.Content>
     <StackLayout
       Padding="30"
       Spacing="1">
       <Label
         Text="People"
         FontSize="18"
         TextColor="Blue" />
       <ListView
         x:Name="PeopleList">
         <ListView.ItemTemplate>
           <DataTemplate>
             <ViewCell>
               <ViewCell.View>
                 <StackLayout
                   Padding="5"
                   Spacing="1">
                   <Label
                     x:Name="FirstNameDisplay"
                     Text="{Binding FirstName}"
                     FontSize="12"
                     TextColor="Red" />
                   <StackLayout
                     Orientation="Horizontal">
                     <Label
                       Text="LastName:"
                       FontSize="10" />
                     <Label
                       Text="{Binding LastName}"
                       FontSize="10" />
                   </StackLayout>
                 </StackLayout>
               </ViewCell.View>
             </ViewCell>
           </DataTemplate>
         </ListView.ItemTemplate>
       </ListView>
     </StackLayout>
   </ContentPage.Content>
 </ContentPage>

Notice that the FirstName and LastName use data binding.  Also notice that the ItemsSource is not identified.  This is done in an override of OnAppearing in the code behind,

 protected override void OnAppearing() {
     base.OnAppearing();
     PeopleList.ItemsSource = App.Database.GetPeople();
 }
 

We saw GetPeople last week, but to review quickly, that method looks like this:

 public IEnumerable<Person> GetPeople() {
     lock (locker) {
         return (from c in database.Table<Person>()
                select c).ToList();
     }
 }
 

The net effect is that we get all the people from the database, and display them in a list.

 

 

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Xamarin. Bookmark the permalink.

One Response to 52 Weeks of Xamarin: Week 10 – The UI for our database program

  1. Pingback: Adam J Wolf: Weekly Xamarin Newsletter Issue #62 | XamGeek.com

Leave a Reply

Your email address will not be published.