Criação e uso de temas

O Adobe recomenda o uso da captura de dados moderna e extensível Componentes principais para criação de um novo Forms adaptável ou adição de Forms adaptável às páginas do AEM Sites. Esses componentes representam um avanço significativo na criação do Forms adaptável, garantindo experiências de usuário impressionantes. Este artigo descreve a abordagem mais antiga para criar o Forms adaptável usando componentes de base.

É 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. O tema é gerenciado de forma independente sem uma referência a um Formulário adaptável.

Você pode baixar e instalar o AEM Forms pacote de conteúdo de referência de Distribuição de software portal para importar temas de referência e modelos para o seu ambiente.

Criar, baixar ou fazer upload de um tema

Um tema é criado e salvo como uma entidade separada, completa com metapropriedades como o Adaptive Forms. Ela permite reutilizar um tema em vários Forms adaptáveis. Você também pode mover um tema para uma instância diferente e reutilizá-lo.

Criação de um tema

Para criar um tema:

1. Clique em Adobe Experience Manager, clique em Forms e clique em Temas.

2. Na página Temas, clique em Criar > Tema.
   Um assistente para criar um tema é iniciado.

3. Especificar Nome do tema.

4. Especifique um formulário para visualizar o tema no Visualização padrão deste tema campo. Clique em Usar padrão para usar o formulário padrão para visualizar o tema.

5. Especificar um Contêiner de configuração. Você pode escolher um Contêiner de configuração que contém os detalhes de configuração do Adobe Font para sua conta. Você também pode deixar a opção em branco por enquanto e especificar os detalhes posteriormente em propriedades do tema.

6. Clique em Criar e clique em Editar para abrir o tema no Editor de temas, ou clique em Concluído para retornar à página temas.

Diferença de temas no Experience Manager 6.5 Forms e versões anteriores

Temas criados em uma instância Cloud Service:

• Ter a versão 2.

• São armazenados em /content/dam/formsanddocuments-themes/<theme-name>/

• Não forneça a opção de biblioteca do cliente. Não é possível especificar uma categoria e um caminho para a biblioteca do cliente.

• Não tem permissões de gravação e atualização no local /apps (o grupo Forms-usuário não tem permissão de gravação e atualização no local /apps).

• Antes de carregar um tema criado em Experience Manager Forms 6.5 ou versões anteriores para uma instância do Cloud Service, verifique se o local da biblioteca do cliente está definido como etc/clientlibs/fd/themes. Se a biblioteca do cliente não existir no etc pasta, atualize manualmente o local para etc/clientlibs/fd/themes. Você pode fazer a alteração em seu Experience Manager Forms Instância do 6.5 ou das versões anteriores. Depois de definir a localização da biblioteca do cliente, um administrador pode fazer upload de temas para a instância do Cloud Service ou usar a ferramenta Transferência de conteúdo para migrar os temas das instâncias da versão 6.5 ou anterior para a instância do Cloud Service.

  Altere também o nome da categoria. Se o nome não for alterado, um erro theme with same category name exists pode ocorrer. Quando você altera o nome da categoria, ele não afeta o Forms adaptável que usa o tema.

Download de um tema

Você pode exportar temas como um arquivo zip e usá-los em outros projetos ou instâncias Experience Manager. Para baixar um tema:

1. Clique em Adobe Experience Manager, clique em Forms e clique em Temas.

2. Na página Temas, Selecionar um tema e clique em Baixar. Uma caixa de diálogo com os detalhes do tema é exibida.

3. Clique em Baixar. O tema é baixado como um arquivo zip.

Carregamento de um tema

Um usuário com privilégios de administrador pode fazer upload de um tema criado no Experience Manager Forms 6.5 ou versões anteriores.

Para fazer upload de um tema:

1. Clique em Adobe Experience Manager, clique em Forms e clique em Temas.

2. Na página Temas, clique em Criar > Upload de arquivo.

3. No prompt File Upload (Upload de arquivo), procure e selecione um pacote de temas no computador e clique em Carregar.
   O tema carregado está disponível na página de temas.

