DocumentaçãoAEM 6.5Guia do usuário

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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
  • undefined
  • undefined

Saiba como criar um tema personalizado, estilizar componentes individuais e usar Web Fonts em um tema.

imagem-herói

Este tutorial é uma etapa da série Criar o primeiro formulário adaptável. A Adobe recomenda que você siga 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 um estilo exclusivos a um formulário adaptável. Você pode aplicar temas prontos para uso fornecidos com o editor de formulários adaptáveis ou criar temas personalizados próprios. O AEM Forms fornece um editor de temas para criar temas personalizados. Um único tema pode fornecer a aparência diferente para o mesmo formulário adaptável aberto em dispositivos móveis, tablets ou áreas de trabalho. Qualquer conhecimento prévio de CSS ou MENOS não é necessário para usar o editor de temas, mas é desejável.

No final do tutorial, você poderá fazer o seguinte:

  • Aplicar um tema pronto para uso a um formulário adaptável
  • Criar um tema para formulário adaptável usando o editor de temas
  • Estilizar componentes individuais
  • Seção de Bônus: Usar Web Fonts em um tema personalizado

Seu formulário deve ser semelhante ao seguinte após concluir o tutorial:

Formulário com um tema personalizado

Antes de começar before-you-start

Baixe as imagens de estilo de cabeçalho e logotipo fornecidas abaixo em seu computador local. O cabeçalho do formulário adaptável shipping-address-add-update-form usa as imagens de estilo de cabeçalho e logotipo. A imagem de estilo do 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 pronto para uso. Os temas são independentes das formas adaptativas. É possível aplicar o mesmo tema a vários formulários adaptáveis.

Para aplicar um tema ao seu 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. Abra as propriedades do Contêiner de formulário adaptável. No navegador de propriedades, navegue até Básico > Tema de Formulário Adaptável. O campo Tema de formulário adaptável lista todos os temas prontos para uso e personalizados. Por padrão, o tema Tela de desenho é aplicado.

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

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

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

    Formulário adaptável com o tema de Pesquisa

    Figura: Formulário adaptável com o tema de 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.

Para atualizar seu formulário adaptável:

  1. Altere o logotipo existente e o texto 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. Selecione a imagem de logotipo no componente cabeçalho e selecione cmppr propriedades. Na propriedade image, selecione X para remover a imagem de logotipo existente.

    3. Selecione carregar, logo.png e aem_6_3_forms_save para salvar as alterações. A imagem foi baixada na seção Antes de você iniciar.

    4. Selecione o texto do cabeçalho, We.Retail, e selecione aem_6_3_edit edit. Alterar texto do cabeçalho para we retail. Aplicar formatação em negrito somente a we em we retail.

      we-retail-logo-text

  2. Remover título e adicionar texto de espaço reservado:

    1. Selecione o campo ID do cliente e selecione cmppr propriedades.

    2. Copie o conteúdo do campo Título para o campo Texto do Espaço Reservado.

    3. Exclua o conteúdo do campo Título e selecione 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 do formulário.

      formulário-atualizado-adaptável

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

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

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

Neste tutorial, você estiliza o cabeçalho e o rodapé, os componentes de texto e numéricos, o componente de 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 de autor do AEM e navegue até Adobe Experience Manager > Forms > Temas. A URL padrão é http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

  2. Selecione 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 do 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. Quando você começa a digitar um título, o valor do campo de nome é gerado automaticamente. É possível alterar o valor sugerido. O campo de nome pode incluir apenas caracteres alfanuméricos, hifens e sublinhados. Todas as entradas inválidas são substituídas por um hífen.

  3. Selecione Criar. Um tema é criado e uma caixa de diálogo para abrir o formulário para edição é exibida. Selecione 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 AEM Forms.

    Para obter informações sobre como usar a interface do editor de temas, consulte Sobre o editor de temas.

  4. Selecione Opções de Tema opções de tema > Configurar. No campo Visualizar Formulário, selecione o formulário adaptável delivery-address-add-update-form, selecione aem_6_3_forms_save e 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. Selecione Cancelar para retornar ao editor de tema.

    tema personalizado

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

    criar-um-tema

    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 elas permanecem idênticas em vários formulários de uma organização. Para estilizar o cabeçalho e o rodapé do formulário adaptável delivery-address-add-update-form:

  1. Navegue pela opção Cabeçalho > Texto no painel Seletores. O painel Seletores está à esquerda do editor de tema. Se o painel não estiver visível, selecione alternar painel lateral Alternar painel lateral.

  2. Defina as seguintes propriedades na opção Texto e selecione aem_6_3_forms_save .

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Propriedade Valor
    Família de Fontes Arial®
    Cor da Fonte FFFFFF
    Tamanho da Fonte 54 px

  3. Selecione o widget cabeçalho e selecione cabeçalho. As opções para estilizar o widget Cabeçalho são exibidas à esquerda. Expanda a opção Dimension e Posição, defina a Altura como 120px e selecione aem_6_3_forms_save .

  4. Expanda a opção Plano de Fundo do widget de cabeçalho. Defina a Cor do Plano de Fundo como F6921E.

    Passe o mouse sobre Imagem e Gradiente > + Adicionar, selecione Imagem. Defina as seguintes propriedades e selecione 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 na seção Antes de você iniciar.
    Posição Parte Inferior Direita
    Lado a lado Sem Repetição

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

    table 0-row-2 1-row-2 2-row-2 html-authored no-header
    Margem Valor
    Margem
    • Superior: 1,5rem
    • Inferior: -35px
    • À esquerda: 1rem

    Dica: Selecione o ícone de link para fornecer um valor diferente para cada campo.

    Altura 4,75rem

  6. Selecione o widget de rodapé e selecione Rodapé. Expanda a opção Plano de Fundo, defina a Cor do Plano de Fundo como F6921E e selecione aem_6_3_forms_save .

