Nesta aula da disciplina de Programação de Aplicativos Mobile I do curso Técnico em Desenvolvimento de Sistemas, na Etec, vamos programar a primeira interface do nosso App usando XAML

1. PROGRAMANDO O PRIMEIRO PROJETO
Prof. Me. Tiago A. Silva
VERSÃO 2019
www.tiago.blog.br
PROGRAMAÇÃO DE APLICATIVOS MOBILE I

2. PLANO DE AULA
▪ Nesta aula vamos aprender:
✓Construir uma Interface em XAML
✓Usar o StackLayout
✓Usar Label, Entry e Button
✓Executar o App
2www.tiago.blog.br
OBJETIVO: USAR OS RECURSOS DE LAYOUT E COMPONENTES DE INTERFACE

3. CONSTRUIR A INTERFACE COM XAML

4. CONSTRUIR A INTERFACE COM XAML
• XAML (Extensible Application Markup Language) é uma linguagem
de marcação desenvolvida pela Microsoft e baseada em XML
(eXtensible Markup Language).
• Esta tecnologia é utilizada para o desenvolvimento de interfaces
gráficas para aplicativos, sua funcionalidade é semelhante a
linguagem HTML (HyperText Markup Language) que é utilizada
para apresentação visual de páginas Web.
Dispositivos Móveis e o Mercado: Arquitetura de Sistemas
Operacionais para Dispositivos Móveis
4

5. CONSTRUIR A INTERFACE COM XAML
• Apesar de possuir características semelhantes a HTML, XAML não é
sucessora desta linguagem, mas sim parte do projeto WPF, uma
categoria de recursos do Framework .NET 3.5 da Microsoft que lida
com a apresentação visual de aplicativos baseado em páginas Web e
no Windows.
• Como XAML é uma linguagem declarativa, caso o usuário precise
adicionar regras lógicas a seu aplicativo é necessário a adição de
código extra que deve ser escrito em um arquivo à parte.
Dispositivos Móveis e o Mercado: Arquitetura de Sistemas
Operacionais para Dispositivos Móveis
5

6. CONSTRUIR A INTERFACE COM XAML
• XAML faz parte da especificação do Xamarin.Forms, onde por meio
de um único código permite que os desenvolvedores criem
interfaces de usuários para plataformas nativas, como iOS, Android
e Windows Phone.
• Outra peculiaridade interessante dos arquivos XAML é que eles
sempre são associados a um arquivo de código C# que fornece
suporte para execução de operações lógicas – característica que as
linguagens declarativas são incapazes de realizarem.
Dispositivos Móveis e o Mercado: Arquitetura de Sistemas
Operacionais para Dispositivos Móveis
6

7. USAR O STACKLAYOUT

8. USAR O STACKLAYOUT
8
Dispositivos Móveis e o Mercado: Arquitetura de Sistemas
Operacionais para Dispositivos Móveis
Repare que removi o Label padrão que é
criado quando começamos uma nova
solução, logo após a ContentPage, criei
o StackLayout

9. IMPLEMENTAR A INTERFACE COM LABEL, ENTRY E BUTTON

10. 10
Dispositivos Móveis e o Mercado: Arquitetura de Sistemas
Operacionais para Dispositivos Móveis

11. 11
Dispositivos Móveis e o Mercado: Arquitetura de Sistemas
Operacionais para Dispositivos Móveis
Note que “no código por trás” temos o
método “Calcular_Cotacao” que foi
referenciado no atributo Clicked do
botão no XAML. Neste método vamos
recuperar as informações digitadas e
mostrar o resultado no Entry

12. EXECUTANDO O PROJETO

13. 13
Dispositivos Móveis e o Mercado: Arquitetura de Sistemas
Operacionais para Dispositivos Móveis

14. OBRIGADO!
tiago@tiago.blog.br
www.tiago.blog.br