Xamarin Forms - Acessando dados via REST e vinculando objetos aninhados - II

Neste artigo vou mostrar como acessar informações usando um serviço REST e como exibir informações de objetos aninhados usando o databinding

Na primeira parte do artigo criamos o projeto Xamarin Forms no VS 2015, definimos o modelo de domínio, incluímos as referências aos pacotes do Json e o HttpClient no projeto e criamos a classe de serviço que irá acessar o serviço REST.

Vamos agora cuidar da interface com o usuário e para isso vamos definir as páginas :

  • UsuariosPage -  Página que vai exibir o nome e o email de um usuário em um ListView;
  • UserDetailsPage - Página que vai exibir os detalhes de  um usuário selecionado;

Criando a interface com o usuário

Abra o projeto XF_Rest  criado na primeira parte do artigo no Visual Studio Community 2015.

Selecione o projeto compartilhado XF_Rest e no menu Project clique em Add New Item;

Selecione o item Cross-Plataform e a seguir Forms Xaml Page, informe o nome UsuariosPage e clique em Add;

Repita o procedimento acima e crie a página UserDetailsPage.

Você verá na janela Solution Explorer os arquivos UsuariosPage.xaml e UserDetailsPage.xaml que representam o arquivo onde o código XAML que geralmente define o comportamento da interface do usuário é colocado e os arquivos code-behind UsuariosPage.xaml.cs e UserDetailsPage.xaml.cs que representam os arquivos onde o código C# é usado para alterar o comportamento e tratar eventos.

Após criar as páginas abra o arquivo App.cs e no construtor da classe vamos definir a página principal da nossa aplicação :

       public App()
        {
            MainPage = new NavigationPage(new UsuariosPage());
        }

Definindo a interface para exibir os dados na página UsuariosPage

Abra o arquivo UsuariosPage.xaml e inclua seguir o código abaixo :

<?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_WebApi.Views.UsuariosPage"
             Title="Usuários">    
    <StackLayout>
        <Button Text="Exibir Usuarios" Clicked="Button_Clicked" />       
        <Label x:Name="lblmsg" TextColor="Red" FontSize="20" 
               IsVisible="False"  HorizontalOptions="Center" VerticalOptions="Center"/>        
        <ListView x:Name="lvwUsers"
              HasUnevenRows="True" ItemSelected="lvwUsers_ItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding name}" Detail="{Binding email}" TextColor="Black" DetailColor="Blue"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>    
</ContentPage>

Estamos usando um StackLayout para empilhar verticalmente (o padrão) as demais views que são:

Definindo o código C# no arquivo UsuariosPage.xaml.cs

Vamos agora definir o código que vai tratar os eventos da interface para acessar o serviço REST e exibir as informações no ListView.

Abra o arquivo UsuariosPage.xaml.cs e inclua o código a seguir :

using System;
using System.Collections.Generic;
using Xamarin.Forms;
using XF_WebApi.Model;
using XF_WebApi.Services;
namespace XF_WebApi.Views
{
    public partial class UsuariosPage : ContentPage
    {
        UsuarioService userService = new UsuarioService();
        public UsuariosPage()
        {
            InitializeComponent();
        }
        private async  void Button_Clicked(object sender, EventArgs e)
        {
            List<User> usuarios = await userService.GetUsuariosAsync();
            if ( usuarios == null || usuarios.Count == 0)
            {
                //esconde o listview e exibe o label
                //exibe a mensagem no label
                lvwUsers.IsVisible = false;
                lblmsg.IsVisible = true;
                lblmsg.Text = "Não foi possível retornar a lista de usuários";
                lblmsg.TextColor = Color.Red;
            }
            else
            {
                //exibe o listview e esconde o label 
                //exibe a lista de filmes
                lvwUsers.IsVisible = true;
                lblmsg.IsVisible = false;
                lvwUsers.ItemsSource = usuarios;
            }
        }
        private async void lvwUsers_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            if (e.SelectedItem == null)
                return;
            //obtem o item selecionado
            var usuario = e.SelectedItem as User;
            //deseleciona o item do listview
            lvwUsers.SelectedItem = null;
            //chama a pagina UsersDetailsPage
            await Navigation.PushAsync(new UserDetailsPage(usuario));
        }
    }
}

Vamos entender o código :

Criamos uma instância da nossa classe UsuarioService para poder acessar o serviço REST :   UsuarioService userService = new UsuarioService();

A seguir temos o tratamento do evento Clicked da view Button:

1- Usamos o método GetUsuariosAsync() da classe userService e retornamos uma lista de usuários:

  List<User> usuarios = await userService.GetUsuariosAsync();

3- Se houver dados retornados então exibimos no controle ListView :  lvwUsers.ItemsSource = usuarios;

4- Caso contrário exibimos uma mensagem ao usuário na view Label :    lblmsg.Text = "Não foi possível retornar a lista de usuários";

A seguir temos o tratamento do evento ItemSelected da view ListView.

1 - Verificamos se existe um item selecionado e obtemos o item convertendo-o para o tipo User:      var usuario = e.SelectedItem as User;

2- Desmarcamos o item selecionado na listview :   lvwUsers.SelectedItem = null;

3- Chamamos a página UserDetailsPage() passando como parâmetro o usuário selecionado: await Navigation.PushAsync(new UserDetailsPage(usuario));

Dessa forma esta página esta pronta para receber e exibir as informações dos filmes obtidas a partir do serviço REST.

Na terceira parte do artigo vamos implementar as funcionalidades da página UserDetailsPage para exibir os detalhes de um filme.

"Portanto nós também, pois que estamos rodeados de uma tão grande nuvem de testemunhas, deixemos todo o embaraço, e o pecado que tão de perto nos rodeia, e corramos com paciência a carreira que nos está proposta,"
Hebreus 12:1

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 ?

     Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti