Criar ou personalizar um tema de formulário adaptável

Última atualização em 2024-01-09
  • Criado para:
  • Admin
    Developer
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

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

Compreender a estrutura dos temas

Um tema é um pacote que abrange o arquivo CSS, arquivos JavaScript e 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: essa 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 uma .scss arquivo que estiliza esse componente específico em um Formulário adaptável. Por exemplo, a variável /src/components/button/_button.scss O arquivo contém informações de estilo para o componente Adaptive Forms Button.

    Estrutura do tema da tela de desenho

  • 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

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.

OBSERVAÇÃO
  • Use o Gerenciador de pacotes para implantar um tema em todas as instâncias de Autor e Publicação.
  • Uma biblioteca de temas de cliente é importada ou exportada pelo Gerenciador de pacotes como qualquer outro pacote.

Pré-requisitos para personalizar um tema

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

  • Instale a versão mais recente do Apache Maven. O Apache Maven é uma ferramenta de automação de build 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 um 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

  • Certifique-se de usar o projeto do Arquétipo usado para ativar os Componentes principais do Adaptive Forms no ambiente para personalizar temas.

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

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

Personalizar um tema

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. Preparar 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 Tela tema, mas é possível 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

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 git clone comando para clonar um tema.

       git clone [Path of Git Repository of the theme]
    

    Substitua o [Caminho do repositório Git do tema] com o URL real do Repositório Git correspondente do tema

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

       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 aem-forms-theme-canvas pasta.

2. Personalizar o tema

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

A variável variable.scss arquivo 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 <your-theme-sources>/src/site/_variables.scss arquivo 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 do $errorvariável. Por exemplo, $error: #196ee5.

    Exemplo: Cor de erro definida como azul

  3. Salvar e fechar o arquivo.

Da mesma forma, você pode usar o variable.scss arquivo 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 as variáveis que afetam vários componentes do Formulário adaptável.

Definir estilos de nível de componente

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 a variável <your-theme-sources>/src/components/button/button.scss, arquivo .

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

     .cmp-adaptiveform-button__widget:hover {
     background: $dark-gray;
     color: #12b453;
     }
    
  3. Salvar e fechar o arquivo.

OBSERVAÇÃO

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

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 <your-theme-sources> pasta. Por exemplo, C:\aem-forms-theme-canvas

  3. Execute o seguinte comando:

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

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

        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 do cliente

    Localização da biblioteca do cliente

4. Implantar o tema em um ambiente local

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

    Build da biblioteca cliente

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

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 Autor e Publicar. 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. O URL padrão é https://localhost:4502/crx/packmgr/index.jsp.
  3. Clique em Fazer upload do pacote e clique em Procurar.
  4. Navegue até e selecione [AEM Archetype Project Folder]\all\target[appid].all-[version].zip. Clique em Abertura.
  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

OBSERVAÇÃO

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 por meio do seguinte URL: http://[Publish Server URL]:[PORT]/system/console. Isso permite o acesso para fazer logon na instância de publicação, permitindo que você continue com o processo de instalação.

Aplicar um tema a um formulário adaptável

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. Selecionar 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 Próxima. A variável Adicionar propriedades aparece

  5. Especifique a Nome para o seu Formulário adaptável.

    OBSERVAÇÃO
    • Por padrão, a variável adaptiveform.theme.canvas3 o tema está selecionado.
    • Você pode escolher um tema diferente do Biblioteca de temas do cliente menu suspenso.
  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

Para remover temas não utilizados ou indesejados:

  1. Faça logon na instância do Author.
  2. Abertura 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

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 no Biblioteca de temas do cliente?

Ans: Se o tema personalizado não aparecer na janela 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 .content.xml e incluir os seguintes metadados:

        formstheme:true
        allowproxy:true
    
  3. Salve o arquivo e implante novamente o tema.

Consulte também:

Nesta página