DocumentaçãoAEM 6.5Guia do usuário

Criar ou personalizar um tema de formulário adaptável introduction-to-theme

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

Criado para:

  • undefined
  • undefined
Versão
Link do artigo
AEM as a Cloud Service
Clique aqui
AEM 6.5
Este artigo

No AEM Forms 6.5, um tema é uma biblioteca cliente AEM usada para definir os estilos (aparência e comportamento) de um Formulário adaptável. Um tema contém detalhes de estilo para os componentes e painéis. Os estilos incluem propriedades como cores de fundo, cores de estado, transparência, alinhamento e tamanho. Ao aplicar um tema, o estilo especificado é refletido nos componentes correspondentes. Um tema é gerenciado de forma independente sem uma referência a um Formulário adaptável e pode ser reutilizado em vários Forms adaptáveis.

Temas disponíveis available-theme

O ambiente AEM 6.5 fornece os temas listados abaixo para o Forms adaptável baseado em Componentes principais:

Compreender a estrutura dos temas understanding-structure-of-theme

Um tema é um pacote que abrange o arquivo CSS, os arquivos JavaScript e os recursos (como ícones) que definem o estilo do Forms adaptável. Um tema do Formulário adaptável segue uma organização específica, consistindo nos seguintes componentes:

  • src/theme.scss: esta pasta inclui o arquivo CSS que tem um amplo impacto sobre todo o tema. Ele serve como um local centralizado para definir e gerenciar o estilo e o comportamento do tema. Ao fazer edições nesse arquivo, você pode fazer alterações aplicadas universalmente no tema, influenciando a aparência e a funcionalidade das Páginas adaptáveis do Forms e do AEM Sites.

  • src/site: esta pasta contém arquivos CSS que são aplicados à página inteira de um Site AEM. Esses arquivos consistem em códigos e estilos que afetam a funcionalidade geral e o layout da página do seu site AEM. Quaisquer modificações feitas aqui serão refletidas em todas as páginas do site.

  • src/components: os arquivos CSS nesta pasta são projetados para componentes principais individuais do AEM. Cada pasta dedicada de um componente inclui um arquivo .scss que estimula esse componente específico em um Formulário adaptável. Por exemplo, o arquivo /src/components/button/_button.scss contém informações de estilo para o componente Adaptive Forms Button.

    Estrutura de Tema da Tela

  • src/resources: esta pasta contém arquivos estáticos, como ícones, logotipos e fontes. Esses recursos são usados para aprimorar os elementos visuais e o design geral do tema.

Criar um tema

O AEM Forms 6.5 fornece os temas listados abaixo para o Adaptive Forms baseado em Componentes principais.

Você pode personalizar qualquer um desses temas para criar um tema.

Personalizar um tema customize-a-theme-core-components-based-adaptive-forms

A personalização de um tema refere-se ao processo de modificação e personalização da aparência de um tema. Ao personalizar um tema, você altera seus elementos de design, layout, cores, tipografia e, às vezes, o código subjacente. Isso permite criar uma aparência exclusiva e personalizada para seu site ou aplicativo, mantendo a estrutura básica e a funcionalidade fornecidas pelo tema.

NOTE
  • Use o Gerenciador de pacotes para implantar um tema em todas as instâncias do Autor e do Publish.
  • Uma biblioteca de temas de cliente é importada ou exportada pelo Gerenciador de pacotes como qualquer outro pacote.

Pré-requisitos para personalizar um tema prerequisites

  • Habilite os Componentes principais adaptáveis do Forms para o seu ambiente.

  • Instale a última versão do Apache Maven. O Apache Maven é uma ferramenta de automação de compilação comumente usada para projetos Java™. A instalação da versão mais recente garante que você tenha as dependências necessárias para a personalização de temas.

  • Saiba como criar uma biblioteca do cliente no Adobe Experience Manager. O AEM fornece bibliotecas de clientes, que permitem armazenar o código do lado do cliente no repositório, organizá-lo em categorias e definir quando e como cada categoria de código deve ser entregue ao cliente.

  • Instale um editor de texto simples. Por exemplo, Microsoft® Visual Studio Code. O uso de um editor de texto simples, como o Microsoft® Visual Studio Code, fornece um ambiente amigável para a edição e modificação de arquivos de tema.

  • Certifique-se de que o ambiente do AEM Forms esteja em funcionamento.

Considerações para personalizar um tema consideration

  • Use o projeto do Arquétipo usado para habilitar os Componentes principais do Adaptive Forms no seu ambiente para personalizar seus temas.

  • Ao publicar um Formulário adaptável, as bibliotecas de clientes não são publicadas automaticamente na instância do Publish. Certifique-se de publicar manualmente a biblioteca do cliente referenciada em um Formulário adaptável em seus ambientes do Publish.

  • O Adobe recomenda não alterar os nomes de classe das bibliotecas de clientes.

Personalizar um tema customize-a-theme-core-components

A criação ou personalização de um tema é um processo de várias etapas. Execute as etapas na ordem listada para criar/personalizar o tema:

  1. Clonar um tema
  2. Personalizar a aparência do tema
  3. Pronto o tema para implantação local
  4. Implantar o tema em um ambiente local
  5. Implantar o tema no ambiente de produção

Os exemplos fornecidos no documento são baseados no tema Tela, mas você pode clonar qualquer tema e personalizá-lo usando as mesmas instruções. Essas instruções se aplicam a qualquer tema, permitindo modificar temas de acordo com suas necessidades específicas.

1. Clonar o repositório Git do tema clone-git-repo-of-theme

Para clonar um tema para os Componentes principais com base no Adaptive Forms, escolha um dos seguintes temas:

Execute as seguintes instruções para clonar um tema:

  1. Abra o prompt de comando ou a janela do terminal no ambiente de desenvolvimento local.

  2. Execute o comando git clone para clonar um tema.

    code language-none 
       git clone [Path of Git Repository of the theme]

    Substituir o [Caminho do Repositório Git do tema] pela URL real do Repositório Git correspondente do tema

    Por exemplo, para clonar o tema da Tela de Pintura, execute o seguinte comando:

    code language-none 
       git clone https://github.com/adobe/aem-forms-theme-canvas

  3. Selecione Confiar nos autores de todos os arquivos da pasta pai e clique em Sim, eu confio nos autores.

Depois de executar o comando com êxito, você terá uma cópia local do tema disponível em sua máquina na pasta aem-forms-theme-canvas.

2. Personalizar o tema customize-the-theme

Você tem a flexibilidade de personalizar componentes individuais ou fazer alterações no nível do tema usando as variáveis globais de um tema. A modificação de variáveis globais tem um efeito em cascata em todos os componentes individuais. Por exemplo, você pode utilizar variáveis globais para alterar a cor da borda de todos os componentes em um Formulário adaptável ou aplicar uma cor de preenchimento vibrante aos botões de Chamada para ação (CTA). É possível:

Definir estilos de nível de tema theme-customization-global-level

O arquivo variable.scss contém as variáveis globais do tema. Ao atualizar essas variáveis, é possível fazer alterações relacionadas ao estilo no nível do tema. Para aplicar estilos de nível de tema, siga estas etapas:

  1. Abra o arquivo <your-theme-sources>/src/site/_variables.scss para edição.

  2. Altere o valor de qualquer propriedade. Por exemplo, a cor de erro padrão é vermelha. Para alterar a cor do erro de vermelho para azul, altere o código hexadecimal de cor da variável $error. Por exemplo, $error: #196ee5.

    Exemplo: Cor do erro definida para azul

  3. Salvar e fechar o arquivo.

Da mesma forma, você pode usar o arquivo variable.scss para definir a família e o tipo de fonte, as cores do tema e da fonte, o tamanho da fonte, o espaçamento do tema, o ícone de erro, os estilos de borda do tema e mais variáveis que afetam vários componentes do Formulário adaptável.

Definir estilos de nível de componente component-based-customization

Você também tem a opção de personalizar a fonte, a cor, o tamanho e outras propriedades CSS de componentes principais específicos do Formulário adaptável, como botões, caixas de seleção, contêineres, rodapés e muito mais. Ao editar o arquivo CSS associado ao componente específico, é possível alinhar o estilo com a marca da organização. Para personalizar o estilo de um componente, siga estas etapas:

  1. Abra o arquivo <your-theme-sources>/src/components/<component>/<component.scss> para edição. Por exemplo, para alterar a cor da fonte do componente de botão, abra o arquivo <your-theme-sources>/src/components/button/button.scss.

  2. Altere o valor de qualquer de acordo com suas necessidades. Por exemplo, para alterar a cor do componente de botão ao passar o mouse para Verde, altere o valor da propriedade color: $white na classe cmp-adaptiveform-button__widget:hover para o código hexadecimal #12b453 ou qualquer outro tom de verde. O código final é semelhante ao seguinte:

    code language-none 
     .cmp-adaptiveform-button__widget:hover {
 background: $dark-gray;
 color: #12b453;
 }

  3. Salvar e fechar o arquivo.

NOTE
Quando um estilo é definido no nível do tema e do componente, o estilo definido no nível do componente tem prioridade.

3. Prepare o tema para implantação generate-the-clientlib

