Você está na página 1de 200

#Dominando o Xamarin.Forms

#Dominando o Xamarin.Forms

Diga não à pirataria

#Dominando o Xamarin.Forms Diga não à pirataria O leitor que adquiriu o e-book legalmente no site

O leitor que adquiriu o e-book legalmente no site AlbertEije.COM poderá imprimir o conteúdo para seu uso pessoal.

A cópia do conteúdo do livro sem autorização configura crime. Além de contribuir para a criminalidade, a cópia ilegal desestimula o autor de realizar novos trabalhos. Todos saem perdendo com a pirataria.

a criminalidade, a cópia ilegal desestimula o autor de realizar novos trabalhos. Todos saem perdendo com

#Dominando o Xamarin.Forms

Autor

Apresentação

Albert Eije é bacharel

em Sistemas de

Como

funcionário

do

Banco

Eije é bacharel em Sistemas de Como funcionário do Banco do Brasil, Informação e especialista em

do

Brasil,

Informação e especialista em Engenharia de

trabalhou

nas

Diretorias

de

Governo

e

Software. Possui larga experiência no

O autor iniciou sua investida no universo da

Tecnologia.

desenvolvimento dos mais diversos tipos de sistemas.

informática nos idos de 1990. Na época seu interesse era por computação gráfica:

Teve contato com sistemas de grande porte e participou do desenvolvimento de vários módulos do sistema do Banco do Brasil, o maior banco da América Latina.

CorelDRAW, PageMaker, Photoshop, etc.

Com o tempo conheceu o mundo da programação, primeiro através do Clipper, seguido do Delphi e várias outras linguagens e ferramentas. Desenvolver sistemas passou a ser o seu negócio. No início focou em pequenas e médias empresas: condomínios, livrarias, construtoras, etc.

Um desenvolvedor que trabalha por conta própria costuma ser o faz-tudo da empresa por um bom tempo: analista, programador, vendedor, suporte, etc.

Atualmente faz parte da Equipe T2Ti, que já formou milhares de profissionais para o mercado de desenvolvimento de software, criando treinamentos personalizados e exclusivos não encontrados em outras empresas de treinamento.

Escreveu dois livros que foram publicados pela Editora Ciência Moderna e outros 20 e-books que estão disponíveis no seu site:

AlbertEije.COM.

Contate

AlbertEije.COM.

o

autor

através

do

site

#Dominando o Xamarin.Forms

Xamarin.Forms

Introdução

O Xamarin.Forms é uma plataforma fantástica para desenvolvimento mobile. É possível desenvolver para iOS, Android e Windows. Ele permite escrever código compartilhado em C# e XAML (Extensible Application Markup Language). O Xamarin.Forms se encarrega de mapear tudo para controles nativos de cada plataforma.

de mapear tudo para controles nativos de cada plataforma. Em relação ao suporte Xamarin.Forms inclui o

Em relação ao suporte

Xamarin.Forms inclui o (WinRT) para

dispositivos Windows 8.1 e Windows Phone

8.1.

para o Windows, o

Inclui ainda a UWP (Universal Windows Platform), que é uma espécie de Windows Runtime para Windows 10 e Windows 10 Mobile numa mesma aplicação.

#Dominando o Xamarin.Forms

Xamarin.Forms

Requisitos

#Dominando o Xamarin.Forms Xamarin.Forms Requisitos Vimos que é possível criar apps para várias plataformas com o

Vimos que é possível criar apps para várias plataformas com o Xamarin.Forms. As plataformas que você decidir usar para desenvolvimento vão definir seus requisitos de hardware e software.

Para desenvolver aplicações para o iOS, você vai precisar de um computador Apple com uma versão do Mac, a aplicação Xcode da Apple e da plataforma Xamarin, que inclui o Xamarin Studio. É possível apontar do Visual Studio para sua máquina Mac, realizando testes pela rede.

Os testes em dispositivos Android e Windows podem ser realizados tranquilamente na sua máquina Windows onde o Visual Studio está instalado.

Android e Windows podem ser realizados tranquilamente na sua máquina Windows onde o Visual Studio está

5

#Dominando o Xamarin.Forms

Xamarin.Forms

Uma Aplicação – Várias Plataformas

Xamarin.Forms Uma Aplicação – Várias Plataformas Imagine criar aquela aplicação “perfeita” para iOS. Um

Imagine criar aquela aplicação “perfeita” para iOS. Um estouro! Múltiplas vendas. O próximo passo será criar a aplicação para as outras plataformas, pelo menos para o Android. Mas vai escrever tudo de novo em outra linguagem?

Esse o problema que tira o sono de muitos empreendedores e desenvolvedores. Não é nada divertido fazer a mesma aplicação com outra tecnologia. E a manutenção? Para cada correção ou nova funcionalidade você terá dois trabalhos!

A saída então é procurar uma maneira de desenvolver a aplicação de tal forma que ela funcione em várias plataformas.

Essa a mágica do Xamarin.Forms.

E quais são os desafios que o Xamarin.Forms enfrenta para conseguir fazer a sua mágica?

a mágica do Xamarin.Forms. E quais são os desafios que o Xamarin.Forms enfrenta para conseguir fazer

#Dominando o Xamarin.Forms

Xamarin.Forms

Desafio 01 – Diferentes Paradigmas de Interface com o Usuário

01 – Diferentes Paradigmas de Interface com o Usuário As três plataformas (iOS, Android e Windows)

As três plataformas (iOS, Android e Windows) se comportam de forma similar, permitindo que o usuário interaja com as aplicações com o toque na tela, mas elas são muito diferentes nos detalhes.

toque na tela, mas elas são muito diferentes nos detalhes. Cada uma tem maneiras distintas de

Cada uma tem maneiras distintas de navegar pela aplicação e através das páginas, diferente convenções para apresentação de dados, maneiras distintas de invocar e exibir menus, etc.

Os usuários de uma plataforma já estão acostumados com as convenções dela. Alguns não trocam de plataforma por conta disso. Certamente isso influencia o desenvolvedor de aplicações, que não vai criar uma app com “cara e comportamento” de Android para o iOS, pois os usuários vão detestar.

#Dominando o Xamarin.Forms

Xamarin.Forms

Desafio 02 – Diferentes Ambientes de Desenvolvimento

Desafio 02 – Diferentes Ambientes de Desenvolvimento Os desenvolvedores estão acostumados a trabalhar com

Os desenvolvedores estão acostumados a trabalhar com ambientes integrados de desenvolvimento, as conhecidas IDEs.

ambientes integrados de desenvolvimento, as conhecidas IDEs. Pois saiba que para cada plataforma existe uma IDE

Pois saiba que para cada plataforma existe uma IDE diferente:

Para o desenvolvimento de aplicações iOS:

Xcode em um Mac.

Para o desenvolvimento de aplicações Android: Android Studio em vários SOs.

Para o desenvolvimento de aplicações Windows: Visual Studio em um PC.

Criar uma App para uma só plataforma é uma opção? Aprender três IDEs é a saída? Sabemos que não, por isso o esforço de criar uma ferramenta que resolva esse problema.

#Dominando o Xamarin.Forms

Xamarin.Forms

Desafio 03 – Diferentes Interfaces de Programação

Desafio 03 – Diferentes Interfaces de Programação As três plataformas são baseadas em diferentes sistemas

As três plataformas são baseadas em diferentes sistemas operacionais com diferentes APIs. Em muitos casos, as plataformas implementam tipos similares, mas com nomes diferentes. Por exemplo:

tipos similares, mas com nomes diferentes. Por exemplo: As três plataformas tem um componente que permite

As três plataformas tem um componente que permite que o usuário selecione um valor booleano:

No iOS, esse componente é uma “view” chamada UISwitch.

No Android é um “widget” chamado Switch.

No Windows é um “control” chamado ToggleSwitch.

Evidentemente as diferenças vão além dos nomes, incluindo aí as propriedades e eventos.

#Dominando o Xamarin.Forms

Xamarin.Forms

Desafio 04 – Diferentes Linguagens de Programação

Desafio 04 – Diferentes Linguagens de Programação Cada plataforma está associada às seguintes linguagens de

Cada plataforma está associada às seguintes linguagens de programação:

No iOS: Objective C.

No Android: Java.

No Windows: C#.

Objective C. ● No Android: Java. ● No Windows: C#. Podemos dizer que essas linguagens são

Podemos dizer que essas linguagens são primas, pois são orientadas a objetos e derivam do C. Mas são primas distantes!

Evidentemente esses desafios não são enfrentados apenas pelo Xamarin. O mercado de desenvolvimento de software está sempre buscando soluções para resolver os desafios propostos. Além do Xamarin, temos outras?

#Dominando o Xamarin.Forms

Apps Híbridas

Intel XDK

O XDK é a ferramenta que possibilita o

desenvolvimento das Apps híbridas. Mas não

apenas isso, ele permite que você desenvolva

de forma visual, realize testes utilizando uma

ferramenta instalada no dispositivo, debugue a

aplicação diretamente no dispositivo, crie seu pacote para publicação nas lojas e muito mais.

Além das aplicações híbridas, é possível criar Apps HTML5 nativas e até mesmo importar projetos HTML5 desenvolvidos anteriormente.

É possível instalar o XDK no Windows, Linux e OSX.

O XDK cumpre a promessa: “escreva uma vez,

rode em qualquer lugar”, em inglês “write- once, run-anywhere”.

As Apps construídas no XDK rodam num webview (navegador embutido) e estão limitadas aos recursos do webview mais a combinação dos plugins utilizados.

do webview mais a combinação dos plugins utilizados. O webview tem menos recursos que um browser.

O webview tem menos recursos que um

browser. A vantagem é a capacidade de ser estendido através dos plugins de código nativo do Cordova (PhoneGap).

O XDK é gratuito.

Se você já for um desenvolvedor web facilita

muito. Senão, terá que aprender as linguagens HTML, JavaScript e CSS, pelo menos. Além dos plugins que serão utilizados para acessar os recursos dos dispositivos. As Apps construídas não são nativas, pois rodam no webview.

utilizados para acessar os recursos dos dispositivos. As Apps construídas não são nativas, pois rodam no

#Dominando o Xamarin.Forms

Delphi

Firemonkey

O Delphi tem realizado vários lançamentos por conta das novidades relacionadas ao mundo mobile. A base para o desenvolvimento de apps no Delphi chama-se FireMonkey.

O FireMonkey não foi desenvolvido pela Embarcadero. Foi projetado pelo russo Eugene Kryukov para ser a nova geração do framework VGScene. Em 2011 a Embarcadero comprou o projeto, que é parte integrante do Delphi, C++ Builder e RAD Studio desde a versão XE2.

Observe a seguir a descrição do framework copiada do site da Embarcadero:

O FireMonkey (FMX) framework é a plataforma de desenvolvimento de aplicações e tempo de execução por trás do RAD Studio, do Delphi e do C++Builder. FMX foi desenhada para equipes que estejam construindo aplicações multidispositivos verdadeiramente nativas para Windows, Mac, Android e iOS.

verdadeiramente nativas para Windows, Mac, Android e iOS. Com o FMX você não precisa manter projetos

Com o FMX você não precisa manter projetos de desenvolvimento separados para criar sua aplicação de modo nativo para distintos dispositivos (PCs, tablets e smartphones) em múltiplas plataformas (Windows, Mac, iOS e Android). O FMX facilita a criação de aplicações verdadeiramente nativas e livres de scripts que tiram máximo proveito das capacidades e da performance dos dispositivos subjacentes.

Um visual eletrizante conta pouco se a experiência do usuário for a mesma que andar de carroça. As aplicações da plataforma FMX contam com todo o poder de hardware atualmente disponível, com desempenho nativo de CPU e visuais capacitados por GPU para PC, tablets e dispositivos móveis.

O Firemonkey é pago. A aplicação é nativa. Você programa numa só linguagem e usando a IDE do Delphi.

#Dominando o Xamarin.Forms

C#

Xamarin

No C# podemos construir aplicações nativas para o Windows Phone. Para construir aplicações multiplataforma, temos o Mono. O Mono é uma implementação Open Source do framework .NET, baseado nos padrões ECMA. O Mono é patrocinado pela Xamarim.

Há um tempo o Xamarin era comercializado separado do Visual Studio. Existe até mesmo o Xamarin Studio. Agora o Xamarin já vem com o Visual Studio e é gratuito!

Agora o Xamarin já vem com o Visual Studio e é gratuito! O objetivo da plataforma

O objetivo da plataforma Xamarim é usar a mesma linguagem, API e estrutura de dados para compartilhar o código da aplicação em todas as plataformas: Windows, Mac, Android e iOS.

Para desenhar a aplicação é preciso utilizar estratégias diferentes. Dessa maneira, o desenvolvedor precisa desenhar a tela da App iOS num lugar, da App Android em outro e da App Windows em outro, embora o código seja compartilhado.

#Dominando o Xamarin.Forms

C#

Xamarin

Estima-se que 75% do código seria compartilhado usando essa estratégia. Mas, ainda assim, o desenvolvedor teria o trabalho de desenhar as telas separadamente.

teria o trabalho de desenhar as telas separadamente. E é aí que entra o Xamarin.Forms. Com

E é aí que entra o Xamarin.Forms. Com ele é possível desenhar a aplicação uma única vez e compartilhar quase 100% do código! E como saber qual usar?

#Dominando o Xamarin.Forms

C#

Xamarin

A vantagem de ter várias plataformas como

alvo e apenas uma linguagem de programação é que é possível compartilhar código entre as Apps que serão criadas.

Antes do código ser compartilhado, a aplicação precisa ser estruturada para este propósito.

Para que isso seja feito da melhor forma possível, deve-se utilizar o padrão MVVM (Model-View-ViewModel), que é uma evolução do MVC (Model-View-Control).

O MVVM separa o código em camadas:

Model (os dados básicos).

View (a interface do usuário, incluindo os recursos visuais e de entrada).

ViewModel (gerencia os dados que passam entre o Model e a View).

(gerencia os dados que passam entre o Model e a View). A parte da aplicação que

A parte da aplicação que é independente da plataforma pode ser isolada e, no contexto do Xamarin, colocado em um projeto separado. Tal projeto pode funcionar de duas maneiras:

Shared Asset Project (SAP): consiste simplesmente em código e outros arquivos importantes (assets ou recursos) que podem ser acessados a partir de outros projetos. Portable Class Library (PCL): fecha todo o código comum numa DLL que pode ser referenciada em outros projetos.

Independente do método que você escolher, tal código comum poderá acessar os recursos do framework .NET, acessando todos os recursos dele. Mas existem diferenças entre os métodos acima. Vejamos.

#Dominando o Xamarin.Forms

C#

Xamarin – SAP

A maneira mais simples de trabalhar é com o SAP, conhecido como Shared Project (projeto compartilhado).

Na imagem a seguir é possível observar dois projetos (iOS e Android) e um terceiro que contém o código C# comum: o Shared.

e um terceiro que contém o código C# comum: o Shared. Qualquer edição que ocorra no

Qualquer edição que ocorra no Projeto Shared será compartilhada com os demais projetos.

Projeto Shared será compartilhada com os demais projetos. Vantagens: ● ● ● Permite compartilhar código entre

Vantagens:

Permite compartilhar código entre múltiplos projetos.

O código compartilhado pode ser ramificado

(branched) com base na plataforma usando diretivas de compilador (por exemplo,

usando #if

É possível incluir referências específicas da plataforma para utilização pelo código compartilhado.

). ANDROID

Desvantagens:

Não existe uma montagem de saída ('output' assembly). Ou seja, os arquivos

farão parte daquele projeto que aponta para

o compartilhado e serão incluídos na DLL

dele.

As refatorações que afetam o código dentro de diretivas de compilador "inativas" não atualizarão o código.

#Dominando o Xamarin.Forms

C#

Xamarin – SAP

#Dominando o Xamarin.Forms C# Xamarin – SAP A imagem abaixo mostra a arquitetura conceitual, onde cada

A imagem abaixo mostra a arquitetura conceitual, onde cada projeto inclui todos os arquivos do Projeto Compartilhado (Shared Project).

mostra a arquitetura conceitual, onde cada projeto inclui todos os arquivos do Projeto Compartilhado (Shared Project).

#Dominando o Xamarin.Forms

C#

Xamarin – PCL

A PCL permite escrever código e produzir bibliotecas que podem ser compartilhadas entre múltiplas plataformas. Veja a seguir o projeto TaskyPortableLibrary e a referência dele no projeto TaskiOS

TaskyPortableLibrary e a referência dele no projeto TaskiOS Vantagens: ● Permite compartilhar código entre

Vantagens:

e a referência dele no projeto TaskiOS Vantagens: ● Permite compartilhar código entre múltiplos

Permite compartilhar código entre múltiplos projetos.

As refatorações sempre atualizam todas as referências afetadas.

Desvantagens:

Não dá pra usar diretivas de compilação.

Apenas um subconjunto do .NET está disponível para uso.

#Dominando o Xamarin.Forms

C#

Xamarin – PCL

#Dominando o Xamarin.Forms C# Xamarin – PCL A imagem abaixo mostra a arquitetura conceitual, onde cada

A imagem abaixo mostra a arquitetura conceitual, onde cada projeto faz referência à biblioteca criada.

– PCL A imagem abaixo mostra a arquitetura conceitual, onde cada projeto faz referência à biblioteca

19

#Dominando o Xamarin.Forms

C#

Xamarin.Forms

#Dominando o Xamarin.Forms C# Xamarin.Forms Geralmente uma aplicação Xamarin.Forms consiste de cinco projetos separados

Geralmente uma aplicação Xamarin.Forms consiste de cinco projetos separados para cada uma das seguintes plataformas:

iOS para programas que rodam no iPhone, iPad, e iPod Touch.

Android para programas que rodam em tablets e telefones Android.

Universal Windows Platform (UWP) para aplicações que rodam no Windows 10 ou Windows 10 Mobile.

Windows Runtime API do Windows 8.1.

Windows Runtime API do Windows Phone 8.1.

Além desses cinco projetos, existe um sexto, contendo o código comum. No entanto, esses cinco projetos costumam ser bem pequeno, apenas com algum código de inicialização. A parte pesada do código fica na aplicação comum (PLC ou SAP), que contém ainda o código da interface com o usuário.

#Dominando o Xamarin.Forms

C#

Xamarin.Forms

As bibliotecas “Xamarin . Forms . Core” e “Xamarin . Forms . Xaml” implementam a API Xamarin.Forms.

Dependendo da plataforma, o “Core” faz uso das bibliotecas “Xamarin.Forms.Platform”.

na

maioria dos casos, coleções

Essas bibliotecas

são,

de

classes

chamadas

renderizadores

que

transformam a interface do

objetos

plataforma

para

específica.

Xamarin.Forms

cada

em

renderizadores que transformam a interface do objetos plataforma para específica. Xamarin.Forms cada em 21

#Dominando o Xamarin.Forms

C#

Xamarin.Forms

#Dominando o Xamarin.Forms C# Xamarin.Forms Por exemplo, digamos que você precise usar um botão booleano na

Por exemplo, digamos que você precise usar um botão booleano na tela. No Xamarin.Forms esse controle é chamado de Slider e uma classe de mesmo nome é implementada no Xamarin.Forms.Core. Nos renderizadores individuais de cada plataforma esse Slider é mapeado como UISlider no iPhone, como SeekBar no Android, e como Slider no Windows Phone.

Na imagem a seguir podemos ver um pequeno programa feito com Xamarin.Forms rodando nas três plataformas.

Phone. Na imagem a seguir podemos ver um pequeno programa feito com Xamarin.Forms rodando nas três

22

#Dominando o Xamarin.Forms

C#

Xamarin.Forms

#Dominando o Xamarin.Forms C# Xamarin.Forms O exemplo anterior não se limita a celulares. Veja ele rodando

O exemplo anterior não se limita a celulares. Veja ele rodando num iPad Air 2.

o Xamarin.Forms C# Xamarin.Forms O exemplo anterior não se limita a celulares. Veja ele rodando num

23

#Dominando o Xamarin.Forms

C#

Xamarin.Forms

#Dominando o Xamarin.Forms C# Xamarin.Forms E agora o mesmo exemplo rodando num Microsoft Surface Pro 3

E agora o mesmo exemplo rodando num Microsoft Surface Pro 3 com Windows 10.

#Dominando o Xamarin.Forms C# Xamarin.Forms E agora o mesmo exemplo rodando num Microsoft Surface Pro 3

24

#Dominando o Xamarin.Forms

C#

Xamarin.Forms

#Dominando o Xamarin.Forms C# Xamarin.Forms Finalmente temos a mesma aplicação feita para Windows 8.1 rodando numa

Finalmente temos a mesma aplicação feita para Windows 8.1 rodando numa máquina desktop com Windows 10 e uma com Windows Phone 8.1 rodando num celular.

feita para Windows 8.1 rodando numa máquina desktop com Windows 10 e uma com Windows Phone

25

#Dominando o Xamarin.Forms

Xamarin.Forms

XAML

#Dominando o Xamarin.Forms Xamarin.Forms XAML O Xamarin.Forms suporta o XAML (pronuncia-se “zammel” para rimar com

O Xamarin.Forms suporta o XAML (pronuncia-se “zammel” para rimar com “camel”). É com o XAML que a tela é desenhada. Segue o código fonte da tela vista anteriormente.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="PlatformVisuals.PlatformVisualsPage" Title="Visuals"> <StackLayout Padding="10,0"> <Label Text="Hello, Xamarin.Forms!" FontSize="Large" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" /> <Button Text = "Click Me!" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" /> <Switch VerticalOptions="CenterAndExpand" HorizontalOptions="Center" /> <Slider VerticalOptions="CenterAndExpand" /> </StackLayout> <ContentPage.ToolbarItems>

#Dominando o Xamarin.Forms

Xamarin.Forms

XAML

<ToolbarItem Text="edit" Order="Primary"> <ToolbarItem.Icon> <OnPlatform x:TypeArguments="FileImageSource" iOS="edit.png" Android="ic_action_edit.png" WinPhone="Images/edit.png" /> </ToolbarItem.Icon> </ToolbarItem> <ToolbarItem Text="search" Order="Primary"> <ToolbarItem.Icon> <OnPlatform x:TypeArguments="FileImageSource" iOS="search.png" Android="ic_action_search.png" WinPhone="Images/feature.search.png" /> </ToolbarItem.Icon> </ToolbarItem> <ToolbarItem Text="refresh" Order="Primary"> <ToolbarItem.Icon> <OnPlatform x:TypeArguments="FileImageSource" iOS="reload.png" Android="ic_action_refresh.png" WinPhone="Images/refresh.png" /> </ToolbarItem.Icon> </ToolbarItem> <ToolbarItem Text="explore" Order="Secondary" /> <ToolbarItem Text="discover" Order="Secondary" /> <ToolbarItem Text="evolve" Order="Secondary" /> </ContentPage.ToolbarItems> </ContentPage>

="evolve" Order ="Secondary" /> </ ContentPage.ToolbarItems > </ ContentPage > 27

27

#Dominando o Xamarin.Forms

Xamarin.Forms

XAML

#Dominando o Xamarin.Forms Xamarin.Forms XAML Observe no código anterior o elemento A ideia do Xamarin.Forms

Observe no código anterior o elemento

A

ideia

do

Xamarin.Forms

é

facilitar

e

“ToolbarItem”. Ele contém uma tag chamada

trabalhar

o

mínimo

possível

com

código

”OnPlatform”. Essa é uma das várias técnicas

dependente de plataforma. Se a sua aplicação

no Xamarin.Forms para introduzir código

depende

na

sua

maior

parte

de

código

vinculado à plataforma. No caso em questão,

dependente

da

plataforma,

é

interessante

foi utilizado esse recurso porque cada

analisar

se

é

melhor

escolher

usar

o

plataforma utiliza um formato diferente de

Xamarin.iOS,

o

Xamarin.Android

e

a

API

imagem, com suas devidas restrições, inclusive de tamanho.

Windows Phone.

 

A classe Device nos fornece facilidades similares, que nos permite escolher valores de objetos com base na plataforma. Dessa maneira, é possível especificar diferentes tamanhos de fontes, por plataforma, para citar um exemplo.

Se for necessário trabalhar com algo mais específico, como manipular o GPS, existe a classe DependencyService, que fornece uma maneira de fazer isso de uma forma estruturada.

Como saber isso? Se sua aplicação precisa de uma tela rebuscada, gráficos vetoriais ou interação complexa de toque na tela, o Xamarin.Forms não é a melhor opção. Agora, se a aplicação é para entrada e consulta de dados, como aplicações comerciais utilizadas pelas empresas (Vendas, Estoque, ERP, etc), então o Xamarin.Forms é uma boa pedida.

#Dominando o Xamarin.Forms

Xamarin.Forms

Ambiente de Desenvolvimento

Lembrando que o hardware e o software que você terá para trabalhar com o Xamarin.Forms vai depender das plataformas alvo.

Se você for trabalhar com o iOS, vai precisar de um computador Mac com o Xcode instalado. Instale ainda o Xamarin Studio no Mac. É possível desenvolver diretamente na máquina Mac. Mas, caso esteja trabalhando com várias plataformas, você pode instalar o Visual Studio na sua máquina Windows e “achar” a máquina Mac pela rede para realizar os testes de modo remoto. O procedimento é simples, descomplicado.

É possível criar as aplicações Android tanto no Xamarin Studio na máquina Mac quanto no Visual Studio na máquina com o Windows.

No caso do desenvolvimento de aplicações para Windows, é preciso instalar o Visual Studio num PC com o SO Windows.

é preciso instalar o Visual Studio num PC com o SO Windows. Sendo assim, se vai

Sendo assim, se vai desenvolver uma aplicação para todas em todas as plataformas alvo, o ideal é fazer o seguinte:

Ter uma máquina Mac, pode ser um Mac Mini, por exemplo, com o Xcode e o Xamarin Studio instalados.

Ter uma máquina Windows (um PC) com o Visual Studio instalado.

Desenvolver tudo no PC, realizando testes no Mac de modo remoto, quando necessário.

Em relação aos dispositivos, se for possível, adquira um para cada plataforma para realizar testes. No entanto, existem emuladores para iOS, Android e para o Windows.

Para testar

usuário através do toque e o tempo de resposta da aplicação, um dispositivo real é

essencial.

devidamente a interação do

#Dominando o Xamarin.Forms

Xamarin.Forms

Estrutura de uma Aplicação

As interfaces de usuário modernas são construídas com vários tipos de objetos. Dependendo do sistema operacional, tais objetos podem ter nomes distintos: controles, elementos, views, widgets. Todos eles estão dedicados aos trabalhos de visualização e interação.

No Xamarin.Forms, os objetos que aparecem

na tela são coletivamente chamados de Visual

Elements (Elementos Visuais). Eles são separados em três categorias: Page, Layout e View.

A API

do

Xamarin

define

as

classes

da

seguinte maneira: VisualElement,

 

Page,

Layout, e View.

Tais

classes

e

suas

descendentes são a espinha dorsal do Xamarin.Forms. A classe VisualElement é extremamente importante. Todo objeto colocado na tela é um VisualElement.

do Xamarin.Forms. A classe VisualElement é extremamente importante. Todo objeto colocado na tela é um VisualElement.

#Dominando o Xamarin.Forms

Xamarin.Forms

Estrutura de uma Aplicação

Uma aplicação Xamarin.Forms é formada por uma ou mais páginas. Uma página normalmente ocupa toda a área da tela (ou a maior parte dela).

Algumas aplicações contém apenas uma página, enquanto outras navegam entre múltiplas páginas. Você verá que uma das mais comuns é a ContentPage.

Em cada página, os elementos visuais são organizados numa hierarquia “pai-filho”. O filho de uma ContentPage é geralmente um Layout para organizar as Views.

Alguns Layouts tem apenas um filho, outros possuem vários filhos, que são organizados pelo próprio Layout. Esses filhos podem ser outros Layouts ou Views. A organização dos filhos vai depender do tipo de Layout.

No Xamarin.Forms, uma View é todo objeto interativo e visual: textos, botões, etc.

vai depender do tipo de Layout. No Xamarin.Forms, uma View é todo objeto interativo e visual:

#Dominando o Xamarin.Forms

Xamarin.Forms

Primeira aplicação

#Dominando o Xamarin.Forms Xamarin.Forms Primeira aplicação Hora de construir nossa primeira aplicação. Os exemplos

Hora de construir nossa primeira aplicação. Os exemplos deste livro serão feitos no Visual Studio Community 2015. Selecione File/New/Project e busque a opção que aparece na imagem para criar uma aplicação Cross-Platform. Forneça um nome para a aplicação, tal como: Hello.

que aparece na imagem para criar uma aplicação Cross-Platform. Forneça um nome para a aplicação, tal

32

#Dominando o Xamarin.Forms

Xamarin.Forms

Primeira aplicação

#Dominando o Xamarin.Forms Xamarin.Forms Primeira aplicação Observe que foram criados seis projetos (imagem ao lado): o

Observe que foram criados seis projetos (imagem ao lado): o projeto PCL e outros cinco para cada plataforma: iOS (Hello.iOS), Android (Hello.Droid), Plataforma Universal do Windows (Hello.UWP), Windows 8.1 (Hello.Windows) e Windows Phone (Hello.WinPhone).

Analise as configurações do projeto. Selecione Build / Configuration Manager. Marque a caixa “Build” para todos os projetos. Marque Deploy para todos os projetos de Apps (a caixa não estará disponível para o projeto que não for permitido marcar).

Configure a coluna Platform de acordo com a imagem abaixo.

disponível para o projeto que não for permitido marcar). Configure a coluna Platform de acordo com

#Dominando o Xamarin.Forms

Xamarin.Forms

Primeira aplicação

#Dominando o Xamarin.Forms Xamarin.Forms Primeira aplicação Caso não esteja vendo as barras de ferramentas do iOS

Caso não esteja vendo as barras de ferramentas do iOS e do Android, selecione as opções: View / Toolbars / iOS e View / Toolbars / Android.

Observe que o projeto contém seis aplicações. Uma delas terá que ser marcada para ser inicializada.

Neste caso, o nome da aplicação ficará em negrito no Solution Explorer. Observe na imagem ao lado que, no meu caso, o Hello.Droid está marcado para ser iniciado.

Caso queira alterar, basta selecionar o projeto desejado com o botão direito e selecionar a opção “Set as StartUp Project.

Observe na página seguinte como ficaria a aplicação depois de executada nas três plataformas.

#Dominando o Xamarin.Forms

Xamarin.Forms

Primeira aplicação

#Dominando o Xamarin.Forms Xamarin.Forms Primeira aplicação 35
#Dominando o Xamarin.Forms Xamarin.Forms Primeira aplicação 35

#Dominando o Xamarin.Forms

Xamarin.Forms

Primeira aplicação

#Dominando o Xamarin.Forms Xamarin.Forms Primeira aplicação A aplicação criada é bem simples e nos fornece a

A aplicação criada é bem simples e nos fornece a oportunidade de estudar o código fonte para compreender como as coisas funcionam.

Existe uma classe chamada “App.cs” no Projeto Hello. Ela é a responsável por desenhar o texto que você viu na tela. Abra essa classe e observe o código.

public class App : Application

