MessagingCenter – Xamarin.Forms

Publicado em por Juliano Custódio em Xamarin, Xamarin.Forms

Neste artigo irei demonstrar como você pode utilizar o MessagingCenter em suas aplicações Xamarin.Forms.

 

O que é o MESSAGINGCENTER ? 

De uma forma bem simplista, o MessagingCenter é um serviço de mensagens, que permite você enviar e receber mensagens de diferentes partes da sua aplicação sem que essas partes se “conheçam”.

Ele possui basicamente três métodos importantes, sendo eles:

  • Subscribe – método que “escuta” as mensagens.
  • Send – método que envia uma mensagem.
  • Unsubscribe – método que para de “escutar” as mensagens.

Ainda não ficou claro ?
Sem problemas, vai fazer mais sentido no exemplo a seguir.

 

Layout

Antes de começar a implementar o MessagingCenter, crie uma TabbedPage e duas ContentPages. 

  • MainPage – TabbedPage
  • AddPage – ContentPage
  • ListPage – ContentPage

 

MainPage.xaml

Observe que além das duas páginas, foi adicionado um ToolbarItem, ele será um contador para os itens. 

screen-shot-2018-11-24-at-23-47-231
 

<?xml version="1.0" encoding="utf-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms&quot;
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml&quot;
xmlns:local="clr-namespace:DemoMessagingCenter"
x:Class="DemoMessagingCenter.MainPage"
BarBackgroundColor="#2196F3"
BarTextColor="White"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.ToolbarPlacement="Bottom">
<TabbedPage.ToolbarItems>
<ToolbarItem x:Name="ContItem" Text="0"/>
</TabbedPage.ToolbarItems>
<local:AddPage Title="Add"/>
<local:ListPage Title="List"/>
</TabbedPage>
view raw MainPage.xaml hosted with ❤ by GitHub

 

AddPage.xaml

Essa página será responsável por adicionar um novo item, para isso adicione um Entry e um Button. 

simulator-screen-shot-iphone-xs-max-2018-11-24-at-23-39-57

 

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms&quot;
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml&quot;
x:Class="DemoMessagingCenter.AddPage">
<ContentPage.Content>
<StackLayout Margin="10">
<Entry Placeholder="Item" x:Name="EntryItem"/>
<Button Clicked="Button_Clicked"
Text="Add"
BackgroundColor="#2196F3"
TextColor="White"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
view raw AddPage.xaml hosted with ❤ by GitHub

 

 

ListPage.xaml

Essa página irá listar os itens adicionados.

Simulator Screen Shot - iPhone XS Max - 2018-11-25 at 00.08.14.png

 

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms&quot;
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml&quot;
x:Class="DemoMessagingCenter.ListPage">
<ContentPage.Content>
<StackLayout Margin="10">
<ListView x:Name="ListItem" Footer=""/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
view raw ListPage.xaml hosted with ❤ by GitHub

 

 

Utilizando o MESSAGINGCENTER

Message.cs

Como iremos trabalhar com envio de mensagens, comece criando a classe Message em seu projeto compatilhado, ela terá as propriedades Title e Value.

using System;
namespace DemoMessagingCenter
{
public class Message
{
public string Title { get; set; }
public string Value { get; set; }
}
}
view raw Message.cs hosted with ❤ by GitHub

 

AddPage.xaml.cs

Quando clicado no botão para adicionar um novo item, envie uma mensagem utilizando o método Send do MessagingCenter, passando como parametro um objeto do tipo Message e uma mensagem. Neste caso a mensagem foi “AddItem”, essa mensagem será utilizada depois pelo método subscribe.

using System;
using Xamarin.Forms;
namespace DemoMessagingCenter
{
public partial class AddPage : ContentPage
{
public AddPage()
{
InitializeComponent();
}
void Button_Clicked(object sender, System.EventArgs e)
{
if (!String.IsNullOrWhiteSpace(EntryItem.Text))
{
MessagingCenter.Send(new Message { Title = "New Item", Value = EntryItem.Text }, "AddItem");
}
}
}
}
view raw AddPage.xaml.cs hosted with ❤ by GitHub

 

ListPage.xaml.cs

