Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Laboratrio
Examinando a anatomia de um aplicativo
Xamarin.Forms
Verso: 1.0.0
Outubro de 2016
CONTEDO
INTRODUO
RESUMO
Introduo
Uma interface de usurio moderna construda por vrios tipos de objetos visuais. Dependendo do
sistema operacional, esses objetos visuais podem ter nomes diferentes, tais como Control, Element,
View ou Widget. No entanto, todos eles tm a responsabilidade de fazer o trabalho de apresentao,
interao, ou ambos.
Page
Layout
View
A API Xamarin.Forms define classes chamadas VisualElement, Page, Layout e View. Essas classes e
seus descendentes formam a espinha dorsal da interface do usurio Xamarin.Forms. VisualElement
excepcionalmente importante na classe Xamarin.Forms. Um objeto VisualElement qualquer coisa
que ocupe espao na tela.
Uma aplicao Xamarin.Forms consiste em uma ou mais pginas. Uma pgina normalmente ocupa
toda a tela (ou, pelo menos, uma rea muito grande dela). Algumas aplicaes consistem apenas de
uma pgina, enquanto outros permitem que voc navegue entre vrias pginas. Na maioria das
vezes, as aplicaes trabalham simplesmente com um tipo de pgina chamada ContentPage.
Em cada pgina, os elementos visuais so organizados em uma hierarquia de pai e filho. O filho de
um ContentPage geralmente um elemento recipiente (Layout) que permite organizar os elementos
visuais. Alguns recipientes tm apenas um filho, enquanto a maioria dos recipientes tm vrios filhos
que so organizados dentro dele. Estes filhos podem ser outros recipientes ou Views (Visualizaes).
Diferentes tipos de recipientes organizam seus filhos em um Stack, em uma grade bidimensional ou
uma forma livre.
Objetivos
Ao finalizar este laboratrio, os participantes sero capazes de:
Requisitos
Para a realizao deste laboratrio necessrio contar com o seguinte:
Um equipamento de desenvolvimento com sistema operacional Windows 10 e Visual Studio
2015 Community, Professional ou Enterprise com a plataforma Xamarin.
Um equipamento Mac com a plataforma Xamarin.
Nesta tarefa, voc criar um aplicativo Xamarin.Forms usando o Microsoft Visual Studio e um modelo
padro. O processo ir criar uma soluo que contm 6 projetos:
5 projetos especficos para cada plataforma. iOS, Android, UWP, o Windows 8.1 e Windows
Phone.
1 projeto comum para a maior parte do cdigo compartilhado do aplicativo.
3. No painel central da janela New Project, voc pode ver diferentes modelos de soluo
disponveis incluindo 5 Xamarin.Forms:
Clique em cada um dos modelos para ver sua descrio no painel da direita.
6. Clique no boto OK na caixa de dilogo New Universal Windows Project para aceitar as
verses sugeridas para a aplicao UWP que ser criada.
Seis projetos so criados. Para uma soluo chamada HelloXamarinForms, esses projetos so:
Quando voc cria uma nova soluo Xamarin.Forms, as bibliotecas Xamarin.Forms e outras
bibliotecas auxiliares so automaticamente transferidas a partir do gerenciador de pacotes
NuGet. O Visual Studio armazena essas bibliotecas em um diretrio chamado packages
dentro do diretrio da soluo. No entanto, a verso especfica da biblioteca Xamarin.Forms
que baixada especificada dentro do modelo da soluo e, portanto, uma nova verso
poderia estar disponvel.
7. Selecione a opo Manage NuGet Packages for Solution no menu de contexto do nome da
soluo.
provvel que seja solicitado aceitar o acordo de licenciamento e reiniciar Visual Studio para
concluir a instalao.
Voc pode verificar o seguinte link para obter mais informaes sobre a
mensagem de erro.
https://developer.xamarin.com/guides/xamarin-forms/troubleshooting/
10. Uma vez que a atualizao for concluda, selecione Build > Configuration Manager.
11. Na caixa de dilogo Configuration Manager poder ver o projeto PCL e os outros 5 projetos
de aplicao.
Verifique se a caixa de seleo Build est selecionada para todos os projetos e que a caixa de
seleo Deploy est selecionada para todos os projetos de aplicao (a menos que a caixa
seja cinza).
13. Opcionalmente, se quiser exibir a barra de ferramentas iOS e Android para acessar os
dispositivos e emuladores correspondentes, voc pode ativar as opes de View > Toolbars >
iOS e View > Toolbars > Android.
14. Selecione a opo Set As StartUp Project a partir do menu de contexto do projeto Android
para estabelecer a aplicao Android como projeto de inicializao.
17. Escolha a opo Set As StartUp Project a partir do menu de contexto do projeto iOS iOS para
estabelecer a aplicao como projeto de inicializao.
No Mac, voc vai ver o aplicativo implantado no emulador iOS que voc selecionou.
20. Selecciona la opcin Set As StartUp Project del men contextual del proyecto UWP para
establecer la aplicacin UWP como proyecto de inicio.
Por padro, todas as plataformas esto habilitados para mudanas de orientao. Voc pode
girar qualquer um dos emuladores e voc percebe que o texto ajustado para o novo centro da
tela.
Se voc no gosta do cone do aplicativo ou a forma como o nome do aplicativo exibida, voc
pode mudar isso nos projetos individuais de cada plataforma.
Claramente, o programa criado pelo modelo Xamarin.Forms muito simples, portanto, representa
uma excelente oportunidade para examinar os arquivos de cdigo gerados, descobrir como eles se
relacionam e como eles funcionam.
O projecto PCL o projeto que receber a maior parte de nossa ateno quando estivermos
escrevendo uma aplicao Xamarin.Forms. Em algumas circunstncias, o cdigo neste projeto
poderia exigir algum cdigo especial de certas plataformas.
1. Vamos comear com o cdigo que responsvel por apresentar o texto que voc v na tela.
Esta a classe App no PCL projeto comum.
Voc pode notar que o espao para nome o mesmo que o nome do projeto.
namespace HelloXamarinForms
{
public class App : Application
{
Voc tambm pode perceber que a classe definida como pblica e derivada da classe
Xamarin.Forms.Application.
public App()
{
// The root page of your application
var content = new ContentPage
{
Title = "HelloXamarinForms",
Content = new StackLayout
{
VerticalOptions = LayoutOptions.Center,
Children = {
new Label {
HorizontalTextAlignment = TextAlignment.Center,
Text = "Welcome to Xamarin Forms!"
}
}
}
};
A classe ContentPage define uma propriedade chamada Content, para a qual estabelecemos
o contedo da pgina. Geralmente, o contedo um espao que comporta diversos Views.
No caso do cdigo gerado, um StackLayout que acomoda seus filhos em uma pilha.
No cdigo gerado, StackLayout contm um nico filho que uma View Label. A classe Label
deriva da classe View e usada em aplicativos Xamarin.Forms para exibir textos.
A propriedade HorizontalTextAlignment de Label especifica o alinhamento horizontal do
contedo armazenado na propriedade Text.
4. Observe que projeto PCL contm o arquivo AssemblyInfo.cs com informao de Assembly.
Contm tambm o arquivo packages.config, que lista os pacotes NuGet exigidos pelo
programa.
5. Abra a seco References do projecto PCL e note que existem ao menos 4 bibliotecas que o
projeto PCL requer.
.NET
Xamarin.Forms.Core
Xamarin.Forms.Platform
Xamarin.Forms.Xaml
Os 5 projetos de aplicativo tem seus prprios recursos (assets) em forma de cones e metadados.
importante prestar ateno a esses recursos ao publicar o aplicativo na plataforma, mas enquanto
voc est aprendendo a desenvolver aplicativos Xamarin.Forms pode ignorar por um momento esses
recursos. Voc pode tambm manter contrados os projetos desses aplicativos, visto que no precisa
se preocupar muito com o seu contedo.
6. Examine a seo References de cada projeto de aplicativo. L voc ver a referncia para o
projeto comum PCL, assim como vrios Assemblies .NET, os Assemblies Xamarin.Forms
listados anteriormente e os Assemblies adicionais Xamarin.Forms aplicveis a cada
plataforma:
Xamarin.Forms.Platform.Android
Xamarin.Forms.Platform.iOS
Xamarin.Forms.Platform.UAP (no mostrado explcitamente en el proyecto UWP)
Xamarin.Forms.Platform.WinRT
Xamarin.Forms.Platform.WinRT.Tablet
Xamarin.Forms.Platform.WinRT.Phone
Em um aplicativo Android, a classe tpica MainActivity deve ser derivada de uma classe
Xamarin.Forms chamada FormsAppCompatActivity definida na Assembly
Xamarin.Forms.Platform.Android.
O atributo definido na classe MainActivity indica que a atividade no ser recriada quando o
telefone muda a sua orientao (vertical para horizontal e vice-versa) ou quando voc mudar
o tamanho da tela.
8. Examine o cdigo do mtodo OnCreate. Neste mtodo realizada a chamada para o mtodo
Forms.Init.
base.OnCreate(bundle);
global::Xamarin.Forms.Forms.Init(this, bundle);
LoadApplication(new App());
}
Note que a nova instncia da classe App definida no projeto PCL passada para o mtodo
LoadApplication definido por FormsAppCompatActivity.
[Register("AppDelegate")]
public partial class AppDelegate :
global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
Este mtodo comea com uma chamada ao mtodo Forms.Init definido na Assembly
Xamarin.Forms.Platform.iOS. Em seguida, chama o mtodo LoadApplication definido na
classe FormsApplicationDelegate, passando uma nova instncia da classe App definida no
projeto PCL.
O objeto Page atribudo propriedade MainPage desse objeto App pode ser usado para criar
um objeto do tipo UIViewController, que responsvel por gerar o contedo da pgina.
11. No projeto UWP ou em qualquer um dos projetos Windows, abra o arquivo App.xaml.cs.
No arquivo App.xaml.cs definida uma classe chamada App que deriva da classe App
definida na biblioteca Windows.UI.Xaml.
12. Examine o cdigo do mtodo OnLaunched. O cdigo neste mtodo chama o mtodo
Forms.Init da seguinte forma:
Xamarin.Forms.Forms.Init(e);
Este arquivo define uma classe chamada MainPage que deriva de uma classe Xamarin.Forms
especificada no elemento raiz do arquivo MainPage.xaml.
public MainPage()
{
this.InitializeComponent();
LoadApplication(new HelloXamarinForms.App());
}
Neste mtodo, uma nova instncia da classe App passada para o mtodo LoadApplication
definido na classe base Xamarin.Forms.Platform.UWP.WindowsBasePage.
Resumen
Neste laboratrio, voc explorou a anatomia de um aplicativo Xamarin.Forms.
Se voc criou uma soluo Xamarin.Forms e no quer desenvolver para uma ou mais plataformas,
simplesmente elimine esses projetos.
Se mais tarde voc mudar de idia sobre esses projetos, voc pode adicionar novos projetos da
plataforma desejada para a soluo Xamarin.Forms.
Agora o momento para explorar as diferenas entre as opes disponveis para compartilhar cdigo
em uma aplicao multiplataforma com Xamarin.Forms.
Quando tiver terminado este laboratrio, publique a seguinte mensagem no Twitter e no Facebook: