Usar o modo Layout para redimensionar componentes use-layout-mode-to-resize-components
O Adobe recomenda o uso de Componentes principaisde captura de dados moderna e extensível para criar um novo Forms Adaptávelou adicionar o Forms Adaptável às páginas do AEM Sites. Esses componentes representam um avanço significativo na criação do Forms adaptável, garantindo experiências de usuário impressionantes. Este artigo descreve a abordagem mais antiga para criar o Forms adaptável usando componentes de base.
A interface de criação do formulário adaptável permite redimensionar componentes usando o modo Layout. Arraste e solte pontos azuis dentro de colunas para definir os pontos inicial e final para posicionar componentes. Os pontos azuis são exibidos depois de tocar no componente na grade responsiva. A grade responsiva consiste em 12 colunas iguais. O sombreamento das cores branco e azul em colunas alternadas diferencia uma coluna da outra.
Você pode usar o modo Layout para redimensionar componentes para todos os tipos de dispositivos, como desktop, tablet, telefone e outros dispositivos menores. O tablet deriva automaticamente a configuração de layout da versão do desktop e os dispositivos menores derivam a configuração de layout do telefone. No entanto, você pode substituir as configurações derivadas automaticamente para definir uma configuração diferente para cada tipo de dispositivo.
Modo de layout de acesso access-layout-mode
Selecione Layout na lista suspensa que aparece na parte superior da interface de criação do formulário adaptável ao lado da opção Visualizar. O formulário é exibido no modo Layout.
-
Faça logon na instância de autor do AEM e navegue até Adobe Experience Manager > Forms > Forms e Documentos.
-
Crie um formulário adaptável ou abra um existente.
-
Selecione Layout na lista suspensa que aparece na parte superior ao lado da opção Visualizar. O formulário é exibido no modo Layout.
Redimensionar componentes resize-components
-
No modo Layout, selecione o componente a ser redimensionado. Os pontos azuis são exibidos no início e no fim da grade responsiva.
-
Arraste e solte os pontos azuis para definir a posição do componente na grade responsiva.
A barra de ferramentas exibida ao tocar em componentes consiste nas seguintes opções:
- Pai: selecione o pai de um componente.
- Reverter layout do ponto de interrupção: desfaz todas as alterações de redimensionamento e aplica o layout padrão ao componente.
- Flutuar para a nova linha: desloque o componente para a próxima linha se houver vários componentes dentro da mesma linha.
Você também pode usar a opção Reverter layout do ponto de interrupção (
note note NOTE Não é possível redimensionar componentes de coluna de tabela, barra de ferramentas, botão da barra de ferramentas e área de destino usando o modo Layout. Use o modo Estilo para redimensionar esses componentes.
Exemplo example
Objetivo: você deseja inserir um componente de tabela e um componente de imagem e posicioná-los paralelamente uns aos outros em um formulário adaptável.
-
Insira os componentes de tabela e imagem usando o modo Editar no formulário adaptável. O componente de imagem é exibido após o componente de tabela.
-
Alterne para o modo Layout e selecione o componente Tabela. Os pontos azuis para redimensionar a exibição do componente nas colunas 1 e 12.
-
Arraste e solte o ponto azul na coluna 12 para a coluna 6 da grade responsiva.
-
Da mesma forma, selecione o componente de Imagem e arraste e solte o ponto azul na coluna 1 para a coluna 7 da grade responsiva. Os componentes de tabela e imagem são exibidos paralelamente um ao outro.
Você pode selecionar o componente de Imagem e selecionar a opção Flutuar para a nova linha, disponível na barra de ferramentas, para deslocar o componente de Imagem para a próxima linha.
Redimensionar painéis resize-panels-layout-mode
Execute as seguintes etapas se desejar redimensionar o painel inteiro em vez de componentes individuais:
-
Selecione qualquer um dos componentes no painel que você deseja redimensionar, selecione
Os pontos azuis são exibidos no início e no fim da grade responsiva.
-
Arraste e solte os pontos azuis para definir a posição do painel na grade responsiva.
Você pode repetir as etapas 1 e 2 e selecionar
Definir layout de várias colunas para um painel
Execute as seguintes etapas para definir o número de colunas para um painel:
-
No modo Editar, selecione o painel, selecione
-
Selecione
-
No modo Layout, selecione qualquer um dos componentes no painel, selecione
-
Selecione
Ativar a nova grade responsiva para layouts responsivos antigos enableresponsivegrid
Ative a nova grade responsiva para formulários criados com o AEM Forms 6.4 ou versão inferior para redimensionar componentes.
Execute as seguintes etapas para ativar a nova grade responsiva:
- Selecione Layout na lista suspensa que aparece na parte superior ao lado da opção Visualizar. Uma confirmação para ativar o modo Layout é exibida.
- Selecione Sim para habilitar o modo Layout para o formulário.
Incorpore um fragmento antigo em um formulário adaptável com o novo layout responsivo embed-an-old-fragment-in-an-adaptive-form-with-new-responsive-layout
O novo layout responsivo para formulário adaptável permite adicionar um fragmento de formulário adaptável com o layout responsivo antigo ao formulário. No entanto, o novo layout descarta as propriedades de layout já definidas para os componentes usados no fragmento. Você pode alternar para o modo Layout para definir as propriedades de layout dos componentes usados no fragmento.
Incorporar um fragmento com o novo layout responsivo em um formulário adaptável antigo embed-a-fragment-with-new-responsive-layout-in-an-old-adaptive-form
Se você incorporar um fragmento com o novo layout responsivo em um formulário adaptável com um layout responsivo antigo, o sistema solicitará que você ative o modo Layout para o formulário e incorpore novamente o fragmento.
Para habilitar o modo de Layout, selecione Layout na lista suspensa que aparece na parte superior ao lado da opção Visualizar e selecione Sim para confirmar. Selecione o modo Editar para reincorporar o fragmento.
Desativar o modo Layout para formulários com layout responsivo antigo disable-layout-mode-for-forms-with-old-responsive-layout
Você pode desativar o modo Layout para formulários com layout responsivo antigo editando propriedades para o modelo usado no formulário.
Execute as seguintes etapas para desativar o modo Layout:
-
Selecione Ferramentas > Geral > Modelos e abra o modelo usado no formulário no modo Editar.
-
Selecione o Contêiner de documentos no painel esquerdo e selecione Política.
-
Selecione a guia Configurações de Layout e selecione Desabilitar Modo de Layout.
-
Selecione