Utilize agora o método Subscribe para “escutar” todas as mensagens que contenha “AddItem”. Neste exemplo estou utilizando o Callback para adicionar o item na lista, o item no caso é o objeto message.

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace DemoMessagingCenter
{
public partial class ListPage : ContentPage
{
ObservableCollection<string> list = new ObservableCollection<string>();
public ListPage()
{
InitializeComponent();
ListItem.ItemsSource = list;
MessagingCenter.Subscribe<Message>(this, "AddItem", message => {
list.Add(message.Value);
});
}
}
}
view raw ListPage.xaml.cs hosted with ❤ by GitHub

 

MainPage.xaml.cs

E por último, utilize o método Subscribe também na MainPage para atualizar o totalizador no ToolbarItem. 

using Xamarin.Forms;
namespace DemoMessagingCenter
{
public partial class MainPage : TabbedPage
{
int cont = 0;
public MainPage()
{
InitializeComponent();
MessagingCenter.Subscribe<Message>(this, "AddItem", message => {
cont++;
ContItem.Text = cont.ToString();
});
}
}
}
view raw MainPage.xaml.cs hosted with ❤ by GitHub

 

Unsubscribe

Caso você venha a ter a necessidade de parar de “escutar” uma determinada mensagem, utilize o método Unsubscribe como demonstrado a seguir.

MessagingCenter.Unsubscribe<Message>(this, "AddItem");
view raw Unsubscribe.cs hosted with ❤ by GitHub

 

Plataformas

Não ficamos presos apenas dentro de nosso projeto compartilhado, também podemos enviar ou “escutar” uma mensagem em nossos projetos especificos de cada plataforma. Para melhor exemplificar, a seguir irei demonstrar como “escutar” a mensagem e apresentar uma Native Message de acordo com cada plataforma.

Android

using Android.App;
using Android.Widget;
using Android.Content.PM;
using Android.OS;
using Xamarin.Forms;
namespace DemoMessagingCenter.Droid
{
[Activity(Label = "DemoMessagingCenter", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
MessagingCenter.Subscribe<Message>(this, "AddItem", message => {
ShowAlert("Item adicionado");
});
base.OnCreate(savedInstanceState);
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
LoadApplication(new App());
}
public void ShowAlert(string message)
{
Toast.MakeText(ApplicationContext, message, ToastLength.Long).Show();
}
}
}
view raw MainActivity.cs hosted with ❤ by GitHub

 

iOS

using Foundation;
using UIKit;
using Xamarin.Forms;
namespace DemoMessagingCenter.iOS
{
[Register("AppDelegate")]
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
LoadApplication(new App());
MessagingCenter.Subscribe<Message>(this, "AddItem", message => {
ShowAlert("Item adicionado", 1);
});
return base.FinishedLaunching(app, options);
}
UIAlertController alert;
NSTimer alertDelay;
void ShowAlert(string message, double seconds)
{
alertDelay = NSTimer.CreateScheduledTimer(seconds, (obj) =>
{
DismissMessage();
});
alert = UIAlertController.Create(null, message, UIAlertControllerStyle.Alert);
UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(alert, true, null);
}
void DismissMessage()
{
if (alert != null)
{
alert.DismissViewController(true, null);
}
if (alertDelay != null)
{
alertDelay.Dispose();
}
}
}
}
view raw AppDelegate.cs hosted with ❤ by GitHub

 

Resultado

iOS

ezgif.com-gif-maker

 

Android

ezgif.com-video-to-gif

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

Publicado por Juliano Custódio

É formado em Análise e Desenvolvimento de Sistemas pela Faculdade de Tecnologia de Sorocaba, Solutions Architect at GFT Brasil, Consultor Xamarin, Microsoft MVP, faz parte da lista de autores do Planet Xamarin, fundador da comunidade Xamarin Sorocaba, palestrante e escreve artigos sobre Xamarin.

3 comentários em “MessagingCenter – Xamarin.Forms”

  2. Juliano muito obrigado pelo artigo. Os outros que eu achei na internet foram implementados de uma maneira mais complicada. Testei esse seu exemplo e funcionou perfeitamente!

    Curtir

    Responder

Deixe um comentário