Xamarin.Forms - Criando uma aplicação com acesso a dados (SQLite) para Android usando o VS 2015 e C# - III

 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 usando o Visual Studio e a linguagem C#.
Nota:  Quando este artigo foi escrito o Xamarin era uma ferramenta paga, mas em março de 2016 ela foi adquirida pela Microsoft e agora esta integrada ao Visual Studio de forma gratuita.
Você pode fazer o download do Xamarin neste link :  https://www.xamarin.com/download

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- XAML- eXtensible Markup Language -  faz parte do Xamarin.Forms, e permite aos desenvolvedores definir interfaces de usuário em aplicações mobiles usando marcações em vez de código.

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

Usando XAML, o desenvolvedor Xamarin.Forms pode definir interfaces de usuário usando 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 através 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 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 depois 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.

Pois tu, Senhor, és bom, e pronto a perdoar, e abundante em benignidade para todos os que te invocam.
Salmos 86:5

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