dcsimg
December 11, 2017
Hot Topics:

Xamarin Forms: Refresh Data Using MessagingCenter

  • September 22, 2017
  • By Uma Narayanan
  • Send Email »
  • More Articles »

When developing mobile applications, we come across scenarios where there is a requirement to display a list of cart items and there is a page where we can add items to the cart. Items that are added to the detail page need to be refreshed on the cart list. The list can be refreshed whenever the view appears. However, loading the data every time the view appears may not be the best way to do it because it will make a call to the server when not required. In this article, we will use MessagingCenter's publish and subscribe model to refresh the cart data.

Description of the MessagingCenter Example

We will create a Xamarin Forms application with any target platforms—Android/iOS. Because MessagingCenter is platform independent, the code is required only on the Forms project. We will use the FreshMVVM pattern to implement the solution. In this sample app, we create a page that displays the list of available colors and another page to add colors to the list.

Xamarin Forms Level Changes

In the Xamarin Forms project, add two files: 'SampleAppPage.Xaml' and 'AddColorsPage.Xaml', both of type 'Forms ContentPage Xaml'. Also, add two new class files named 'SampleAppPageModel.cs' and 'AddColorsPageModel.cs'. 'SampleAppPage.Xaml' displays a list of colors in a list view. 'AddColorsPage.Xaml' is the page where we can add new color names to the list.

SampleAppPage.Xaml changes:

1. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      xmlns:local="clr-namespace:SampleApp"
      x:Class="SampleApp.SampleAppPage"
      x:Name="SampleAppPage">
      <StackLayout>
2. <ListView x:Name="colors"
         ItemsSource="{Binding ColorsList}">
      <ListView.ItemTemplate>
         <DataTemplate>
            <ViewCell>
               <StackLayout>
                  <Label Text="{Binding ColorName}" />
               </StackLayout>
            </ViewCell>
         </DataTemplate>
      </ListView.ItemTemplate>
   </ListView>
3. <Button Command="{Binding GoToColorsCommand}"
           Text="Add More Colors"/>
      </StackLayout>
   </ContentPage>

Line 2 binds to the collection 'ColorsList' of type 'CustomColor' to the ListView. The listview displays the name of the color. Line 3 creates a button that navigates to the 'AddColorsPage'.

The class definition of the CustomColor class is shown below:

   public class CustomColor
   {
      public string ColorId { get; set; }
      public string ColorName { get; set; }
   }

Changes to 'SampleAppPageModel.cs'

The 'SampleAppPageModel' class inherits from class 'FreshBasePageModel' from 'FreshMVVM' and the 'INotifyPropertyChanged' interface.

public class SampleAppPageModel: FreshBasePageModel,
   INotifyPropertyChanged
{
   ....
}

In this class, we define a Command to navigate to the 'AddColorsPage.Xaml'.

public ICommand GoToColorsCommand { get; set; }

The command 'GoToColorsCommand' is instantiated in the constructor, as demonstrated below:

public SampleAppPageModel()
{
   GoToColorsCommand = new Command(async () => await
      OnNavigateDetailPage());
}

and the method is defined as in the following code snippet:

private async Task OnNavigateDetailPage()
{
   await CoreMethods.PushPageModel<AddColorsPageModel>();
}

It uses FreshMVVMs 'CoreMethods.PushPageModel' to navigate to the 'AddColorsPage' page.

In the same class, we also define an Observable collection named '_colorsList'. Add a property changed event and invoke it from the observable collection property as defined next:

1. ObservableCollection<CustomColor> _colorsList;
   public event PropertyChangedEventHandler PropertyChanged;
   protected virtual void OnPropertyChanged(string propertyName)
   {
      PropertyChangedEventHandler handler = PropertyChanged;
      if (handler != null)
         handler(this, new PropertyChangedEventArgs(propertyName));
   }
2. public ObservableCollection<CustomColor> ColorsList
   {
      get { return _colorsList; }
      set
      {
          _colorsList = value;
      }
   }

Override the Init method to add some default values to the observable collection that will be displayed on the list view. We also define the MessagingCenter.Subscribe method to add the new color name to the list without reloading the main list page. The subscribe method is invoked when some information is published with the message 'ColorUpdate'.

public override void Init (object initData)
{
   ColorsList = new ObservableCollection<CustomColor>();

   ColorsList.Add(new CustomColor{
      ColorId =    "1",
      ColorName =  "Red"
   });
   ColorsList.Add(new CustomColor{
      ColorId =    "2",
      ColorName =  "Green"
   });
   ColorsList.Add(new CustomColor{
      ColorId =    "3",
      ColorName =  "Blue"
   });




   MessagingCenter.Subscribe<AddColorsPageModel,
         CustomColor>(this, "ColorUpdate",
            (page, updateColor) =>{

      if (updateColor != null)
      {
         ColorsList.Add(updateColor);

      }
   });
}

AddColorsPage.Xaml File Changes

In the AddColorsPage.Xaml file, add an entry and a button control. In the entry field, the user can add a new color name. The button is bound to 'AddColorsCommand'.

<StackLayout Orientation="Vertical">
   <Entry Placeholder="Add color name"
      Text="{Binding ColorName}" WidthRequest="100"></Entry>
   <Button Command="{Binding AddColorsCommand}"
      Text="Save Color"/>
</StackLayout>

AddColorsPageModel File Changes

The AddColorsPageModel file inherits from FreshBasePageModel and the class definition is as shown below:

1. public class AddColorsPageModel: FreshBasePageModel
   {
2.    public ICommand AddColorsCommand { get; set; }
3.    public string ColorName { get; set; }

4.    public AddColorsPageModel()
      {
         AddColorsCommand = new Command(async () =>
            await OnAddColors());
      }

5.    private async Task OnAddColors()
      {
         CustomColor color = new CustomColor();
         color.ColorId = DateTime.Today.Ticks.ToString();
         color.ColorName = ColorName;

         MessagingCenter.Send<AddColorsPageModel,
               CustomColor>(this, "ColorUpdate", color);
            await CoreMethods.PopToRoot(false);
         }
   }

Line 1 is the class name that inherits from the FreshBasePageModel. In Lines 2 and 3, two properties are declared. Line 4 instantiates the 'AddColorsCommand' object. Line 5 defines the 'OnAddColors' method, an implementation for the 'AddColorsCommand'. This method is invoked when the user clicks the 'Save Color' button on the 'AddColorsPage' page. In this method, the most important code is the 'MessagingCenter.Send' that broadcasts the message. This message is then received by the 'MessagingCenter.Subscribe' method defined in the 'Init' method of the 'SampleAppPageModel.cs'.

Summary

In this article, we implemented a couple of important features. One was the INotifyPropertyChanged and the observable collection that helps refreshing the list view when new color names are added. Another was implementing MessagingCenter's publish and subscribe pattern to pass the data from one page to the other when the messages match; in the preceding case, the message was 'ColorUpdate'. In real scenarios, the detail page will save the data to the backend and then broadcast the message to inform that a change has taken place. The subscriber then will call the backend to get the refreshed data.






Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date