Criando os Painéis principais do Sistema com Containers
Containers são elementos de layout que funcionam como
organizadores hierárquicos dentro das telas, permitindo agrupar controles para
que se comportem de maneira conjunta e responsiva ao redimensionar ou mover a
interface. Eles são fundamentais para a criação de painéis estruturados, pois
facilitam o alinhamento, o gerenciamento de visibilidade em bloco e a adaptação
automática dos elementos internos às variações de tamanho de tela ou orientação
do dispositivo.
Neste tutorial vamos dar o primeiro passo dentro da
Tela_Catalogo: entender o que é um container no Power Apps e usar essa peça
para levantar os quatro primeiros painéis que vão estruturar essa tela híbrida.
Pré-requisito: você precisa ter concluído o tutorialanterior, com as quatro telas do Controle Mov_Extras_Mobile já criadas enomeadas — Tela_Inicial, Tela_Alocacao e Tela_Catalogo. É dentro da
Tela_Catalogo que vamos trabalhar hoje.
O que Você Vai Construir Neste Tutorial
Você vai sair daqui entendendo a diferença entre um
container horizontal e um container simples (vertical), e vai ter criado, na
prática, os quatro primeiros containers da Tela_Catalogo — que no sistema vão
funcionar como painéis com papéis bem distintos: um de navegação, um de status
e um de área de trabalho.
📌 Guia de Navegação
1. Por que Containers Vêm Antes de Qualquer Botão ou Galeria
No tutorial anterior você aprendeu o conceito de tela híbrida: uma tela só, com vários conteúdos que se alternam por dentro dela. Mas
para essa alternância funcionar, alguém precisa segurar cada um desses
conteúdos em um espaço organizado — e é exatamente essa a função do container.
Antes de posicionar o primeiro botão ou a primeira galeria na Tela_Catalogo,
precisamos primeiro desenhar a estrutura que vai receber esses componentes. É
como erguer as paredes internas de um cômodo antes de pendurar os quadros.
2. Containers no Power Apps: O que São e Como Funcionam
Um container, que na sua instalação em português aparece
como Contentor, é um controle de agrupamento. Diferente de um botão ou
de um rótulo, ele não tem uma função visual própria — ele existe para organizar
outros controles dentro dele, empilhando-os automaticamente em uma direção
definida, sem que você precise calcular manualmente a posição X e Y de cada
elemento.
Existem, na prática, dois tipos de container que você vai
usar constantemente:
|
Tipo de Container |
Direção do Empilhamento |
Quando Usar |
|
Container Horizontal |
Da esquerda para a direita |
Quando os controles internos precisam ficar lado a lado,
como ícones de navegação em fileira |
|
Container Vertical (Simples) |
De cima para baixo |
Quando os controles internos precisam se empilhar um
abaixo do outro, como uma lista de campos ou blocos de conteúdo |
O Power Apps chama o container vertical de
"Simples" na lista de opções do menu Inserir — não se assuste com o
nome, ele se refere à orientação padrão vertical, que é a mais comum quando
você começa um layout do zero. Neste tutorial vamos usar os dois horizontais
primeiro, e o simples (vertical) por último — mas é importante você já saber
que, sempre que precisar empilhar controles de cima para baixo em qualquer
outra parte do sistema, o container vertical é a ferramenta certa, mesmo fora
da sequência que estamos seguindo aqui.
Uma característica fundamental do container é que ele se
comporta como uma "mini tela" dentro da tela: você pode
redimensioná-lo, posicioná-lo, e — o que é mais importante para nós agora —
pode escondê-lo ou mostrá-lo inteiro através da propriedade Visible, levando
junto todos os controles que estiverem dentro dele. É exatamente esse
comportamento que vamos explorar no próximo tutorial, quando falarmos de
propriedades de container.
Como o Controle Mov_Extras_Mobile Usa Containers para Criar Painéis
No nosso sistema, o container nunca é usado sozinho por
estética — ele é usado exclusivamente como base de construção do que chamamos
de Painel. Um painel, dentro do Controle Mov_Extras_Mobile, é um
container que recebeu um papel funcional específico dentro da tela híbrida, e
cada painel cumpre uma das quatro funções abaixo:
|
Função do Painel |
O que Ele Faz |
|
Separar o Layout |
Divide visualmente a tela em regiões fixas, como
cabeçalho, corpo e rodapé |
|
Separar Estruturas que se Alternam |
Contém conteúdo que aparece ou desaparece conforme a ação
do usuário, dentro da lógica de tela híbrida |
|
Separar Componentes por Contexto |
Agrupa controles que pertencem ao mesmo assunto, mesmo que
fiquem sempre visíveis juntos |
Na Tela_Catalogo, os quatro primeiros painéis que vamos
criar cobrem exatamente essas quatro funções: um cuida da navegação, um cuida
do status, e um vai ser a área de trabalho onde o conteúdo principal da tela
vai viver.
3. Inserindo os três Primeiros Containers na Tela_Catalogo
Vamos criar os containers na ordem exata abaixo, porque essa
ordem não é só uma questão de organização visual — é a ordem literal em que os
elementos vão aparecer, de cima para baixo, dentro da tela.
Por que a Ordem na Árvore é a Ordem na Tela
Antes de começar a clicar, entenda uma regra que vai te
acompanhar em todo o desenvolvimento do sistema: dentro da árvore do
aplicativo, no painel lateral esquerdo, a posição de um controle na lista
reflete diretamente sua posição de empilhamento na tela. O primeiro item da
lista fica visualmente no topo, o segundo logo abaixo dele, e assim por diante.
Se, no futuro, você arrastar um item para cima ou para baixo dentro dessa
árvore, o Power Apps vai automaticamente mover esse elemento na tela também. Isso
significa que reorganizar seu layout, muitas vezes, não exige nem tocar na tela
— basta reordenar a árvore.
Inserindo pela Aba Superior, Menu Inserir
O primeiro caminho é o mesmo que você já usou para criar
telas: pela barra superior do Studio. Clique no menu Inserir, e dentro
da faixa de opções que se abre, procure pela categoria de Layout — é ali
que fica o botão Contentor. Ao clicar na setinha ao lado dele, o Power
Apps te mostra as opções de orientação: horizontal, vertical e outras
variações. Para o nosso primeiro container, escolha Contentor Horizontal.
Assim que ele aparece na tela, dê um duplo clique sobre o
nome dele na árvore lateral (ou botão direito → Renomear) e digite
Painel_NavegacaoCad.
Repita o processo para o segundo container: menu Inserir →
Contentor → Contentor Horizontal novamente, e renomeie para
Painel_InformativoCad. Como você inseriu esse segundo container depois do primeiro,
ele já vai nascer posicionado logo abaixo do Painel_NavegacaoCat, tanto na
árvore quanto visualmente na tela — exatamente o comportamento que explicamos
acima.
Inserindo pela Aba Lateral, com Símbolo + Escolha ou Digite
Esse terceiro container nasce como um contentor de
orientação vertical — lembra do que explicamos antes, o "Simples" é
justamente essa variação vertical padrão. Renomeie-o para
Área_Trabalho_Cad. Como foi o último a ser inserido, ele fica na base
da pilha: abaixo do Painel_InformativoCad tanto na árvore quanto na tela.
Ao final desses quatro passos, sua árvore, dentro da
Tela_Cadastros, deve mostrar exatamente esta ordem, de cima para baixo:
4. Por que Nomeamos os Painéis Dessa Forma
Vamos abrir o nome de cada container para entender a lógica
por trás dele, porque nomenclatura no Controle Mov_Extras_Mobile nunca é
decorativa — ela carrega informação.
Painel_NavegacaoCad se divide em duas partes. O prefixo Painel_ identifica imediatamente, para qualquer pessoa lendo a árvore, que esse container tem uma função estrutural de painel — e não é só um agrupamento estético qualquer. O sufixo Cad, aqui, não indica "para que serve" o painel dentro da lógica de componentes — ele indica onde esse painel está. Diferente do padrão de sufixo de tela que você aprendeu antes (_Ini, _Cad, _Cat,_Alo), aqui o sufixo Cad está dizendo: "este painel pertence à Tela_Cadastros". É uma bússola de localização, não de função — a função já está clara no nome semântico que vem no meio, como "Navegacao" ou "Informativo".
O mesmo raciocínio vale para Painel_InformativoCad: painel,
função de Informativos, localizado na tela Cadastros.
A Area_Trabalho_Cad não foge do padrão enxuto
dos outros dois — ela mostra com clareza o que faz.
5. O que Você Aprendeu e os Cuidados para Não Errar
Neste tutorial você aprendeu a diferença entre container
horizontal e container simples (vertical), entendeu que no Controle Mov_Extras_Mobile
todo container existe para se tornar um painel com uma função específica —
separar layout, separar conteúdo alternável ou separar por contexto — e criou,
na prática, os quatro primeiros painéis da Tela_Cadastros: Painel_NavegacaoCad e
Painel_InformativoCad pelo menu Inserir, e Area_Trabalho_Cad pelo símbolo de
+ na árvore lateral.
Atenção Técnica
A ordem de inserção importa de verdade — não é só didática.
Se você inserir os quatro containers fora da sequência que planejou, o Power
Apps vai empilhá-los na ordem em que foram criados, e não na ordem que você
"tinha em mente". Se isso acontecer, a correção é simples: arraste o
item na árvore lateral para a posição correta, e a tela se ajusta
automaticamente. Não é preciso excluir e recriar nada.
Erro Comum
O erro mais comum aqui é confundir Contentor Horizontal com
Contentor Simples na hora de escolher no menu Inserir, principalmente porque os
ícones dos dois se parecem à primeira vista. O resultado observável é um
container que empilha seus filhos na direção errada — controles que você
esperava ver lado a lado aparecem um embaixo do outro, ou vice-versa. Se isso
acontecer, não é preciso recriar o container: dentro das propriedades dele
existe a opção de trocar a direção do layout, mas isso já é assunto do próximo
tutorial.
O Que Vem a Seguir
No próximo tutorial vamos abrir as propriedades de cada um
desses quatro containers, entender o que é a propriedade Direção de Layout,
Preenchimento, Espaçamento entre Itens e outras que controlam como os controles
internos se comportam — e vamos configurar o Painel_NavegacaoCad, o Painel_InformativoCad e a Area_Trabalho_Cad para que cada um comece a se
comportar de acordo com a função que já definimos para eles aqui.
Nenhum comentário:
Postar um comentário