DocumentaçãoAEM as a Cloud ServiceGuia do usuário

Usar temas para estilizar os Componentes principais com base no Forms adaptável themes-for-af-using-core-components

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 6.5
Clique aqui
AEM as a Cloud Service
Este artigo

É possível criar e aplicar temas para estilizar 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.

Neste artigo, entendemos como projetar buscas personalizadas para Forms adaptável com base em Componentes principais usando temas.

Temas disponíveis para estilizar os Componentes principais

O Forms as Cloud Service fornece os temas listados abaixo para o Adaptive Forms baseado em Componentes principais:

Compreender a estrutura dos temas

Um tema é um pacote que inclui componentes de estilo, como arquivo CSS, arquivos JavaScript e recursos (como ícones) que definem o estilo do seu 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. [Quando usá-lo?]

  • 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/accordion/_accordion.scss contém informações de estilo para o componente Adaptive Forms Accordion.

    estrutura de tema baseada em formulário adaptável

  • 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 Forms as Cloud Service fornece, os temas de estilo do Formulário adaptável listados abaixo para os Componentes principais baseados no Adaptive Forms.

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

Fluxo de trabalho de personalização de tema

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

A personalização de um tema refere-se ao processo de modificação, estilo 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. Ele permite criar uma aparência exclusiva e personalizada para seu site ou aplicativo, mantendo a estrutura básica e a funcionalidade fornecidas pelo tema.

Pré-requisitos prerequisites-to-customize

  • Familiarize-se com a configuração de um pipeline no Cloud Manager e ter conhecimento básico sobre como configurar um pipeline ajuda a gerenciar e implantar com eficiência suas personalizações de tema.
  • Saiba como configurar um usuário com a função de colaborador. Entender como configurar um usuário com a função de colaborador permite que você conceda as permissões necessárias para personalização de temas.
  • 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.
  • 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.

Configurar o ambiente

Depois de aprender os pré-requisitos e configurar o ambiente de desenvolvimento, você estará bem preparado para começar a personalizar ou estilizar seu tema de acordo com seus requisitos específicos.

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

A personalização de um tema é um processo de várias etapas. Para personalizar o tema, execute as etapas na ordem listada:

  1. Clonar um tema
  2. Definir nome de um tema
  3. Personalizar um tema
  4. Testar um tema
  5. Implantar um tema

Os exemplos fornecidos no documento são baseados no tema Tela, mas é importante observar que 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.

Vamos começar com um processo para criar uma experiência com marca para seu Forms adaptável baseado em componentes principais usando temas?

1. Clonar um tema download-a-theme-core-components

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

Para clonar um tema, execute as seguintes instruções:

  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

    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. Definir nome de um tema set-name-of-theme

  1. Abra a pasta de temas no IDE. Por exemplo, para abrir a pasta aem-forms-theme-canvas no editor de código do Visual Studio.

  2. Navegue até a pasta aem-forms-theme-canvas.

  3. Execute o seguinte comando:

    code language-none 
       code .

    Abrir a pasta de temas em um editor de texto simples

    A pasta é aberta no Visual Studio Code.

  4. Abra o arquivo package.json para edição.

  5. Defina os valores para os atributos name e version.

    Imagem de alteração do nome do Tema da Tela

    note note
    NOTE
    • O atributo de nome é usado para identificar exclusivamente o tema, e o nome especificado é exibido na guia Estilo do Assistente de Criação de Formulário.
    • Você tem a opção de selecionar um nome para o tema de acordo com sua escolha, por exemplo, mytheme ou customtheme. No entanto, neste caso, especificamos o nome como aem-forms-wknd-theme.

  6. Abra o arquivo package-lock.json para edição.

  7. Defina os valores para os atributos name e version. Verifique se os valores dos atributos name e version no arquivo Package-lock.json correspondem àqueles no arquivo Package.json.

    Imagem de alteração do nome do Tema da Tela

  8. (Opcional) Abra o arquivo ReadMe para editar e atualizar o nome do tema.

    Imagem de alteração do nome do Tema da Tela

  9. Salve e feche os arquivos.

