Lab 04

Maratona Xamarin
Aderindo a servios REST com Xamarin.Forms
Laboratrio
Aderindo a servios REST com
Xamarin.Forms
Verso: 1.0.0
Dezembro de 2016
Miguel Muoz Serafn

@msmdotnet
Pgina 1 de 26 Suporte: mmunoz@mail.ticapacitacion.com

Maratona Xamarin
CONTEDO
INTRODUO
EXERCCIO 1: CONSUMINDO UM SERVIO WEB RESTFUL

Tarefa 1. Criar uma aplicao Xamarin.Forms.
Tarefa 2. Instalar os pacotes NuGet.
Tarefa 3. Criar o Modelo.
Tarefa 4. Criar o ViewModel.
Tarefa 5. Criar a Vista.
Tarefa 6. Testar a aplicao.
Tarefa 7. Adicionar a pgina de detalhes.
RESUMO

Maratona Xamarin
Introduo
Integrar um servio Web dentro de uma aplicao um cenrio comum. Neste laboratrio, ser
demonstrada a forma de consumir um servio Web RESTful a partir de uma aplicao
Xamarin.Forms. A aplicao Xamarin.Forms ser desenvolvida para implementar o padro MVVM.
Objetivos
Ao finalizar este laboratrio, os participantes sero capazes de:
Implementar o padro MVVM em uma aplicao Xamarin.Forms.

Utilizar a classe HttpClient para consumir um servio Web RESTful a partir de uma aplicao
Xamarin.Forms.
Utilizar a classe JsonConvert para de serializar dados JSON a objetos .NET.
Requisitos
Para a realizao deste laboratrio necessrio contar com o seguinte:
Uma equipe de desenvolvimento com sistema operativo Windows 10 e Visual Studio 2015
Community, Professional ou Enterprise com a plataforma Xamarin.
Uma equipe Mac com a plataforma Xamarin.
Uma conexo Internet.
Tempo estimado para completar este laboratrio: 60 minutos.

Maratona Xamarin
Exerccio 1: Consumindo um servio

Web RESTful.
Neste exerccio ser criada uma aplicao Xamarin.Forms que consumir um servio Web RESTful. O
servio RESTful preparado para este laboratrio foi desenvolvido com ASP.NET Web API e expe
informao em formato JSON relacionada com o preo dos gatos mais caros do mundo.
A aplicao ser desenvolvida implementando o padro MVVM.
Tarefa 1. Criar uma aplicao Xamarin.Forms.
Nesta tarefa ser criada uma aplicao Xamarin.Forms utilizando Microsoft Visual Studio e o modelo
Blank App (Xamarin.Forms Portable).
1. Selecione a opo File > New > Project no Visual Studio.

2. No painel esquerdo da janela New Project selecione Visual C# > Cross-Platform.
3. Selecione o modelo Blank App (Xamarin.Forms Portable).

Maratona Xamarin
4. Fornea Cats como nome da soluo. Fornea tambm a localizao onde deseja criar a
soluo e clique em OK para cri-la.
5. Clique no boto OK do quadro de dilogo New Universal Windows Project para aceitar as
verses sugeridas para a aplicao UWP que ser criada.
6. Depois que a soluo com seus projetos for criada, selecione a opo Manage NuGet
Packages for Solution no menu de contexto do nome da soluo.
7. Clique na opo Updates para ver as atualizaes disponveis.

Maratona Xamarin
Visual Studio pode indicar que existem atualizaes para o pacote NuGet
Xamarin.Forms e todas suas unidades, porm, Xamarin.Forms est configurado
para dependncias de verses especficas. Portanto, embora o Visual Studio te
indique que existem novas verses disponveis de pacotes
Xamarin.Android.Support, Xamarin.Forms no necessariamente compatvel
com essas novas verses.
8. Selecione o pacote Xamarin.Forms e clique em Update para iniciar a atualizao.
provvel que voc ser solicitado para aceitar as alteraes e reiniciar o Visual Studio para
concluir a instalao.
Tarefa 2. Instalar os pacotes NuGet.
Dois pacotes Nuget so necessrios em nossa aplicao:
Microsoft.Net.Http. Este pacote proporciona uma interface de programao para aplicaes

