Botões de
Painéis são botões de alternância que utilizam a mesma propriedade OnSelect de um botão de navegação comum, mas em vez de disparar a
função Navigate, atualizam variáveis globais de escopo mais específico —
como varGlobal_Acao
— para controlar qual painel interno deve ficar visível dentro da mesma tela.
Essa técnica permite construir sistemas de submenu inteiros sem exigir nenhuma
tela adicional, mantendo a navegação do usuário concentrada num único espaço
visual, mesmo quando o número de opções ultrapassa o que caberia num único
painel de navegação.
Pré-requisito: você precisa ter concluído o tutorial Listas do SharePoint: Conectando o Aplicativo a uma Base deDados, com todas as listas necessárias para este módulo já
conectadas ao aplicativo.
📌 Neste Tutorial você vai aprender
- 1. Botões de Painéis: O que há de Diferente?
- 2. Como o Sistema de Controle de Bens Organiza um Submenu Dentro da Área de Trabalho
- 3. Criando o Painel_MenuCadastros e o Primeiro Botão de Alternância
- 4. A Lógica por Trás do Painel e do BtDiretores_Cad
- 5. O que Você Aprendeu e os Cuidados para Não Errar
1. Botões de Painéis: O que há de Diferente?
O que Você Vai Aprender Neste Tutorial
Você vai
entender a diferença entre um botão que navega entre telas e um botão que
alterna painéis dentro da mesma tela, vai conhecer o conceito de limpeza
constante de variáveis — um princípio central deste sistema — e vai construir,
na prática, o Painel_MenuCadastros e o primeiro dos quatro botões que ele vai receber: o BtDiretores_Cad.
Por que Este Tutorial é Importante e sua Conexão com o Anterior
No tutorial
anterior, você conectou todas as listas do SharePoint que este módulo vai
utilizar — Diretores, Categorias, Subcategorias, Tipos, Modelos, Locais e
Setores. Sem essas listas conectadas, os painéis que vamos construir a partir
de agora não teriam de onde buscar dado nenhum. Este tutorial é o primeiro a
usar essa conexão: ainda não vamos exibir os dados dessas listas numa galeria,
mas vamos criar o botão que, mais adiante, vai controlar qual desses conjuntos
de dados o usuário está vendo a cada momento.
Botões que Alternam Painéis: O que Muda em Relação à Navegação entre Telas
Você já
conhece os conceitos de Botão e Ícone e como eles são usados no sistema de
controle de bens: Botão para navegação, Ícone para ação. Aqui existe uma
pequena, mas importante, alteração nessa regra: os botões que vamos construir
agora não mudam de tela. Eles alternam qual painel de cadastro está visível,
permanecendo o tempo todo dentro da Tela_Cadastros.
Essa
diferença de propósito exige uma diferença visual, para que o usuário nunca
confunda os dois tipos de botão. Nos botões de navegação entre telas, que você
já configurou em módulos anteriores, optamos por fundo transparente durante a
edição, com a cor do painel principal aparecendo quando o botão fica bloqueado.
Aqui, dentro da Tela_Cadastros, a lógica visual muda: os botões têm fundo
branco enquanto disponíveis, e mudam para a cor do painel selecionado quando
pressionados e bloqueados. Essa distinção visual comunica, sem nenhuma palavra
escrita, que o usuário está lidando com um tipo diferente de navegação — uma
navegação interna, dentro de um contexto específico, e não uma troca de tela.
Um segundo
conceito, ainda mais importante, também aparece pela primeira vez com clareza
neste tutorial: o sistema utiliza uma limpeza constante das variáveis de dados,
na maioria dos seus controles. Isso existe para assegurar que o usuário nunca
"carregue lixo" de um contexto para outro. Como este sistema utiliza
variáveis globais — acessíveis de qualquer tela, de qualquer painel —, é
justamente essa amplitude de alcance que exige disciplina redobrada: sem uma
limpeza constante, um valor esquecido em varDadosCategoria, por exemplo, poderia continuar disponível quando o usuário
já estivesse trabalhando em outro cadastro completamente diferente, gerando um
comportamento incorreto sem nenhum aviso de erro.
2. Como o Sistema de Controle de Bens Organiza um Submenu Dentro da Área de Trabalho
Este módulo
apresenta um desafio de layout que os módulos anteriores não tiveram:
precisamos de quatro botões a mais — um para cada painel de cadastro — e o Painel_NavegacaoCad, que você já construiu, não tem espaço para acomodá-los.
Ele já está ocupado pelo ícone de Home e pelos três botões de navegação entre
telas.
Como o
propósito é manter todos os botões visíveis ao mesmo tempo, sem escondê-los
atrás de um menu suspenso, a solução escolhida foi criar um submenu dentro da
própria Área de Trabalho: um novo painel interno, chamado Painel_MenuCadastros, que vai hospedar os botões de alternância entre os painéis
de cadastro.
Para este
tutorial específico, vamos inserir apenas um desses quatro botões: o botão de
Cadastro de Diretores. O motivo dessa divisão é pedagógico: como este módulo
avança do básico para o intermediário, inserir todos os quatro botões de uma só
vez, com suas fórmulas completas, sobrecarregaria o leitor com informação antes
da hora. Os outros três botões vão aparecer, um a um, à medida que os
respectivos painéis de cadastro forem sendo construídos ao longo deste módulo.
3. Criando o Painel_MenuCadastros e o Primeiro Botão de Alternância
Selecione a Area_TrabalhoCad na árvore lateral, confirme que ela está mesmo selecionada
— e não algum outro controle já existente dentro dela —, e vá ao menu Inserir,
categoria Layout, escolhendo Contentor. Renomeie o novo container para Painel_MenuCadastros.
Painel_MenuCadastros:
Control: GroupContainer@1.5.0 (Contentor de Grupo)
Variant (Variante): AutoLayout (Ajuste
Automático)
Properties (Propriedades):
BorderColor (Cor da Borda): RGBA(0; 18;
107; 1)
BorderThickness (Espessura da Borda): 2
Height (Altura): 60
LayoutAlignItems (Alinhamento dos Itens):
LayoutAlignItems.Center (Centro)
LayoutDirection (Direção de Layout):
LayoutDirection.Horizontal
LayoutGap (Espaço entre Itens): 5
PaddingBottom/Left/Right/Top
(Preenchimento): 8 em cada lado
Width (Largura): Parent.Width
Com o Painel_MenuCadastros já criado e selecionado na árvore, insira agora um Botão
dentro dele, seguindo o mesmo caminho que você já pratica desde os primeiros
módulos: confirme o painel selecionado antes de inserir, para garantir que o
novo botão nasça como filho dele. Renomeie o botão para BtDiretores_Cad, e configure:
BtDiretores_Cad:
Control: Classic/Button@2.2.0 (Botão Clássico)
Properties (Propriedades):
BorderColor (Cor da Borda): RGBA(30; 14; 91; 1)
Color (Cor): RGBA(30; 14; 91; 1)
DisabledBorderColor (Cor da Borda Desabilitado): RGBA(30; 14; 91; 1)
DisabledColor (Cor Desabilitado): RGBA(30; 14; 91; 1)
DisabledFill (Preenchimento Desabilitado): RGBA(232; 244; 217; 1)
DisplayMode (Modo de Exibição):
Font (Fonte): Font.'Open Sans'
Height (Altura): 50
HoverBorderColor (Cor da Borda ao Passar o Mouse): ColorFade(Self.BorderColor; 20%)
HoverColor (Cor ao Passar o Mouse): RGBA(255; 255; 0; 1)
HoverFill (Preenchimento ao Passar o Mouse): ColorFade(RGBA(56; 96; 178; 1); -10%)
OnSelect (Ao Selecionar):
//Limpeza do Sistema de Cadastros
RadiusBottomLeft/BottomRight/TopLeft/TopRight (Raio dos Cantos): 0
Size (Tamanho): 12
Text (Texto): "Diretor"
Tooltip (Dica de Ferramenta): "Cadastros"
Visible (Visível):
Width (Largura): 140
X: 147
Y: 5
4. A Lógica por Trás do Painel e do BtDiretores_Cad
A cada novo tutorial, novas fórmulas e funções são
apresentadas, e o leitor precisa acompanhá-las com atenção. Embora não seja
possível explicar todas de uma vez, sempre escolhemos uma para detalhar: a mais
importante, a mais extensa ou aquela que faz mais sentido para o tema do
tutorial.
Por que o Painel_MenuCadastros é Horizontal com Ajuste Automático
O Painel_MenuCadastros é um container AutoLayout, com LayoutDirection: Horizontal. Essa escolha resolve exatamente o mesmo problema que você
já viu no Painel_NavegacaoCad: o número de botões dentro dele não é sempre o mesmo. Neste
tutorial, existe apenas um botão. Ao final deste módulo, existirão quatro. O
Ajuste Automático organiza os botões sozinho, na ordem em que forem inseridos —
se houver um botão, ele mostra um; se houver quatro, ele acomoda os quatro lado
a lado, sem que você precise recalcular nenhuma posição manualmente à medida
que os próximos forem sendo criados nos tutoriais seguintes.
Uma
propriedade nova aparece aqui pela primeira vez: LayoutAlignItems:
Center. Ela centraliza os itens internos
do container ao longo do eixo perpendicular à direção de organização — como o
painel organiza na horizontal, essa propriedade garante que cada botão fique
centralizado verticalmente dentro da altura de 60 pixels do painel, mesmo que,
futuramente, algum botão tenha uma altura ligeiramente diferente dos demais.
Entendendo a Função RGBA Argumento por Argumento
Você já usou
a função RGBA
em praticamente todo tutorial deste curso, mas ainda não explicamos, argumento
por argumento, o que cada número dentro dela representa. Chegou a hora de fazer
isso.
RGBA recebe quatro argumentos, sempre na mesma ordem: RGBA(Vermelho;
Verde; Azul; Alfa). Os três primeiros — Vermelho,
Verde e Azul — são números que variam de 0 a 255, e juntos formam qualquer cor
visível através da combinação da intensidade de cada uma dessas três cores de
luz. Quanto mais próximo de 255 estiver um canal, mais intensa é aquela cor
específica dentro da mistura; quanto mais próximo de 0, menos presente ela
está.
O quarto
argumento, Alfa, é diferente dos três primeiros: ele não define cor nenhuma,
define opacidade — o quanto aquela cor é visível ou transparente. Alfa
varia de 0 a 1, onde 0 significa completamente transparente (invisível, mesmo
que os três primeiros argumentos definam uma cor "de verdade") e 1
significa completamente opaco, sem nenhuma transparência. Um valor
intermediário, como 0,5, produziria uma cor visível, mas parcialmente
transparente, deixando o que estiver atrás dela ainda perceptível.
No BtDiretores_Cad, Color: RGBA(30; 14; 91; 1) significa: canal vermelho em 30 (baixo), canal verde em 14
(muito baixo), canal azul em 91 (moderado), e opacidade em 1 (totalmente
visível) — o resultado é o roxo escuro que você já reconhece como identidade
visual do sistema inteiro.
A Importância do Comentário // Dentro do Código
Repare nas
duas linhas do OnSelect que terminam com // Define
o Componente dentro do Painel e //
Define a ação do componente. O símbolo // cria um comentário: qualquer texto escrito depois
dele, na mesma linha, é completamente ignorado pelo Power Apps na hora de
executar a fórmula. Não é uma instrução, não afeta o resultado — é uma
anotação, escrita para o ser humano que for ler aquele código depois, seja você
mesmo daqui a alguns meses, seja outra pessoa dando manutenção no sistema.
Documentar
código com //
é uma prática que só se torna mais importante à medida que o sistema cresce.
Numa fórmula curta, o comentário pode parecer dispensável; numa fórmula longa,
com várias variáveis sendo ajustadas em sequência, como a que você acabou de
configurar, o comentário é o que permite entender, de relance, a intenção de
cada linha, sem precisar reconstruir esse raciocínio do zero toda vez.
Recapitulando o DisplayMode
Você já
conhece bem a lógica do DisplayMode desde módulos anteriores: uma condição, testada por If, decide se o controle fica disponível (DisplayMode.Edit) ou travado (DisplayMode.Disabled). Aqui, a condição testada é varGlobal_Acao
= "Lista de Diretores"
— ou seja, o botão trava exatamente quando o usuário já está vendo a lista de
Diretores, o mesmo princípio de "você está aqui" que você já aplicou
nos botões de navegação entre telas.
O OnSelect Completo: Seis Limpezas, Depois Duas Definições
A fórmula de
OnSelect deste botão
se divide em dois blocos bem distintos, e essa divisão não é acidental.
O primeiro
bloco, com seis linhas de Set, zera as variáveis de dados de todo o sistema de cadastros
de uma só vez: varDadosCategoria, varDadosSubcategoria, varDadosTipo, varDadosModelo, varDadosSetor e varDadosLocal. Essa limpeza garante que, ao entrar na lista de Diretores,
nenhum dado de um cadastro anterior — uma Categoria selecionada, um Setor em
edição — continue guardado nas variáveis, pronto para confundir o próximo
painel que for aberto.
O segundo
bloco, com duas linhas, define o novo contexto: Set(varGlobal_Acao;
"Lista de Diretores") informa ao
sistema qual painel deve ficar visível — é justamente esse valor que o DisplayMode deste mesmo botão testa, e que os próximos painéis, ainda a
serem construídos, vão usar para decidir sua própria visibilidade. Set(varGlobal_Tarefa;
"Selecione um Diretor")
define a micro-orientação que um rótulo informativo, futuramente, vai exibir ao
usuário.
Essa ordem —
limpar tudo primeiro, definir o novo contexto depois — garante que as limpezas
realmente aconteçam antes de qualquer painel novo reagir à mudança de varGlobal_Acao. Se a ordem fosse invertida, existiria o risco de um painel
reagir à mudança de contexto antes das variáveis de dados terem sido zeradas,
criando uma fração de segundo de inconsistência.
5. O que Você Aprendeu e os Cuidados para Não Errar
Você
entendeu a diferença entre um botão que navega entre telas e um botão que
alterna painéis dentro da mesma tela, aprendeu por que o sistema pratica
limpeza constante das variáveis de dados a cada troca de contexto, conheceu a
função RGBA
argumento por argumento, e construiu o Painel_MenuCadastros com seu primeiro botão, o BtDiretores_Cad.
Atenção Técnica
Sempre que
um novo botão de alternância for adicionado ao Painel_MenuCadastros nos próximos tutoriais, replique a mesma lógica de limpeza
de variáveis antes de definir o novo contexto — pular essa limpeza, mesmo em um
único botão, é o suficiente para abrir uma brecha de dado residual em todo o
sistema.
Erro Comum
O erro mais
comum ao configurar botões de alternância como este é esquecer de zerar alguma
variável de dados específica, geralmente porque ela só passa a existir em um
tutorial posterior. O resultado observável só aparece muito depois, quando um
painel novo é construído e, inesperadamente, já nasce com um valor
"fantasma" vindo de uma variável que nenhum botão anterior sabia que
precisava limpar.
O Que Vem a Seguir
No próximo
tutorial vamos criar a galeria que vai listar os Diretores — o primeiro painel
de dados real deste módulo, populado diretamente pela lista do SharePoint que
você já conectou.
Nenhum comentário:
Postar um comentário