Metadados de um tema

Lista de metapropriedades de um tema (encontrada na página de propriedades de um tema).

Sobre o Editor de temas

O Editor de temas é uma interface amigável para usuários empresariais e designers da Web/desenvolvedores que fornece as funcionalidades necessárias para especificar o estilo de vários formulários adaptáveis elementos facilmente. Quando você cria um tema, ele é armazenado como uma entidade separada, como formulários .

O Editor de temas permite personalizar estilos dos componentes estilizados em um tema. É possível personalizar como um formulário procura em um dispositivo.

O Editor de temas é dividido em dois painéis:

• Tela - Aparece no lado direito. Ele mostra um exemplo de Formulário adaptável no qual todas as alterações de estilo refletem instantaneamente. Você também pode selecionar objetos diretamente da tela para pesquisar estilos associados a eles e editar esses estilos. Uma régua de resolução de dispositivo na parte superior controla a Tela de Pintura. Selecionar um ponto de interrupção de resolução na régua mostra a visualização do formulário de amostra para a respectiva resolução. A tela de desenho é discutida em detalhes abaixo.

• Barra lateral- Aparece no lado esquerdo. Ele tem os seguintes itens:

  • Seletor: Mostra o componente selecionado para estilo e suas propriedades que podem ser estilizadas. O seletor representa todos os componentes de um tipo. Se você selecionar um componente Caixa de texto em um tema para estilo, todas as caixas de texto no formulário herdar o estilo. Os seletores permitem selecionar um componente genérico ou um componente específico para o estilo. Por exemplo, um componente de campo é um componente genérico e uma caixa de texto é um componente específico.

    Componente genérico de estilo:
    Um campo pode ser um campo de caixa numérica, como idade, ou um campo de caixa de texto, como endereço.
    Ao estilizar um campo, todos os campos, como idade, nome, endereço, são estilizados.

    Componente específico do estilo: um componente específico afeta objetos da categoria específica. Ao estilizar o componente caixa numérica no tema, somente o objeto caixa numérica em herdará o estilo.

    Por exemplo, um campo de caixa de texto como endereço, que é maior, e um campo de caixa numérica como idade, que é menor. Você pode selecionar um campo de caixa numérica, reduzir seu comprimento e aplicar ao formulário. A largura de todos os campos de caixa numérica é reduzida no formulário.

    Quando você personaliza todos os componentes do campo com uma cor de plano de fundo específica, todos os campos, como idade, nome e endereço, herdam a cor do plano de fundo. Quando você seleciona uma caixa numérica, como idade, e reduz sua largura, a largura de todas as caixas numéricas, como idade, número de pessoas em uma família é reduzida. A largura das caixas de texto não é alterada.

  • Estado: Permite personalizar estilos de um objeto em um estado específico. Por exemplo, você pode especificar a aparência de um objeto quando ele estiver em estado padrão, de foco, desativado, ao passar o mouse ou erro.

  • Categorias de propriedade: As propriedades de estilo são divididas em várias categorias. Por exemplo, Dimension e Posição, Texto, Plano de fundo, Borda e Efeitos. Em cada categoria, você fornece informações de estilo. Por exemplo, em Plano de fundo, você pode fornecer Cor do plano de fundo e Imagem e gradiente.

  • Avançado: Permite adicionar CSS personalizado a um objeto, o que substitui as propriedades que os controles visuais definem se há uma sobreposição.

  • Exibir CSS: permite exibir o CSS do componente selecionado.

  Além disso, na barra lateral, uma seta está presente na parte inferior. Ao clicar na seta, você terá mais duas opções: Simular o sucesso e Simular Erro. Essas opções, juntamente com as descritas acima, são discutidas em detalhes abaixo.

A. Barra lateral B. Tela

Componentes de estilo

