MessagingCenter – 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"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
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"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
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"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
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

2 comentários em “MessagingCenter – Xamarin.Forms

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s