Considerações ao definir o nome do tema

  • É obrigatório remover o @aemforms do nome do tema no arquivo Package.json e no arquivo Package-lock.json. Caso você não consiga remover @aemforms do nome de tema personalizado, isso resultará na falha do pipeline de front-end durante a implantação do tema.
  • É recomendável atualizar o tema version no arquivo Package.json e no arquivo Package-lock.json para refletir com precisão as alterações e aprimoramentos ao longo do tempo para o seu tema.
  • Para obter informações importantes sobre o uso, instruções de instalação e outros detalhes relevantes, é recomendável atualizar o nome do tema no arquivo ReadMe.

3. Personalizar um tema customize-the-theme

Você pode personalizar componentes individuais ou fazer alterações no nível do tema usando variáveis globais de um tema. Quaisquer alterações feitas nas variáveis globais afetam todos os componentes individuais. Por exemplo, você pode usar variáveis Globais para alterar a cor da borda de todos os componentes de um Formulário adaptável e uma cor de preenchimento brilhante para definir CTA (Chamada para ação) usando o componente de botão:

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 é red. Para alterar a cor do erro de red para blue, altere o código hexadecimal da cor de $errorvariable. Por exemplo, $error: #196ee5.

  3. Salvar e fechar o arquivo.

    Editar tema

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 pode alterar a fonte, a cor, o tamanho e outras propriedades CSS de um componente principal do Formulário adaptável específico. Por exemplo, botão, caixa de seleção, container, rodapé e muito mais. Você pode estilizar um botão ou caixa de seleção editando o arquivo CSS do componente específico para alinhá-lo ao estilo de sua organização. Para personalizar o estilo de um componente:

  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 green, altere o valor da propriedade color: $white na classe cmp-adaptiveform-button__widget:hover para o código hexadecimal #12B453 ou qualquer outra sombra de green. 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.

    Editar CSS da Caixa de Texto

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

4. Testar um tema personalizado test-the-theme

Para visualizar e testar as alterações no ambiente local e personalizar o tema de acordo com os requisitos para diferentes componentes AEM, execute as seguintes etapas:

4.1. Configurar um ambiente local para testes rename-env-file-theme-folder

  1. Abra a pasta de temas no IDE. Por exemplo, abra a pasta aem-forms-theme-canvas no editor de código do Visual Studio.

  2. Renomeie o arquivo env_template para o arquivo .env na pasta de temas e adicione os seguintes parâmetros:

    code language-none 
    * **AEM url**
AEM_URL=https://[author-instance]

* **AEM Adaptive form name**
AEM_ADAPTIVE_FORM=Form_name

* **AEM proxy port**
AEM_PROXY_PORT=7000

    Por exemplo, a URL do formulário é http://localhost:4502/editor.html/content/forms/af/contactusform.html. Portanto, os valores de:

    • AEM_URL = http://localhost:4502/
    • AEM_ADAPTIVE_FORM = contactusform

  3. Salve o arquivo.

    Estrutura de Tema da Tela

4.2 Testar o tema usando um ambiente local start-a-local-proxy-server

  1. Navegue até a raiz da pasta de temas. Nesse caso, o nome da pasta de temas é aem-forms-theme-canvas.

  2. Abra o prompt de comando ou o terminal.

  3. Execute npm install para instalar as dependências.

  4. Execute npm run live para visualizar o formulário com o tema atualizado em seu navegador local.

    note note
    NOTE
    Se ocorrer um erro durante a execução do comando npm run live, execute os seguintes comandos antes do comando npm run live:
    • npm install parcel --save-dev
    • npm i @parcel/transformer-sass

Esta é uma implantação ativa. Assim, sempre que você fizer alterações e salvar os arquivos _variables.scss e button.scss, o servidor selecionará automaticamente as alterações e visualizará a saída mais recente. A linha [Browsersync] File event [change] significa que o servidor reconheceu as alterações mais recentes e está implantando as alterações no ambiente local.

Browsersync de proxy

