Temas no Adaptive Forms themes-for-af-using-core-components

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.

Temas disponíveis

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 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. [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 uma .scss arquivo que estiliza 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 listados abaixo para o Adaptive Forms baseado em Componentes principais.

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 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 configuração de um pipeline no Cloud Manager e ter conhecimento básico sobre como configurar um pipeline ajuda você 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 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.
  • 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 conhecer os pré-requisitos e configurar o ambiente de desenvolvimento, você estará bem preparado para começar a personalizar seu tema de acordo com suas necessidades específicas.

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:

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

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

    code language-none
       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:

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

2. Definir nome de um tema set-name-of-theme

  1. Abra a pasta de temas em um editor de texto simples. Por exemplo, para abrir a variável aem-forms-theme-canvas pasta no editor de código do Visual Studio.

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

  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 package.json arquivo para edição.

  5. Defina os valores para o name e description atributos.

    O atributo name é usado para identificar exclusivamente o tema, como "aem-forms-wknd-theme" e exibido no Estilo guia de Assistente de criação de formulário. O atributo de descrição fornece detalhes adicionais sobre o tema, incluindo a finalidade e os cenários para os quais ele foi projetado. Você também pode especificar a versão, a descrição e a licença do tema.

  6. Salvar e fechar o arquivo.

Imagem de alteração do nome do tema da tela de desenho

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

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

  3. Salvar e fechar o arquivo.

    Editar tema

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 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 criar um botão de estilo ou uma 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 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 green, altere o valor de color: $white propriedade na cmp-adaptiveform-button__widget:hover classe para código hexadecimal #12B453 ou qualquer outro tom 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 o ambiente local para testes rename-env-file-theme-folder
  1. Abra a pasta de temas em um editor de texto simples. Por exemplo, abra aem-forms-theme-canvas pasta no editor de código do Visual Studio.

  2. Renomeie o env_template arquivo para .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 do tema da tela de desenho

4.2 Testar o tema usando o ambiente local start-a-local-proxy-server
  1. Navegue até a raiz da pasta de temas. Nesse caso, o nome da pasta do tema é aem-forms-theme-canvas.

  2. Abra o prompt de comando ou o terminal.

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

  4. Executar npm run live para visualizar o formulário com o tema atualizado no navegador local.

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

Esta é uma implantação ativa. Assim, sempre que fizer alterações e salvar a variável _variables.scss e button.scss automaticamente as alterações e visualiza 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 fornecidos 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 variável blue cor, enquanto a cor do rótulo para o componente de botão muda para green ao passar o cursor.

Visualização do estilo do nível do tema

Exemplo: Cor de erro definida como azul

Visualização do estilo de nível do componente

Exemplo: a cor de foco está definida como verde

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 em sua instância do AEM Forms as a Cloud Service. 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 em um editor de texto simples. Por exemplo, abra aem-forms-theme-canvas pasta no editor de código do Visual Studio.

  2. Renomeie o env_template arquivo para .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:
    • Ir para Página inicial do AEM > Ferramentas > Segurança > Usuários .
    • Certifique-se de que o usuário é membro do forms-users grupo.
  5. Navegue até a raiz da pasta de temas. Nesse caso, o nome da pasta do tema é aem-forms-theme-canvas.

  6. Executar npm run live e você for 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 adicionar novo repositório para o tema.

  1. Crie um novo repositório para o tema clicando no link Repositórios > Adicionar repositório.

    criar novo repositório de tema

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

  3. Clique em Salvar.

    Adicionar tema da tela de desenho ao repositório

  4. Clique em Copiar URL de repositório para copiar o 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 tema do Canvas, tema WKND e tema 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 do tema é 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 em Adicionar botão no Pipelines seção.

  3. Selecionar Adicionar pipeline de não produção ou Adicionar pipeline de produção com base no ambiente Cloud Service. Por exemplo, aqui a variável Adicionar pipeline de produção for selecionada.

  4. No Adicionar pipeline de produção como parte da Configuração etapas, especifique o nome do seu pipeline. Por exemplo, o nome do pipeline é customcanvastheme.

  5. Clique em Continuar.

  6. Selecione o Implantação direcionada > o Código de front-end opções, na caixa Código-fonte etapas.

  7. Selecione o Repositório e a variável Ramificação Git que têm suas 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 Localização do código as /, se as 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 .

    run-a-pipeline

Quando a criação for concluída, o tema ficará disponível na instância do autor para uso. Aparece sob o título Estilo no assistente de criação do Formulário adaptável, ao criar um Formulário adaptável.

tema personalizado disponível na guia estilo

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. Selecionar 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 Origem guia.

  5. Selecione o tema no campo Estilo guia.

  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

  • Como evitar 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 editar > Histórico > 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.

  • Alteração da 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.

  • Usar o editor de formulários ou de temas para trabalhar com cabeçalho e rodapé

    Use o editor de temas 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