{

public App()

{

// The root page of your application MainPage = new ContentPage

{

Content = new StackLayout

{

VerticalOptions = LayoutOptions.Center, Children = { new Label { HorizontalTextAlignment =

TextAlignment.Center,

}

};

}

}

Text = "Welcome to Xamarin Forms!"

}

36

#Dominando o Xamarin.Forms

Xamarin.Forms

Primeira aplicação

#Dominando o Xamarin.Forms Xamarin.Forms Primeira aplicação Trata-se de uma classe pública que deriva de Application. O

Trata-se de uma classe pública que deriva de Application. O construtor cria uma página principal do tipo ContentPage.

A propriedade Content pertence à ContentPage. Geralmente

essa propriedade é definida como o layout que receberá as views, ou seja, os componentes que aparecerão na tela. No exemplo em questão a Content foi definida para o layout StackLayout, que arruma seus elementos filhos numa pilha.

O StackLayout tem apenas um elemento filho, que é um Label,

que

anteriormente.

exibe o texto que vimos

é

alinhado

ao

centro

e

No projeto PCL você ainda pode ver o arquivo packages.config que contém os pacotes requeridos pela aplicação. Se observar

as referências, verá as bibliotecas do Xamarin.Forms lá:

Xamarin.Forms.Core

Xamarin.Forms.Xaml

Xamarin.Forms.Platform

#Dominando o Xamarin.Forms

Xamarin.Forms

Primeira aplicação

#Dominando o Xamarin.Forms Xamarin.Forms Primeira aplicação Nas referências dos cinco projetos, você verá o

Nas referências dos cinco projetos, você verá o “Hello”, que é o Projeto PCL. Observe na imagem ao lado.

Cada um

“Xamarin.Forms.Platform.????”. No caso do Android, visto na

uma biblioteca

dos

projetos

trará

imagem ao lado, temos: Xamarin.Forms.Platform.Android.

Cada uma dessas bibliotecas definem um método “Forms.Init” que inicializa o sistema do Xamarin.Forms para cada plataforma particular. O código de inicialização em cada plataforma precisa chamar esse método.

Lembre que o projeto PCL deriva de App, que deriva de Application. O código de inicialização de cada plataforma precisa instanciar essa classe App.

Veja como se parece na classe MainActivity do Andoid (explore as demais).

#Dominando o Xamarin.Forms

Xamarin.Forms

Primeira aplicação

#Dominando o Xamarin.Forms Xamarin.Forms Primeira aplicação namespace Hello.Droid { [ Activity (Label =

namespace Hello.Droid

{

[Activity(Label = "Hello", Icon = "@drawable/icon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)] public class MainActivity :

global::Xamarin.Forms.Platform.Android.FormsApplicationActivity

{

 

protected override void OnCreate(Bundle bundle)

{

base.OnCreate(bundle);

global::Xamarin.Forms.Forms.Init(this, bundle); LoadApplication(new App());

}

}

}

Observe

que

a

classe

principal

deriva

de

FormsApplicationActivity,

definida

em

Xamarin.Forms.Platform.Android.

Veja

dentro

do

método

OnCrete

a

chamada

ao

método

Forms.Init,

descrito

anteriormente. A instância da App do Hello é passada como parâmetro para o LoadApplication, como mencionamos antes.

#Dominando o Xamarin.Forms

Xamarin.Forms

Primeira aplicação – PCL versus SAP

Xamarin.Forms Primeira aplicação – PCL versus SAP Nossa primeira aplicação foi criada no modo PCL, ou

Nossa primeira aplicação foi criada no modo PCL, ou seja, uma DLL é criada e referenciada em cada projeto de App. Essa é a melhor maneira de trabalhar com o Xamarin.Forms, embora a SAP também seja suportada.

Com o SAP é possível utilizar diretivas de compilação, para que

o compilador utilize determinado código apenas para uma

plataforma específica. Por exemplo, se utilizar o símbolo

o código será específico para os dispositivos da

Apple.

IOS

”,

Tais diretivas não fazem sentido num projeto do tipo PCL, porque ele é inteiramente independente de plataforma. Mas também é possível chamar algo específico de uma plataforma num projeto PCL usando, por exemplo, Device.OnPlatform.

O projeto do tipo PCL foi originalmente proposto para manter

código específico para várias versões da .NET. Sendo assim, cada PCL particular contém flags que indicam qual plataforma é suportada.

#Dominando o Xamarin.Forms

Xamarin.Forms

Primeira aplicação

#Dominando o Xamarin.Forms Xamarin.Forms Primeira aplicação O Xamarin.Forms fornece uma série de facilidades para

O

Xamarin.Forms fornece uma série de facilidades para facilitar

o

layout sem que seja preciso realizar cálculos. A classe view

define duas propriedades chamadas HorizontalOptions e VerticalOptions, que definem como a view é posicionada no seu pai.

Essas propriedades são do tipo LayoutOption, que contém oito

opções:

Start

Center

End

Fill

StartAndExpand

CenterAndExpand

EndAndExpand

FillAndExpand

Altere o código da classe App do Hello para cada uma da opções acima e veja como a tela se comporta.

#Dominando o Xamarin.Forms

Xamarin.Forms

Dominando o Texto

#Dominando o Xamarin.Forms Xamarin.Forms Dominando o Texto Numa App é muito comum trabalhar com texto. Crie

Numa App é muito comum trabalhar com texto. Crie um novo Projeto PCL e chame de Baskervilles. No App.cs deixe o código da seguinte maneira:

namespace Baskervilles

{

 

public class App : Application

{

public App()

{

MainPage = new BaskervillesPage();

}

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

}

}

}

42

#Dominando o Xamarin.Forms

Xamarin.Forms

Dominando o Texto

#Dominando o Xamarin.Forms Xamarin.Forms Dominando o Texto Veja que não estamos criando uma página diretamente no

Veja que não estamos criando uma página diretamente no construtor da App, mas apontando para uma outra classe. Dessa forma, clique com o botão direito em cima do nome do projeto (na Solution Explorer) e selecione a opção Add New Item. Escolha a opção Visual C# / Cross-Platform / Code / Forms Content Page. Será criada uma nova classe derivada de ContentPage. Chame-a de BaskervillesPage. O romance policial The Hound of the Baskervilles (em português, O Cão dos Baskervilles) foi escrito por Sir Arthur Conan Doyle, tendo como protagonistas Sherlock Holmes e Dr. Watson. Vamos pegar uma pequena parte desse romance em inglês e mostrar na tela.

#Dominando o Xamarin.Forms

Xamarin.Forms

Dominando o Texto

namespace Baskervilles

{

 

public class BaskervillesPage : ContentPage

{

public BaskervillesPage()

{

Content = new Label

{

VerticalOptions = LayoutOptions.Center, Text = "Mr. Sherlock Holmes, who was usually very late in " + "the mornings, save upon those not infrequent " + "occasions when he was up all night, was seated at " + "the breakfast table. I stood upon the hearth-rug " + "and picked up the stick which our visitor had left " + "behind him the night before. It was a fine, thick " + "piece of wood, bulbous-headed, of the sort which " + "is known as a \u201CPenang lawyer.\u201D Just " + "under the head was a broad silver band, nearly an " + "inch across, \u201CTo James Mortimer, M.R.C.S., " + "from his friends of the C.C.H.,\u201D was engraved " + "upon it, with the date \u201C1884.\u201D It was " + "just such a stick as the old-fashioned family " + "practitioner used to carry\u2014dignified, solid, " + "and reassuring."

};

Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5);

}

}

}

"and reassuring." }; Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5); } } } 44

44

#Dominando o Xamarin.Forms

Xamarin.Forms

Dominando o Texto

#Dominando o Xamarin.Forms Xamarin.Forms Dominando o Texto Observe que foram utilizados códigos Unicode para abrir e

Observe que foram utilizados códigos Unicode para abrir e fechar aspas (\u201C e \u201D). A propriedade Padding foi configurada para 5 unidades ao redor da página para evitar que o texto ultrapasse os limites. Além disso, a propriedade VerticalOptions foi configurada para centralizar o texto de modo vertical na página.

Além disso, a propriedade VerticalOptions foi configurada para centralizar o texto de modo vertical na página.

#Dominando o Xamarin.Forms

Xamarin.Forms

Dominando o Texto

#Dominando o Xamarin.Forms Xamarin.Forms Dominando o Texto Brinque um pouco com as propriedades HorizontalOptions com as

Brinque um pouco com as propriedades HorizontalOptions com as opções Start, Center ou End. Trabalhe ainda com a propriedade HorizontalTextAlignment do Label e veja como esta funciona. Use ainda a propriedade LineBreakMode com suas opções para quebrar ou truncar o texto. A classe Label tem muitas opções para flexibilizar o texto.

com suas opções para quebrar ou truncar o texto. A classe Label tem muitas opções para

#Dominando o Xamarin.Forms

Xamarin.Forms

Dominando o Texto – Cores

o Xamarin.Forms Xamarin.Forms Dominando o Texto – Cores O Label por padrão mostrará a cor mais

O Label por padrão mostrará a cor mais apropriada para o dispositivo em questão. É possível alterar esse comportamento através de duas propriedades: TextColor e BackgroundColor. A primeira faz parte do próprio Label. A segunda é herdade de VisualElement, o que significa que Page e Layout também possuem uma propriedade BackgroundColor. Observe o exemplo:

class GreetingsPage : ContentPage

{

public GreetingsPage()

{

Content = new Label

{

Text = "Greetings, Xamarin.Forms!", HorizontalTextAlignment = TextAlignment.Center, VerticalTextAlignment = TextAlignment.Center, BackgroundColor = Color.Yellow, TextColor = Color.Blue

}

}

};

#Dominando o Xamarin.Forms

Xamarin.Forms

Dominando o Texto – Cores

o Xamarin.Forms Xamarin.Forms Dominando o Texto – Cores Veja que interessante. O Label está ocupando todo

Veja que interessante. O Label está ocupando todo o espaço da tela. É o resultado de usar as propriedades HorizontalTextAlignment e VerticalTextAlignment. E se quiséssemos o amarelo apenas no fundo do Label, sem dar essa impressão que a tela é amarela?

E se quiséssemos o amarelo apenas no fundo do Label, sem dar essa impressão que a

48

#Dominando o Xamarin.Forms

Xamarin.Forms

Dominando o Texto – Cores

o Xamarin.Forms Xamarin.Forms Dominando o Texto – Cores Neste caso deveríamos usar as propriedades

Neste caso deveríamos usar as propriedades HorizontalOptions e VerticalOptions. Observe o exemplo. O resultado pode ser visto na página seguinte.

namespace Greetings

{

 

class GreetingsPage : ContentPage

{

public GreetingsPage()

{

Content = new Label

{

Text = "Greetings, Xamarin.Forms!", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center, BackgroundColor = Color.Yellow, TextColor = Color.Blue

};

}

}

}

#Dominando o Xamarin.Forms

Xamarin.Forms

Dominando o Texto – Cores

o Xamarin.Forms Xamarin.Forms Dominando o Texto – Cores Aí está o resultado. Agora sim o fundo

Aí está o resultado. Agora sim o fundo amarelo encontra-se apenas no Label. Tirou aquela impressão que o fundo da tela era amarelo. No exemplo anterior, o fundo amarelo era do Label, é bom que fique claro, mas o alinhamento dava a impressão que era o fundo da tela.

o fundo amarelo era do Label, é bom que fique claro, mas o alinhamento dava a

50

#Dominando o Xamarin.Forms

Xamarin.Forms

Dominando o Texto – Cores

o Xamarin.Forms Xamarin.Forms Dominando o Texto – Cores O valor padrão de TextColor e BackgroundColor é

O valor padrão de TextColor e BackgroundColor é Color.Default, que vai setar a cor padrão de acordo com o dispositivo. A estrutura Color armazena as cores de duas maneiras:

Com os valores red, green, e blue (RGB) do tipo double, com o intervalo entre 0 e 1.

Com valores para hue, saturation, e luminosity do tipo double, com o intervalo entre 0 e 1.

Existe ainda um canal alfa (alpha chanel) na estrutura Color para trabalhar com graus de opacidade. Uma propriedade somente-leitura “A” expõem esse valor que vai do 0 (transparente) ao 1 (opaco).

Crie um novo projeto ou use um existente e brinque um pouco com os seguintes métodos:

new Color(double grayShade)

new Color(double r, double g, double b)

new Color(double r, double g, double b, double a)

Color.FromRgb(double r, double g, double b)

Color.FromRgb(int r, int g, int b)

Color.FromRgba(double r, double g, double b, double a)

Color.FromRgba(int r, int g, int b, int a)

Color.FromHsla(double h, double s, double l, double a)

#Dominando o Xamarin.Forms

Xamarin.Forms

Dominando o Texto – Cores

o Xamarin.Forms Xamarin.Forms Dominando o Texto – Cores Color ainda disponibiliza 17 campos com nomes de

Color ainda disponibiliza 17 campos com nomes de cores que podem ser utilizados facilmente, conforme tabela abaixo. Cuidado quando trabalhar com cores! Não tente criar uma App que se pareça igual em todos os dispositivos criando seu próprio padrão. Leve em conta a experiência do usuário. Aliás, LEVE MUITO EM CONTA A EXPERIÊNCIA DO USUÁRIO. No que for possível, siga o padrão do dispositivo.

52
52

#Dominando o Xamarin.Forms

Xamarin.Forms

Esquema de Cores da Aplicação

Xamarin.Forms Xamarin.Forms Esquema de Cores da Aplicação É possível alterar o esquema de cores de toda

É possível alterar o esquema de cores de toda a aplicação.

No caso do Android, basta alterar o arquivo AndroidManifest.xml que fica na pasta properties. Normalmente esse arquivo tem o seguinte conteúdo:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"> <uses-sdk android:minSdkVersion="15" /> <application></application> </manifest>

Para que a app Android apresente o texto preto num fundo branco, basta adicionar o seguinte atributo à tag application:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"> <uses-sdk android:minSdkVersion="15" /> <application android:theme="@style/android:Theme.Holo.Light"></application> </manifest>

#Dominando o Xamarin.Forms

Xamarin.Forms

Esquema de Cores da Aplicação

Xamarin.Forms Xamarin.Forms Esquema de Cores da Aplicação No caso das aplicações Windows é preciso alterar o

No caso das aplicações Windows é preciso alterar o arquivo App.xaml. Segue um arquivo desses padrão para um projeto UWP:

<Application x:Class="Greetings.UWP.App"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:Greetings.UWP"

RequestedTheme="Light">

</Application>

Observe o atributo RequestedTheme. Da forma como está definido a aplicação vai mostrar texto preto sobre fundo branco. Se o atributo for alterado para “Dark” teremos fundo preto e texto branco. Remova o atributo RequestedTheme caso queira permitir que o usuário determine a cor do esquema.

#Dominando o Xamarin.Forms

Xamarin.Forms

Fontes

#Dominando o Xamarin.Forms Xamarin.Forms Fontes Por padrão, o Label usa um sistema de fontes definido por

Por padrão, o Label usa um sistema de fontes definido por cada plataforma, mas existem diversas propriedades que permitem alterar esse comportamento. As duas únicas classes que tem esse comportamento são: Label e Button.

As propriedades que permitem a alteração da fonte são as seguintes:

FontFamily do tipo string. Permite configurar a família da fonte.

FontSize do tipo double. Permite configurar o tamanho da fonte.

FontAttributes. Uma enumeração com três membros: None, Bold, e Italic.

Observe o exemplo:

class GreetingsPage : ContentPage

{

public GreetingsPage()

{

Content = new Label

{

Text = "Greetings, Xamarin.Forms!", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center, FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), FontAttributes = FontAttributes.Bold | FontAttributes.Italic

}

}

};

55

#Dominando o Xamarin.Forms

Xamarin.Forms

Fontes

#Dominando o Xamarin.Forms Xamarin.Forms Fontes O resultado pode ser visto abaixo nas três plataformas. 56

O resultado pode ser visto abaixo nas três plataformas.

#Dominando o Xamarin.Forms Xamarin.Forms Fontes O resultado pode ser visto abaixo nas três plataformas. 56

#Dominando o Xamarin.Forms

Xamarin.Forms

Fontes – Texto Formatado

o Xamarin.Forms Xamarin.Forms Fontes – Texto Formatado O Label em uma propriedade chamada FormattedText, que é

O Label em uma propriedade chamada FormattedText, que é do tipo FormattedString, que possui a propriedade Spans do tipo Ilist<Span>, ou seja, uma coleção de objetos Span. Cada Span é um pedaço formatado do texto, que é governado por seis propriedades:

Text

FontFamily

FontSize

FontAttributes

ForegroundColor

BackgroundColor

Observe o exemplo na página seguinte.

#Dominando o Xamarin.Forms

Xamarin.Forms

Fontes – Texto Formatado

public VariableFormattedTextPage()

– Texto Formatado public VariableFormattedTextPage() {   FormattedString formattedString = new

{

 

FormattedString formattedString = new FormattedString(); formattedString.Spans.Add(new Span

{

Text = "I "

}); formattedString.Spans.Add(new Span

{

Text = "love", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), FontAttributes = FontAttributes.Bold

}); formattedString.Spans.Add(new Span

{

Text = " Xamarin.Forms!"

});

Content = new Label

{

FormattedText = formattedString, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center, FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))

};

}

#Dominando o Xamarin.Forms

Xamarin.Forms

Fontes – Texto Formatado

É possível também fazer da seguinte maneira:

public VariableFormattedTextPage()

{

 

Content = new Label

{

FormattedText = new FormattedString

{

 

Spans =

{

new Span

{

Text = "I "}, new Span

{

Text = "love", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), FontAttributes = FontAttributes.Bold

},

new Span

{

Text = " Xamarin.Forms!"

}

}

 

}, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center, FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))

};

}

VerticalOptions = LayoutOptions.Center, FontSize = Device.GetNamedSize(NamedSize.Large, typeof (Label)) }; } 59

59

#Dominando o Xamarin.Forms

Xamarin.Forms

Fontes – Texto Formatado

#Dominando o Xamarin.Forms Xamarin.Forms Fontes – Texto Formatado Veja o resultado: 60

Veja o resultado:

#Dominando o Xamarin.Forms Xamarin.Forms Fontes – Texto Formatado Veja o resultado: 60

60

#Dominando o Xamarin.Forms

Xamarin.Forms

Layouts – Introdução

o Xamarin.Forms Xamarin.Forms Layouts – Introdução A classe ContentPage contém uma propriedade chamada Content

A classe ContentPage contém uma propriedade chamada Content do tipo View que você pode setar para um objeto. Para mostrar múltiplas Views é preciso configurar Content para a instância de uma classe que pode ter múltiplos filhos do tipo View.

Existem quatro classes que herdam de Layout<View>, que podem ter múltiplos filhos do tipo View:

AbsoluteLayout

Grid

RelativeLayout

StackLayout

Cada uma delas arruma seus filhos de uma maneira característica.

View: AbsoluteLayout Grid RelativeLayout StackLayout Cada uma delas arruma seus filhos de uma maneira característica. 61

#Dominando o Xamarin.Forms

Xamarin.Forms

Layouts – StackLayout

O StackLayout organiza seus filhos numa pilha (stack). Ele define apenas duas propriedades:

Orientation do tipo StackOrientation, uma enumeração que tem dois membros: Vertical (padrão) e Horizontal.

Spacing do tipo double, iniciado por padrão com o valor 6.0.

Que tal mostrar os nomes das cores na tela? O StackLayout seria ideal para isso. Observe o código a seguir:

class ColorLoopPage : ContentPage

{

public ColorLoopPage()

{

var colors = new[]

{

new { value = Color.White, name = "White" }, new { value = Color.Silver, name = "Silver" }, new { value = Color.Gray, name = "Gray" }, new { value = Color.Black, name = "Black" }, new { value = Color.Red, name = "Red" }, new { value = Color.Maroon, name = "Maroon" }, new { value = Color.Yellow, name = "Yellow" }, new { value = Color.Olive, name = "Olive" },

}, new { value = Color.Yellow, name = "Yellow" }, new { value = Color.Olive, name
}, new { value = Color.Yellow, name = "Yellow" }, new { value = Color.Olive, name

#Dominando o Xamarin.Forms

Xamarin.Forms

Layouts – StackLayout

new { value = Color.Lime, name = "Lime" }, new { value = Color.Green, name = "Green" }, new { value = Color.Aqua, name = "Aqua" }, new { value = Color.Teal, name = "Teal" },

new { value = Color.Blue, name = "Blue" }, new { value = Color.Navy, name = "Navy" }, new { value = Color.Pink, name = "Pink" }, new { value = Color.Fuchsia, name = "Fuchsia" }, new { value = Color.Purple, name = "Purple" } }; StackLayout stackLayout = new StackLayout(); foreach (var color in colors)

{

stackLayout.Children.Add( new Label

{

Text = color.name, TextColor = color.value, FontSize = Device.GetNamedSize(NamedSize.Large,

typeof(Label))

});

}

Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5); Content = stackLayout;

}

}

typeof (Label)) }); } Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5); Content = stackLayout;
typeof (Label)) }); } Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5); Content = stackLayout;

