Usar o modo Layout para redimensionar componentes

A interface de criação do Adaptive Form permite redimensionar componentes usando o modo Layout. Arraste pontos azuis dentro de colunas para definir os pontos inicial e final para posicionar os componentes. Os pontos azuis são exibidos após tocar no componente dentro da grade responsiva. A grade responsiva consiste em 12 colunas iguais. O sombreamento de cores branco e azul em colunas alternativas 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 de desktop e os dispositivos menores derivam a configuração de layout do telefone. No entanto, é possível 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 do Visualizar opção. O formulário é exibido no modo Layout .

  1. Faça logon no Adobe Experience Manager criar instância e navegar até Adobe Experience Manager > Forms > Forms & Documents.

  2. Crie um novo ou abra um Formulário adaptável.

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

    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.

    Redimensionamento usando o modo Layout

    A barra de ferramentas que é exibida após tocar nos componentes consiste nas seguintes opções:

    • Pai: Selecione o pai de um componente.
    • Reverter layout do ponto de interrupção: Desfaça todas as alterações de redimensionamento e aplique o layout padrão ao componente.
    • Flutuar para a nova linha: Deslocar o componente para a linha seguinte se houver vários componentes na mesma linha.

    Também é possível usar a variável Reverter layout do ponto de interrupção ( Reverter ponto de interrupção) no nível do painel para desfazer todas as alterações de redimensionamento.

    OBSERVAÇÃO

    Não é possível redimensionar a coluna da tabela, a barra de ferramentas, o botão da barra de ferramentas e os componentes da área de destino usando o modo Layout . Use o modo Estilo para redimensionar esses componentes.

Exemplo

Objetivo: Você deseja inserir um componente de tabela e um componente de Imagem e posicioná-los paralelos entre si em um formulário adaptável.

  1. Insira a tabela e os componentes da imagem usando Editar no formulário adaptável. O componente de imagem é exibido depois do componente de tabela.

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

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

    Definir o ponto final da tabela

  4. Da mesma forma, selecione o Imagem e arraste o ponto azul na coluna 1 para a coluna 7 da grade responsiva. Os componentes de tabela e imagem são exibidos em paralelo.

    Tabela e imagem em paralelo no modo Layout

    Você pode selecionar o componente Imagem e tocar no componente Flutuar para a nova linha opção disponível na barra de ferramentas para deslocar o componente de Imagem para a próxima linha.

Redimensionar painéis

Execute as seguintes etapas se quiser redimensionar todo o painel em vez de componentes individuais:

  1. Toque em qualquer um dos componentes no painel que você deseja redimensionar, selecione Selecionar Paie selecione a primeira opção na lista suspensa, se o painel for o pai 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 Selecionar Pai para transferir o painel redimensionado para a linha seguinte.

Definir o layout de várias colunas para um painel

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

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

  2. Toque Salvar para salvar as propriedades.

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

  4. Toque várias colunas 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.

várias colunas no modo de layout

Ativar a nova grade responsiva para layouts responsivos antigos

Ativar a nova grade responsiva para formulários que você criar usando Adobe Experience Manager Forms 6.4 ou versão inferior para redimensionar componentes.

OBSERVAÇÃO

A alternância para a nova grade responsiva descarta as propriedades de layout já definidas para os componentes usados no formulário.

Execute as seguintes etapas para ativar a nova grade responsiva:

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

Incorporar um fragmento antigo em um formulário adaptável com um 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 para os componentes usados no fragmento.

Incorporar um fragmento ao novo layout responsivo em um Formulário adaptável antigo

Se um fragmento for incorporado 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 do formulário e reincorpore o fragmento.

Para ativar o modo Layout , selecione Layout na lista suspensa que aparece na parte superior ao lado do Visualizar opção e toque em Sim para confirmar. Selecionar Editar para reincorporar 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 as propriedades do 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 em Editar modo.

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

    Desativar modo Layout

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

  4. Toque Salvar alterações para salvar as propriedades do template.

Nesta página