baseadas em HTTP/REST. O pacote inclui a classe HttpClient que utilizada para enviar

Maratona Xamarin
peties sobre HTTP. Inclua tambm as classes HttpRequestMessage e

HttpResponseMessage para processar as mensagens HTTP.
Newtonsoft.Json. Este pacote um Framework que permite serializar e deserializar dados

em formato JSON. til para processar os dados que so enviados ou recebidos partir do
servio REST.
1. Selecione a opo Manage NuGet Packages do menu contextual do projeto PCL.

2. Na janela NuGet selecione a aba Browse.
3. No quadro de buscas escreva Microsoft.Net.Http, selecione o pacote Microsoft.Net.Http e

clique em Install para instalar o pacote NuGet.
4. Confirme as alteraes e o acordo de licenas quando for solicitado.

5. Aps a instalao do pacote, escreva no quadro de buscas Newtonsoft.Json, selecione o
pacote Newtonsoft.Json e clique em Install para instalar o pacote NuGet.
6. Confirme as alteraes quando for solicitado.

Maratona Xamarin
Tarefa 3. Criar o Modelo.
A aplicao obter do servio REST os dados das raas de gatos mais caras do mundo. Nesta tarefa
voc criar a classe modelo que te permitir armazenar os dados de uma raa de gato.
1. No projeto PCL acrescente um novo diretrio chamado Models.
2. Dentro do diretrio Models acrescente a classe Cat com as seguintes propriedades pblicas:
Nome Tipo Descrio

Id string Identificador nico de uma raa de gato.
Name string Nome da raa do gato.
Description string Descrio da raa do gato.
Price int Preo de um gato desta raa.
WebSite string URL do site na internet onde possvel encontrar mais
informaes sobre a raa de gato.
Image string URL da imagem de um gato desta raa.
O cdigo da classe ser similar ao seguinte:
public class Cat

