No artigo de hoje, vou mostrar como criar uma aplicação multiplataforma que pode ser usada no Windows Phone, Android e iOS, usando o Xamarin.Forms com acesso ao banco de dados SQLite utilizando o Visual Studio e a linguagem C#.

Vamos continuar a segunda parte deste artigo, definindo agora a nossa camada de Interface (UI) e, para isso vamos criar uma página XAML no projeto compartilhado Cadastro.Droid.

A linguagem de marcação XAML – eXtensible Markup Language –  faz parte do Xamarin.Forms, e permite aos desenvolvedores definir interfaces de usuário em aplicações mobile usando marcações em vez de código.

Você não é obrigado a usar XAML em um programa Xamarin.Forms, pode usar o código C# no arquivo code-behind, mas muitas vezes o código XAML é mais sucinto e visualmente mais coerente.

Usando XAML, o desenvolvedor Xamarin.Forms pode definir interfaces de usuário utilizando todas as views, layouts e páginas Xamarin.Forms, bem como classes personalizadas. O arquivo XAML é analisado em tempo de compilação para localizar objetos nomeados, e novamente em tempo de execução para criar uma instância e inicializar objetos, e estabelecer ligações entre esses objetos e código de programação.

A XAML é particularmente adequada para uso com a arquitetura MVVM (Model-View-ViewModel): o XAML define a View que está ligada ao código ViewModel por meio de ligações de dados baseados em XAML.

Definindo a Interface de Usuário compartilhada (UI) no projeto Portable

Selecione o projeto compartilhado – Cadastro – e, no menu Tools, clique em Add New Item.

A seguir, selecione Visual C# -> Cross Plataform -> Forms Xaml Page.

Informe o nome ClientesPage e clique no botão Add.

Vamos definir uma interface com usuário usando uma ContentPage que representa uma única view, e um StackLayout para empilhar os controles verticalmente em um leiaute bem simples:

No arquivo ClientesPage.xaml, inclua o código XAML 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="Cadastro.ClientesPage">

       <ContentPage.Content>

        <StackLayout Padding="20" Spacing="20">

             <Entry x:Name="NomeCliente" Placeholder="Nome" TextColor="White"/>

             <Entry x:Name="EmailCliente" Placeholder="Email" Keyboard="Email" TextColor="White"/>

             <Button x:Name="Salvar" Text="Salvar Dados" Clicked="SalvarClicked"/>

             <ListView x:Name="ListaCliente" BackgroundColor="White" />

        </StackLayout>

    </ContentPage.Content>  

</ContentPage>

Iniciamos com a definição do layout ContentPage que exibe uma única View.

A seguir, definimos um StackLayout que posiciona elementos filhos em uma única linha e que podem ser orientados horizontal e verticalmente.

Na sequência, definimos 2 entradas para Nome, Email usando o controle Entry e definindo as propriedades PlaceHolder, que exibe o texto definido no controle, e Keyboard, que define o tipo de teclado usado.

Concluímos definindo um controle Button com o texto – Salvar Dados com o evento SalvarClicked associado ao evento Click do botão, e a seguir definimos o controle ListView – ListaCliente com uma cor de fundo para destacá-lo.

Abaixo, temos a UI apresentando em um emulador Android:

Para poder exibir os itens no controle ListView, que serão os clientes cadastrados, temos que obter os clientes e atribuir os valores à propriedade ItemsSource do controle ListView.

Fazemos isso no arquivo code-behind ClientesPage.xaml.cs, definindo o código a seguir:

using System;
using Xamarin.Forms;

namespace Cadastro
{
    public partial class ClientesPage : ContentPage
    {
        public ClientesPage()
        {
            InitializeComponent();

            using (var dados = new AcessoDB())
            {
                this.ListaCliente.ItemsSource = dados.GetClientes();
            }
        }
    }
}

E, para concluir, precisamos implementar no arquivo code-behind  ClientesPage.xaml.cs o código relacionado com o evento click do botão que definimos como SalvarClicked:

using System;
using Xamarin.Forms;

namespace Cadastro
{
    public partial class ClientesPage : ContentPage
    {
        public ClientesPage()
        {
            InitializeComponent();

            using (var dados = new AcessoDB())
            {
                this.ListaCliente.ItemsSource = dados.GetClientes();
            }
        }

        protected void SalvarClicked(object sender, EventArgs e)
        {
            var cliente = new Cliente
            {
                Nome = this.NomeCliente.Text,
                Email = this.EmailCliente.Text,
            };

            using (var dados = new AcessoDB())
            {
                dados.InserirCliente(cliente);
                this.ListaCliente.ItemsSource = dados.GetClientes();
            }
        }
    }
}

O código associado ao tratamento do evento Click – SalvarClicked – cria uma instância do objeto Cliente e atribui às propriedades Nome e Email os valores que estão definidos na interface do usuário, ou seja, nos controles Entry : NomeCliente e EmailCliente.

Depois criamos uma instância da classe AcessoBD e usamos o método inserirCliente(), passando os dados do cliente atual, e exibimos os dados no ListView usando o método GetClientes().

Na próxima parte do artigo, vamos concluir a nossa aplicação fazendo o deploy e testando em  um emulador Android.