Para implantar um tema em uma instância do AEM, ele precisa ser convertido em uma Biblioteca do cliente. Siga estas etapas para converter o tema em uma biblioteca do cliente:

  1. Abra o prompt de comando ou a janela do terminal.

  2. Navegue até a pasta <your-theme-sources>. Por exemplo, C:\aem-forms-theme-canvas

  3. Execute o seguinte comando:

    code language-none 
       npm run create-clientlib --category=adaptiveform.theme.[yourtheme]

    Substitua [yourtheme] pelo nome do seu tema personalizado. Por exemplo, se o nome do tema personalizado for customcanvastheme, execute o seguinte comando

    code language-none 
        npm run create-clientlib --category=adaptiveform.theme.customcanvastheme

    Na execução bem-sucedida do comando, uma pasta da biblioteca do cliente é criada em themerepo\theme-clientlibs\[yourtheme].

    Geração de Biblioteca de Cliente

    Local da Biblioteca do Cliente

4. Implantar o tema em um ambiente local deploy-the-theme-on-a-local-environment

Para implantar o tema no ambiente de desenvolvimento ou teste local, siga estas etapas:

  1. Copie a Biblioteca do cliente, criada na seção anterior, para o projeto do Arquétipo, no seguinte caminho:

    /ui.apps/src/main/content/jcr_root/apps/[AEM Archetype Project Folder]/clientlibs/<yourtheme>

  2. Abra o prompt de comando ou o terminal.

  3. Navegue até o diretório raiz do seu projeto do Arquétipo AEM, o projeto usado para ativar os Componentes principais do formulário adaptável.

  4. Execute o seguinte comando para implantar o tema personalizado no ambiente:

    mvn clean install

    Compilação da Biblioteca de Clientes

5. Implantar um tema no ambiente de produção deploy-theme

Depois de testar com êxito o tema no ambiente de desenvolvimento local, você pode prosseguir para implantar o tema nos ambientes de produção, incluindo as instâncias do Autor e do Publish. Siga estas etapas para implantar o tema em seus ambientes de produção:

  1. Faça logon no ambiente AEM.
  2. Abra o Gerenciador de pacotes. A URL padrão é https://localhost:4502/crx/packmgr/index.jsp.
  3. Clique em Carregar Pacote e em Procurar.
  4. Navegue até [AEM Archetype Project Folder]\all\target[appid].all-[version].zip e selecione-o. Clique em Abrir.
  5. Clique em Instalar. Repita a etapa em todos os ambientes de produção.

Após a instalação do pacote, o tema fica disponível para seleção.

Biblioteca de Temas do Cliente

NOTE
Caso encontre dificuldades ao acessar a caixa de diálogo de logon em uma instância de publicação para instalar o pacote por meio do Gerenciador de Pacotes, tente fazer logon pela seguinte URL: http://[Publish Server URL]:[PORT]/system/console. Isso permite o acesso para fazer logon na instância do Publish, permitindo continuar com o processo de instalação.

Aplicar um tema a um formulário adaptável using-theme-in-adaptive-form

As etapas para aplicar um tema a um Formulário adaptável são:

  1. Faça logon na instância de autor local do AEM.

  2. Insira suas credenciais na página de logon do Experience Manager. Selecione Adobe Experience Manager > Forms > Forms e Documentos.

  3. Clique em Criar > Forms Adaptável.

  4. Selecione um modelo dos Componentes principais adaptáveis do Forms e clique em Avançar. A Adicionar propriedades aparece

  5. Especifique o Nome do formulário adaptável.

    note note
    NOTE
    • Por padrão, o tema adaptiveform.theme.canvas3 é selecionado.
    • Você pode escolher um tema diferente do menu suspenso Biblioteca de Temas do Cliente.

  6. Clique em Criar.

Os temas do formulário adaptável são usados como parte de um modelo de formulário adaptável para definir o estilo ao criar um formulário adaptável.

Excluir um tema delete-a-theme

Para remover temas não utilizados ou indesejados:

  1. Faça logon na instância do Author.
  2. Abrir http://[Publish Server URL]:[PORT]/crx/de/index.jsp
  3. Vá até apps/[AEM Archetype Project Folder]/clientlibs/[yourtheme].
  4. Exclua a pasta de tema e salve as alterações.

Perguntas frequentes faq

P: Qual personalização tem prioridade ao fazer personalizações em uma pasta de tema no nível global e no nível do componente?

Ans: Quando um estilo é definido nos níveis de tema e componente, o estilo definido no nível do componente tem prioridade.

P: Que etapas devem ser executadas se o tema personalizado não estiver visível na Biblioteca de Temas do Cliente?

Ans: Se o tema personalizado não aparecer no menu suspenso Biblioteca de Temas do Cliente, siga estas etapas:

  1. Navegue até o local onde você adicionou a biblioteca de temas personalizados do cliente. O caminho recomendado é /ui.apps/src/main/content/jcr_root/apps[AEM Archetype Project Folder]/clientlibs/<yourtheme>.

  2. Abra o arquivo .content.xml e inclua os seguintes metadados:

    code language-none 
        formstheme:true
    allowproxy:true

  3. Salve o arquivo e implante novamente o tema.

Consulte também:

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