É possível usar um tema em vários Forms adaptáveis, que importa a formatação do componente especificada no tema. É possível estilizar vários componentes, como títulos, descrição, painéis, campos, ícones e caixas de texto. Use widgets para configurar propriedades de componentes em um tema. O conhecimento prévio de CSS ou MENOS não é necessário, mas é desejado, embora a seção Substituições de CSS permita escrever o código CSS ou fornecer seletores personalizados. A seção Sobreposições CSS é exibida quando você seleciona um componente na barra lateral.

Opções na barra lateral que permitem selecionar e estilizar diferentes componentes.

Clicar no botão editar em um componente na barra lateral seleciona o componente na Tela e permite estilizar o componente usando as opções na barra lateral.

Determinados componentes, como caixa de texto, caixa numérica, botão de opção e caixa de seleção, são categorizados em componentes genéricos, como Campo. Por exemplo, você deseja personalizar o estilo de botões de opção. Para selecionar botões de opção para estilo, selecione Campo > Widget > Botão de opção.

Layouts do painel de estilo

Temas em AEM Forms suporte ao estilo de elementos no layout de painéis em seus formulários. O estilo de elementos em layouts prontos para uso e layouts personalizados é compatível.

Os painéis prontos para uso incluem:

• Guias na esquerda

• Guias na parte superior

• Acordeão

• Receptivo

• Assistente

• Layout para dispositivo móvel

  • Títulos do painel no cabeçalho
  • Sem títulos de painel no cabeçalho

Os seletores variam para cada layout.
O estilo de layouts personalizados do Editor de temas envolve:

• Definir os componentes para um layout que pode ser estilizado e os seletores de CSS para identificar esses componentes de forma exclusiva.
• Definição das propriedades CSS que podem ser aplicadas a esses componentes.
• Defina o estilo desses componentes interativamente na interface do usuário.

Estilos diferentes para tamanhos de tela diferentes

Os layouts de desktop e dispositivos móveis podem ter estilos ligeiramente ou totalmente diferentes. Para dispositivos móveis, o tablet e o telefone compartilham layouts semelhantes, exceto para tamanhos de componentes.

Use os pontos de interrupção do Editor de temas para definir um estilo alternativo para tamanhos de tela diferentes. É possível selecionar um dispositivo base ou uma resolução na qual você começa a criar o tema, e as variações de estilo de outras resoluções são geradas automaticamente. É possível modificar explicitamente o estilo de todas as resoluções.

O contexto das propriedades de estilo é alterado na barra lateral ao selecionar objetos

Quando você seleciona um componente na Tela de desenho, suas propriedades de estilo são listadas na barra lateral. Selecione o tipo de objeto e seu estado e forneça seu estilo.

Estilos usados recentemente no Editor de temas

O editor de temas armazena em cache até dez estilos aplicados a um componente. É possível usar os estilos em cache com outro componente de um tema. Os estilos usados recentemente estão disponíveis logo abaixo do componente selecionado na barra lateral como uma caixa de listagem. Inicialmente, a lista de estilos usados recentemente está vazia.

À medida que você estiliza um componente, os estilos são armazenados em cache e listados na caixa de lista. Neste exemplo, o rótulo da caixa de texto é estilizado para alterar o tamanho e a cor da fonte. Você pode seguir etapas semelhantes para escolher uma imagem ou alterar as cores para estilizar um componente. Observe como o estilo é armazenado em cache e listado na caixa de listagem quando o estilo do rótulo do campo é alterado.

Neste exemplo, o estilo do rótulo do campo é alterado e, quando a Descrição do painel responsivo é selecionada para estilo, uma entrada de lista é adicionada à biblioteca de ativos. A entrada na biblioteca de ativos pode ser usada para alterar o estilo de Descrição do painel responsivo.

Quando adicionado na biblioteca de ativos, o estilo fica disponível para outros temas e no modo de estilo da interface do editor de formulários. Da mesma forma, ao usar o modo de estilo do editor de formulários Interface para estilizar um componente, o estilo é armazenado em cache e está disponível em temas.

O botão de mais na biblioteca de ativos permite salvar permanentemente o estilo com um nome que você fornece. O botão de adição salva o estilo mesmo se você não clicar no botão Salvar na barra lateral para aplicar o estilo a um componente. O botão de adição para salvar um estilo para uso posterior não está disponível no modo de estilo.

