Taking the Red Pill

One of my favorite movies is The Matrix because it has so many software development themes in it. For the uninformed The Matrix is an artificial world set up by machines powered by the energy of humans who “think” they are in the real world. The main character is given a choice early on in the movie. If he takes the blue pill the story ends and he goes on living in the artificial world and that would make for a very dull movie. Of course, he takes the the red pill. He wakes up and shortly there after the machines flush him out of their system, where he lands in a body of water where lots of waste is dumped. That moment describes me as he is flailing  around in a water using muscles that have only worked in his imagination so too I have been flailing around in the cloud. But after a month of constant education and trials by fire. I have my path forward and several blog posts are in the making.

At the end of my last blog post I had successfully set up an api function call in the cloud that retrieved data. I then created more functions for detail data. I now need the mobile app to consume the data and display it on a page. This was a big can of worms, and not as straight forward as I thought. When I was doing my proof of concept pages I “hard wired” the data for the page. In real life, Azure Functions are asynchronous and XAML pages display before I can get the data back from Azure. As illustrated in the Mobile App Page image. The page loads and a split second later the data arrives from the Azure Function and the form is updated. XAML (think html for Xamarin pages) is mostly event driven by using “Commands” (fancy words for delegates) to execute code. This did not come together as easy as I thought. In a nutshell a Xamarin form page hosts controls, like the Combo Box seen in the image. My control looks like the following:

  <cbx:SfComboBox
    x:Name="cbxCellers" 
    Margin="10,0,0,0"
    DataSource="{Binding CellarListItems}"
    DropDownItemHeight="30"
    HeightRequest="40"
    ItemTemplate="{StaticResource itemTemplate}"
    SelectedItem="{Binding SelectedCellarListItem, Mode=OneWay}"
    SelectedValuePath="Text"
    SelectionChanged="cbxCellers_SelectionChanged"
    Text="{Binding Text, Mode=OneWay}"
    Watermark="Please Select a Cellar..." >
  </cbx:SfComboBox>

In the code above the combo box gets its data from the view model property CellarListItems. In the C# code behind for this page we see the following:

  HomeViewModel view;

  public HomePage()
  {
    InitializeComponent();
    BindingContext = view = new HomeViewModel();
    view.LoadCellarsAndList.ExecuteAsync();         
  }

And in the View Model we have an Async Command (LoadCellarsAndList) which executes the method PopulateCellarListItemsAndCellarListAsync when called. It is defined as follows:

public class HomeViewModel : BaseViewMode
{
  public IAsyncCommand LoadCellarsAndList { get; private set; }
  public HomeViewModel()
  {
    ...
    LoadCellarsAndList = new 
    AsyncCommand(()=>PopulateCellarListItemsAndCelllarListAsync(),
      ()=>CanExecute());
  }
  ...
  private async Task PopulateCellarListItemsAndCelllarListAsync()
  {
    try
    {
      IsBusy = true;
      var listCellarSummaryModel  = await WineStore.GetCellarsAsync();

The Base View Model has a Service class called WineStore that makes the call to Azure to get the data. Note the Dependency Injection here. We will get to that another day.

public class BaseViewModel : INotifyPropertyChanged
{
    public IWineStore WineStore => DependencyService.Get<IWineStore>();
  ...

The service class WineStore is:

HttpClient client;
...
public async Task<ObservableCollection<CellarSummaryModel>> GetCellarsAsync(bool 
  forceRefresh = false)
{
   var listofCellars = new ObservableCollection<CellarSummaryModel>();
   var response = await client.GetAsync(cellarSummaryUri);

Have I lost you yet? If not you’re a better programmer than me. Let me know in your “gentle” and “civil” comment. Finally, the cellarSummaryUri is “similar” to the example link you see in my previous blog, but, why it is not the same Uri is also another story for another day.