Back-End

5 abr, 2016

Xamarin.Forms – Olá Mundo – Criando sua primeira aplicação (Android) no VS 2015 Community com C# – Parte 02

Publicidade

No artigo de hoje, vou incrementar a nossa primeira aplicação Xamarin.Forms, App1.AloMundo, incluindo alguns controles básicos em uma página XAML e mostrando o seu comportamento no emulador.

Nosso objetivo era criar uma aplicação multiplataforma para Android e iOS usando o Xamarin.Forms, mas devido à falta de um Mac em meu ambiente eu estou focando apenas a aplicação Android.

No artigo anterior, a aplicação foi criada e vimos o seu funcionamento no emulador.

Como foi nossa primeira aplicação, o resultado foi apenas uma mensagem de texto em uma Label exibida na tela.

Então, para animar você, neste artigo eu vou incluir um arquivo XAML no projeto e, usando alguns controles, dar uma aparência mais decente à nossa aplicação, mostrando como ela funciona.

Como eu não vou armazenar dados nesse projeto, teremos apenas uma interface de usuário exibindo uma tela com os seguintes Layout/Controles:

  • ContentPage
  • StackLayout
  • Entry
  • Label
  • DatePicker
  • Switch
  • Button
  • ListView

A tabela abaixo lista um resumo sobre alguns dos controles usados:

Controle Xamarin.Forms Descrição
Label Exibe texto somente para leitura.
Entry Representa um controle de texto de uma única linha.
Button São usados para iniciar comandos.
Image Usado para exibir imagens bitmap.
ListView Apresenta uma lista de itens onde os itens dentro da lista são conhecidos como Cells.

Requisitos:

Abrindo a aplicação AloMundo

Abra o Visual Studio Community 2015 e clique em Open Project. Abra a aplicação App1.AloMundo que criamos no artigo anterior.

Selecione o projeto projeto comum App1.AloMundo e, no menu Project, clique em Add New Item. Selecione Cross Plataform e clique em Forms.Xaml Page, aceitando o nome padrão Page1.cs.

xam_forms-1

A seguir, vamos incluir o código XAML a seguir no arquivo Page1.xaml:

<?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="App1.AloMundo.Page1">
     <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"/>
             <Entry x:Name="FoneCliente" Placeholder="Telefone" Keyboard="Telephone" TextColor="White"/>
             <StackLayout Orientation ="Horizontal" >
                <Label Text="Data" />
                <DatePicker x:Name="NascimentoCliente" />
                <Label Text="OK" />
                <Switch x:Name="StatusCliente" VerticalOptions="Center" IsToggled="true" />
             </StackLayout>
             <Button x:Name="Salvar" Text="Salvar Dados"/>
             <ListView x:Name="ListaCliente" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Se você não conhece a linguagem XAML, vai estranhar muito o código, mas não se preocupe, pois podemos fazer a mesma coisa usando a linguagem C#.

Nota : Se você quiser conhecer um pouco da XAML leia o meu artigo Introdução a XAML.

Perceba que o arquivo é no formato XML e possui referências ao Xamarin.Forms e ao XAML da Microsoft.

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 três entradas para Nome, Email e Fone usando o controle Entry e definindo as propriedades PlaceHolder, que exibem o texto definido para o controle, e Keyboard, que define o tipo de teclado usado.

Depois usamos o controle DatePicker para permitir que o usuário selecione uma data e o controle Switch que exibe um valor alternado On/Off e permite ao usuário selecionar o valor.

Concluímos definindo um controle Button com o texto – Salvar Dados e definindo o controle ListView – ListaCliente.

Para exibir itens no controle ListView – ListaCliente, vamos criar no arquivo Page1.xaml.cs o código que atribui uma lista de string à propriedade ItemsSource do controle:

using System.Collections.Generic;

using Xamarin.Forms;

namespace App1.AloMundo
{
    public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();

            ListaCliente.ItemsSource = new List<string>
            {
               "Macoratti.net", "Xamarin.Forms"
            };
        }
    }
}

Agora temos que ajustar o código do arquivo App1.cs do projeto App1.AloMundo conforme abaixo:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace App1.AloMundo
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            MainPage = new Page1();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

Nesse código, apenas criamos uma instância da nossa classe Page1.cs que contém o código XAML e o código para exibir os itens no ListView.

Agora é só alegria…

Basta definir um emulador, verificar se não há erros no projeto e executar…

Ao final do deploy, veremos nossa app instalada no dispositivo onde podemos visualizar também suas propriedades com opção de parar e desinstalar a app:

xam_forms-2xam_forms-3

Clicando no ícone da aplicação, veremos a mensagem que indica que nossa aplicação vai funcionar somente por 24 horas (devido à licença starter).

xam_forms-4

Ao entrar o nome, temos o teclado exibido:

xam_forms-5

Para o e-mail, o teclado habilita a arroba (@) que é usado para informar o valor:

xam_forms-6

No campo telefone, o teclado se altera exibindo números:

xam_forms-7

No campo para Data, é exibido o calendário onde o usuário pode informar o valor:

xam_forms-8

O controle Switch permite ao usuário informar o status: OFF ou ON.

xam_forms-9

E assim nossa app ficou com uma aparência mais agradável e animadora, embora não exista funcionalidade para armazenar os dados informados.

Veremos como armazenar dados usando um banco de dados em outro artigo, no qual eu vou mostrar como usar o banco de dados SQLite.