Quando você fornece um nome personalizado para um estilo, ele está vinculado a um tema e não está mais disponível para outros temas. Para excluir um estilo salvo:

1. Na barra de ferramentas da TELA, clique em Opções de tema > Gerenciar estilos.

2. Na caixa de diálogo Gerenciar estilos, selecione um estilo salvo e clique em Excluir.

   

Visualização em tempo real, salvar e descartar alterações

As modificações feitas no estilo são refletidas instantaneamente no formulário carregada na Tela. A pré-visualização ao vivo permite que você defina e veja interativamente o impacto do estilo. Quando você altera o estilo de um componente, a variável Concluído é ativado na barra lateral. Para reter as alterações, use o Concluído botão.

Tema com outro formulário adaptável

Quando você cria um tema, ele é criado com um formulário enviado com o Editor de temas. Você fornece o estilo dos componentes neste formulário. Em vez do formulário enviado com o Editor de temas, você pode selecionar um formulário de sua escolha para fornecer estilo e visualizar os resultados.

Para substituir o formulário atual ou na Tela do Editor de temas:

1. No painel EDITOR DE TEMAS, clique em Opções de tema > Configurar.

2. Na guia General, navegue e selecione um formulário para o Formulário adaptável campo.

Refazer/Desfazer

Você pode desfazer ou refazer as alterações indesejadas que ocorrem acidentalmente. Use os botões Refazer/Desfazer na Tela.

Os botões Refazer/Desfazer aparecem ao estilizar um componente no Editor de temas.

Usar o Editor de temas

O Editor de temas permite editar um tema criado ou carregado. Navegue até Forms e documentos > Temas, selecione um tema e abra-o. O tema é aberto no Editor de temas.

Como discutido acima, o Editor de temas tem dois painéis: Barra lateral e Tela.

Personalizar o estilo de estado de sucesso do componente Widget de caixa de texto no Editor de temas. O componente é selecionado na Tela de desenho e seu estado é selecionado na barra lateral. As opções de estilo disponíveis na barra lateral são usadas para personalizar a aparência de um componente.

Utilização da Tela

O tema é criado usando o formulário pronto para uso ou usando um formulário de sua escolha. A Tela mostra a pré-visualização do formulário ou usado para criar o tema com personalizações especificadas no tema. A régua acima do formulário é usada para determinar o layout de acordo com o tamanho da exibição do seu dispositivo.

Na barra de ferramentas da Tela de Pintura, você verá:

• Ativar/desativar painel lateral : permite mostrar ou ocultar a barra lateral.

• Opções de tema : fornece três opções

  • Configurar: fornece opções para selecionar o formulário de visualização e Adobe Fonts.
  • Visualizar CSS de tema: gera o CSS para o tema selecionado.
  • Gerenciar estilos: fornece opções para gerenciar estilos de texto e imagem
  • Ajuda: executa um tour guiado por imagem do Editor de temas.

• Emulador : emula a aparência do tema para diferentes tamanhos de exibição. Um tamanho de exibição é tratado como um ponto de interrupção no emulador. Você pode selecionar um ponto de interrupção e especificar um estilo para ele. Por exemplo, Desktop e Tablet são dois pontos de interrupção. Você pode especificar estilos diferentes para cada ponto de interrupção.

Quando você seleciona um componente na Tela, vê a barra de ferramentas do componente na parte superior dele. A barra de ferramentas do componente permite selecionar componentes ou alternar para componentes genéricos. Por exemplo, você seleciona uma caixa de texto numérica em um painel. Você vê as seguintes opções na barra de ferramentas do componente:

• Widget de caixa numérica: permite que você selecione o componente para personalizar sua aparência na barra lateral.

• Widget de campo: permite selecionar o componente genérico para o estilo. Neste exemplo, todos os componentes de entrada de texto (caixa de texto/caixa numérica/depurador numérico/entrada de data) são selecionados para estilo.

