Xamarin Forms - Usando o framework FreshMVVM - II
 Neste artigo vamos aplicar os recursos do framework FreshMVVM em uma aplicação Xamarin Forms.

No artigo anterior eu apresentei o framewok FreshMVVM e os seus principais recursos.

Veremos agora a aplicação dos recursos do FreshMVVM na prática em uma aplicação Xamarin Forms.

Como este é nosso primeiro contato com o FreshMVVM vamos criar um projeto bem simples para entender o seu funcionamento básico.

Então vamos lá...

recursos usados:

Criando um projeto Xamarin Forms no VS 2017

Abra o  VS 2017 Community e clique em New Project e a seguir escolha Cross Platform -> Mobile App (Xamarin.Forms) e informe o nome XF_FreshMVVM:

A seguir selecione a Plataforma, eu marquei somente Android, e escolha a estratégia de compartilhamento que será .NET Standard.

Clique no botão OK.

Pronto nosso projeto já esta criado. ( Atualmente(01/2019) a versão mais atual estável é a 3.5.0.16)

Vamos incluir agora a referência ao framework FreshMVVM em nosso projeto.

No menu Tools, clique em Nuget Package Manager e a seguir em Manage Nuget Packages for Solution;

Digite : FreshMVVM para localizar o pacote e a seguir marque o pacote e instale-o em todos os projetos:

Pronto ! agora já temos todos os recursos necessários nos projetos. Abaixo vemos a estrutura do projeto criado:

Para organizar o nosso projeto e seguir as convenções ditadas pelo FreshMVVM vamos criar duas pastas em nosso projeto via menu Project -> New Folder :

A seguir vamos mover a página MainPage para a pasta Pages.

Agora vamos criar uma outra página chamada DemoPage na pasta Pages via menu Project-> Add New Item e selecionando Xamarin Forms -> Content Page e informando DemoPage.xaml :

Agora seguindo a convenção do framework vamos criar duas páginas na pasta PageModels:

Usando a opção Project-> Add New Item e selecionando Xamarin Forms -> Content Page (C#) :

Ao final a estrutura do projeto deverá ficar conforme mostra a figura abaixo:

Temos agora que fazer um ajuste no código das páginas DemoPageModel e MainPageModel.

Elas devem possuir o mesmo namespace das páginas DemoPage e MainPage respectivamente e herdar da classe FreshBasePageModel.

A seguir vemos o código ajustado dessas páginas:

Não esqueça de alterar o namespaces nos arquivos DemoPage.xaml.cs e MainPage.xaml.cs também.

Vamos agora definir o código das páginas MainPage e DemoPage e a seguir das páginas MainPageModel e DemoPageModel respectivamente.

Definindo o código da MainPage e MainPageModel

Agora abra o arquivo MainPage.xaml e inclua as seguintes views usando um layout StackLayout:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF_FreshMVVM"
             x:Class="XF_FreshMVVM.MainPage"
             Title="MainPage">
        <StackLayout Orientation="Vertical"
                     VerticalOptions="CenterAndExpand" 
                     HorizontalOptions="CenterAndExpand"
                     Margin="0,0,0,10">

            <Label Text="{Binding MainPageLabel}" 
                   VerticalOptions="Center"       
                   HorizontalOptions="Center"/>

            <Button Text="Ira para Demo Page" 
                    VerticalOptions="Center" 
                    HorizontalOptions="FillAndExpand"
                    Command="{Binding GotoDemoPageCommand}"/>

        </StackLayout>
</ContentPage>

Nosso objetivo é exibir uma mensagem de texto na Label e definir um comando para navegar para a DemoPage.

Abra a página MainPageModel e inclua o seguinte código:

using FreshMvvm;
using System;
using Xamarin.Forms;

namespace XF_FreshMVVM
{
    public class MainPageModel : FreshBasePageModel
    {

        string _mainPageLabel = string.Empty;
        public string MainPageLabel
        {
            get
            {
                return _mainPageLabel;
            }
            set
            {
                if (_mainPageLabel != value)
                {
                    _mainPageLabel = value;
                    RaisePropertyChanged(nameof(MainPageLabel));
                }
            }
        }

        public override void Init(object initData)
        {
            base.Init(initData);
            MainPageLabel = "Bem-Vindo ao FreshMVVM!";
        }

        public override void ReverseInit(object returnedData)
        {
            base.ReverseInit(returnedData);
        }

        protected override void ViewIsAppearing(object sender, EventArgs e)
        {
            CoreMethods.DisplayAlert("Página esta surgindo", "", "Ok");
            base.ViewIsAppearing(sender, e);
        }

        protected override void ViewIsDisappearing(object sender, EventArgs e)
        {
            base.ViewIsDisappearing(sender, e);
        }

        public Command GotoDemoPageCommand
        {
            get
            {
                return new Command(async () =>
                {
                    await CoreMethods.PushPageModel<DemoPageModel>();
                });
            }
        }
    }
}

Vamos entender o código :

1- Definimos a propriedade MainPageLabel

        string _mainPageLabel = string.Empty;
        public string MainPageLabel
        {
            get
            {
                return _mainPageLabel;
            }
            set
            {
                if (_mainPageLabel != value)
                {
                    _mainPageLabel = value;
                    RaisePropertyChanged(nameof(MainPageLabel));
                }
            }
        }

Observe que utilizamos RaisePropertyChanged ao invés de OnPropertyChanged para indicar alteração no valor da propriedade.

2- Usamos o método Init() para atribuir um valor ao nosso objeto e ReverseInit() para quando ele for recolhido:

        public override void Init(object initData)
        {
            base.Init(initData);
            MainPageLabel = "Bem-Vindo ao FreshMVVM!";
        }

        public override void ReverseInit(object returnedData)
        {
            base.ReverseInit(returnedData);
        }

3- Os eventos ViewIsAppering() e ViewIsDisappearing() permitem tratar os eventos das páginas:

        protected override void ViewIsAppearing(object sender, EventArgs e)
        {
            CoreMethods.DisplayAlert("Página esta surgindo", "", "Ok");
            base.ViewIsAppearing(sender, e);
        }

        protected override void ViewIsDisappearing(object sender, EventArgs e)
        {
            base.ViewIsDisappearing(sender, e);
        }

4- Implementamos o comando GotoDemoPageCommand para navegar para a página DemoPageModel:

         public Command GotoDemoPageCommand
        {
            get
            {
                return new Command(async () =>
                {
                    await CoreMethods.PushPageModel<DemoPageModel>();
                });
            }
        }

Note que usamos a propriedade CoreMethods e PushPageModel<> para navegar para a página DemoPageModel.

Definindo o código da DemoPage e DemoPageModel

Agora vamos definir o código da DemoPage.xaml  usando um layout StackLayout e definindo a seguinte view:

<?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="XF_FreshMVVM.Pages.DemoPage"
             Title="DemoPage">

    <ContentPage.Content>

        <StackLayout Orientation="Vertical"
                     VerticalOptions="CenterAndExpand" 
                     HorizontalOptions="CenterAndExpand">
            <Button Text="Recolher Pagina" 
                    VerticalOptions="Center" 
                    HorizontalOptions="FillAndExpand"
                    Command="{Binding GoBackCommand}"/>
        </StackLayout>
    </ContentPage.Content>

</ContentPage>

Aqui temos apenas um Button para retonar à pagina inicial usando um Command que iremos implementar a seguir.

Na página DemoPageModel inclua o seguinte código:

using FreshMvvm;
using System;
using Xamarin.Forms;
namespace XF_FreshMVVM
{
    public class DemoPageModel : FreshBasePageModel
    {
        public override void Init(object initData)
        {
            base.Init(initData);
        }
        public override void ReverseInit(object returnedData)
        {
            base.ReverseInit(returnedData);
        }
        protected override void ViewIsAppearing(object sender, EventArgs e)
        {
            base.ViewIsAppearing(sender, e);
        }
        protected override void ViewIsDisappearing(object sender, EventArgs e)
        {
            base.ViewIsDisappearing(sender, e);
        }
        public Command GoBackCommand
        {
            get
            {
                return new Command(async () =>
                {
                    await CoreMethods.PopPageModel();
                });
            }
        }
    }
}

O código é praticamente o mesmo que o usando anteriormente e dispensa comentários.

Definindo a página principal e navegação inicial

Para inicializar a navegação FreshMVVM precisamos definir a MainPage usando o contâiner de navegação do framework usando o código a seguir no arquivo App.cs :

var page = FreshPageModelResolver.ResolvePageModel<MainPageModel>();
var navegacao = new FreshNavigationContainer(page);
MainPage = navegacao;

Cabe destacar os métodos usados para realizar a navegação entre as páginas:

  1. Usamos PushPageModel para empurrar a pagina na pilha de navegação ou ir para a próxima pagina ao invés de usar PushAsync:

    await CoreMethods.PushPageModel<DemoPageModel>();  
    Navigation.PushAsync(new DemoPage());  
  1. Usamos PopPageModel para recolher a página da pilha de navegação aon invés de PopAsync:
     
    await CoreMethods.PopPageModel();  
    Navigation.PopAsync();  
  1. Usamos  PopToRoot para navegar a partir de qualquer página para a página raiz ao invés de PopToAsync:
     
    await CoreMethods.PopToRoot(animate:false);  
    Navigation.PopToRootAsync(); 

Executando o projeto iremos obter o seguinte resultado:

Em outro artigo iremos criar uma aplicação mais funcional usando o FreshMVVM.

Pegue o código do projeto compartilhado aqui :  XF_FreshMVVM.zip

"Combati o bom combate, acabei a carreira, guardei a fé.
Desde agora, a coroa da justiça me está guardada, a qual o Senhor, justo juiz, me dará naquele dia;
e não somente a mim, mas também a todos os que amarem a sua vinda. "
2 Timóteo 4:7,8

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti