Calling Web Services

In this project, you will build more onto our in-class WebServiceAndDatabaseDemo_PCL project that is using our local sample web service to get information about U.S. states.

1. To make it easier to switch between the various examples we're building into this app, please create a new ContentPage (non-XAML) called MenuPage and use this code:

   using System;
   
   using Xamarin.Forms;
   
   namespace WebServiceAndDatabaseDemo_PCL
   {
   	public class MenuPage : ContentPage
   	{
   		Button simpleStatesPageButton = null;
   		Button statesListPageButton = null;
   		Button singleStatePageButton = null;
   
   		public MenuPage ()
   		{
   			this.Title = "Menu";
   
   			this.simpleStatesPageButton = new Button () {
   				Text = "Simple"
   			};
   
   			this.statesListPageButton = new Button () {
   				Text = "States List"
   			};
   
   			this.singleStatePageButton = new Button () {
   				Text = "Single State"
   			};
   
   			this.Content = new StackLayout { 
   				Children = {
   					this.simpleStatesPageButton,
   					this.statesListPageButton,
   					this.singleStatePageButton
   				}
   			};
   
   			this.simpleStatesPageButton.Clicked += OnSimpleStatesPageButtonClicked;
   			this.statesListPageButton.Clicked += OnStatesListPageButtonClicked;
   			this.singleStatePageButton.Clicked += OnSingleStatePageButtonClicked;
   		}
   
   		private async void OnSimpleStatesPageButtonClicked (object sender, EventArgs e)
   		{
   			await this.Navigation.PushAsync (new SimpleStatesPage (), true);
   		}
   		
   		private async void OnStatesListPageButtonClicked (object sender, EventArgs e)
   		{
   			await this.Navigation.PushAsync (new StatesListPage (), true);
   		}
   		
   		private async void OnSingleStatePageButtonClicked (object sender, EventArgs e)
   		{
   			await this.DisplayAlert ("TODO", "Navigate to SingleStatePage", "OK");
   		}
   	}
   }
             

   Use this page wrapped in a NavigationPage as the main content for the app in the constructor of the App class:

   public App ()
   {
     // The root page of your application
     this.MainPage = new NavigationPage(new MenuPage());
   }

   Also, set the Title property to "Simple" on the SimpleStatesPage and to "States List" on the StatesListPage. This will help the user to know which page is currently being viewed. You can do this in code or in the XAML for the pages.

2. Add a new page called StateDetailsPage to show the details for a state when the item is selected from the ListView on the StatesListPage.

   • You can use XAML or code to construct this page.
   • Set the Title property for the StateDetailsPage page to the Name property of the current state.
   • Show the Abbreviation, Capital and DateOfStatehood properties on the page.
   • Make sure you deselect the item that was selected in the ListView.
   • Our Xamarin.Forms version of the in-class Todo app has an example of one way you could pass the data and an example of how to deselect the selected item from the ListView.
   • Hint: using data binding could make it easier to fill in the details on this page.

3. Add a new page called SingleStatePage where the user can pick a particular state to get just that state's data.

   • You can use XAML or code to construct this page.
   • Launch this page when the singleStatesPageButton on the MenuPage is clicked. (You should replace the "TODO" alert message with the code to make this happen).
   • You can use whatever kind of input control you want for allowing the user to pick the state, such as a simple text box or a Picker view.
   • Call the /xml/states/{abbreviation} endpoint of the sample web service to get the details for the selected state.
   • Show all of the returned properties to the user. You can show them on the SingleStatePage or on another page (could use your StateDetailsPage).
   • Either deserialize the web service response into an object or use LINQ to XML to get the properties for the state. Here's an example of how you could use LINQ to XML to read the properties into a StateViewModel object:

     /// <summary>
     /// Converts the raw response to a StateViewModel instance.
     /// </summary>
     /// <returns>A StateViewModel instance.</returns>
     /// <param name="data">The raw XML string.</param>
     private StateViewModel ConvertRawResponseToStateViewModel(string data)
     {
       StateViewModel state = null;
     
       if (!string.IsNullOrEmpty(data))
       {
         try
         {
           // Read the raw string into an XElement
           XElement xml = XElement.Parse (data);
     
           // Instantiate a viewmodel instance
           state = new StateViewModel();
     
           // Use LINQ to XML to get the data from the XML
           state.Name = xml.Element("Name") != null ? xml.Element("Name").Value : string.Empty;
           state.Abbreviation = xml.Element("Abbreviation") != null ? xml.Element("Abbreviation").Value : string.Empty;
           state.Capital = xml.Element("Capital") != null ? xml.Element("Capital").Value : string.Empty;
     
           // Web service has a typo in the DateOfStatehood element name; need to match it
           state.DateOfStatehood = xml.Element("DateOfStathood") != null ? xml.Element("DateOfStathood").Value : string.Empty;
         }
         catch
         {
           // If there's an error, set the viewmodel to null
           state = null;
         }
       }
     
       return state;
     }
                   

4. Please zip up and submit your updated WebServiceAndDatabaseDemo_PCL solution.