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.