Estilo do componente de captura de dados e aplicação de 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 entrega, Estado, Email). Para estilizar os componentes de captura de dados:

  1. Selecione o campo ID do cliente e selecione a opção Widget de campo. Defina as seguintes propriedades e selecione aem_6_3_forms_save .

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 html-authored no-header
    Acordeão Propriedade Valor
    Borda Cor da Borda A7A9AC
    Borda Raio da Borda
    • Superior: 7 px
    • Direita: 7 px
    • Inferior: 7 px
    • Esquerda: 7 px
    Texto Família de Fontes Arial®
    Texto Cor da Fonte 939598
    Texto Tamanho da Fonte 18 px
    Dimension e Posição Largura 60%
    Dimension e Posição Margem
    • À esquerda: 10 rem

  2. Selecione a área vazia acima do campo ID do cliente e selecione Contêiner do painel responsivo. Defina o Plano de Fundo > Cor do Plano de Fundo como F1F2F2. Selecione aem_6_3_forms_save .

    Contêiner do painel responsivo

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. Selecione o botão Enviar e selecione a opção Botão. Defina as seguintes propriedades e selecione aem_6_3_forms_save .

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 html-authored no-header
    Acordeão Propriedade Valor
    Fundo Cor do Plano de Fundo F6921E
    Borda Cor da Borda F6921E
    Borda Raio da Borda
    • Superior: 7 px
    • Direita: 7 px
    • Inferior: 7 px
    • Esquerda: 7 px
    Texto Família de Fontes Arial®
    Texto Cor da Fonte FFFFFF
    Texto Tamanho da Fonte 18 px

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

    componentes-de-captura-de-dados-estilo

Etapa 4: Estilizar componentes individuais step-style-individual-components

Alguns estilos se aplicam a apenas 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 a opção Estilo.

    opção-estilo

  3. Selecione o botão Anexar e selecione o ícone aem_6_3_edit . Defina as seguintes propriedades na opção Dimension e Posição:

    table 0-row-2 1-row-2 2-row-2
    Propriedade Valor
    Flutuante À esquerda
    Largura 10%

  4. Selecione a opção Prova de endereço aprovada pelo governo e selecione o ícone aem_6_3_edit . Defina as seguintes propriedades:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3 html-authored no-header
    Acordeão Propriedade Valor
    Dimensões e Posição Flutuante À esquerda
    Dimensões e Posição Largura 73%
    Dimensões e Posição Preenchimento
    • Esquerda: 10 px
    Dimensões e Posição Altura 40px
    Dimension e Posição Margem
    • Direito: 2 rem
    • À esquerda: 10 rem
    Fundo Cor do Plano de Fundo FFFFFF
    Borda Largura da Borda 1 px
    Borda Estilo de Borda Sólido
    Borda Cor da Borda A7A9AC
    Borda Raio da Borda 7 px
    Texto Família de Fontes Arial®
    Texto Cor da Fonte BCBEC0
    Texto Tamanho da Fonte 18 px
    Texto Altura da Linha 2

  5. Selecione o botão Enviar e selecione o ícone aem_6_3_edit . Defina as seguintes propriedades:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header
    Acordeão Propriedade Valor
    Dimension e Posição Flutuante Direito
    Dimension e Posição Margem
    • Superior: 5 rem
    • Direito: 14 rem
    • Inferior: 20 px
    • Esquerda: 20 px
    Fundo Cor do Plano de Fundo F6921E
    Borda Cor da Borda F6921E

    formulário-adaptável-estilizado-1

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

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

Adobe Fonts é um serviço do Web Fonts. Você pode configurar e usar o serviço com formulários adaptáveis. Para usar Adobe Fonts em um formulário adaptável:

  1. Procure a biblioteca de fontes de Adobe e escolha a fonte para estilizar o formulário.
NOTE
É possível adicionar tags ou filtros para refinar a lista de fontes.

  1. Clique no botão </> para adicionar a família a um projeto da Web, caso encontre uma fonte que goste.

    selecionar-fonte-da-biblioteca-de-fontes

    A tela de diálogo Adicionar fontes a um projeto da Web é exibida.

    note note
    NOTE
    Você só poderá adicionar fontes ao projeto da Web se elas tiverem o botão </> disponível.

  2. Dê um nome ao projeto da Web.

  3. Marque as caixas de seleção para selecionar os pesos e estilos de fonte que deseja incluir.

    adicionar uma biblioteca de fontes

  4. Selecione Clique para criar o projeto.

  5. Copie o código incorporado e o URL da tela.
    código incorporado e URL

  6. Clique em Concluído para fechar a janela do projeto Web.

  7. Faça logon na instância do AEM e vá para a URL http://server:port/crx/de/index.jsp#

  8. Crie uma estrutura de pastas no CRXDE, por exemplo /apps/[fontslibrary]/[customlibrary(clientlibrary)].

  9. Vá para a pasta clientlibs recém-criada e adicione as propriedades allowProxy e categories.

  10. Navegue até /apps/[fontslibrary]/[customlibrary(clientlibrary)] e crie uma pasta css.

  11. Vá para a pasta CSS criada e crie um arquivo. Por exemplo, crie um arquivo como fonts.css e cole o código incorporado junto com a URL.
    Estrutura de pastas

  12. Salve as alterações.

NOTE
Para usar as fontes personalizadas adicionadas em um Formulário Adaptável, verifique se o nome da biblioteca do cliente na Categoria da Biblioteca do Cliente está alinhado com o nome especificado na opção de categorias da pasta clientlib.

As fontes incluídas agora podem ser acessadas no Formulário adaptável por meio da seguinte biblioteca de cliente de fontes personalizadas.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2