Aprenda as Diversas maneiras de Criar Telas
As telas no Power Apps funcionam como os contêineres
fundamentais da interface, servindo como o ambiente principal onde os
controles, formulários e elementos visuais são organizados para compor a
jornada e a interação do usuário com o sistema. Elas estruturam a hierarquia de
navegação da aplicação, permitindo que funcionalidades específicas sejam
isoladas em páginas distintas e apresentadas de forma lógica conforme o fluxo
de trabalho exigido pela solução.
Este é o primeiro tutorial prático do Módulo Layout do
Sistema. Você já entende o que é o Power Apps e para que ele serve — agora
vamos colocar a mão no Controle Mov_Extras_Mobile e começar a construir,
literalmente, a casa onde o seu aplicativo vai morar.
📌 Guia de Navegação
1. Por que Telas São o Primeiro Assunto de um Aplicativo?
Antes de qualquer botão, qualquer fórmula, qualquer conexão
com o SharePoint, existe uma pergunta mais simples: onde o seu usuário vai
estar em cada momento? Um aplicativo de celular não tem o luxo de um monitor
grande, onde você espalha informação em várias colunas e painéis lado a lado.
No mobile, o espaço é vertical, estreito, e cada centímetro de tela custa caro.
Por isso, a primeira decisão de arquitetura de qualquer app mobile bem feito é:
quantas telas eu preciso, e o que cada uma delas vai fazer.
Conhecendo As Telas no Power Apps, Base para a Organização do Aplicativo.
O que Você Vai Aprender Neste Tutorial
Você vai sair daqui sabendo exatamente o que é uma tela
dentro do Power Apps, como o conceito de "tela híbrida" muda a forma
como você organiza conteúdo dentro dela, e vai ter criado, na prática, as quatro
primeiras telas do Controle Mov_Extras_Mobile: a Tela_Inicial (que já vem
pronta), a Tela_Cadastro (criada do zero pelo menu), a Tela_Alocacao e a
Tela_Catalogo (criada por duplicação).
Por que Este Tutorial é a Base de Tudo que Vem Depois
Todo componente que você vai aprender daqui pra frente —
botão, galeria, formulário, painel — precisa morar dentro de uma tela. Se você
não entender como as telas se organizam e se comunicam entre si, vai construir
um aplicativo bonito por dentro, mas confuso por fora, onde o usuário se perde
tentando entender onde ele está e para onde ele pode ir. Este tutorial é o
alicerce: é aqui que decidimos a planta baixa da casa antes de pendurar
qualquer quadro na parede.
2. Telas no Power Apps: O que São e Como Funcionam
Dentro do Power Apps, uma tela — que na sua instalação em
português aparece como Ecrã, um termo de Portugal que a Microsoft
manteve na tradução PT-BR — é um contêiner de nível máximo. Pense nela como uma
folha de papel em branco, do tamanho exato da tela do dispositivo, onde você
vai colar todos os componentes visuais: botões, textos, imagens, galerias,
formulários. Cada aplicativo Canvas é, no fundo, uma coleção dessas folhas, e o
usuário nunca vê duas folhas ao mesmo tempo — ele está sempre em uma única tela
por vez, navegando entre elas através de comandos como Navigate.
Tecnicamente, cada tela é um objeto independente dentro da
árvore do aplicativo, com seu próprio nome, suas próprias propriedades — como
TelaAtiva.Preenchimento para definir a cor de fundo, ou
TelaAtiva.TamanhoImagemFundo para controlar como uma imagem de fundo se
comporta — e sua própria lista de controles filhos. Isso significa que um botão
chamado btSalvar na Tela_Inicial é um objeto completamente diferente de um
botão de mesmo nome em outra tela; eles não têm relação entre si a não ser que
você programe essa relação através de variáveis globais ou de coleções.
Existem, na prática, quatro formas de pensar uma tela dentro
de um app:
|
Tipo
de Tela |
Função |
Exemplo Típico |
|
Tela
de Navegação Pura |
Serve como ponto de partida ou menu, sem lógica pesada |
Tela_Inicial |
|
Tela
de Conteúdo Único |
Mostra um único tipo de informação, sem alternância
interna |
Uma tela de "Sobre o App" |
|
Tela
Híbrida |
Mostra conteúdos diferentes dentro do mesmo espaço,
alternando painéis conforme a ação do usuário |
Tela_Alocacao, Tela_Catalogo |
É essa terceira categoria que vai definir a arquitetura do
Controle Mov_Extras_Mobile, e é sobre ela que vamos falar agora.
Como o Controle Mov_Extras_Mobile Usa Telas Híbridas
Uma tela híbrida não é um recurso nativo do Power Apps com
um botão de "ativar" — é uma técnica de construção. Ela nasce da
limitação real do celular: você tem pouquíssimo espaço vertical, e criar uma
tela nova para cada micro-etapa do processo faria o aplicativo virar um
labirinto de navegações, com o usuário tocando "voltar" o tempo todo
e perdendo o fio da meada.
A solução é inverter a lógica: em vez de criar uma tela nova
para cada conteúdo, você cria uma única tela e, dentro dela, posiciona
vários painéis (pnl) empilhados exatamente no mesmo espaço, uns por cima
dos outros. Em um dado momento, apenas um painel está visível — controlado pela
propriedade Visible de cada painel, normalmente amarrada a uma variável global,
como varGlobal_Painel. Quando o usuário toca em uma opção, você não navega para
outra tela: você simplesmente troca o valor da variável, e o Power Apps troca
qual painel está visível, dando a sensação de uma transição de conteúdo — mas
sem sair da tela.
No Controle Mov_Extras_Mobile, essa técnica vai aparecer
logo na Tela_Cadastros e na Tela_Catalogo: cada uma delas vai, futuramente,
hospedar mais de um painel — por exemplo, um painel de listagem e um painel de
detalhes — sem que isso signifique criar telas extras. Isso mantém a árvore do
aplicativo enxuta e a navegação do usuário muito mais fluida, porque ele sente
que está "dentro do mesmo lugar", só que vendo coisas diferentes.
Observação técnica: neste tutorial ainda não vamos
construir os painéis — isso pertence ao próximo, sobre Componentes. Aqui, o
objetivo é só deixar claro o motivo pelo qual criamos poucas telas e por que
essas telas vão, mais adiante, ficar "cheias por dentro" de painéis
alternáveis. Se isso ainda parece abstrato, tudo bem: vai fazer sentido
completo quando você ver o primeiro painel sendo montado.
3. Construindo as Quatro Primeiras Telas no Power Apps Studio
Chegou a hora de sair da teoria e abrir o Studio. Vamos
criar, na ordem certa, as quatro telas que vão sustentar o início do Controle
Mov_Extras_Mobile.
A Tela que Já Vem Pronta: Renomeando para Tela_Inicial
Todo aplicativo Canvas novo nasce com uma tela padrão já criada, geralmente chamada de "Ecrã1" ou "Screen1". Ela aparece automaticamente na árvore do aplicativo, no painel lateral esquerdo do Studio, assim que você cria o app. Você não precisa criar essa primeira tela — ela já está lá esperando por você.
O que você precisa fazer é renomeá-la. Clique com o botão
direito sobre o nome dela na árvore lateral e escolha Renomear, ou dê um
duplo clique direto sobre o nome. Apague o nome padrão e digite exatamente
Tela_Inicial, respeitando maiúsculas e o sublinhado. Esse cuidado com a grafia
exata não é estética — é o que garante que, quando você escrever fórmulas de
navegação mais adiante, como Navigate(Tela_Inicial; ScreenTransition.Fade), o
Power Apps reconheça o nome sem ambiguidade.
Criando a Tela_Alocacao pelo Menu Inserir
Agora vamos criar a segunda tela do zero, e para isso
existem dois caminhos possíveis dentro do Studio — vamos ver os dois, porque
você vai usar ambos no dia a dia, dependendo da situação.
O primeiro caminho é pela barra superior do Studio. Lá em
cima, você vai encontrar o menu Inserir. Ao clicar nele, se abre uma
faixa de opções — e uma das primeiras, geralmente a mais à esquerda, é o botão Ecrã.
Clicando na setinha ao lado dele, o Power Apps te oferece um pequeno menu com
layouts prontos: Ecrã em Branco, Ecrã de Rolagem, Ecrã com Formulário, entre
outros. Para este tutorial, escolha Ecrã em Branco — vamos construir
tudo do zero, sem depender de um layout pré-formatado que já vem carregado de
componentes que talvez não sirvam para o seu caso.
Assim que você clica, uma nova tela aparece na área central de edição, e também surge um novo item na árvore lateral, com um nome genérico como "Ecrã1" novamente — sim, o Power Apps reinicia a numeração de nomes genéricos, então preste atenção para não confundir com a Tela_Inicial. Renomeie imediatamente essa nova tela, usando o mesmo processo de antes, para Tela_Cadastros.
Criando uma Tela pelo Menu Lateral, na Árvore do Aplicativo
O segundo caminho, que você provavelmente usará com mais frequência depois de ganhar prática, é criar a tela diretamente pela árvore de telas, no painel lateral esquerdo. No topo dessa árvore, costuma haver um ícone de “mais” (+). Outra opção é clicar com o botão direito em uma área vazia da árvore ou sobre uma tela já existente e escolher “Novo Ecrã”. Esse método mantém sua atenção na lateral da tela, sem precisar voltar à barra superior, o que ajuda quando você está no meio de um fluxo de trabalho e só quer adicionar uma nova tela rapidamente.
Os dois caminhos produzem o mesmo resultado: uma nova tela em branco é adicionada à árvore do aplicativo. A diferença está apenas na conveniência e no ponto da interface em que você está trabalhando no momento.
Use esse caminho para criar a tela e, em seguida, troque o nome para Tela_Alocacao.
Duplicando um Ecrã para Criar a Tela_Catalogo
Na árvore lateral, clique com o botão direito sobre a
Tela_Alocacao, que acabamos de criar. Vai aparecer um menu de contexto com
várias opções, entre elas o ícone de quatro pontinhos (que em algumas
versões já aparece direto ao passar o mouse sobre o nome da tela, sem precisar
do clique direito). Dentro desse menu, você vai encontrar a opção Duplicar
Ecrã. Ao clicar, o Power Apps cria instantaneamente uma cópia completa da
Tela_Alocacao — com todos os componentes que ela tiver dentro, se já houver
algum — e dá a ela um nome como "Tela_Alocacao_1".
Renomeie essa cópia para Tela_Catalogo, seguindo o mesmo
processo de sempre.
Existe ainda uma variação manual desse mesmo processo: copiar e colar. Você pode clicar sobre a tela na árvore, usar Ctrl+C, clicar em qualquer espaço vazio da árvore e usar Ctrl+V. O resultado final é idêntico ao de "Duplicar Ecrã" — a diferença é que copiar e colar te dá a opção de colar em outro lugar da árvore, ou até levar essa tela para dentro de outro aplicativo aberto ao mesmo tempo, o que a opção "Duplicar" sozinha não permite.
4. Por que Escolhemos Renomear em Vez de Manter os Nomes Padrão
Pode parecer um detalhe pequeno, mas nomear cada tela de
forma semântica — Tela_Inicial, Tela_Alocacao, Tela_Catalogo — em vez de deixar
como "Ecrã1", "Ecrã2", "Ecrã3", é uma decisão de
arquitetura, não de organização. No Power Fx, toda fórmula de navegação
referencia a tela pelo nome do objeto, não por um rótulo visual. Se você
mantivesse os nomes genéricos, uma fórmula como:
Navigate(Ecrã3; ScreenTransition.Fade)
não te diria absolutamente nada sobre o que essa tela
representa, seis meses depois, quando você (ou outra pessoa) precisar dar
manutenção no app. Com o nome semântico, a mesma fórmula fica assim:
Navigate(Tela_Catalogo; ScreenTransition.Fade)
Aqui, Navigate é a função de navegação do Power Fx, que
recebe como primeiro argumento o nome exato do objeto de tela para onde
queremos ir, e como segundo argumento — opcional — o tipo de transição visual,
sendo ScreenTransition.Fade um efeito suave de esmaecimento entre uma tela e
outra. Repare que estamos usando ; como separador de argumentos, seguindo o
padrão do Power Apps configurado em português — em uma instalação em inglês,
esse mesmo separador seria a vírgula.
Essa clareza no nome não é luxo: é o que vai permitir, lá na
frente, quando estivermos escrevendo fórmulas de troca de painel dentro das
telas híbridas, que qualquer pessoa lendo o código entenda instantaneamente o
contexto sem precisar abrir cada tela para descobrir do que ela trata.
5. O que Você Aprendeu e os Cuidados para Não Errar
Neste tutorial você aprendeu que uma tela no Power Apps —
chamada de Ecrã na sua instalação em português — é o contêiner máximo onde
vivem todos os outros componentes, e que o Controle Mov_Extras_Mobile vai usar
telas híbridas, ou seja, telas que hospedam múltiplos painéis alternáveis
dentro do mesmo espaço, evitando a criação excessiva de telas separadas para
cada micro-etapa do processo. Na prática, você criou a Tela_Inicial renomeando
a tela padrão, a Tela_Alocacao pelos dois caminhos possíveis do menu Inserir e
da árvore lateral, e a Tela_Catalogo por duplicação.
Atenção Técnica
Sempre renomeie a tela imediatamente após criá-la,
antes de adicionar qualquer componente dentro dela. Se você adicionar
componentes primeiro e renomear a tela depois, nenhum problema técnico acontece
— mas se você criar várias telas em sequência sem renomear nenhuma, corre o
risco de perder o controle de qual "Ecrã2" é qual, especialmente
quando o Power Apps reinicia a numeração genérica em determinadas situações,
como depois de excluir uma tela e criar outra.
Erro Comum
O erro mais comum neste ponto é duplicar uma tela e esquecer
de renomear a cópia, deixando ela com o nome automático
"Tela_Alocacao_1". O resultado observável aparece muito mais tarde:
quando você for escrever uma fórmula de navegação e procurar
"Tela_Catalogo" na lista de sugestões do Power Fx, ela simplesmente
não vai existir — porque na verdade a tela se chama
"Tela_Alocacao_1", e agora você precisa voltar até a árvore do
aplicativo para caçar o nome errado no meio de várias telas.
O Que Vem a Seguir
Com as quatro telas criadas e nomeadas, o próximo tutorial
deste módulo vai tratar dos Painéis construídos com Containers. Você vaiaprender tudo sobre Container.
Nenhum comentário:
Postar um comentário