#Dominando o Xamarin.Forms

Xamarin.Forms

Layouts – StackLayout

O resultado pode ser visto na imagem abaixo.

#Dominando o Xamarin.Forms Xamarin.Forms Layouts – StackLayout O resultado pode ser visto na imagem abaixo. 64
#Dominando o Xamarin.Forms Xamarin.Forms Layouts – StackLayout O resultado pode ser visto na imagem abaixo. 64
#Dominando o Xamarin.Forms Xamarin.Forms Layouts – StackLayout O resultado pode ser visto na imagem abaixo. 64

#Dominando o Xamarin.Forms

Xamarin.Forms

Layouts – StackLayout

Ficou interessante. Mas, se a quantidade de cores for maior que a altura da tela, não tem como deslizar (ou navegar) pelas cores. Isso ocorre porque o StackLayout não contém um recurso de Scrool automático. Para isso teremos que usar um elemento chamado ScrollView.

Basta instanciar um ScrollView e adicionar o StackLayout como seu Content. Observe o trecho de código modificado.

De:

Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5); Content = stackLayout;

Para:

Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5); Content = new ScrollView

{

Content = stackLayout

};

Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5); Content = new ScrollView { Content =
Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5); Content = new ScrollView { Content =

#Dominando o Xamarin.Forms

Xamarin.Forms

Frame e BoxView

#Dominando o Xamarin.Forms Xamarin.Forms Frame e BoxView Existem duas Views retangulares que são excelentes para

Existem duas Views retangulares que são excelentes para apresentar dados.

A BoxView é um retângulo preenchido. Ela deriva de View e define uma propriedade Color com o

valor padrão como transparente.

O Frame exibe uma borda retangular ao redor do seu conteúdo. Deriva de Layout através e ContentView, de onde herda a propriedade Content. O conteúdo de um Frame pode ser uma simples view ou um layout contendo um conjunto de views. Através do VisualElement, o Frame herda a propriedade BackgroundColor que é branca no iPhone e transparente no Android e no Windows Phone.

O

Frame herda a propriedade Padding do Layout e a inicializa com 20 unidades para todos os lados.

O

próprio Frame define a propriedade HasShadow, que é “true” por padrão, mas é exibida apenas

nos dispositivos com iOS. Define ainda a propriedade OutlineColor que é transparente por padrão. OutlineColor não afeta a shadow no iOS.

Vejamos como ficaria um Label como conteúdo de um Frame.

#Dominando o Xamarin.Forms

Xamarin.Forms

Frame e BoxView

public class FramedTextPage : ContentPage

Frame e BoxView public class FramedTextPage : ContentPage {   public FramedTextPage() { Padding =

{

 

public FramedTextPage()

{

Padding = new Thickness(20); Content = new Frame

{

 

OutlineColor = Color.Accent, Content = new Label

{

Text = "I've been framed!", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center

}

 

};

}

}

O Label está centralizado no Frame, mas o Frame ocupa todo o espaço da página. Não dá pra ver claramente que existe um Frame. Observe nas imagens a seguir.

#Dominando o Xamarin.Forms

Xamarin.Forms

Frame e BoxView

#Dominando o Xamarin.Forms Xamarin.Forms Frame e BoxView 68
#Dominando o Xamarin.Forms Xamarin.Forms Frame e BoxView 68

#Dominando o Xamarin.Forms

Xamarin.Forms

Frame e BoxView

#Dominando o Xamarin.Forms Xamarin.Forms Frame e BoxView Como fazer para deixar o Frame contornando apenas o

Como fazer para deixar o Frame contornando apenas o texto? Vamos trabalhar com as propriedades HorizontalOptions e VerticalOptions. Ambas serão configuradas para LayoutOptions.Center.

public class FramedTextPage : ContentPage

{

 

public FramedTextPage()

{

Padding = new Thickness(20); Content = new Frame

{

 

OutlineColor = Color.Accent,

HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center, Content = new Label

{

Text = "I've been framed!", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))

}

 

};

}

}

Observe o resultado nas imagens a seguir.

#Dominando o Xamarin.Forms

Xamarin.Forms

Frame e BoxView

#Dominando o Xamarin.Forms Xamarin.Forms Frame e BoxView 70
#Dominando o Xamarin.Forms Xamarin.Forms Frame e BoxView 70

70

#Dominando o Xamarin.Forms

Xamarin.Forms

Frame e BoxView

#Dominando o Xamarin.Forms Xamarin.Forms Frame e BoxView Criar uma BoxView é muito simples. Observe o código

Criar uma BoxView é muito simples. Observe o código abaixo. Brinque um pouco com as cores e tamanhos da caixa.

public class SizedBoxViewPage : ContentPage

{

public SizedBoxViewPage()

{

BackgroundColor = Color.Pink; Content = new BoxView

{

Color = Color.Navy, HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center, WidthRequest = 200, HeightRequest = 100

}

}

};

Observe o resultado nas imagens a seguir.

#Dominando o Xamarin.Forms

Xamarin.Forms

Frame e BoxView

#Dominando o Xamarin.Forms Xamarin.Forms Frame e BoxView 72
#Dominando o Xamarin.Forms Xamarin.Forms Frame e BoxView 72

#Dominando o Xamarin.Forms

Xamarin.Forms

Frame e BoxView

#Dominando o Xamarin.Forms Xamarin.Forms Frame e BoxView Que tal unir Frame e BoxView para mostrar as

Que tal unir Frame e BoxView para mostrar as cores?! Vamos lá.

class ColorBlocksPage : ContentPage

{

View CreateColorView(Color color, string name)

{

return new Frame

{

OutlineColor = Color.Accent, Padding = new Thickness(5), Content = new StackLayout

{

Orientation = StackOrientation.Horizontal, Spacing = 15, Children =

{

new BoxView

{

Color = color }, new Label

{

Text = name, FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),

#Dominando o Xamarin.Forms

Xamarin.Forms

Frame e BoxView

#Dominando o Xamarin.Forms Xamarin.Forms Frame e BoxView FontAttributes = FontAttributes.Bold, VerticalOptions =

FontAttributes = FontAttributes.Bold, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.StartAndExpand

},

new StackLayout

{

 

Children =

{

new Label

{

Text = String.Format("{0:X2}-{1:X2}-{2:X2}", (int)(255 * color.R), (int)(255 * color.G), (int)(255 * color.B)), VerticalOptions = LayoutOptions.CenterAndExpand, IsVisible = color != Color.Default

},

new Label

{

Text = String.Format("{0:F2}, {1:F2}, {2:F2}", color.Hue, color.Saturation, color.Luminosity), VerticalOptions = LayoutOptions.CenterAndExpand, IsVisible = color != Color.Default

}

}, HorizontalOptions = LayoutOptions.End

}

74

#Dominando o Xamarin.Forms

Xamarin.Forms

Frame e BoxView

#Dominando o Xamarin.Forms Xamarin.Forms Frame e BoxView Veja o resultado logo abaixo. 75

Veja o resultado logo abaixo.

#Dominando o Xamarin.Forms Xamarin.Forms Frame e BoxView Veja o resultado logo abaixo. 75

75

#Dominando o Xamarin.Forms

Xamarin.Forms

Lidando com Tamanhos

#Dominando o Xamarin.Forms Xamarin.Forms Lidando com Tamanhos Existem alguns tamanhos padrões que são definidos por

Existem alguns tamanhos padrões que são definidos por diversos elementos. Por exemplo:

A barra de status do iOS tem a altura definida como 20.

O tamanho padrão da uma BoxView é 40 (altura e largura).

O tamanho padrão do Padding para o Frame é 20.

O padrão da propriedade Spacing do StackLayout é 6.

Existem muitas plataformas e muitos dispositivos. Você deve se preocupar em saber cada tamanho e tentar redimensionar os tamanhos dos objetos e das fontes? Bom, pode ser desgastante tentar fazer isso. É melhor confiar nos padrões definidos pelo Xamarin.Forms e por cada plataforma.

Mas, e se for preciso saber o tamanho da tela para configurar diretamente o tamanho de determinado objeto? Uma tela é um retângulo que é mapeado como um array de pixels. O pixel é o menor elemento num dispositivo de exibição.

Não vamos entrar em muitos detalhes, mas podemos dizer que existem vários conceitos envolvidos: tamanho do pixel, tamanho diagonal da tela (em polegadas), densidade dos pixels, pixels por ponto, tamanho do ponto, pontos por polegada, etc.

Quando se pergunta a resolução de uma tela, costuma-se responder da seguinte maneira:

800x600, por exemplo. O 800 se refere à largura da tela e 600 se refere à altura (em pixels).

#Dominando o Xamarin.Forms

Xamarin.Forms

Lidando com Tamanhos

#Dominando o Xamarin.Forms Xamarin.Forms Lidando com Tamanhos O código a seguir exibe o tamanho da tela

O código a seguir exibe o tamanho da tela do dispositivo:

public class WhatSizePage : ContentPage

{

 

Label label;

public WhatSizePage()

{

label = new Label

{

FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center

}; Content = label; SizeChanged += OnPageSizeChanged;

}

void OnPageSizeChanged(object sender, EventArgs args)

{

label.Text = String.Format("{0} \u00D7 {1}", Width, Height);

}

}

Observe o resultado nas imagens a seguir.

#Dominando o Xamarin.Forms

Xamarin.Forms

Lidando com Tamanhos

#Dominando o Xamarin.Forms Xamarin.Forms Lidando com Tamanhos 78
#Dominando o Xamarin.Forms Xamarin.Forms Lidando com Tamanhos 78

78

#Dominando o Xamarin.Forms

Xamarin.Forms

Lidando com Tamanhos

#Dominando o Xamarin.Forms Xamarin.Forms Lidando com Tamanhos Em relação às fontes, o Label e o Button

Em relação às fontes, o Label e o Button possuem a propriedade FontSize, que serve para configurar o tamanho da fonte. Em muitos casos é melhor trabalhar com Device.GetNamedSize que permite especificar um membro da enumeração NamedSize: Default, Micro, Small, Medium ou Large. Observe no exemplo abaixo (o exemplo usa a opção Large):

class GreetingsPage : ContentPage

{

public GreetingsPage()

{

Content = new Label

{

Text = "Greetings, Xamarin.Forms!", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center, FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), FontAttributes = FontAttributes.Bold | FontAttributes.Italic

}

}

};

É possível realizar alguns cálculos com base no tamanho da tela, na resolução, etc para configurar diretamente o tamanho de uma fonte. Prefira, no entanto, usar o padrão para evitar dores de cabeça.

#Dominando o Xamarin.Forms

Xamarin.Forms

Botões

#Dominando o Xamarin.Forms Xamarin.Forms Botões Os componentes gráficos que aparecem para o usuário, as views, podem

Os componentes gráficos que aparecem para o usuário, as views, podem ser divididos em dois grupos: aqueles que apresentam dados para o usuário, como um Label e aqueles que obtém uma entrada através da interação com o usuário, como um Button.

O Button é a forma de o usuário solicitar alguma coisa para a aplicação, de enviar um comando, uma ação.

Um Button no Xamarin.Forms exibe texto e pode ou não vir acompanhado de uma imagem. Quando o usuário seleciona um botão, o mesmo muda sua aparência para dar um feedback para o usuário. Quando o dedo do usuário solta o botão, um evento é disparado (Clicked). Esse evento possui dois argumentos:

O primeiro argumento é o objeto que dispara o evento. Para o manipulador (handler) do Clicked, o objeto em questão é o botão que acabou de ser pressionado.

O segundo argumento algumas vezes fornece mais informações sobre o evento. No caso do evento Clicked do Button, o segundo argumento é um EventArgs que não fornece informações adicionais.

Vamos analisar um primeiro código onde cada vez que há um clique no botão, um Label é adicionado num StackLayout exibindo a hora em que o botão foi clicado.

#Dominando o Xamarin.Forms

Xamarin.Forms

Botões

public class ButtonLoggerPage : ContentPage

{

StackLayout loggerLayout = new StackLayout(); public ButtonLoggerPage()

= new StackLayout(); public ButtonLoggerPage() {   // Create the Button and attach Clicked

{

 

// Create the Button and attach Clicked handler. Button button = new Button

{

 

Text = "Log the Click Time"

 

}; button.Clicked += OnButtonClicked; this.Padding = new Thickness(5, Device.OnPlatform(20, 0, 0), 5, 0); // Assemble the page. this.Content = new StackLayout

{

 

Children =

{

button, new ScrollView

{

VerticalOptions = LayoutOptions.FillAndExpand, Content = loggerLayout

}

}

 

};

}

#Dominando o Xamarin.Forms

Xamarin.Forms

Botões

void OnButtonClicked(object sender, EventArgs args)

{

// Add Label to scrollable StackLayout. loggerLayout.Children.Add(new Label

{

Text = "Button clicked at " + DateTime.Now.ToString("T")

}

}

});

at " + DateTime .Now.ToString( "T" ) } } }); O programa é de fácil assimilação.

O programa é de fácil assimilação. Observe o resultado na página seguinte.

#Dominando o Xamarin.Forms

Xamarin.Forms

Botões

#Dominando o Xamarin.Forms Xamarin.Forms Botões 83
#Dominando o Xamarin.Forms Xamarin.Forms Botões 83

83

#Dominando o Xamarin.Forms

Xamarin.Forms

Botões

#Dominando o Xamarin.Forms Xamarin.Forms Botões O Button fornece várias propriedades para customizar sua aparência.

O Button fornece várias propriedades para customizar sua aparência. Dentre elas:

FontFamily do tipo string

FontSize do tipo double

FontAttributes do tipo FontAttributes

TextColor do tipo Color (o padrão é Color.Default)

BorderColor do tipo Color (o padrão é Color.Default)

BorderWidth do tipo double (o padrão é 0)

BorderRadius do tipo double (o padrão é 5)

Image

Além dessas, o Button herda a propriedade BackgroundColor de VisualElement e HorizontalOptions and VerticalOptions da View.

Às vezes é interessante compartilhar determinado método com vários botões. Imagine uma calculadora com 10 botões. Ter 10 método, um para cada botão, pode não ser a saída mais elegante. Que tal um método só?

Observe o código a seguir, que é bem parecido com o anterior, sendo que neste existe um botão para remover uma das entradas da pilha. Temos dois botões compartilhando o mesmo método.

#Dominando o Xamarin.Forms

Xamarin.Forms

Botões

public class TwoButtonsPage : ContentPage

{

Button addButton, removeButton; StackLayout loggerLayout = new StackLayout(); public TwoButtonsPage()

{

// Create the Button views and attach Clicked handlers. addButton = new Button

{

Text = "Add", HorizontalOptions = LayoutOptions.CenterAndExpand

};

addButton.Clicked += OnButtonClicked; removeButton = new Button

{

Text = "Remove", HorizontalOptions = LayoutOptions.CenterAndExpand, IsEnabled = false

= LayoutOptions.CenterAndExpand, IsEnabled = false }; removeButton.Clicked += OnButtonClicked; this .Padding =

};

removeButton.Clicked += OnButtonClicked; this.Padding = new Thickness(5, Device.OnPlatform(20, 0, 0), 5, 0); // Assemble the page. this.Content = new StackLayout

{

Children =

{

#Dominando o Xamarin.Forms

Xamarin.Forms

Botões

new StackLayout

{

Orientation = StackOrientation.Horizontal, Children =

{

 

addButton,

removeButton

}

}, new ScrollView

{

VerticalOptions = LayoutOptions.FillAndExpand, Content = loggerLayout

}

};

}

}

void OnButtonClicked(object sender, EventArgs args)

{

Button button = (Button)sender; if (button == addButton)

{

void OnButtonClicked( object sender, EventArgs args) { Button button = (Button)sender; if (button == addButton) {

#Dominando o Xamarin.Forms

Xamarin.Forms

Botões

// Add Label to scrollable StackLayout. loggerLayout.Children.Add(new Label

{

Text = "Button clicked at " + DateTime.Now.ToString("T")

});

}

else

{

 

// Remove topmost Label from StackLayout.

loggerLayout.Children.RemoveAt(0);

}

// Enable "Remove" button only if children are present. removeButton.IsEnabled = loggerLayout.Children.Count > 0;

}

= loggerLayout.Children.Count > 0; } Observe que o método OnButtonClicked verifica qual botão o

Observe que o método OnButtonClicked verifica qual botão o chamou. Se for o botão addButton, ele adiciona o texto na tela. Se não, ele remove um item. E se não houver nenhum elemento, o que vai ocorrer quando o usuário clicar no botão para remover? Uma exceção. Neste caso, o ideal é verificar se existem itens para ser removidos, caso não existam, desabilite o botão através da propriedade IsEnabled.

Em alguns casos será melhor trabalhar com a propriedade StyleId, que é do tipo String e pertence à classe Element. O objetivo dessa propriedade é identificar Views.

#Dominando o Xamarin.Forms

Xamarin.Forms

Botões

#Dominando o Xamarin.Forms Xamarin.Forms Botões É possível trabalhar com funções anônimas lambda. Observe como fica

É possível trabalhar com funções anônimas lambda. Observe como fica o código.

public class ButtonLambdasPage : ContentPage

{

public ButtonLambdasPage()

{

// Number to manipulate. double number = 1;

// Create the Label for display. Label label = new Label

{

Text = number.ToString(), FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.CenterAndExpand

};

// Create the first Button and attach Clicked handler. Button timesButton = new Button

{

Text = "Double", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Button)), HorizontalOptions = LayoutOptions.CenterAndExpand

};

timesButton.Clicked += (sender, args) =>

{

number *= 2; label.Text = number.ToString();

};

88

#Dominando o Xamarin.Forms

Xamarin.Forms

Botões

// Create the second Button and attach Clicked handler. Button divideButton = new Button

{

Clicked handler. Button divideButton = new Button { Text = "Half" , FontSize =

Text = "Half", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Button)), HorizontalOptions = LayoutOptions.CenterAndExpand

}; divideButton.Clicked += (sender, args) =>

{

number /= 2; label.Text = number.ToString();

};

// Assemble the page. this.Content = new StackLayout

{

Children =

 

{

label, new StackLayout

{

 

Orientation = StackOrientation.Horizontal, VerticalOptions = LayoutOptions.CenterAndExpand, Children =

{

 

timesButton,

divideButton

 

}

}

}

89

#Dominando o Xamarin.Forms

Xamarin.Forms

Botões

#Dominando o Xamarin.Forms Xamarin.Forms Botões 90
#Dominando o Xamarin.Forms Xamarin.Forms Botões 90

90

#Dominando o Xamarin.Forms

Xamarin.Forms

Botões

#Dominando o Xamarin.Forms Xamarin.Forms Botões Observe que cada botão possui uma função lambda anexada. A desvantagem

Observe que cada botão possui uma função lambda anexada. A desvantagem de usar funções lambda é que o código não pode ser compartilhado com múltiplas views. Poder até pode, mas envolve reflexão, o que complica um pouco as coisas.

E se você quisesse armazenar um dado transiente? Dado transiente é aquele que não é armazenado num banco de dados. Um dado que está na tela, mas que pode ser útil recuperar caso o usuário saia da aplicação e retorne.

#Dominando o Xamarin.Forms

Xamarin.Forms

Dados Transientes

#Dominando o Xamarin.Forms Xamarin.Forms Dados Transientes A classe Application contém duas facilidades para que a

A classe Application contém duas facilidades para que a aplicação salve e restaure dados:

A propriedade Properties é um dicionário com chaves “string” e items “object”. O conteúdo desse dicionário é automaticamente salvo antes da aplicação ser encerrada. O conteúdo salvo ficará disponível na próxima vez que a aplicação for iniciada. A classe Application possui ainda três métodos virtuais protected: OnStart, OnSleep e OnResume. A classe App do Xamarin.Forms sobrescreve esses métodos. Tais métodos ajudam a trabalhar com os eventos do ciclo de vida da aplicação.

Para usar essas facilidades, é preciso identificar qual tipo de informação sua aplicação precisa salvar para ser restaurada posteriormente. Geralmente é uma combinação de configurações (setings), tais como cores, tamanho de fontes, etc e dados transientes, como alguma coisa que o usuário digitou ou selecionou na tela. As configurações salvas normalmente se aplicam a toda a aplicação, enquanto os dados transientes são referentes a determinada página.

E como fazer para ter acesso à classe Application? Ela fornece uma propriedade estática chamada Current, que retorna uma instância da aplicação corrente. Observe como armazenar o texto de um label:

Application.Current.Properties["displayLabelText"] = displayLabel.Text;

#Dominando o Xamarin.Forms

Xamarin.Forms

Dados Transientes

#Dominando o Xamarin.Forms Xamarin.Forms Dados Transientes E para recuperar o texto do label? Qual seria o

E para recuperar o texto do label? Qual seria o procedimento? Basta colocar o seguinte código no construtor:

IDictionary<string, object> properties = Application.Current.Properties; if (properties.ContainsKey("displayLabelText"))

{

displayLabel.Text = properties["displayLabelText"] as string; backspaceButton.IsEnabled = displayLabel.Text.Length > 0;

}

Pronto. Resolvido. Salvamos e recuperamos o dado. Mas, às vezes, é preciso que a aplicação interaja com o dicionário Properties de uma maneira mais estruturada. Aí que entram os eventos do ciclo de vida. São aqueles três métodos fornecidos pela classe App.

#Dominando o Xamarin.Forms

Xamarin.Forms

Dados Transientes

O mais importante é o OnSleep.

public class App : Application

{

 

public App()

{

}

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

}

}

{ // Handle when your app resumes } } Normalmente uma aplicação entra nesse modo quando

Normalmente uma aplicação entra nesse modo quando o usuário não interage mais com ela e ela fica inativa, independente de qualquer processo de fundo que esteja ocorrendo.

#Dominando o Xamarin.Forms

Xamarin.Forms

Dados Transientes

#Dominando o Xamarin.Forms Xamarin.Forms Dados Transientes A partir do modo Sleep (dormindo) a aplicação pode ser

A partir do modo Sleep (dormindo) a aplicação pode ser recuperada, ou resumida. O termo em inglês é “resumed” e daí vem o evento OnResume.

Quando uma aplicação Xamarin.Forms está em execução, a forma mais fácil de disparar o evento OnSleep é pressionar o botão “home” do dispositivo. Daí, ao pressionar novamente o ícone da aplicação, a mesma vai disparar o evento OnResume. Em dispositivos Windows Phone, é possível ter o mesmo efeito pressionando o botão Back.

Se você estiver usando tais métodos para salvar e restaurar dados apenas, não precisa tratar o método OnResume. Quando a aplicação chama o método OnResume, o sistema operacional automaticamente restaura o conteúdo e o estado da aplicação. Se desejar, você pode usar o OnResume para limpar o conteúdo do dicionário Properties. Se seu programa tem uma conexão com um webservice, por exemplo, o OnResume poderia ser utilizado para restabelecer essa conexão.

Quando a aplicação é iniciada, a primeira oportunidade de executar algum código na PCL é o construtor da classe App. Nesse momento o dicionário Properties acabou de ser preenchido. Geralmente, o próximo código que é executado é o do construtor da primeira página da aplicação, instanciado pelo construtor de App. A chamada ao OnStart segue esse fluxo. Um método sobrescrito chamado OnAppearing é chamado na classe da página. É possível recuperar dados em qualquer momento durante o processo de inicialização.

#Dominando o Xamarin.Forms

Xamarin.Forms

XAML

#Dominando o Xamarin.Forms Xamarin.Forms XAML Até agora vimos como escrever os programas diretamente no C#. É

Até agora vimos como escrever os programas diretamente no C#. É possível criar uma aplicação Xamarin.Forms inteira utilizando apenas o C#. No entanto, temos uma alternativa interessante para desenhar as telas da aplicação: o XAML.

O XAML é uma linguagem de marcação declarativa utilizada para instanciar e inicializar objetos.

Utilizar o XAML traz várias vantagens, dentre elas, utilizar várias pessoas na mesma equipe para criar a aplicação: programadores e designers. Enquanto o programador trabalha no código em C#,

o designer trabalha nas telas usando o XAML.

É muito fácil criar vinculações (bindings) dentro do XAML, apontando para objetos, listas e fontes de dados definidos na aplicação em C#.

Uma coisa que pode lhe deixar preocupado ou até mesmo chateado é que o Xamarin.Forms não possui uma ferramenta de design para o XAML. Dessa forma, é preciso fazer tudo “na mão”. Quando criamos aplicações para o WPF, o XAML apresenta os dados diretamente na tela, de forma visual e isso facilita muito a nossa vida. Mas, será mesmo uma falta tão grande para aplicações mobile? Tais aplicações costumam ser bem menos complexas que aplicações desktop. Além disso, você poderá utilizar o recurso Previewer que permite ver o layout da aplicação em tempo real sem precisar carregá-la num dispositivo ou emulador.

A seguir segue a imagem do Previewer e o trecho de um código em C# instanciando e inicializando

um Label e o seu equivalente em XAML.

#Dominando o Xamarin.Forms

Xamarin.Forms

#Dominando o Xamarin.Forms Xamarin.Forms XAML 97
XAML
XAML

#Dominando o Xamarin.Forms

Xamarin.Forms

XAML

Código em C#:

#Dominando o Xamarin.Forms Xamarin.Forms XAML Código em C#: new Label { Text = "Hello from Code!"

new Label

{

Text = "Hello from Code!", IsVisible = true, Opacity = 0.75, HorizontalTextAlignment = TextAlignment.Center, VerticalOptions = LayoutOptions.CenterAndExpand, TextColor = Color.Blue, BackgroundColor = Color.FromRgb(255, 128, 128), FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), FontAttributes = FontAttributes.Bold | FontAttributes.Italic

};

Código em XAML:

<Label Text="Hello from XAML!" IsVisible="True"

Opacity="0.75"

HorizontalTextAlignment="Center" VerticalOptions="CenterAndExpand" TextColor="Blue"

BackgroundColor="#FF8080"

FontSize="Large" FontAttributes="Bold,Italic" />

#Dominando o Xamarin.Forms

Xamarin.Forms

XAML

#Dominando o Xamarin.Forms Xamarin.Forms XAML E onde este Label está inserido? Onde a página é definida?

E onde este Label está inserido? Onde a página é definida? E o layout? Observe o código fonte completo do XAML em questão logo abaixo. Perceba que temos uma ContentPage e em seu conteúdo (Content) temos um StackLayout com um filho (Children) que é o Label.

<?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="CodePlusXaml.CodePlusXamlPage"> <ContentPage.Content> <StackLayout> <StackLayout.Children> <Label Text="Hello from XAML!" IsVisible="True"

Opacity="0.75"

HorizontalTextAlignment="Center" VerticalOptions="CenterAndExpand" TextColor="Blue"

BackgroundColor="#FF8080"

FontSize="Large" FontAttributes="Bold,Italic" /> </StackLayout.Children> </StackLayout> </ContentPage.Content> </ContentPage>

#Dominando o Xamarin.Forms

Xamarin.Forms

XAML

Observe o código abaixo em C#:

new Frame

{

OutlineColor = Color.Accent,

HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center, Content = new Label

{

Text = "Greetings, Xamarin.Forms!"

}

};

Text = "Greetings, Xamarin.Forms!" } }; Como converter o código acima para XAML? Como colocar um

Como converter o código acima para XAML? Como colocar um Label dentro de um Frame? Veja logo a seguir:

<Frame OutlineColor="Accent" HorizontalOptions="Center" VerticalOptions="Center"> <Frame.Content> <Label Text="Greetings, Xamarin.Forms!" /> </Frame.Content> </Frame>

#Dominando o Xamarin.Forms

Xamarin.Forms

XAML

#Dominando o Xamarin.Forms Xamarin.Forms XAML No exemplo anterior, Frame e Label são objetos C# expressos como

No exemplo anterior, Frame e Label são objetos C# expressos como elementos XML. Eles são chamados de object elements.

OutlineColor, HorizontalOptions, VerticalOptions e Text são propriedades C# expressas como atributos XML. Elas são chamadas de property attributes.

Frame.Content é uma propriedade C# expressa como um elemento XML. É conhecida como property element.

Também é possível fazer da seguinte maneira, utilizando outra sintaxe:

<Frame HorizontalOptions="Center"> <Frame.VerticalOptions> Center </Frame.VerticalOptions> <Frame.OutlineColor> Accent </Frame.OutlineColor> <Frame.Content> <Label> <Label.Text> Greetings, Xamarin.Forms! </Label.Text> </Label> </Frame.Content> </Frame>

101

#Dominando o Xamarin.Forms

Xamarin.Forms

XAML

#Dominando o Xamarin.Forms Xamarin.Forms XAML Abaixo podemos ver um código com vários StackLayout, sendo que cada

Abaixo podemos ver um código com vários StackLayout, sendo que cada filho é um StackLayout.

<StackLayout> <StackLayout.Children> <StackLayout Orientation="Horizontal"> <StackLayout.Children> <BoxView Color="Red" /> <Label Text="Red" VerticalOptions="Center" /> </StackLayout.Children> </StackLayout> <StackLayout Orientation="Horizontal"> <StackLayout.Children> <BoxView Color="Green" /> <Label Text="Green" VerticalOptions="Center" /> </StackLayout.Children> </StackLayout> <StackLayout Orientation="Horizontal"> <StackLayout.Children> <BoxView Color="Blue" /> <Label Text="Blue" VerticalOptions="Center" /> </StackLayout.Children> </StackLayout> </StackLayout.Children> </StackLayout>

102

#Dominando o Xamarin.Forms

Xamarin.Forms

XAML

#Dominando o Xamarin.Forms Xamarin.Forms XAML O objetivo do código anterior é mostrar as cores. Temos um

O objetivo do código anterior é mostrar as cores. Temos um BoxView com a cor e um Label com o nome da cor. Imagine fazer isso com 100 cores! O código iria ficar gigante! A manutenção seria sofrível. Em casos assim é melhor usar o código C#, pois o XAML não possui loops.

Sempre que o código XAML estiver ficando gigante e for preciso utilizar recursos comuns do C#, como um loop, pare e considere fazer parte do código em questão diretamente em C#.

utilizar recursos comuns do C#, como um loop, pare e considere fazer parte do código em

#Dominando o Xamarin.Forms

Xamarin.Forms

XAML

#Dominando o Xamarin.Forms Xamarin.Forms XAML Para adicionar uma página XAML ao projeto, proceda da seguinte maneira:

Para adicionar uma página XAML ao projeto, proceda da seguinte maneira:

Crie um novo projeto Xamarin.Forms do tipo PCL.

Clique com o botão direito no nome do projeto PCL lá no Solution Explorer e selecione Add / New Item. Na janela que vai surgir, selecione a opção Forms Xaml Page, conforme imagem abaixo.

e selecione Add / New Item. Na janela que vai surgir, selecione a opção Forms Xaml

104

#Dominando o Xamarin.Forms

Xamarin.Forms

XAML

#Dominando o Xamarin.Forms Xamarin.Forms XAML Serão criados dois arquivos. Como deixamos o nome “Page1.cs”, os

Serão criados dois arquivos. Como deixamos o nome “Page1.cs”, os arquivos criados serão os seguintes:

Page1.xaml: conterá o código XAML.

Page1.xaml.cs: o arquivo C# referente ao arquivo XAML.

Tais arquivos contribuem para uma classe chamada Page1 que deriva de ContentPage. Observe o código C#:

public partial class Page1 : ContentPage