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

2015-10-14 14:00:04来源:作者:人点击

Last weekwe created the code to add and find a “person” in our SQLite database. This week 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 tocapture 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.

Also in 52 Weeks of Xamarin 52 Weeks of Xamarin: Week 1 52 Weeks of Xamarin: Week 2 – Starting the project 52 Weeks of Xamarin: Week 3- Events in Xamarin.Forms 52 Weeks of Xamarin: Week 4 – Creating the Model and Saving 52 Weeks of Xamarin: Week 5 – Diving in the deep end 52 Weeks of Xamarin: Week 6 – Starting xUnit Testing 52 Weeks of Xamarin: Week 7 – First Unit Tests 52 Weeks of Xamarin: Week 8 – Testing the View Model 52 Weeks of Xamarin: Week 9 – Databases part 1 52 Weeks of Xamarin: Week 10 – The UI for our database program

View the entire series.