Após seguir os exemplos de estilo de um Formulário adaptável (componentes principais) no nível do tema e no nível do componente para personalizações de tema, as mensagens de erro de um Formulário adaptável são alteradas para a cor blue, enquanto a cor do rótulo do componente de botão é alterada para green ao passar o mouse.

Visualizando estilo de nível de tema

Exemplo: Cor do erro definida para azul

Visualizando estilo de nível de componente

Exemplo: a cor de foco está definida como verde

A personalização de um tema ajuda a projetar as pesquisas personalizadas para o Forms adaptável baseado em Componentes principais de acordo com os requisitos organizacionais.

Testar o tema para formulários hospedados em um ambiente de Cloud Service

Você também pode testar o tema do Formulário adaptável hospedado na instância as a Cloud Service do AEM Forms. Para configurar e definir o ambiente local para o teste dos temas com o Forms adaptável hospedado na instância da nuvem, execute as seguintes etapas:

  1. Abra a pasta de temas no IDE. Por exemplo, abra a pasta aem-forms-theme-canvas no editor de código do Visual Studio.

  2. Renomeie o arquivo env_template para o arquivo .env e adicione os seguintes parâmetros:

    code language-none 
    * **AEM url**
AEM_URL=https://[author-instance]

* **AEM Adaptive form name**
AEM_ADAPTIVE_FORM=Form_name

* **AEM proxy port**
AEM_PROXY_PORT=7000

    Por exemplo, a URL do formulário no ambiente de nuvem é https://author-XXXX.adobeaemcloud.com/editor.html/content/forms/af/contactusform.html. Portanto, os valores de:

    • AEM_URL = https://author-XXXX-cmstg.adobeaemcloud.com/
    • AEM_ADAPTIVE_FORM = contactusform

  3. Salve o arquivo.

  4. Crie um usuário local.

    note note
    NOTE
    Para criar um usuário local:
    • Vá para a Página Inicial do AEM > Ferramentas > Segurança > Usuários.
    • Certifique-se de que o usuário é membro do grupo forms-users.

  5. Navegue até a raiz da pasta de temas. Nesse caso, o nome da pasta de temas é aem-forms-theme-canvas.

  6. Execute npm run live e você será redirecionado a um navegador local.

  7. Clique em SIGN IN LOCALLY (ADMIN TASKS ONLY) e faça logon usando as credenciais do usuário local.

Você pode visualizar o Formulário adaptável com as alterações mais recentes. Quando estiver satisfeito com as modificações feitas em uma pasta de tema, implante o tema no ambiente do AEM Cloud Service usando o pipeline de front-end.

5. Implantar um tema deploy-the-theme

Para implantar o tema no ambiente Cloud Service usando o pipeline de front-end:

5.1 Criar um repositório para o tema create-a-new-theme-repo

Você precisa de um repositório para implantar o tema. Faça logon no repositório do AEM Cloud Manager e adicione um novo repositório para o tema.

  1. Crie um novo repositório para um tema clicando em Repositórios > Adicionar repositório.

    criar novo repositório de temas

  2. Especifique o Nome do Repositório na caixa de diálogo Adicionar Repositório. Por exemplo, o nome fornecido é custom-canvas-theme-repo.

  3. Clique em Salvar.

    Adicionar tema da tela Repo

  4. Clique em Copiar URL do Repositório para copiar a URL do repositório.

    URL do tema da tela

    note note
    NOTE
    • Você pode usar um único repositório para vários temas.
    • Para implantar temas diferentes, é necessário criar pipelines de front-end separados.
    • Por exemplo, você pode usar o mesmo repositório, como custom-canvas-theme-repo, para o tema da Tela, o tema da WKND e o tema do EASEL. No entanto, para implantar os temas, é necessário criar pipelines de front-end separados. Personalizações futuras para um tema específico são implantadas usando o pipeline de front-end correspondente.
5.2. Enviar as alterações para o repositório committing-the-changes

Agora, envie as alterações para o repositório de temas do seu Cloud Service AEM Forms.

  1. Navegue até a raiz da pasta de temas. Nesse caso, o nome da pasta de temas é aem-forms-theme-canvas.

  2. Abra o prompt de comando ou o terminal.

  3. Execute o seguinte comando na ordem listada:

    code language-none 
    git remote add [alias-name-for-repository] [URL of repository]
git add .
git commit
git push [name-for-createdrepository]

    Por exemplo:

    code language-none 
    git remote add canvascloudthemerepo https://git.cloudmanager.adobe.com/stage-aemformsdev/customcanvastheme/
git add .
git commit
git push canvascloudthemerepo

    Alterações confirmadas

5.3 Executar o pipeline de front-end run-a-frontend-pipeline

O tema é implantado usando o pipeline de front-end .. Para implantar o tema, execute as seguintes etapas:

  1. Faça logon no repositório do AEM Cloud Manager.

  2. Clique no botão Adicionar da seção Pipelines.

  3. Selecione Adicionar pipeline de não produção ou Adicionar pipeline de produção com base no ambiente de Cloud Service. Por exemplo, aqui a opção Adicionar pipeline de produção está selecionada.

  4. Na caixa de diálogo Adicionar pipeline de produção como parte das etapas Configuração, especifique o nome do pipeline. Por exemplo, o nome do pipeline é customcanvastheme.

  5. Clique em Continuar.

  6. Selecione as opções Implantação direcionada > Código de front-end, em
    as etapas Código Source.

  7. Selecione os valores de Repositório e Ramificação Git que têm as alterações mais recentes. Por exemplo, aqui o nome do repositório selecionado é custom-canvas-theme-repo e a ramificação Git é main.

  8. Selecione o Local do Código como /, se suas alterações estiverem presentes na pasta raiz.

  9. Clique em Salvar.
    criar pipeline de front-end

    Após a conclusão da configuração do pipeline, o cartão de chamada para ação é atualizado.

  10. Clique com o botão direito do mouse no pipeline criado.

  11. Clique em Executar.

    executar-um-pipeline

Quando a criação for concluída, o tema ficará disponível na instância do autor para uso. Ele aparece na guia Style do assistente de criação do Formulário adaptável ao criar um Formulário adaptável.

tema personalizado disponível na guia de estilo

O tema personalizado ajuda a criar uma experiência com a marca para o Forms adaptável baseado nos Componentes principais.

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 do AEM Forms.

  2. Selecione Adobe Experience Manager > Forms > Forms e Documentos.

  3. Clique em Criar > Forms Adaptável. O assistente para criação do Formulário adaptável é aberto.

  4. Selecione o modelo do componente principal na guia Source.

  5. Selecione o tema na guia Style.

  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.

Práticas recomendadas best-practices

  • Evitando ativos de outro tema

    Ao editar um tema, você pode procurar e adicionar ativos (como imagens) de outros temas. Por exemplo, você está editando o fundo de uma página. Por exemplo, ao selecionar Página botão de edição > Plano de fundo > Adicionar > Imagem, você verá uma caixa de diálogo que permite navegar e adicionar imagens em outro tema.

    Você pode enfrentar problemas com seu tema atual se um ativo for adicionado de outro tema e o outro tema for movido ou excluído. É recomendável evitar a navegação e adicionar ativos de outros temas.

  • Alterando a largura do layout do painel de contêiner

    Não é recomendável alterar a largura do layout do painel de contêiner. Quando você especifica a largura de um painel de contêiner, ele se torna estático e não se adapta a exibições diferentes.

  • Usando um editor de formulário ou de tema para trabalhar com cabeçalho e rodapé

    Use um editor de tema se desejar estilizar o cabeçalho e o rodapé usando opções de estilo, como estilo da fonte, plano de fundo e transparência.
    Se você quiser fornecer informações como uma imagem de logotipo, o nome da empresa no cabeçalho e informações de direitos autorais no rodapé, use as opções do editor de formulários.

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 as personalizações são feitas no nível global e no nível do componente, a personalização no nível do componente tem prioridade.

Consulte também see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab