DocumentaçãoAEM 6.4Guia do Forms

Estilo do formulário adaptável do-not-publish-style-your-adaptive-form

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Usuário
CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

Saiba como criar um tema personalizado, criar estilo para componentes individuais e usar fontes da Web em um tema

Este tutorial é uma etapa do Criar seu primeiro formulário adaptável série. É recomendável seguir a série em sequência cronológica para entender, executar e demonstrar o caso de uso tutorial completo.

Sobre o tutorial about-the-tutorial

É possível usar temas para fornecer uma aparência e estilo exclusivos a um formulário adaptável. É possível aplicar temas prontos para uso com o editor de formulários adaptáveis ou criar temas personalizados próprios. A AEM Forms fornece uma editor de temas para criar temas personalizados. Um único tema pode fornecer uma aparência diferente para o mesmo formulário adaptável aberto em dispositivos móveis, tablets ou desktops. Qualquer conhecimento prévio de CSS ou LESS não é necessário para usar o editor de temas, mas é desejado.

Ao final do tutorial, você aprenderá a:

  • Aplicar um tema pronto para uso a um formulário adaptável
  • Criar um tema para um formulário adaptável usando o editor de temas
  • Estilo dos componentes individuais
  • Seção de bônus: Usar fontes da Web em um tema personalizado

O formulário será semelhante ao seguinte após a conclusão do tutorial:

Formulário com tema personalizado

Antes de você iniciar before-you-start

Baixe o estilo do cabeçalho e as imagens do logotipo, fornecidas abaixo, na sua máquina local. O cabeçalho da shipping-address-add-update-form o formulário adaptável usa o estilo do cabeçalho e as imagens do logotipo. A imagem de estilo de cabeçalho é exibida no lado direito do cabeçalho.

Obter arquivo

Obter arquivo

Etapa 1: Aplicar um tema ao formulário adaptável step-apply-a-theme-to-your-adaptive-form

O editor de formulários adaptáveis fornece vários temas prontos para uso. Se você planeja não usar um estilo personalizado para seu formulário adaptável, também pode publicar seus formulários adaptáveis com um tema predefinido. Os temas são independentes de formas adaptativas. É possível aplicar o mesmo tema a vários formulários adaptáveis. Para aplicar um tema a um formulário adaptável:

  1. Abra o formulário adaptável para edição.

    http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. Abrir propriedades de Contêiner de formulário adaptável. No navegador de propriedades, navegue até Básico > Tema de formulário adaptável. O Tema de formulário adaptável lista todos os temas predefinidos e personalizados. Por padrão, o tema Tela é aplicado.

  3. Selecione um tema do Tema de formulário adaptável campo. Por exemplo, Tema da pesquisa. Toque aem_6_3_forms_save para aplicar o tema selecionado.

Formulário adaptável com tema padrão

Figura: Formulário adaptável com tema padrão

Formulário adaptável com o tema Pesquisa

Figura: Formulário adaptável com o tema Pesquisa

Etapa 2: Atualizar o formulário adaptável step-update-your-adaptive-form

O design exibido acima requer alterações no texto do espaço reservado e no logotipo do formulário adaptável existente. Execute as seguintes etapas para fazer as alterações necessárias:

  1. Altere o logotipo e o texto existentes do cabeçalho. Para remover o logotipo:

    1. Abra o formulário no editor de formulários.

      http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

    2. Toque na imagem do logotipo no componente do cabeçalho e toque em cmppr propriedades. Na propriedade da imagem, toque em X para remover a imagem de logotipo existente.

    3. Toque em carregar, selecione o logo.png e toque em aem_6_3_forms_save para salvar as alterações. A imagem foi baixada no Antes de começar seção.

    4. Toque no texto do cabeçalho, We.Retaile toque em aem_6_3_edit editar. Alterar o texto do cabeçalho para we retail. Aplicar formatação em negrito somente a weem we retail.

    we-retail-logo-text

  2. Remova o título e adicione texto de espaço reservado:

    1. Toque no campo ID do cliente e toque em cmppr propriedades.
    2. Copie o conteúdo da Título para Texto de espaço reservado campo.
    3. Exclua o conteúdo do Título campo e toque em aem_6_3_forms_save .
    4. Repita as três etapas anteriores para todas as caixas de texto, caixas numéricas e campos de email no formulário.

    forma adaptável atualizada

Etapa 3: Criar um tema personalizado para o formulário adaptável step-create-a-custom-theme-for-your-adaptive-form

Você pode usar editor de temas para criar temas personalizados. O editor de temas é um editor WYSIWYG poderoso. É um método visual para aplicar o CSS a vários componentes de um formulário adaptável. Ele fornece controles mais refinados para criar estilos de componentes e painéis de um formulário adaptável.

Um tema é uma entidade separada, como formas adaptáveis. Ele contém estilos (CSS) para os componentes e painéis de um formulário adaptável. Os estilos incluem propriedades de CSS, como cores de plano de fundo, cores de estado, transparência, alinhamento e tamanho. Ao aplicar um tema, o estilo especificado é aplicado aos componentes correspondentes de um formulário adaptável.

Neste tutorial, você estilizará o cabeçalho e o rodapé, os componentes de texto e numéricos, o componente do anexo e os botões. Vamos começar com a criação de um tema:

Criar um tema create-a-theme

  1. Faça logon na instância do autor do AEM e navegue até Adobe Experience Manager > Forms > Temas. O URL padrão é http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

  2. Toque Criar e selecione Tema. A página Criar Tema com os campos necessários para criar um tema é exibida. Os campos Título e Nome são obrigatórios:

    • Título: Especifique um título para o tema. Por exemplo, Tema Global. O título ajuda a identificar o tema da lista de temas.
    • Nome: Especifique o nome do tema. Por exemplo, Tema Global. Um nó com o nome especificado é criado no repositório. À medida que você começa a digitar um título, o valor do campo de nome é gerado automaticamente. Você pode alterar o valor sugerido. O campo de nome pode incluir somente caracteres alfanuméricos, hifens e sublinhados. Todas as entradas inválidas são substituídas por um hífen.

  3. Toque Criar. Um tema é criado, e uma caixa de diálogo para abrir o formulário para edição é exibida. Toque Abrir para abrir o tema recém-criado em uma nova guia. O tema é aberto no editor de temas. Para o estilo, o editor de temas usa um formulário adaptável pronto para uso enviado com o AEM Forms.

    Para obter informações sobre o uso da interface do usuário do editor de temas, consulte Sobre o editor de temas.

  4. Toque Opções de Tema theme-options > Configurar. No Visualizar formulário selecione o ship-address-add-update-form formulário adaptável, toque aem_6_3_forms_save , toque em Salvar. Agora, o editor de temas é configurado para usar seu próprio formulário adaptável em vez do formulário adaptável padrão. Toque Cancelar para retornar ao editor de temas.

    tema personalizado

    Figura: Editor de temas com o formulário adaptável Taxafe-address-add-update-form

    create-a-theme

    Figura: Formulário adaptável com o formulário padrão

O cabeçalho e o rodapé fornecem uma aparência consistente e distinta para um formulário adaptável. Geralmente, o cabeçalho contém o logotipo e o nome da organização, o rodapé contém informações de direitos autorais e permanecem idênticos em várias formas de uma organização. Para estilizar o cabeçalho e o rodapé do formulário adaptável Taxafrete-address-add-update-form:

  1. Navegue pelo Cabeçalho > Texto no painel Seletores. O painel Seletores fica à esquerda do editor de temas. Se o painel não estiver visível, toque em Alternar painel lateral Alternar painel lateral.

  2. Defina as seguintes propriedades no Texto acordeão e toque aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Propriedade Valor
    Família da fonte Arial
    Cor da fonte FFFFFF
    Tamanho da fonte 54px

  3. Toque no widget de cabeçalho e toque em Cabeçalho. As opções para criar estilo no widget Cabeçalho são exibidas à esquerda. Expanda o Dimension & Posição , defina a Altura para 120pxe toque em aem_6_3_forms_save .

  4. Expanda a opção Plano de fundo do widget de cabeçalho, defina a variável Cor do fundo para F6921E.

    Passar o mouse Imagem e gradiente > + Adicionar, toque em Imagem. Defina as seguintes propriedades e toque em aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Propriedade Valor
    imagem Carregue o header-style.png. A imagem foi baixada no Antes de começar seção.
    Posição Parte Inferior Direita
    Lado a lado Sem Repetição

  5. No editor de temas, toque no logotipo no cabeçalho e toque em Logotipo do cabeçalho. Expanda a opção Dimension & Posição , defina as seguintes propriedades e toque em aem_6_3_forms_save .

Margem
Valor
Margem
  • Parte superior: 1.5rem
  • Parte inferior: -35px
  • Esquerda: 1rem

Dica: Toque no ícone de link para fornecer um valor diferente para cada campo.

Altura
4.75rem
  1. Toque no widget de rodapé e toque em Rodapé. Expanda o Histórico , defina a Cor do fundo para F6921Ee toque em aem_6_3_forms_save .

Estilo do componente de captura de dados e aplicar um plano de fundo ao formulário adaptável style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form

É possível usar vários componentes em um formulário adaptável para capturar dados. Por exemplo, caixa de texto e caixa numérica. Você pode fornecer um estilo idêntico a todos os componentes de captura de dados ou um estilo separado para cada componente. Neste tutorial, um estilo idêntico é aplicado a caixas numéricas (ID do cliente, CEP) e caixas de texto (ID do cliente, Nome, Endereço de envio, Estado, Email). Para estilizar os componentes de captura de dados:

  1. Toque no campo ID do cliente e toque no Widget de campo opção. Defina as seguintes propriedades e toque em aem_6_3_forms_save .
Acordeão
Propriedade
Valor
Borda
Cor da borda
A7A9AC
Borda
Raio da Borda
  • Parte superior: 7 px
  • Direita: 7 px
  • Parte inferior: 7 px
  • Esquerda: 7 px
Texto
Família da fonte
Arial
Texto
Cor da fonte
939598
Texto
Tamanho da fonte
18px
Dimension e posição
Largura
60%
Dimension e posição
Margem
  • Esquerda: 10rem

  1. Toque na área vazia acima do campo ID do cliente e toque em Contêiner do painel responsivo. Defina as Histórico > Cor do fundo para F1F2F2. Toque aem_6_3_forms_save .

Estilo dos botões style-the-buttons

Você pode usar um tema personalizado para aplicar um estilo idêntico a todos os botões do formulário adaptável e estilo em linha para aplicar um estilo a um botão específico. Para estilizar os botões:

  1. Toque no Enviar e toque no botão Botão opção. Defina as seguintes propriedades e toque em aem_6_3_forms_save .
Acordeão
Propriedade
Valor
Segundo plano
Cor do plano de fundo
F6921E
Borda
Cor da borda
F6921E
Borda
Raio da Borda
  • Parte superior: 7 px
  • Direita: 7 px
  • Parte inferior: 7 px
  • Esquerda: 7 px
Texto
Família da fonte
Arial
Texto
Cor da fonte
FFFFFF
Texto
Tamanho da fonte
18px

  1. Aplicar o tema personalizado, Tema global, no formulário adaptável. Se o estilo não refletir no formulário adaptável, limpe o cache do navegador e tente novamente.

    style-data-capture-components

Etapa 4: Estilo dos componentes individuais step-style-individual-components

Alguns estilos se aplicam somente a um componente específico. Esses componentes são estilizados no editor de formulários adaptáveis.

  1. Abra o formulário adaptável para edição. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. Na barra superior, selecione o Estilo opção.

    opção de estilo

  3. Toque no Anexar e toque no botão aem_6_3_edit ícone . Defina as seguintes propriedades no Dimension e posição acordeão:

    table 0-row-2 1-row-2 2-row-2
    Propriedade Valor
    Flutuar Esquerda
    Largura 10%

  4. Toque no Prova de endereço aprovada pelo Governo e toque em aem_6_3_edit ícone . Defina as seguintes propriedades:

Acordeão
Propriedade
Valor
Dimensões e Posição
Flutuar
Esquerda
Dimensões e Posição
Largura
73%
Dimensões e Posição
Preenchimento
  • Esquerda: 10px
Dimensões e Posição
Altura
40px
Dimensões e Posição
Margem
  • Direita: 2rem
  • Esquerda: 10rem
Segundo plano
Cor do plano de fundo
FFFFFF
Borda
Largura da Borda
1px
Borda
Estilo de Borda
Sólido
Borda
Cor da borda
A7A9AC
Borda
Raio da Borda
7px
Texto
Família da fonte
Arial
Texto
Cor da fonte
BCBEC0
Texto
Tamanho da fonte
18px
Texto
Altura da Linha
2
  1. Toque no Enviar e toque no botão aem_6_3_edit ícone . Defina as seguintes propriedades:
Acordeão
Propriedade
Valor
Dimension e posição
Flutuar
Direita
Dimension e posição
Margem
  • Parte superior: 5rem
  • Direita: 14rem
  • Parte inferior: 20px
  • Esquerda: 20px
Segundo plano
Cor do plano de fundo
F6921E
Borda
Cor da borda
F6921E

styled-adaptive-form-1

Etapa 5: Seção de bônus: Uso de fontes da Web em um tema personalizado step-bonus-section-using-web-fonts-in-a-custom-theme

Você pode usar várias fontes para criar um formulário adaptável. Todos os dispositivos em que o formulário adaptável é exibido podem não ter as fontes usadas para projetar o formulário adaptável. Você pode usar um serviço de fonte da Web para fornecer as fontes necessárias ao dispositivo de destino.

O Adobe Typekit é um serviço de fontes da Web. Você pode configurar e usar o serviço com formulários adaptáveis. Para usar o Adobe Typekit em um formulário adaptável:

NOTE
typekit-to-adobe-fonts O Typekit agora é chamado de Adobe Fonts e está incluído no Creative Cloud e em outras assinaturas. Saiba mais.

  1. Crie um Adobe Typekit criar um kit, adicionar fonte Myriad Pro ao kit, publicar o kit e obter a ID do Kit. É necessário usar fontes Adobe Typekit (fontes da Web) em um formulário adaptável.

  2. No servidor do AEM Forms, navegue até adobeexperiencemanager Adobe Experience Manager > Ferramentas martelo > Implantação > Cloud Services. Na página Cloud Services , navegue até Serviços de terceiros > Typekit e clique em Configurar Agora em Typekit. Se uma configuração já estiver disponível, clique no botão + para criar uma nova instância.

    Na caixa de diálogo Criar configuração , especifique um Título para a configuração e clique em Criar. Você é redirecionado para a página de configuração. Na caixa de diálogo Editar componente , forneça seu Kit ID e clique em OK.

  3. Configure seu tema para usar a configuração do TypeKit. Na instância do autor, abra Tema Global no editor de temas. No editor de temas, navegue até Opções de Temas theme-options > Configurar. Em Configuração do Typekit , selecione o kit e clique em Salvar.

    As fontes adicionadas ao Typekit estão disponíveis para seleção no Texto de todos os componentes.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da