Botões e
Ícones são os controles interativos do Power Apps responsáveis por disparar
ações de navegação e comando dentro de um aplicativo Canvas. Através da
propriedade OnSelect, ambos executam fórmulas em Power Fx capazes de alterar
variáveis, navegar entre telas ou modificar o estado da interface. A distinção
de uso entre esses dois controles — navegação por Botão, ação por Ícone —
compõe uma regra de arquitetura que orienta a construção de sistemas híbridos
de telas e painéis, garantindo previsibilidade de interação mesmo em
aplicativos com múltiplos contextos de uso.
Pré-requisito: você precisa ter concluído os tutoriais anteriores, com os
três painéis fixos da Tela_Cadastros já configurados — Painel_NavegacaoCad, Painel_InformativoCad e Area_TrabalhoCad.
📌 Guia de Navegação
- 1. Botões e Ícones no Power Apps e a Regra de Navegação do Sistema
- 2. Botões e Ícones: O que São e Qual a Diferença
- 3. Inserindo o Ícone e os Três Botões no Painel_NavegacaoCad
- 4. Visibilidade Permanente: Por que os Controles de Navegação Nunca Somem
- 5. O que Você Aprendeu e os Cuidados para Não Errar
1. Botões e Ícones no Power Apps e a Regra de Navegação do Sistema
Aqui
aplicamos dois conceitos ao mesmo tempo: o que Botões e Ícones representam
dentro do Power Apps, de forma geral, e a regra específica que o Controle
Mov_Extras_Mobile adota para decidir quando usar um ou outro.
O que Você Vai Aprender Neste Tutorial
Você vai
entender a diferença de propósito entre um Botão e um Ícone, vai conhecer a
regra de arquitetura que decide qual dos dois usar em cada situação dentro do
sistema, e vai inserir o primeiro conjunto de controles de navegação da
Tela_Cadastros — sem ainda configurá-los por completo, já que essa parte fica
reservada para o próximo tutorial, de caráter prático.
Por que Este Tutorial é Importante e sua Conexão com o Anterior
Nos
tutoriais anteriores você configurou os três painéis fixos da Tela_Cadastros,
mas eles continuam vazios por dentro — sem nenhum controle interativo ainda.
Este é o momento em que o Painel_NavegacaoCad finalmente ganha função: é aqui que o usuário vai, de fato,
começar a se mover pelo sistema. Entender bem a diferença entre Botão e Ícone
agora evita um erro comum mais adiante: usar o controle errado para a função
errada, só porque os dois parecem, à primeira vista, capazes de fazer a mesma
coisa.
2. Botões e Ícones: O que São e Qual a Diferença
Dentro do
Power Apps, tanto o Botão quanto o Ícone são controles interativos — os dois
respondem a toque, os dois disparam ações através da propriedade OnSelect, e tecnicamente qualquer coisa que um faz, o outro também
poderia fazer. A diferença entre eles não é de capacidade técnica, é de
linguagem visual.
O Botão é um
controle retangular, normalmente com um texto escrito dentro dele, através da
propriedade Text.
Ele comunica, pela própria forma, a ideia de "toque aqui para ir a algum
lugar" ou "toque aqui para confirmar algo maior". Já o Ícone é
um símbolo gráfico pequeno, vindo de uma biblioteca já embutida no Power Apps —
uma casinha, um lápis, uma lixeira, um sinal de mais — e comunica, de forma
quase instantânea e sem precisar de texto, uma ação pontual e específica.
Essa
diferença de linguagem visual é o que torna os dois controles ferramentas
complementares, e não concorrentes, dentro de um bom design de interface: o
botão pede espaço e atenção, o ícone é rápido e discreto. Tecnicamente, nada
impede um desenvolvedor de usar um Ícone para navegação, ou um Botão para uma
ação pontual — o Power Apps não impõe essa regra. É uma convenção de design,
adotada por quem constrói o sistema, para criar previsibilidade visual: sem
essa disciplina, o usuário precisaria testar cada controle para descobrir o que
ele faz, em vez de simplesmente reconhecer o padrão de relance.
A Regra de Navegação do Controle Mov_Extras_Mobile
No nosso
sistema, essa diferença de linguagem virou uma regra de arquitetura, válida
para quase todo o aplicativo, com poucas exceções pontuais: Botão é sempre
usado para navegação — ou seja, para levar o usuário de uma tela para outra — e
Ícone é sempre usado para ação — como Novo, Editar ou Excluir, operações que
acontecem dentro da própria tela, sem trocar de lugar.
Essa
consistência importa mais do que parece. Quando essa regra é respeitada em todo
o sistema, o usuário aprende rapidamente, sem precisar de nenhuma instrução
escrita, que sempre que ele vir um retângulo com texto, ele vai "ir para
algum lugar", e sempre que ele vir um símbolo pequeno, algo vai
"acontecer ali mesmo". É esse tipo de previsibilidade silenciosa que
separa um aplicativo intuitivo de um aplicativo bonito, mas confuso.
A Primeira Exceção da Regra: Quatro Telas, Três Botões e Um Ícone
Se a regra
fosse aplicada de forma rígida e literal, com quatro telas — Tela_Inicial,
Tela_Cadastros, Tela_Catalogo, Tela_Alocacao — deveríamos ter quatro botões de
navegação, um para cada destino. Mas seguir a regra à risca aqui criaria um
problema visual: quatro botões lado a lado, dentro de um painel de apenas 60
pixels de altura em uma tela de celular, deixariam a faixa de navegação
apertada e visualmente pesada.
A solução
foi abrir a primeira exceção da regra, motivada por estética e usabilidade: em
vez de quatro botões, o Painel_NavegacaoCad vai ter um ícone de Home e três botões. O ícone de casa
assume, sozinho, o papel de representar o retorno à Tela_Inicial — um gesto tão
universalmente reconhecido que dispensa texto — enquanto os três botões
continuam levando o usuário até a Tela_Cadastros, a Tela_Catalogo e a
Tela_Alocacao, respectivamente.
É uma
exceção pontual, aplicada exatamente onde o ganho visual compensa o desvio da
regra geral, e não uma reformulação da regra em si — o restante do sistema
continua seguindo Botão para navegação, Ícone para ação, normalmente.
3. Inserindo o Ícone e os Três Botões no Painel_NavegacaoCad
Vamos fazer uma pequena parte prática agora, que também funciona como exercício de fixação: como você já inseriu containers e configurou propriedades em tutoriais anteriores, os caminhos de inserção de um Ícone e de um Botão seguem exatamente a mesma lógica — o menu Inserir na barra superior, ou o símbolo de mais (+) na árvore lateral, com o Painel_NavegacaoCad selecionado antes de cada inserção, para que o novo controle nasça como filho dele.
Insira,
nesta ordem, um Ícone e três Botões dentro do Painel_NavegacaoCad. Renomeie cada um seguindo o padrão que você já conhece, e
reserve um momento para explorar as propriedades que já apareceram em botões
anteriores deste curso — cor, borda, texto, ícone selecionado — sem ainda se
preocupar em fechar a configuração definitiva. Essa configuração completa, com
fórmulas de OnSelect e regras de visibilidade específicas para a Tela_Cadastros,
é assunto do próximo tutorial, de caráter prático.
4. Visibilidade Permanente: Por que os Controles de Navegação Nunca Somem
Diferente de
boa parte dos controles que você vai construir daqui em diante — que aparecem e
desaparecem conforme o contexto, como você já viu em painéis de filtro e
formulários —, o ícone e os três botões dentro do Painel_NavegacaoCad têm visualização permanente. Eles estão sempre à disposição
do usuário, em qualquer momento, em qualquer tela do sistema.
Essa escolha
não é acidental. Pense na experiência de usar um aplicativo de celular: o
usuário precisa, a qualquer instante, conseguir voltar ao início ou mudar de
destino, sem depender de encontrar esse caminho escondido dentro de um menu ou
atrás de outra ação. Deixar a navegação sempre visível é uma decisão de
usabilidade que reduz a chance de o usuário se sentir "preso" em
algum lugar do aplicativo, sem saber como sair.
Outros
controles do sistema seguem uma lógica oposta, e é importante já perceber essa
diferença agora: eles aparecem apenas quando o contexto exige. Um botão de
editar só faz sentido quando existe algo selecionado para editar; um ícone de
novo registro só faz sentido quando o usuário já filtrou o suficiente para
saber o que está criando. Essa alternância entre "sempre visível" e
"visível sob condição" é uma das ferramentas mais importantes para
manter uma tela de celular limpa, sem sobrecarregar o usuário com opções que,
naquele momento, não fazem sentido nenhum.
5. O que Você Aprendeu e os Cuidados para Não Errar
Você
entendeu a diferença de propósito entre Botão e Ícone dentro do Power Apps,
conheceu a regra de navegação do Controle Mov_Extras_Mobile — Botão para
navegação, Ícone para ação — e a primeira exceção dessa regra, motivada pela
necessidade de um layout limpo em tela pequena. Você também inseriu o ícone e
os três botões dentro do Painel_NavegacaoCad, e entendeu por que esses controles específicos têm
visualização permanente, ao contrário de boa parte do restante do sistema.
Atenção Técnica
Sempre
confirme, antes de cada inserção, qual controle está selecionado na árvore
lateral. Como o Painel_NavegacaoCad é do tipo Ajuste Automático, inserir um novo controle com o
filho errado selecionado pode fazer esse controle nascer na posição errada da
fileira, em vez de nascer como filho direto do painel, na ordem esperada.
Erro Comum
O erro mais
comum neste ponto é usar um Ícone para uma ação de navegação, ou um Botão para
uma ação pontual, só porque tecnicamente os dois fazem a mesma coisa. O
resultado observável não é um erro técnico — o aplicativo continua funcionando
—, mas é uma quebra silenciosa de previsibilidade visual, que confunde o
usuário aos poucos, mesmo sem nenhuma mensagem de erro aparecer.
O Que Vem a Seguir
No próximo
tutorial vamos aprender uma das funções mais poderosas do Power Apps: as
variáveis, e como criá-las.
Nenhum comentário:
Postar um comentário