{
public string Id { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public int Price { get; set; }
public string WebSite { get; set; }
public string Image { get; set; }
}
3. Dentro do diretrio Models acrescente uma nova classe pblica chamada Repository. Esta
classe conter a lgica de acesso aos dados da aplicao.

Maratona Xamarin
4. Acrescente o seguinte cdigo classe Repository para definir e implementar o mtodo

GetCats. Este mtodo ir retornar uma lista de dados obtidos a partir do servio REST.
public async Task<List<Cat>> GetCats()

{
List<Cat> Cats;
var URLWebAPI = "http://demos.ticapacitacion.com/cats";
using (var Client = new System.Net.Http.HttpClient())
{
var JSON = await Client.GetStringAsync(URLWebAPI);
Cats = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Cat>>(JSON);
}
return Cats;
}
Note que o mtodo est definido para executar-se de forma assncrona e que os dados so
obtidos a partir do servio http://demos.ticapacitacion.com/cats utilizando a classe
HttpClient. Os dados JSON obtidos so deserializados utilizando o mtodo DeserializeObject
do objeto JsonConvert.
Tarefa 4. Criar o ViewModel.
Nesta tarefa voc criar o ViewModel pela classe CatsViewModel. Esta classe proporcionar toda a
funcionalidade que necessita a Vista Xamarin.Forms principal da aplicao para mostrar os dados das
raas de gatos. O ViewModel conter a lista de objetos Cat e um mtodo que poder ser invocado
para obter a lista de objetos Cat do repositrio. Tambm conter uma propriedade booleana que
indicar se estamos obtendo os dados em uma tarefa de fundo (Background Task).
1. No projeto PCL acrescente um novo diretrio chamado ViewModels.

Maratona Xamarin
2. No diretrio ViewModels agregue a classe pblica chamada CatsViewModel.

3. Uma classe ViewModel deve ser capaz de notificar as mudanas que acontecerem em suas
propriedades atravs da implementao da interface INotifyPropertyChanged.
Acrescente ao incio do arquivo CatsViewModel.cs o seguinte cdigo para importar o espao
de nomes da interface INotifyPropertyChanged.
using System.ComponentModel;
4. Modifique a definio da classe CatsViewModel para indicar que implementa a interface

INotifyPropertyChanged.
public class CatsViewModel:INotifyPropertyChanged

{
}
INotifyPropertyChanged importante para a relao a dados em Frameworks MVVM. uma

interface que quando implementada permite a nossa Vista conhecer as alteraes do
ViewModel.
5. Com a ajuda do intellisense do Visual Studio implemente a interface
INotifyPropertyChanged.
Isto agregar a seguinte linha de cdigo:
public event PropertyChangedEventHandler PropertyChanged;
6. Acrescente o seguinte cdigo para definir um mtodo de ajuda chamado

OnPropertyChanged que lanar o evento PropertyChanged. Invocaremos este mtodo de
ajuda quando uma propriedade do ViewModel mudar.
private void OnPropertyChanged(

[System.Runtime.CompilerServices.CallerMemberName]
string propertyName = null) =>
PropertyChanged?.Invoke(this,
new PropertyChangedEventArgs(propertyName));
Observe que estamos aplicando o atributo CallerMemberName ao parmetro

propertyName. Este atributo permite obter o nome de membro da classe que invoca este
mtodo. Isso evitar que devemos especificar mediante cdigo o nome a propriedade
modificado no momento de utilizar este mtodo.

Maratona Xamarin
7. O seguinte passo criar uma propriedade que permita a vista determinar se o ViewModel se
encontra ocupado. Desta forma poderemos evitar realizar operaes duplicadas, como por
exemplo quando o usurio atualiza os dados mltiplas vezes.
Adicione o seguinte cdigo para criar o campo de respaldo da propriedade.
private bool Busy;
8. Adicione o seguinte cdigo para criar a propriedade IsBusy.
public bool IsBusy

{
get
{
return Busy;
}
set
{
Busy = value;
OnPropertyChanged();
}
}
Note que estamos invocando o mtodo OnPropertyChanged quando o valor da propriedade

muda. A infraestrutura de ligao do Xamarin.Forms se inscrever para nosso evento
PropertyChanged para que a interface de usurio seja notificada da mudana.
9. Adicione o seguinte cdigo para definir uma propriedade Cats que armazenar a lista de
objetos Cat.
public ObservableCollection<Cat> Cats { get; set; }
Note que estamos utilizando ObservableCollection pois esta classe tem suporte para eventos
CollectionChanged que ocorrem quando agregamos ou eliminamos elementos da coleo.
Isto muito til j que no temos que invocar ao mtodo OnPropertyChanged por cada
mudana nos elementos da coleo.
10. Agrega o seguinte cdigo ao incio do arquivo para importar o espao de nomes das classes
modelo da aplicao e da classe ObservableCollection.
using System.Collections.ObjectModel;
using Cats.Models;
11. Adicione o seguinte cdigo para definir o construtor do ViewModel. O cdigo inicializar a
propriedade Cats.
public CatsViewModel()
{
Cats = new ObservableCollection<Models.Cat>();
}

Maratona Xamarin
12. Adicione o seguinte cdigo para definir um mtodo assncrono chamado GetCats que obter
os dados das raas de gatos a partir do repositrio.
async Task GetCats()

{
}
13. Dentro do mtodo GetCats adicione o seguinte cdigo que permitir detectar se atualmente
o ViewModel se encontra ocupado obtendo os dados.
if(!IsBusy)
{
}
return;
14. Dentro do bloco if adicione o seguinte cdigo try/catch/finally.
Exception Error = null;

try
{
IsBusy = true;
}
catch (Exception ex)
{
Error = ex;
}
finally
{
IsBusy = false;
}
Note que estamos estabelecendo IsBusy a true e posteriormente a false quando iniciamos a
recuperao da informao a partir do repositrio e quando terminamos de obter os dados.
15. Adicione o seguinte cdigo dentro do bloco try para obter os dados do repositrio.
try
{
IsBusy = true;
var Repository = new Repository();
var Items = await Repository.GetCats();
}
16. Dentro do bloco try, debaixo do cdigo anterior, adicione o seguinte cdigo para limpar a
lista atual de objetos Cat e carreg-los a partir da coleo Items.
Cats.Clear();
foreach(var Cat in Items)
{
Cats.Add(Cat);
}

Maratona Xamarin
Se algo der errado, o bloco catch guardar a exceo e depois do bloco finally poderemos
mostrar uma mensagem emergente.
17. Adicione o seguinte cdigo logo aps do bloco finally para mostrar uma mensagem em caso
de que se tenha gerado uma exceo.
if (Error != null)
{
await Xamarin.Forms.Application.Current.MainPage.DisplayAlert(
"Error!", Error.Message, "OK");
}
O mtodo principal do ViewModel para obter os dados ter sido completado. Ao invs de invocar o
mtodo diretamente, o exporemos com um Command. Um objeto Command tem uma interface que
sabe qual mtodo invocar e tem uma forma opcional de descrever se o Command est habilitado.
18. Adicione o seguinte cdigo classe CatsViewModel para criar um novo comando chamado
GetCatsCommand.
public Command GetCatsCommand { get; set; }
19. Adicione o seguinte cdigo ao incio do arquivo para importar o espao de nomes da classe
Command.
using Xamarin.Forms;
20. Dentro do construtor de CatsViewModel adicione o seguinte cdigo para inicializar o

comando GetCatsCommand passando a ele dois mtodos: um para se invocar quando o
comando for executado e outro para determinar quando o comando estiver habilitado.
Ambos os mtodos esto implementados como expresses lambda.
GetCatsCommand = new Command(

async () => await GetCats(),
() => !IsBusy
);
A nica modificao que teremos que fazer para o caso em que o valor da propriedade
IsBusy mude. Neste caso, teremos que reavaliar a funo que determina se o comando est
habilitado.
21. Adicione o seguinte cdigo ao final do bloco set da propriedade IsBusy para invocar o
mtodo ChangeCanExecute do comando GetCatsCommand. Ao executar o mtodo
ChangeCanExecute, a funo que determina se o comando est habilitado ser reavaliada.
GetCatsCommand.ChangeCanExecute();

Maratona Xamarin
Tarefa 5. Criar a Vista.
Finalmente, hora de construir a interface de usurio Xamarin.Forms que constituir o elemento

View de nossa aplicao MVVM.
1. Adicione um diretrio Views na raiz do projeto PCL.
2. Dentro do diretrio Views adicione um novo elemento Forms Xaml Page chamado
CatsPage.xaml.
Para esta pgina adicionaremos controles alinhados verticalmente. Podemos utilizar um
controle StackLayout para fazer isso.
3. Substitua o elemento Label dentro de ContentPage pelo seguinte cdigo.
<StackLayout Spacing="0">
</StackLayout>
Este ser o contentor de onde todos os controles child sero colocados. Note que
especificamos que os controles child no tero espao entre eles.
4. Adicione o seguinte cdigo para criar um boto com uma ligaes ao comando
GetCatsCommand do ViewModel. O comando toma o lugar de um manipulador do evento
Clicked e ser executado quando o usurio tocar o boto.
<Button Text="Sincronizar" Command="{Binding GetCatsCommand}"/>
Abaixo do boto podemos mostrar um indicador para informar ao usurio quando a

aplicao estiver obtendo os dados do servidor. Para fazer isso, podemos utilizar um controle
ActivityIndicator e vincul-lo propriedade IsBusy do ViewModel.
5. Adicione o seguinte cdigo para definir o controle ActivityIndicator.
<ActivityIndicator IsRunning="{Binding IsBusy}" IsVisible="{Binding IsBusy}"/>
Utilizaremos um ListView que se vincule coleo Cats para mostrar todos os elementos.
Podemos utilizar uma propriedade especial chamada x.Name= para nomear qualquer
controle.
6. Adicione o seguinte cdigo para definir o elemento ListView.

Maratona Xamarin
<ListView x:Name="ListViewCats" ItemsSource="{Binding Cats}" >
</ListView>
Agora necessitamos descrever a forma em que sero mostrados os elementos da coleo.

Para fazer isto podemos utilizar um ItemTemplate que tenha um DataTemplate com uma
vista especfica. Xamarin.Forms possui algumas clulas (Cells) que podemos utilizar.
Utilizaremos ImageCell que tem uma imagem e duas linhas de texto.
7. Agrega o seguinte cdigo XAML dentro do ListView para definir a forma em que sero
mostrados os elementos da coleo Cats.
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell Text="{Binding Name}"
Detail="{Binding Price, StringFormat='{0:c} dlares'}"
ImageSource="{Binding Image}"/>
</DataTemplate>
</ListView.ItemTemplate>
8. Adicione o seguinte cdigo dentro da etiqueta de elemento ContentPage para definir um

alias ao espao de nomes do ViewModel e agregar um ttulo pgina.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Cats.Views.CatsPage"
xmlns:VM="clr-namespace:Cats.ViewModels"
Title="Cats">
9. Finalmente, adicione o seguinte cdigo XAML para definir o contexto de ligao especificado
nas propriedades dos controles agregados pgina.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Cats.Views.CatsPage"
xmlns:VM="clr-namespace:Cats.ViewModels"
Title="Cats">
<ContentPage.BindingContext>
<VM:CatsViewModel/>
</ContentPage.BindingContext>
Xamarin.Forms automaticamente carregar e mostrar a imagem a partir do servidor.
Tarefa 6. Testar a aplicao.
Antes de testar a aplicao, teremos que fazer algumas modificaes.
1. Abra o arquivo App.cs do projeto PCL.

Maratona Xamarin
2. Substitua o cdigo do construtor pelo seguinte.
public App()
{
// The root page of your application
var content = new Views.CatsPage();
MainPage = new NavigationPage(content);
Este cdigo o ponto de entrada da aplicao. O cdigo simplesmente cria uma instncia de
CatsPage e a envolve em uma pgina de navegao para que seja mostrada ao usurio.
3. Selecione o projeto Android como projeto de incio.
4. Execute a aplicao no emulador de sua preferncia. Ser exibida uma tela similar seguinte:
5. Toque o boto sincronizar. O indicador ser mostrado.

Maratona Xamarin
Depois de carregar os dados a partir do servio Web, ser mostrada uma tela similar
seguinte.
6. Encerre a aplicao e retorne ao Visual Studio.

7. Teste a aplicao nas demais plataformas. A seguinte imagem mostra a aplicao
executando-se no emulador de iOS.

Maratona Xamarin
A seguinte imagem mostra a aplicao executando-se no emulador Windows 10 Mobile.

Maratona Xamarin
Tarefa 7. Adicionar a pgina de detalhes.
Agora o momento para fazer alguma navegao e mostrar alguns detalhes dos dados.

Maratona Xamarin
1. Dentro do diretrio Views adicione um novo elemento Forms Xaml Page chamado
DetailsPage.xaml. Esta pgina permitir mostrar o detalhe de um elemento da lista
selecionado pelo usurio.
Tal como acontece com a pgina CatsPage, utilizaremos um StackLayout mas iremos coloc-
lo dentro de um ScrollView se houver muito texto a ser apresentado.
2. Substitua o elemento Label pelo seguinte cdigo.
<ScrollView Padding="10">
<StackLayout Spacing="10">
</StackLayout>
</ScrollView>
3. Dentro de StackLayout adicione agora o seguinte cdigo para definir controles e ligaes
para as propriedades do objeto Cat.
<Image Source="{Binding Image}" HeightRequest="200" WidthRequest="200"/>

<Label Text="{Binding Name}" FontSize="24"/>
<Label Text="{Binding Price, StringFormat='{0:c} dlares'}" TextColor="Red"/>
<Label Text="{Binding Description}" />
4. Adicione o seguinte cdigo para permitir ao usurio navegar no site Web do elemento
selecionado.
<Button Text="Ir al Sitio Web" x:Name="ButtonWebSite"/>
5. Salve as alteraes.
6. Abra o arquivo code-behind de DetailsPage.xaml chamado DetailsPage.xaml.cs.
7. Modifique o construtor da classe para que aceite como parmetro um objeto Cat que
representa o objeto selecionado pelo usurio.
public DetailsPage(Models.Cat selectedCat)

{
InitializeComponent();

Maratona Xamarin
8. Adicione o seguinte cdigo dentro da classe para declarar uma varivel que armazene os
dados do objeto Cat selecionado.
Models.Cat SelectedCat;
9. No construtor da classe, adicione o seguinte cdigo para armazenar os dados do elemento

selecionado e definir o contexto de ligao da pgina.
Models.Cat SelectedCat;
public DetailsPage(Models.Cat selectedCat)
{
this.SelectedCat = selectedCat;
BindingContext = this.SelectedCat;
}
10. Xamarin.Forms tem predefinidas algumas APIs interessantes para funcionalidade

multiplataforma, tal como abrir uma URL no navegador predeterminado.
No construtor da classe, adicione o seguinte cdigo para definir um manipulador do evento
Clicked do boto ButtonWebSite.
ButtonWebSite.Clicked += ButtonWebSite_Clicked;
11. Adicione o seguinte cdigo para implementar o manipulador do evento Clicked utilizando a
classe Device para invocar o mtodo OpenUri.
private void ButtonWebSite_Clicked(object sender, EventArgs e)
{
if (SelectedCat.WebSite.StartsWith("http"))
{
Device.OpenUri(new Uri(SelectedCat.WebSite));
}
}
12. Abra o arquivo code-behind de CatsPage.xaml chamado CatsPage.xaml.cs.

13. Adicione o seguinte cdigo dentro do construtor da classe para definir um manipulador do
evento ItemSelected do controle ListViewCats. Isto nos permitir ser informados quando um
elemento da lista for selecionado.
public CatsPage()
{
ListViewCats.ItemSelected += ListViewCats_ItemSelected;
}
14. Adicione o seguinte cdigo para implementar o manipulador do evento que permita navegar
na pgina DetailsPage.
private async void ListViewCats_ItemSelected(object sender,
SelectedItemChangedEventArgs e)
{

Maratona Xamarin
var SelectedCat = e.SelectedItem as Models.Cat;

if (SelectedCat != null)
{
await Navigation.PushAsync(new Views.DetailsPage(SelectedCat));
ListViewCats.SelectedItem = null;
}
}
O cdigo verifica se existe um elemento selecionado e depois utiliza a API predefinida

Navigation para colocar (push) uma nova pgina. Finalmente, o cdigo remove a seleo do
elemento.
15. Execute novamente a aplicao em algum dos emuladores da plataforma Android.
16. Toque o boto sincronizar.
17. Toque um dos elementos. Note que a pgina DetailsPage aparece mostrando o detalhe do
elemento selecionado.

Maratona Xamarin
18. Toque o boto Ir ao Site Web. Ser mostrada a pgina Web solicitada.
19. Encerre a aplicao e retorne ao Visual Studio.

Maratona Xamarin
20. Teste a aplicao nas demais plataformas. A seguinte imagem mostra a aplicao
executando-se no emulador de iOS.
A seguinte imagem mostra a aplicao executando-se em un emulador Windows 10 Mobile.

Maratona Xamarin

Maratona Xamarin
Resumen
Neste laboratrio voc desenvolveu uma aplicao Xamarin.Forms implementando o padro MVVM.
A aplicao consome um servio Web RESTful utilizando a classe HttpClient.
No laboratrio seguinte voc modificar o repositrio de dados para consumir os dados a partir de
uma aplicao backend hospedada em um Azure App Service do Microsoft Azure.
Quando tiver finalizado este laboratrio publique a seguinte mensagem no Twitter e Facebook:
Finalizei o #Lab04 da #MaratonaXamarin e conheo a forma de consumir um servio Web

RESTful a partir de aplicaes Xamarin.Forms implementando o padro MVVM!

Lab 04

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Lab 04

Hochgeladen von

Copyright:

Verfügbare Formate

Maratona Xamarin

Aderindo a servios REST com Xamarin.Forms

Miguel Muoz Serafn

Pgina 1 de 26 Suporte: mmunoz@mail.ticapacitacion.com

EXERCCIO 1: CONSUMINDO UM SERVIO WEB RESTFUL

Tarefa 2. Instalar os pacotes NuGet.

Tarefa 3. Criar o Modelo.

Tarefa 4. Criar o ViewModel.

Tarefa 5. Criar a Vista.

Tarefa 6. Testar a aplicao.

Tarefa 7. Adicionar a pgina de detalhes.

Pgina 2 de 26 Suporte: mmunoz@mail.ticapacitacion.com

Implementar o padro MVVM em uma aplicao Xamarin.Forms.

Tempo estimado para completar este laboratrio: 60 minutos.

Pgina 3 de 26 Suporte: mmunoz@mail.ticapacitacion.com

Exerccio 1: Consumindo um servio

A aplicao ser desenvolvida implementando o padro MVVM.

Tarefa 1. Criar uma aplicao Xamarin.Forms.

1. Selecione a opo File > New > Project no Visual Studio.

3. Selecione o modelo Blank App (Xamarin.Forms Portable).

Pgina 4 de 26 Suporte: mmunoz@mail.ticapacitacion.com

7. Clique na opo Updates para ver as atualizaes disponveis.

Pgina 5 de 26 Suporte: mmunoz@mail.ticapacitacion.com

8. Selecione o pacote Xamarin.Forms e clique em Update para iniciar a atualizao.

Tarefa 2. Instalar os pacotes NuGet.

Dois pacotes Nuget so necessrios em nossa aplicao:

Microsoft.Net.Http. Este pacote proporciona uma interface de programao para aplicaes

Pgina 6 de 26 Suporte: mmunoz@mail.ticapacitacion.com

peties sobre HTTP. Inclua tambm as classes HttpRequestMessage e

Newtonsoft.Json. Este pacote um Framework que permite serializar e deserializar dados

1. Selecione a opo Manage NuGet Packages do menu contextual do projeto PCL.

3. No quadro de buscas escreva Microsoft.Net.Http, selecione o pacote Microsoft.Net.Http e

4. Confirme as alteraes e o acordo de licenas quando for solicitado.

6. Confirme as alteraes quando for solicitado.

Pgina 7 de 26 Suporte: mmunoz@mail.ticapacitacion.com

Tarefa 3. Criar o Modelo.

1. No projeto PCL acrescente um novo diretrio chamado Models.

Nome Tipo Descrio

O cdigo da classe ser similar ao seguinte:

public class Cat

Pgina 8 de 26 Suporte: mmunoz@mail.ticapacitacion.com

4. Acrescente o seguinte cdigo classe Repository para definir e implementar o mtodo

public async Task<List<Cat>> GetCats()

Tarefa 4. Criar o ViewModel.

1. No projeto PCL acrescente um novo diretrio chamado ViewModels.

Pgina 9 de 26 Suporte: mmunoz@mail.ticapacitacion.com

2. No diretrio ViewModels agregue a classe pblica chamada CatsViewModel.

4. Modifique a definio da classe CatsViewModel para indicar que implementa a interface

public class CatsViewModel:INotifyPropertyChanged

INotifyPropertyChanged importante para a relao a dados em Frameworks MVVM. uma

Isto agregar a seguinte linha de cdigo:

public event PropertyChangedEventHandler PropertyChanged;

6. Acrescente o seguinte cdigo para definir um mtodo de ajuda chamado

private void OnPropertyChanged(

Observe que estamos aplicando o atributo CallerMemberName ao parmetro

Pgina 10 de 26 Suporte: mmunoz@mail.ticapacitacion.com

private bool Busy;

8. Adicione o seguinte cdigo para criar a propriedade IsBusy.

public bool IsBusy

Note que estamos invocando o mtodo OnPropertyChanged quando o valor da propriedade

public ObservableCollection<Cat> Cats { get; set; }

Pgina 11 de 26 Suporte: mmunoz@mail.ticapacitacion.com

async Task GetCats()