• : permite selecionar o componente principal para o estilo. Se você selecionar caixa numérica e selecionar este ícone, o componente de campo será selecionado. Se você selecionar componente de campo e selecionar este ícone, painel será selecionado. Se você continuar tocando nesse ícone para seleção, acabará selecionando o layout para estilo.

Usando a barra lateral

A barra lateral no editor de temas fornece opções para personalizar estilos para componentes em um tema e usar seletores. Os seletores permitem selecionar um grupo de componentes ou componentes individuais, e você pode pesquisar por seletores na barra lateral. Você pode gravar seletores para componentes personalizados.

Quando você seleciona um componente na Tela ou nos seletores na barra lateral, a barra lateral mostra todas as opções que permitem personalizar estilos para ela.
Abaixo estão as opções que você vê na barra lateral ao selecionar um componente:

• Estado
• Folha de propriedades
• Simular Erro/Sucesso

Estado

Um estado é um indicador da interação do usuário com um componente. Por exemplo, quando um usuário insere dados incorretos em uma caixa de texto, o estado da caixa de texto muda para um estado de erro. O editor de temas permite especificar o estilo de um estado específico.

As opções para personalizar estilos de estado variam para diferentes componentes.

Folha de propriedades

Simular Erro/Sucesso

As opções Simular erro e sucesso estão disponíveis na parte inferior da barra lateral. Você pode vê-los usando uma seta para mostrar/ocultar visível na parte inferior da barra lateral. Usando o Editor de temas, você pode estilizar vários estados de um componente.

Por exemplo, você adiciona um campo numérico ao formulário e especifica seu estilo no editor de temas. Quando um usuário digita um valor alfanumérico no campo, você deseja alterar a cor do plano de fundo da caixa de texto. Você seleciona o campo numérico no tema e usa a opção de estado na barra lateral. Você seleciona o estado de erro na barra lateral e altera a cor do plano de fundo para vermelho. Para visualizar o comportamento, você pode usar a opção Simular erro disponível na barra lateral. As opções Simular Erro e Êxito estão descritas detalhadamente abaixo:

• Simular o sucesso: permite ver a aparência de um componente se você especificar seu estilo para o estado de sucesso. Por exemplo, em um formulário, os clientes definem uma senha. Os usuários podem definir a senha de acordo com as diretrizes fornecidas. Quando um usuário digita uma senha seguindo todas as diretrizes fornecidas, a caixa de texto fica verde. Quando a caixa de texto fica verde, ela está em estado de sucesso. Você pode especificar o estilo de um componente no estado de sucesso e simular sua aparência usando a opção Simular sucesso.

• Simular Erro: permite ver a aparência de um componente se você especificar seu estilo para o estado de erro. Por exemplo, em um formulário, os clientes definem uma senha. Os usuários podem definir a senha de acordo com as diretrizes fornecidas. Quando um usuário digita uma senha que não segue todas as diretrizes fornecidas, a caixa de texto fica vermelha. Quando a caixa de texto fica vermelha, ela está em estado de erro. Você pode especificar o estilo de um componente em estado de erro e simular sua aparência usando a opção Simular erro.

Estilo de um componente

Por exemplo, no formulário, você tem dois tipos de caixas de texto: uma que aceita apenas valores numéricos e outra que aceita valores alfanuméricos. É possível personalizar o estilo da caixa de texto que aceita apenas valores numéricos (uma caixa numérica).

Para personalizar o estilo de um componente específico (uma caixa numérica neste exemplo), execute as seguintes etapas:

1. No Editor de temas, selecione a caixa numérica na Tela de desenho.

2. Ao selecionar a caixa numérica, é possível ver a barra de ferramentas do componente com três opções:

   • Widget de caixa numérica
   • Widget de campo

3. Selecionar Widget de caixa numérica.

4. O título da barra lateral muda para Widget de caixa numérica e mostra opções para personalizar sua aparência.
   Uso Dimension e Posição opção na barra lateral para personalizar o tamanho do componente. Assegurar que o Estado seja Padrão.

Em vez de selecionar Widget de caixa numérica, selecione Widget de campo na barra de ferramentas do componente e execute as etapas acima. Ao selecionar dimensões para Widget de campo , todas as caixas de texto, exceto a caixa numérica, têm o mesmo tamanho.

Campos de estilo para um determinado estado

Com a barra de ferramentas do componente, você também pode especificar o estilo dos componentes para seus diferentes estados. Por exemplo, se um componente estiver desativado, ele estará em um estado desativado. Os estados mais usados de um componente que podem ser estilizados no editor de tema são: Padrão, Foco, Desativado, Erro, Sucesso e Foco. Você pode selecionar um componente na Tela e usar a opção Estado na barra lateral para personalizar sua aparência.

Para personalizar o estilo de um componente em um estado específico, execute as seguintes etapas:

1. Selecione um componente na Tela de desenho e selecione a opção apropriada na barra de ferramentas do componente.
   A barra lateral mostra opções para personalizar o estilo do componente.
2. Selecione um estado na barra lateral. Por exemplo, Estado de erro.
3. Use opções como Borda, Plano de fundo na barra lateral para personalizar a aparência do componente.
4. Use o Simular Erro opção na parte inferior da barra lateral para ver a aparência do estilo na edição.

Quando você personaliza o estilo de um componente depois de especificar seu estado, a personalização é exibida somente para o componente no estado especificado. Por exemplo, se você personalizar o estilo do componente quando o estado do mouse for selecionado. A personalização é exibida para o componente quando você move o ponteiro sobre o componente no formulário renderizado ao qual você aplica o tema.

Para simular o comportamento de estados diferentes de erro e sucesso, use o modo de Visualização. Para usar o modo de Visualização, clique em Visualizar na barra de ferramentas da página

Layouts de estilo para exibições menores

Use a régua na tela de desenho para selecionar pontos de interrupção para dispositivos com exibições menores. Clique no emulador no Canvas para exibir a régua e os pontos de interrupção. Os pontos de interrupção permitem visualizar um formulário para tamanhos de tela pertencentes a diferentes dispositivos, como telefones e tablets. Vários tamanhos de exibição são suportados no Editor de temas.

Para estilizar componentes para diferentes pontos de interrupção:

1. Na Tela de Pintura, selecione um ponto de interrupção acima da régua.
   Um ponto de interrupção representa um dispositivo móvel e seu tamanho de exibição.
2. Usar barra lateral para personalizar o estilo do formulário componentes no tema para o tamanho de exibição selecionado.
3. Certifique-se de que a personalização foi salva.

É possível estilizar o formulário componentes para vários dispositivos. Formulário os componentes para desktops e dispositivos móveis podem ter estilos totalmente diferentes.

Uso de Web Fonts em um tema

Agora é possível usar fontes disponíveis em um serviço da Web em um Formulário adaptável . Pronto para uso, Adobe Fonts, Adobe web font service, está disponível como uma configuração. Para usar o Adobe Fonts, crie um kit, adicione fontes a ele e obtenha a ID do kit de Adobe Fonts.

Para configurar o Adobe Fonts no Experience Manager, execute as seguintes etapas:

1. Na instância do autor, clique em Adobe Experience Manager ​>​ Ferramentas ​ >​ Implantação ​>​ Cloud Service ​.

2. No Cloud Service , navegue até e abra a Adobe Fonts opção. Abra a pasta de configuração e clique em Criar.

3. No Criar configuração , especifique um título para a configuração e clique em Criar.

   Você é redirecionado para a página de configuração.

4. Na caixa de diálogo Editar componente exibida, forneça a ID do kit e clique em OK.

Para configurar um tema para usar a configuração do Adobe Fonts, execute as seguintes etapas:

1. Na instância do autor, abra um tema no editor de temas.

2. No editor de temas, acesse Opções de tema > Configurar.

3. Entrada Configuração do Adobe Fonts , selecione um kit e clique em Salvar.

   Agora, você pode ver que as fontes são adicionadas na propriedade font-family do tema.

Seleção de fontes no editor de temas

Você pode usar o botão + para adicionar uma fonte. Quando você adiciona uma fonte, ela é listada na barra lateral.

Além da opção de configuração de tema, você também pode adicionar sua fonte a partir do próprio editor de tema. Digite a fonte que deseja usar no campo Família da fonte, na barra lateral, e pressione a tecla Return no teclado.

Quando você seleciona uma fonte, ela é adicionada na lista de famílias de fontes. Você pode usar a opção Máscara no editor de temas para desativar ou ativar as fontes listadas.

É possível ver a alteração da fonte do componente.

O campo Família de fontes é compatível com várias fontes. Quando você digita uma fonte, o navegador a procura e a aplica ao componente selecionado. Se o navegador não conseguir encontrar uma fonte, ele procurará uma fonte próxima a ela na família. Você pode começar digitando a fonte específica que está procurando. Se não encontrar a fonte que deseja usar, você pode digitar uma fonte genérica na família e usá-la.

Estilos de máscara aplicados no editor de temas

É possível mascarar estilos aplicados em um tema. Na barra lateral do editor de temas, você pode usar a variável ícone para desativar um estilo aplicado. Por exemplo, se você alterar as dimensões de um componente em um formulário , você poderá usar o botão de máscara à esquerda de uma propriedade para desativá-la. Quando você salva um tema, as opções de mascaramento selecionadas são mantidas.

O exemplo abaixo mostra estilos mascarados e não mascarados em um tema.

Aplicação de um tema a um formulário

Para aplicar um tema a um Formulário adaptável:

1. Abra o formulário no modo de edição. Para abrir um formulário no modo de edição, selecione um formulário e clique em Abertura.

2. No modo de edição, selecione um componente e clique em > Contêiner de formulário adaptável e clique em .

   Você pode editar as propriedades do formulário na barra lateral.

3. Na barra lateral, clique em Estilo.

4. Selecione seu tema na Tema do formulário adaptável e clique em Concluído .

Você também pode definir um tema para um Formulário adaptável ao criá-lo.

Alterar tema de um formulário em tempo de execução

Um tema estiliza diferentes componentes de um formulário. Você pode usar o themeOverride para alterar dinamicamente o tema de um formulário. Uma URL típica de um formulário é:

https://<server>:<port>/content/forms/af/test.html

Você pode usar o parâmetro themeOverride para aplicar um tema no tempo de execução.

https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme

A variável themeOverride permite fornecer um caminho para um tema. Ele altera o tema do formulário e atualiza o formulário com estilos atualizados.

Obter aparência específica usando temas

Com AEM Forms, juntamente com o tema padrão pronto para uso da tela, há muitos outros temas. Se quiser criar seu formulário usando outros temas, juntamente com mais alterações, copie o tema da pasta Biblioteca de temas. Cole os temas copiados fora da pasta Biblioteca de Temas e edite o tema copiado de acordo com as alterações desejadas.

Para copiar um tema, execute as seguintes etapas:

1. Na instância de criação, navegue até Adobe Experience Manager > Forms > Temas.
2. Abra a pasta Biblioteca de temas.
3. Na pasta Biblioteca de temas, passe o mouse sobre o tema predefinido correspondente e selecione Copiar.
4. Cole o tema copiado fora da pasta Biblioteca de Temas.
5. Personalizar o tema copiado.

Depois de personalizar o tema, aplique-o ao formulário .

Impacto em outros casos de uso do Formulário adaptável

• Publicar/desfazer a publicação de um formulário: Ao publicar um formulário, o tema aplicado a também será publicado (se ainda não tiver sido publicado)
• Importar/exportar um formulário: Ao importar ou exportar um formulário, seu tema associado também é automaticamente importado ou exportado.
• Referências de um formulário: A seção Referências nas referências do formulário contém uma entrada extra para o tema.
• Hora da última modificação de um formulário: Atualizado quando o tema associado é alterado.

Sequência de geração de CSS

