Show Menu
TÓPICOS×

Estilo do formulário adaptável

Saiba como criar um tema personalizado, criar um estilo para componentes individuais e usar fontes da Web em um tema
Este tutorial é uma etapa da série Criar seu primeiro formulário adaptável. É recomendável seguir a série em sequência cronológica para entender, executar e demonstrar o caso de uso do tutorial completo.

Sobre o 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 uma aparência diferente ao mesmo formulário adaptável aberto em dispositivos móveis, tablets ou desktop. Nenhum conhecimento anterior de CSS ou LESS é necessário para usar o editor de temas, mas é desejado.
Ao final do tutorial, você aprenderá a:
  • Aplicar um tema predefinido a um formulário adaptável
  • Criar um tema para formulário adaptável usando o editor de temas
  • Estilo de componentes individuais
  • Seção de bônus: Usar fontes da Web em um tema personalizado
O formulário será semelhante ao seguinte depois que você concluir o tutorial:

Antes de você iniciar

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

Etapa 1: Aplicar um tema ao formulário adaptável

O editor de formulários adaptativos 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 das 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.
  2. Abra as propriedades do container ​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 predefinidos 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 de Pesquisa. Toque em para aplicar o tema selecionado.
Figura: Formulário adaptável com o tema padrão
Figura: Formulário adaptável com o tema Pesquisa

Etapa 2: Atualizar o formulário adaptável

O design exibido acima requer alterações no texto do espaço reservado e no logotipo do formulário adaptativo existente. Execute as seguintes etapas para fazer as alterações necessárias:
  1. Altere o logotipo e o texto do cabeçalho existentes. Para remover o logotipo:
    1. Abra o formulário no editor de formulários.
    2. Toque na imagem do logotipo no componente do cabeçalho e toque em . Na propriedade image, toque em X para remover a imagem do logotipo existente.
    3. Toque em carregar, selecione o logo.png e toque em para salvar as alterações. A imagem foi baixada na seção Antes do start .
    4. Toque no texto do cabeçalho We.Retail e toque em edit . Altere o texto do cabeçalho para we retail . Aplique a formatação em negrito somente we em we retail .
  2. Remova o título e adicione texto de espaço reservado:
    1. Toque no campo ID do cliente e toque em .
    2. Copie o conteúdo do campo Título para o campo Texto de espaço reservado.
    3. Exclua o conteúdo do campo Título e toque em .
    4. Repita as três etapas anteriores para todas as caixas de texto, caixa numérica e campo de email no formulário.

Etapa 3: Criar um tema personalizado para o formulário adaptável

Você pode usar o 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 finos para estilizar componentes e painéis de um formulário adaptável.
Um tema é uma entidade separada, como formas adaptativas. 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 plano de fundo, cores de estado, transparência, alinhamento e tamanho. Quando um tema é aplicado, 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 de anexo e os botões. Vamos start na criação de um tema:

Criar um tema

  1. Faça logon na instância do autor do AEM e navegue até Adobe Experience Manager > Formulários > Temas . O URL padrão é http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes .
  2. Toque em 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 a partir 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ê digita 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, hífens e sublinhados. Todas as entradas inválidas são substituídas por um hífen.
  3. Toque em Criar . Um tema é criado e uma caixa de diálogo para abrir o formulário para edição é exibida. Toque em Abrir para abrir o tema recém-criado em uma nova guia. O tema abre no editor de temas. Para estilizar, o editor de temas usa um formulário adaptativo pronto para uso fornecido com o AEM Forms.
    Para obter informações sobre como usar a interface do editor de temas, consulte Sobre o editor de temas.
  4. Toque em Opções de tema Opções tema > Configurar. No campo Formulário de Pré-visualização, selecione o formulário adaptável Shipping-address-add-update-form , toque em e em Salvar . Agora, o editor de temas está configurado para usar seu próprio formulário adaptativo em vez do formulário adaptativo padrão. Toque em Cancelar para retornar ao editor de temas.
    Figura: Editor de temas com o formulário adaptável de entrega-address-add-update-form
    Figura: Formulário adaptável com o formulário padrão

Estilo do componente de captura de dados e aplicar um plano de fundo ao formulário adaptável

É 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 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, e-mail). Para estilizar os componentes de captura de dados:
  1. Toque no campo ID do cliente e toque na opção Widget de campo. Defina as seguintes propriedades e toque em .
Menu sanfonado 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
Dimensões e posição Largura 60%
Dimensões e posição Imagem
  • Esquerda: 10rem
  1. Toque na área vazia acima do campo ID do cliente e toque em Container do painel responsivo. Defina Background > Background Color como F1F2F2. Toque em .

Estilo dos botões

Você pode usar um tema personalizado para aplicar um estilo idêntico a todos os botões do formulário adaptável e do estilo incorporado para aplicar um estilo a um botão específico. Para aplicar estilo aos botões:
  1. Toque no botão Enviar e toque na opção Botão . Defina as seguintes propriedades e toque em .
Menu sanfonado 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. Aplique o tema personalizado, Tema global, ao formulário adaptável. Se o estilo não refletir no formulário adaptável, limpe o cache do navegador e tente novamente.

Etapa 4: Estilo de componentes individuais

Alguns estilos se aplicam somente a um componente específico. Esses componentes são estilizados no editor de formulários adaptáveis.
  1. Na barra superior, selecione a opção Estilo .
  2. Toque no botão Anexar e toque em editicon. Defina as seguintes propriedades na opção Dimensões e Posição :
    Propriedade
    Valor
    Flutuar
    À esquerda
    Largura
    10%
  3. Toque na opção prova de endereço aprovada pelo Governo e toque em editicon. Defina as seguintes propriedades:
Menu sanfonado Propriedade Valor
Dimensões e Posição Flutuar À esquerda
Dimensões e Posição Largura 73%
Dimensões e Posição Preenchimento
  • Esquerda: 10 px
Dimensões e Posição Altura 40px
Dimensões e Posição Imagem
  • 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 botão Enviar e toque no ícone . Defina as seguintes propriedades:
Menu sanfonado Propriedade Valor
Dimensões e posição Flutuar Direito
Dimensões e posição Imagem
  • Parte superior: 5rem
  • Direita: 14rem
  • Parte inferior: 20 px
  • Esquerda: 20 px
Segundo plano Cor do Plano de Fundo F6921E
Borda Cor da Borda F6921E

Etapa 5: Seção de bônus: Usar fontes da Web em um tema personalizado

É possível usar várias fontes para criar um formulário adaptável. Nem todos os dispositivos nos quais o formulário adaptativo é exibido podem ter as fontes usadas para projetar o formulário adaptável. Você pode usar um serviço de fontes da Web para fornecer as fontes necessárias ao dispositivo de público alvo.
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:
Typekit agora é chamado Adobe Fonts e está incluído na Creative Cloud e outras subscrições. Saiba mais .
  1. Crie uma conta do Adobe Typekit , crie um kit, adicione fontes Myriad Pro ao kit, publique o kit e obtenha a ID do Kit. É necessário usar fontes do Adobe Typekit (fontes da Web) em um formulário adaptável.
  2. No servidor AEM Forms, navegue até Manager > Ferramentas ​martelo Implantação > Serviços daCloud. Na página Serviços em nuvem, 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 que é exibida, forneça a ID do Kit 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 Opções de > Configurar. No campo Configuração do Typekit, selecione o kit e clique em Salvar .
    As fontes adicionadas ao Typekit estão disponíveis para seleção na tabela Texto de todos os componentes.