As Propriedades de Containers definem a arquitetura responsiva da interface, regendo como os elementos se organizam e se comportam dentro do espaço disponível. Fórmulas de Power Fx são utilizadas para calcular de forma dinâmica os valores de posicionamento, dimensões e estados, garantindo que o layout se adapte automaticamente a diferentes resoluções. Esse controle granular sobre as coordenadas e o alinhamento permite que os painéis mantenham a consistência visual e a usabilidade, independentemente da orientação ou do tamanho do dispositivo utilizado.
📌 Guia de Navegação
1. Configurando os Painéis Fixos da Tela_Cadastros
Um container
recém-inserido, sem nenhuma propriedade ajustada, é só um retângulo cinza sem
função nenhuma. É a configuração que transforma essa forma vazia num painel de
verdade, capaz de se comportar exatamente como o sistema espera dele. Neste
tutorial você vai configurar, com precisão, os três painéis fixos que sustentam
a Tela_Cadastros.
Pré-requisito: você precisa ter concluído o tutorial anterior, com os três
containers já inseridos, ainda vazios, dentro da Tela_Cadastros: Painel_NavegacaoCad, Painel_InformativoCad e Area_TrabalhoCad.
O que Você Vai Aprender Neste Tutorial
Você vai
aprender a diferença entre os tipos de propriedade que existem dentro de um
container — propriedades visuais, propriedades de comportamento e propriedades
de posição — e vai configurar, com fórmula e valor exatos, os três painéis
fixos da Tela_Cadastros: o painel de navegação, o painel informativo e a área
de trabalho.
Por que Este Tutorial é Importante e sua Conexão com o
Anterior
No tutorial
anterior você aprendeu o que é um container, os tipos que existem, e inseriu os
três primeiros dentro da Tela_Cadastros — mas eles ainda estavam vazios, sem
cor, sem posição definitiva, sem nenhuma regra de comportamento configurada.
Esse tutorial fecha esse ciclo: é aqui que os três containers deixam de ser
formas soltas na tela e passam a funcionar exatamente como o layout do sistema
exige.
Isso importa
de forma especial neste projeto, porque as quatro telas do sistema — Inicial,
Cadastros, Catálogo e Alocação — compartilham o mesmo layout de base. Quando um
painel é configurado com cuidado numa tela, ele vira o modelo de referência
para as demais. É essa repetição consciente e cuidadosa que garante que o
usuário final, ao trocar de uma tela para outra, sinta como se estivesse sempre
no mesmo lugar — mesmo o conteúdo mudando por completo.
2. O que São Propriedades de Container no Power Apps
Todo
container no Power Apps guarda dezenas de propriedades configuráveis, mas elas
não são todas do mesmo tipo. Para quem está começando, vale separar essas
propriedades em três grupos, porque isso ajuda a entender rapidamente o que
cada uma está fazendo, sem precisar decorar cada nome isoladamente.
O primeiro
grupo é o das propriedades visuais: cor da borda, espessura da borda,
cor de preenchimento, sombra, raio dos cantos. Elas não mudam o comportamento
do container, só a aparência dele — como uma parede pintada de uma cor ou de
outra, sem alterar a estrutura da casa.
O segundo
grupo é o das propriedades de comportamento: a direção de layout
(horizontal ou vertical), o espaçamento entre itens internos, o preenchimento
interno (padding), a variante do container (Ajuste Automático ou Layout
Manual). Essas propriedades decidem como o container reage quando algo é
inserido dentro dele — se ele organiza sozinho, se espera posição manual, se
empurra os itens para um lado ou outro.
O terceiro
grupo é o das propriedades de posição e tamanho: X, Y,
largura e altura. Elas decidem onde o container fica dentro do espaço em
que está inserido, e qual área ele ocupa. Um detalhe importante do Power Apps:
quando uma dessas propriedades de posição não aparece explicitamente no código
de um controle, isso não significa que ela não existe — significa que o valor
dela é zero. O Power Apps só grava, no código exportado, as propriedades que
fogem do padrão automático.
Como o Sistema de Controle de Bens Usa Esses Três Grupos
No nosso
sistema, esses três grupos de propriedade cumprem papéis bem definidos e
repetidos em todas as telas. As propriedades visuais seguem uma paleta de cores
fixa, reaproveitada em todas as quatro telas, para criar identidade visual
consistente — o roxo escuro das bordas, por exemplo, aparece em praticamente
todo container do sistema. As propriedades de comportamento são escolhidas de
acordo com a função do painel: painéis que recebem uma quantidade variável de
conteúdo (como botões de navegação) usam Ajuste Automático; painéis com
conteúdo fixo e posicionado manualmente usam Layout Manual. E as propriedades
de posição seguem sempre a mesma lógica de empilhamento em cascata: cada painel
começa exatamente onde o anterior termina, criando uma sequência vertical
previsível, tela após tela.
3. Configurando os Três Painéis da Tela_Cadastros
Onde Você Vai Trabalhar
Todo o
trabalho deste tutorial acontece dentro da Tela_Cadastros, selecionando cada um
dos três containers já inseridos e ajustando suas propriedades na aba Avançado
do Painel Direito, ou diretamente na barra de fórmulas superior.
Configurando o Painel_NavegacaoCad
Este é o primeiro painel que o usuário vê ao abrir qualquer tela do sistema. Ali está tudo que ele precisa para navegar, tanto para dentro da própria tela quanto para as demais telas do sistema. Esse painel é autoajustável (Ajuste Automático), para garantir que os botões internos se comportem como esperado, se acomodando automaticamente conforme forem inseridos.
É importante
entender que o número de botões dentro deste painel muda de acordo com a tela e
com os demais painéis envolvidos — em algumas telas, dois botões; em outras,
três ou mais, dependendo de quantas ações fazem sentido naquele contexto. É
justamente por essa variação que usamos um tipo de container diferente aqui: um
container que se reorganiza sozinho é a escolha certa quando a quantidade de
itens internos não é sempre a mesma.
Selecione o Painel_NavegacaoCad e configure cada propriedade — cor de borda, espessura,
sombra, preenchimento, altura, direção de layout, espaço entre itens,
preenchimento interno, cantos arredondados, largura e posição — conforme os
valores detalhados abaixo, e na parte de Arquitetura vamos entender como
funciona cada propriedade, cada função.
Variant (Variante): AutoLayout (Ajuste Automático)
BorderColor (Cor da Borda): RGBA(30; 14; 91; 1)
BorderThickness (Espessura da Borda): 2
DropShadow (Sombra Projetada): DropShadow.None (Nenhuma)
Fill (Preencher): RGBA(242; 239; 223; 1)
Height (Altura): 60
LayoutDirection (Direção de Layout): LayoutDirection.Horizontal
LayoutGap (Espaço entre Itens): 3
PaddingBottom/Left/Right/Top (Preenchimento): 5 em cada lado
RadiusBottomLeft/BottomRight/TopLeft/TopRight (Raio dos Cantos): 10 em cada
Width (Largura): Parent.Width - 10
X: 5
Y: 5
Configurando o Painel_InformativoCad
O segundo
painel é um painel informativo. O que muda, de tela para tela, é apenas o
conteúdo exibido dentro dele — a estrutura do painel em si permanece a mesma.
Como estamos trabalhando no modo básico do Power Apps, essa configuração não
traz maiores complicações: cor de borda, espessura, altura, cantos
arredondados, largura e posição.
Variant (Variante): ManualLayout (Layout Manual)
BorderColor (Cor da Borda): RGBA(30; 14; 91; 1)
BorderThickness (Espessura da Borda): 2
Height (Altura): 60
RadiusBottomLeft/BottomRight/TopLeft/TopRight (Raio dos Cantos): 15 em cada
Width (Largura): 630
X: 5
Y: 70
Configurando a Area_TrabalhoCad
O terceiro painel, a Área de Trabalho, não tem muito segredo por enquanto: é simples, porque o que realmente vai mudar são os painéis internos que ainda vamos inserir dentro dele nos próximos tutoriais. Configure cor de borda, espessura, preenchimento de fundo, altura, preenchimento interno, cantos arredondados, largura e posição.
Variant (Variante): ManualLayout (Layout Manual)
BorderColor (Cor da Borda): RGBA(30; 14; 91; 1)
BorderThickness (Espessura da Borda): 2
Fill (Preencher): RGBA(232; 247; 255; 1)
Height (Altura): 980
PaddingBottom/Left/Right/Top (Preenchimento): 8 em cada lado
RadiusBottomLeft/BottomRight/TopLeft/TopRight (Raio dos Cantos): 15 em cada
Width (Largura): 640
Y: 142
4. Arquitetura: Por que Cada Valor Foi Escolhido
Painel_NavegacaoCad: AutoLayout e a Lógica do Ajuste Automático
A escolha de Variant: AutoLayout não é estética — é funcional. Um container Manual exige que você defina X e Y de cada filho, um por um, à mão. Se o número de botões dentro deste painel muda de tela para tela — e você já sabe que muda —, manter isso manual seria recalcular posição toda vez que um botão entrasse ou saísse. O Ajuste Automático resolve esse problema pela raiz: ele organiza os filhos sozinho, sempre na ordem em que foram inseridos.
LayoutDirection:
Horizontal decide a direção dessa organização
automática — da esquerda para a direita, o formato natural de uma barra de
navegação no topo da tela. LayoutGap: 3 define o respiro entre um botão e o próximo, evitando que
fiquem colados. Os quatro Padding de 5 pixels criam uma margem interna uniforme entre a borda
do painel e o primeiro/último elemento inserido dentro dele, em todos os quatro
lados.
Height: 60 e Width: Parent.Width - 10 definem o tamanho do painel: altura fixa de 60 pixels, e
largura relativa à tela onde está inserido, menos 10 pixels — 5 de cada lado,
criando uma margem lateral simétrica em relação às bordas da tela. X:
5 e Y:
5 posicionam o painel a 5 pixels do
topo e da esquerda, deixando essa mesma margem de 5 pixels visível ao redor de
todo o painel.
Os quatro Radius de 10 pixels arredondam os quatro cantos igualmente, e DropShadow:
None remove qualquer sombra projetada —
este painel fica "chapado" contra o fundo da tela, sem efeito de
profundidade.
Painel_InformativoCad: Layout Manual para um Conteúdo Fixo
Diferente do painel anterior, este é ManualLayout, e a razão é o oposto da anterior: aqui não existe uma coleção variável de itens para organizar automaticamente. O conteúdo deste painel — um rótulo informativo — tem posição fixa e previsível, então o controle manual não representa nenhuma dificuldade extra; pelo contrário, dá liberdade total para posicionar o conteúdo exatamente onde for necessário, cobrindo toda área. Quando trocar de painel automaticamente troca o informativo interno.
Height: 60, a mesma altura do painel de navegação, e Width:
630, uma largura própria e um pouco
menor que a largura total da tela, deixando margem lateral visível. X:
5 mantém a mesma margem esquerda dos
5 pixels que já vimos no painel anterior.
E aqui está
uma configuração importante: Y: 70.
O Painel_NavegacaoCad
ocupa de Y: 5
até Y: 65 (5 de posição inicial mais 60 de
altura). Um Y: 70
para este segundo painel deixa exatamente 5 pixels de respiro entre os dois — a
mesma lógica de empilhamento em cascata que você vai encontrar em praticamente
todos os painéis deste sistema: cada novo painel começa onde o anterior
termina, mais uma pequena folga.
Os quatro Radius aqui são de 15 pixels, um arredondamento mais acentuado que
os 10 pixels do painel de navegação — uma pequena variação visual proposital,
que distingue este painel como uma área de conteúdo diferente, não apenas mais
uma barra de navegação.
Area_TrabalhoCad: A Base para os Painéis que Ainda Virão
Assim como o painel informativo, este também é ManualLayout, e pela mesma razão: seu conteúdo interno — que ainda não existe, mas vai ganhar forma nos próximos tutoriais — vai precisar de posicionamento próprio, controlado com precisão, à medida que a Tela_Cadastros for sendo construída.
Height: 980 é uma altura bem generosa, muito maior que os dois painéis
anteriores — faz sentido, já que este é o espaço reservado para receber todo o
conteúdo principal da tela, os painéis internos que ainda vão nascer aqui
dentro. Os quatro Padding de 8 pixels criam uma margem interna um pouco maior que a
dos outros painéis, dando respiro extra para o que for inserido dentro.
Fill: RGBA(232; 247;
255; 1) é um azul bem claro, diferente das
cores que você já viu em outros painéis do sistema até aqui — essa cor
específica está reservada para identificar visualmente o contexto de Cadastros.
Y: 142 mantém a mesma lógica de empilhamento: o Painel_InformativoCad ocupa de Y: 70 até Y: 130
(70 de posição mais 60 de altura), e este terceiro painel começa em 142 —
novamente com uma folga de 12 pixels de respiro entre os dois.
5. O que Você Aprendeu e os Cuidados para Não Errar
Você
configurou os três painéis fixos da Tela_Cadastros, aplicando propriedades
visuais, de comportamento e de posição a cada um deles. Aprendeu por que o
painel de navegação usa Ajuste Automático — para absorver naturalmente a
variação no número de botões entre telas — enquanto o painel informativo e a
área de trabalho usam Layout Manual, já que seus conteúdos internos têm posição
fixa e previsível, definida por você.
Atenção Técnica
Sempre que
um valor de posição não aparecer explicitamente no código de um controle,
confirme antes de assumir que ele é zero — pode ser, de fato, o padrão
automático do Power Apps, mas também pode ser um valor esquecido na hora de
registrar o código. Vale sempre a checagem, especialmente em painéis empilhados
em cascata, onde um erro de posição em um painel se propaga visualmente para
todos os que vêm depois dele.
Erro Comum
O erro mais
comum ao configurar painéis empilhados como estes é copiar a posição Y de um tutorial anterior sem recalcular a soma de posição
mais altura do painel imediatamente acima. O resultado observável é a
sobreposição de dois painéis — um escondendo parcialmente o outro — sem que o
Power Apps acuse nenhum erro, porque, tecnicamente, não há nada de errado na
fórmula: só o número está fora do lugar certo.
O Que Vem a Seguir
Com os três
painéis fixos da Tela_Cadastros configurados e posicionados corretamente, opróximo tutorial será sobre ícones e botões, qual a diferença e quando usar
cada um no nosso sistema
Nenhum comentário:
Postar um comentário