Quando você seleciona Exibir CSS, o Editor de temas coleta todas as informações de estilo e cria um CSS. Ele coleta informações na seguinte ordem:

1. Estilo definido pelo usuário, especificado usando as propriedades na barra lateral.
2. Estilo CSS fornecido com a opção Substituição de CSS.

Por exemplo, a cor de fundo de uma caixa de texto é azul. Você a altera para rosa usando as propriedades na barra lateral. Ao gerar o CSS, você vê a cor de fundo da caixa de texto como rosa. Depois de alterar a cor do plano de fundo usando as propriedades, outro autor usa a opção de substituição de CSS para alterar a caixa de texto de cor do plano de fundo como branco. Ao gerar o CSS, você vê a cor do plano de fundo como branca no CSS gerado.

Depuração de estilos

Quando você especifica estilos para componentes no Editor de temas, um CSS é gerado. Ao estilizar um componente genérico, vários componentes incluídos nele também são estilizados. Por exemplo, ao estilizar um campo, a caixa de texto e o rótulo nele também são estilizados. Quando você estiliza a caixa de texto dentro do campo, ele obtém seu próprio CSS. Se você quiser depurar o CSS gerado para o campo e o componente, o Editor de temas fornece opções que permitem exibir CSS.

Você pode ver o CSS gerado usando as seguintes opções:

• Exibir CSS opção na barra lateral: Ao selecionar um componente no Tema, você pode ver a opção VISUALIZAR CSS na barra lateral. Ela mostra o CSS gerado, incluindo o CSS de ::before e ::after pseudoelementos.
• Exibir tema CSS opção na barra de ferramentas da tela de desenho: na barra de ferramentas da tela de desenho, clique em > Exibir tema CSS. Você pode ver todo o tema CSS gerado pelas propriedades definidas no Editor de temas.

Resolução de problemas, recomendações e práticas recomendadas

• 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 > 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.

  Você também pode criar um tema, criar cópias dele e modificar o estilo fornecido nos temas copiados para casos de uso semelhantes.
  Consulte Obter aparência específica usando temas

  • Editor de temas:

  O Editor de temas permite que você crie temas para estilizar seu formulário <!>— ou comunicação interativa —>. Você pode especificar o estilo dos componentes em um tema, que permitem consistência na aparência entre vários formulários desenvolvidos. É recomendável especificar informações de estilo em um tema e, em seguida, aplicar o tema a um formulário.

  • Estilo em linha:

  É possível estilizar componentes usando o modo Estilo no formulário <!>— ou comunicação interativa —> editor multicanal quando você trabalha com um formulário. O uso do modo de estilo para alterar o estilo do componente de formulário substitui o estilo especificado no tema. Se quiser alterar o estilo de determinados componentes de um formulário específico, consulte Estilo incorporado de componentes.

• 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.

• Quando 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.

Consulte também

• Criar um formulário adaptável de AEM
• Adicionar um formulário adaptável de AEM à página do AEM Sites
• Aplicar temas a um formulário adaptável de AEM
• Adicionar componentes a um formulário adaptável de AEM
• Usar CAPTCHA em um formulário adaptável de AEM
• Gerar versão do PDF (DoR) de um formulário adaptável AEM
• Traduzir um formulário adaptável de AEM
• Ativar o Adobe Analytics para um formulário adaptável para rastrear o uso do formulário
• Conectar o formulário adaptável ao Microsoft SharePoint
• Conectar o formulário adaptável ao Microsoft Power Automate
• Conectar o formulário adaptável ao Microsoft OneDrive
• Conectar o formulário adaptável ao armazenamento de blobs do Microsoft Azure
• Conectar o formulário adaptável ao Salesforce
• Usar o Adobe Sign em um formulário adaptável AEM
• Adicionar uma nova localidade para um Formulário adaptável
• Enviar dados do Formulário adaptável a um banco de dados
• Enviar dados do formulário adaptável para um endpoint REST
• Enviar dados do formulário adaptável para o fluxo de trabalho do AEM
• Usar o Forms Portal para listar AEM Adaptive Forms em um site de AEM