Usar o modo Layout para redimensionar componentes

O Adobe recomenda o uso da captura de dados moderna e extensível Componentes principais para criação de um novo Forms adaptável ou adição de 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

Selecionar Layout na lista suspensa que aparece na parte superior da interface de criação do formulário adaptável ao lado da guia Visualizar opção. O formulário é exibido no modo Layout.

1. Faça logon na instância de autor do AEM e acesse Adobe Experience Manager > Forms > Forms e documentos.

2. Criar um formulário adaptável ou abra um existente.

3. Selecionar Layout na lista suspensa que aparece na parte superior ao lado da guia Visualizar opção. O formulário é exibido no modo Layout.

   

Redimensionar componentes

1. No modo Layout, toque no componente para redimensionar. Os pontos azuis são exibidos no início e no fim da grade responsiva.

2. 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: seleciona o primário 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 variável Reverter layout do ponto de interrupção ( ) no nível do painel para desfazer todas as alterações de redimensionamento.

   OBSERVAÇÃO

   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

Objetivo: Você deseja inserir um componente Tabela e um componente Imagem e posicioná-los paralelamente um ao outro em um formulário adaptável.

1. 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.

2. Alterne para o modo Layout e toque no componente Tabela. Os pontos azuis para redimensionar a exibição do componente nas colunas 1 e 12.

3. Arraste e solte o ponto azul na coluna 12 para a coluna 6 da grade responsiva.

   

4. 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.

   

   Selecione o componente de Imagem e toque no botão Flutuar para a nova linha opção disponível na barra de ferramentas para deslocar o componente Imagem para a próxima linha.

Redimensionar painéis

Execute as seguintes etapas se desejar redimensionar o painel inteiro em vez de componentes individuais:

1. Toque em qualquer um dos componentes no painel que deseja redimensionar e selecione e selecione a primeira opção na lista suspensa, se o painel for o principal imediato do componente.

   Os pontos azuis são exibidos no início e no fim da grade responsiva.

2. 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 para deslocar o painel redimensionado para a próxima linha.

Definir layout de várias colunas para um painel

Execute as seguintes etapas para definir o número de colunas para um painel:

1. Entrada Editar , toque no painel e selecione e selecione Responsivo - tudo na página sem navegação opção no Layout do painel lista suspensa.

2. Toque em para salvar as propriedades.

3. No Layout , toque em qualquer um dos componentes no painel, selecione e selecione o painel.

4. Toque e selecione o número de colunas na lista suspensa. O número de colunas pode variar de 1 a 12. O painel é dividido em um layout de várias colunas.

Ativar a nova grade responsiva para layouts responsivos antigos

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:

1. Selecionar Layout na lista suspensa que aparece na parte superior ao lado da guia Visualizar opção. Uma confirmação para ativar o modo Layout é exibida.
2. Toque Sim para habilitar o Layout para o formulário.

Incorpore um fragmento antigo em um formulário adaptável com o novo layout responsivo

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

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 ativar o modo Layout, selecione Layout na lista suspensa que aparece na parte superior ao lado da guia Visualizar e toque em Sim para confirmar. Selecionar Editar para incorporar novamente o fragmento.

Desativar o modo Layout para formulários com layout responsivo antigo

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:

1. Selecionar Ferramentas > Geral > Modelos e abra o modelo usado no formulário no Editar modo.

2. Selecione o Contêiner de documentos no painel esquerdo e toque em Política.

   

3. Toque no Configurações de layout e selecione Desativar modo de layout.

4. Toque para salvar as propriedades do template.