Hoje vamos criar e configurar projetos mobile usando Xamarin utilizando as principais abordagens existentes na plataforma.
Salve, salve galera, passei um período maior sem publicação dessa vez, mas estou de volta com o artigo final da minha série introdutória sobre Xamarin.
Em meu artigo anterior abordei os tipos de projetos (templates) e suas características, fazendo um overview sobre a teoria envolvida no processo de criação de projetos com Xamarin.
Pois bem, hoje quero mostrar a vocês a prática do que foi apresentado no artigo anterior.
Então preparem os cintos que o papo vai ser longo!
Traditional Xamarin Approach (TXA)
Vamos começar pelo “mais complicado”… Como mencionei em meu primeiro artigo, a abordagem tradicional permite maior controle sobre os recursos nativos da plataforma e um controle “pixel-a-pixel” sobre a interface.
Enfim, vamos lá!
- Abra o Visual Studio (sim, vamos usar o VS), minha versão é a 2015
- Clique em File->New->Project
- Do lado esquerdo da janela “New Project”, selecione “Android” (como mostra a imagem abaixo)
Template: Blank App (Android)
Primeiramente vamos escolher o template mais “limpo” de todos, um template em branco.
Selecione conforme a imagem abaixo, preencha os dados conforme seu ambiente e clique em “Ok”.
Após a criação do projeto, ele irá conter os seguintes itens:
Analisando os itens do projeto, observamos que são muito similares a um projeto Android Java, por exemplo.
Temos a pasta “Resources” que conterá as pastas “drawable”, “layout” e “values”, cujo comportamento é IDÊNTICO a pasta “res” no projeto em Java usando a Android Developer Tools do Google.
Neste projeto temos a “MainActivity” com uma implementação simples para ter algum exemplo, mas o comportamento das activities são IDÊNTICOS, novamente, ao projeto em Java usando ADT.
Vamos abrir o “Main.axml” que está na pasta “Resources/layout”.
Observe que, no Visual Studio, temos disponíveis 2 modos para construções de nossa interface Android, o modo design, onde teremos os preview da interface renderizada para termos uma idéia de como as “coisas” ficarão e, o modo “source” ou código para implementar a interface diretamente via XML.
Mas, e essa extensão “AXML” para o arquivo de layout? Bom, nada mais é do que o “XML” IDÊNTICO AO ANDROID LAYOUT DA ADT, a letra “A” é prefixada na extensão para que o Visual Studio ative o duplo modo “Design/Source” para o desenvolvedor, acredito eu, pois na prática o código é IDÊNTICO ao código da ADT, tanto que você pode copiar e colar o código de um para o outro. PARTICULARMENTE eu SEMPRE renomeio os arquivos, de “AXML” para “XML”, e uso somente o código para implementar a interface, acho que a performance fica melhor enquanto estou codificando.
Observe o código da interface, você notará que realmente é igual ao código Android (Java).
Vamos abrir o arquivo “MainActivity.cs” e analisar um pouco o código:
Note que a implementação básica da Activity também é idêntica a implementação Android (Java), definimo o layout da Activity (Linha 21) e seguimos inicializando a interface (linhas 25 a 27) que implementa ao evento “Click” do nosso único botão da interface, que a cada clique o texto do botão será alterado com a contagem de clicks.
Enfim abaixo segue um print com a execução do aplicativo no emulador. (Que utilizo o excelente Genymotion)
Traditional Xamarin Approach (TXA) e Xamarin.Android Template Pack
Como já mencionei em meu artigo anterior eu utilizo (muito) a extension Xamarin.Android Template Pack para o Visual Studio (mais informações aqui) criada por James Montemagno para acelerar um pouco a criação de projetos “em branco” com o Material Design e outras coisas mais já configuradas e prontas para utilização.
Para utilizar os templates, você precisará instalar a extension e depois selecionar um dos templates de projetos disponíveis, como mostra a imagem abaixo:
Primeiro vamos selecionar o template “Android Blank AppCompat” e clicar em “Ok”, o Visual Studio irá gerar um projeto com as características que seguem:
Observe que agora temos mais itens em nosso projeto inicial e a implementação básica da nossa MainActivity já implementa um código “mais complexo” e com navegação entre activities.
Outro detalhe é que MainActivity herda de BaseActivity, cujo código pode ser observado abaixo:
BaseActivity não herda de “Activity” e sim de “AppCompatActivity”, estendendo o suporte ao design aprimorado para as versões do Android mais antigas.
O resultado será o aplicativo conforme imagem abaixo:
O outro template do pacote, o “Android Navigation Drawer App AppCompat”, além de estender o suporte ao design aprimorado para as versões mais antigas do Android, nos fornece uma estrutura baseada em fragmentos, o navigation drawer (menu lateral “slide”) e outras coisas mais.
Para utilizar o template, crie um novo projeto e selecione a opção conforme imagem abaixo:
Veja um exemplo do aplicativo rodando no emulador:
Seja curioso, explore um pouco mais esses templates e verá que muita coisa já foi implementada, observe as referências e verá que as “Support Libraries” já estão configuradas, o Material Design já está bem adiantado e isso irá ajudar muito você a entender melhor esta abordagem e te fornecerá uma base sólida para seguir com a implementação do seu App.
Vamos agora dar uma espiada em como são as coisas usando Xamarin.Forms
Xamarin.Forms Approach (XFA)
Nesta abordagem, como já havia explicado em meu artigo anterior, é adicionada uma camada de abstração ao “projeto core” do aplicativo, onde serão implementadas as interfaces que, posteriormente, serão renderizadas, cada uma com suas particularidades, em suas plataformas destino.
Do contrário do que se pensa geralmente, acrescentar essa camada de abstração não penaliza o aplicativo em termos de performance e sua utilização torna a relação custo x benefício muito interessante, mas tudo isso e muito mais já foi dito meus artigos anteriores.
Mãos à obra! Vamos adicionar os projetos Xamarin.Forms…
Para isso, na janela “New Project”, do lado direito, selecione a categoria Cross-Platform, em seguida selecione o template “Blank App (Xamarin.Forms Portable)” (já “tratamos” desse assunto no artigo anterior), conforme imagem abaixo, em seguida, clique em “Ok”.
Feito isso, os projetos serão criados… Essa operação irá demorar um pouco, pois será criado um projeto que será o núcleo, um projeto para Android, um projeto para o iOS, outro para UWP (Universal Windows Platform), outro para Windows (Desktop) e um para Windows Phone (RT).
Nesta fase, provavelmente será exibida uma janela cujo título será “New Universal Windows Project”, deixe como está e clique em “Ok”.
Finalizado o processamento, sua “Solution” ficará similar a imagem abaixo:
Destacados estão os projetos criados para implementar nosso aplicativo usando Xamarin.Forms. Ignore as “Solution Folders” que coloquei apenas para organizar melhor o entendimento das duas abordagens.
O projeto “XFABlankApp” é o nosso projeto núcleo, onde todo o aplicativo deverá ser implementado, nele estarão as nossas páginas, clientes de API, enfim, todo o aplicativo.
Os demais projetos, são as plataformas específicas, ou plataformas destino, nele serão implementados os recursos específicos de cada plataforma, que serão “injetados” no projeto núcleo e também os “custom renderers”, caso necessário.
Os projetos destino são facilmente identificados com sufixos, onde “Droid” será para plataforma Android e assim sucessivamente para as demais plataformas. (Bem óbvio isso ok!?)
Marquei o projeto “Droid” como inicial e rodei o aplicativo no emulador, o resultado poderá ser observado a seguir:
Abra o arquivo “App.cs” que está dentro do projeto núcleo e verá a implementação da interface que é apresentada na inicialização do nosso aplicativo Xamarin.Forms.
Neste exemplo, a interface é implementada via código, mas poderia ser facilmente implementada usando XAML.
Código implementado neste artigo
Pessoal, todo o código está disponível aqui.
Concluindo…
Pois bem pessoal, com este artigo eu encerro então esta série introdutória sobre Xamarin e suas particularidades.
Espero que o conteúdo apresentado tenha esclarecido algumas dúvidas quanto a implementação de aplicativos usando Xamarin e algumas das abordagens possíveis usando essa tecnologia.
Agora nos próximos artigos pretendo diversificar um pouco os assuntos e também aprofundar em Xamarin!
Obrigado a todos por ter acompanhado e até a próxima conexão!