Criação e uso de temas creating-and-using-themes
O Adobe recomenda o uso de Componentes principaisde captura de dados moderna e extensível para criar um novo Forms Adaptávelou adicionar o 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.
Introdução introduction
É possível criar e aplicar temas para estilizar um formulário adaptável ou uma comunicação interativa. 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. Quando você aplica um tema, o estilo especificado reflete nos componentes correspondentes. O tema é gerenciado de forma independente sem uma referência a um formulário adaptável ou comunicação interativa.
É possível:
- Criar um tema
- Editar e copiar um tema existente
- Baixar e carregar um tema existente no servidor do AEM Forms
- Gerenciar dependências de um tema
Criar, baixar ou fazer upload de um tema creating-downloading-or-uploading-a-theme
Com o AEM Forms, você pode criar, baixar ou fazer upload de temas. Um tema é criado como outros ativos, como formulários, documentos e cartas. O tema é salvo como uma entidade separada, completa com metapropriedades como formulários. Os temas sendo uma entidade separada permitem reutilização em vários formulários adaptáveis e comunicações interativas. Você também pode mover um tema para uma instância diferente do AEM Forms e reutilizá-lo.
Criação de um tema creating-a-theme
Execute as seguintes etapas para criar um tema:
-
Clique em Adobe Experience Manager, clique em Forms e em Temas.
-
Na página Temas, clique em Criar > Tema.
Um assistente para criar um tema é iniciado. -
Na guia Básico do assistente Criar Tema, forneça o Título e o Nome do tema. Esses campos são obrigatórios.
-
Na guia Advanced, você tem dois campos:
-
Localização de clientlib: localização no repositório que armazena clientlibs para o tema.
-
Categoria do clientlib: fornece um campo de texto para inserir o nome da categoria do clientlib para o tema.
-
-
Clique em Criar e em Editar para abrir o tema no Editor de Temas ou clique em Concluído para retornar à página de temas.
Download de um tema downloading-a-theme
É possível exportar temas como um arquivo zip e usá-los em outros projetos ou instâncias AEM. Para baixar um tema:
-
Clique em Adobe Experience Manager, clique em Forms e em Temas.
-
Na página Temas, Selecione um tema e clique em Baixar. Uma caixa de diálogo com os detalhes do tema é exibida.
-
Clique em Baixar. O tema é baixado como um arquivo zip.
Carregamento de um tema uploading-a-theme
Você pode usar temas criados com predefinições de estilo em seu projeto. Você pode importar pacotes de temas que outras pessoas criam carregando-os no seu projeto.
Para fazer upload de um tema:
-
Clique em Adobe Experience Manager, clique em Forms e em Temas.
-
Na página Temas, clique em Criar > Carregar Arquivo.
-
No prompt Upload de arquivo, procure e selecione um pacote de tema no computador e clique em Upload.
O tema carregado está disponível na página de temas.
Metadados de um tema metadata-of-a-theme
Lista de metapropriedades de um tema (encontrada na página de propriedades de um tema).
Sobre o Editor de temas about-the-theme-editor
O AEM Forms vem com 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 facilmente o estilo de vários elementos de forma adaptável e comunicação interativa. Ao criar um tema, ele é armazenado como uma entidade separada, como formulários, comunicações interativas, cartas, fragmentos de documentos e dicionários de dados.
O Editor de temas permite personalizar estilos dos componentes estilizados em um tema. Você pode personalizar a aparência de um formulário ou comunicação interativa 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 ou comunicação interativa em que todas as alterações de estilo são refletidas 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 pré-visualização do formulário de amostra ou da comunicação interativa para a respectiva resolução. A tela é discutida detalhadamente abaixo.
-
Barra Lateral- Aparece no lado esquerdo. Ele tem os seguintes itens:
-
Seletor: mostra o componente selecionado para estilo e suas propriedades que você pode estilizar. 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 ou comunicação interativa herdarão 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 tem comprimento maior e um campo de caixa numérica como idade tem comprimento 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 está 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 que você adicione 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 Êxito e Simular Erro. Estas opções, juntamente com as opções descritas acima, são discutidas detalhadamente abaixo.
-
Componentes de estilo styling-components
É possível usar um tema em vários formulários adaptáveis e comunicações interativas, que importam 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.
Clique em EXPANDIR TUDO na barra lateral para exibir, selecionar e estilizar componentes categorizados que não estejam visíveis antecipadamente.
Layouts do painel de estilo styling-panel-layouts-br
Os temas no AEM Forms suportam o estilo de elementos no layout de painéis em seus formulários e comunicações interativas. 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
-
Responsivo
-
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 possa ser estilizado e os seletores de CSS para identificar esses componentes de maneira exclusiva
- Definição das propriedades CSS que podem ser aplicadas a esses componentes
- Definir o estilo desses componentes interativamente na interface do usuário
Estilos diferentes para tamanhos de tela diferentes different-styles-for-different-screen-sizes-br
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 styling-properties-context-changes-in-sidebar-on-selecting-objects
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 recently-used-styles-in-theme-editor
O editor de temas armazena em cache até 10 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 um estilo é adicionado na biblioteca de ativos, ele fica disponível para outros temas e no modo de estilo do editor de formulários ou da interface do editor de comunicação interativa. Da mesma forma, quando você usa o modo de estilo do editor de formulários ou a interface do editor de comunicação interativa 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:
-
Na barra de ferramentas da TELA, clique em Opções de Tema
-
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 live-preview-save-and-discard-changes
As modificações feitas no estilo são refletidas instantaneamente no formulário ou na comunicação interativa 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, o botão Concluído é habilitado na barra lateral. Para manter as alterações, use o botão Concluído.
Tema com outro formulário adaptável ou comunicação interativa theme-with-another-adaptive-form-or-interactive-communication
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 ou comunicação interativa de sua escolha para fornecer estilo e visualizar seus resultados.
Para substituir o formulário atual ou a comunicação interativa na Tela do Editor de temas:
-
No painel EDITOR DE TEMAS, clique em Opções de Tema
-
Na guia Geral, navegue e selecione um formulário ou comunicação interativa para o campo Formulário/Documento adaptável.
Refazer/Desfazer redo-undo
Você pode desfazer ou refazer as alterações indesejadas que ocorrem acidentalmente. Use os botões Refazer/Desfazer na Tela.
Botões Desfazer/Refazer na Tela
Os botões Refazer/Desfazer aparecem ao estilizar um componente no Editor de temas.
Usar o Editor de temas using-the-theme-editor
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 using-canvas
O tema é criado usando o formulário pronto para uso ou usando um formulário ou comunicação interativa de sua escolha. A Tela mostra a pré-visualização do formulário ou da comunicação interativa usada 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á:
-
Alternar painel lateral
-
Opções de tema
- Configurar: fornece opções para selecionar o formulário de visualização ou a comunicação interativa, o clientlib base e a configuração do 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
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 selecionar 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.
-
Barra de ferramentas do componente na caixa numérica na Tela
Usando a barra lateral using-rail
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 state
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 property-sheet
Simular Erro/Sucesso simulate-error-success
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 êxito:
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 styling-a-component
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).
Execute as seguintes etapas para personalizar o estilo de um componente específico (uma caixa numérica neste exemplo):
-
No Editor de temas, selecione a caixa numérica na Tela de desenho.
-
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
-
Selecione Widget de caixa numérica.
-
O título da barra lateral muda para Widget de caixa numérica e mostra opções para personalizar sua aparência.
Use a opção Dimension e Posição na barra lateral para personalizar o tamanho do componente. Verifique se o Estado é 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. Quando você seleciona dimensões para a opção 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 styling-fields-given-state
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.
Execute as seguintes etapas para personalizar o estilo de um componente em um estado específico:
- 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. - Selecione um estado na barra lateral. Por exemplo, Estado de erro.
- Use opções como Borda, Plano de fundo na barra lateral para personalizar a aparência do componente.
- Use a opção Simular Erro 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 ou na comunicação interativa à qual 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 styling-layouts-for-smaller-displays
Use a régua na tela de desenho para selecionar pontos de interrupção para dispositivos com exibições menores. Clique na
Para estilizar componentes para diferentes pontos de interrupção:
- 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. - Use a barra lateral para personalizar o estilo de componentes de formulário ou de comunicação interativa no tema para o tamanho de exibição selecionado.
- Certifique-se de que a personalização foi salva.
É possível estilizar componentes de formulário ou de comunicação interativa para vários dispositivos. Os componentes de formulário e comunicação interativa para desktops e dispositivos móveis podem ter estilos totalmente diferentes.
Uso de fontes da Web em um tema using-web-fonts-in-a-theme
Agora é possível usar fontes disponíveis em um serviço da Web em um formulário adaptável ou comunicação interativa. O Adobe Fonts, serviço de fontes da Web Adobe, pronto para uso, está disponível como configuração. Para usar o Adobe Fonts, crie um kit, adicione fontes a ele e obtenha a ID do Kit da Adobe Fonts.
Execute as seguintes etapas para configurar o Adobe Fonts no AEM:
-
Na instância do autor, clique em
-
Na página Cloud Service, navegue até a opção Adobe Fonts e abra-a. Abra a pasta de configuração e clique em Criar.
-
Na caixa de diálogo Criar Configuração, especifique um título para a configuração e clique em Criar.
Você é redirecionado para a página de configuração.
-
Na caixa de diálogo Editar Componente exibida, forneça sua ID do Kit e clique em OK.
Execute as seguintes etapas para configurar um tema para usar a configuração do Adobe Fonts:
-
Na instância do autor, abra um tema no editor de temas.
-
No editor de temas, navegue até Opções de Tema
-
No campo 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.
Listagem e seleção de fontes no editor de temas listing-and-selecting-fonts-in-theme-editor
Você pode usar o serviço de configuração de temas para adicionar mais fontes ao editor de temas. Execute as seguintes etapas para adicionar fontes:
-
Faça logon no AEM Web Console com privilégios administrativos. A URL para o Console da Web AEM é
https://'[server]:[port]'/system/console/configMgr. -
Abra o Serviço de Configuração de Tema de Formulário Adaptável.
-
Clique em +, especifique o nome da fonte e clique em Salvar. A fonte é adicionada e está disponível no editor de temas.
Seleção de fontes no editor de temas selecting-fonts-in-theme-editor
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 mask-styles-applied-in-theme-editor
É possível mascarar estilos aplicados em um tema. Na barra lateral do editor de temas, você pode usar o ícone
O exemplo abaixo mostra estilos mascarados e não mascarados em um tema.
Aplicação de um tema a um formulário ou comunicação interativa applying-a-theme-to-a-form-or-interactive-communication-br
Para aplicar um tema a um formulário adaptável:
-
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 Abrir.
-
No modo de edição, selecione um componente e clique em
Você pode editar as propriedades do formulário na barra lateral.
-
Na barra lateral, clique em Estilo.
-
Selecione seu tema no menu suspenso Tema do Formulário Adaptável e clique em Concluído
Para aplicar um tema a uma comunicação interativa:
-
Abra a comunicação interativa no modo de edição. Para abrir uma comunicação interativa no modo de edição, selecione um formulário e clique em Abrir.
-
No modo de edição, selecione um componente e clique em
Você pode editar as propriedades do formulário na barra lateral.
-
Na barra lateral, em Básico, selecione seu tema no menu suspenso Tema e clique em Concluído
Alterar tema de um formulário em tempo de execução change-theme-of-a-form-at-runtime
Um tema estiliza diferentes componentes de um formulário. Você pode usar a propriedade 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 opção 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 specific-af-appearance
Com o AEM Forms, juntamente com o tema de tela pronto para uso padrão, há muitos outros temas. Se você quiser projetar seu formulário ou comunicação interativa usando outros temas, juntamente com alterações adicionais, 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:
- Na instância de criação, navegue até Adobe Experience Manager > Forms > Temas.
- Abra a pasta Biblioteca de temas.
- Na pasta Biblioteca de Temas, passe o mouse sobre o tema predefinido correspondente e selecione Copiar.
- Cole o tema copiado fora da pasta Biblioteca de Temas.
- Personalizar o tema copiado.
Depois de personalizar o tema, aplique-o ao formulário ou à comunicação interativa.
Impacto em outros casos de uso de formulário adaptável impact-on-other-adaptive-form-use-cases
- Publish/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 em referências de 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.
- Teste A/B: você pode aplicar um tema diferente a duas versões do formulário no teste A/B. As informações dos dois temas são armazenadas individualmente nos dois containers guia.
Sequência de geração de CSS css-generation-sequence
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:
- Estilo definido na biblioteca base do cliente do tema.
- Estilo definido pelo usuário, especificado usando as propriedades na barra lateral.
- Estilo CSS fornecido com a opção Substituição de CSS.
Por exemplo, a cor de fundo de uma caixa de texto é azul na biblioteca base do cliente. 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 debugging-styles
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:
- Opção Exibir CSS na barra lateral: ao selecionar um componente no Tema, você pode ver a opção EXIBIR CSS na barra lateral. Ele mostra o CSS gerado, incluindo o CSS para os pseudoelementos
::beforee::after. - Opção Exibir tema CSS na barra de ferramentas da tela: na barra de ferramentas da tela de desenho, clique em
Resolução de problemas, recomendações e práticas recomendadas troubleshooting-recommendations-and-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
-
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.
-
Usando clientlib base, editor de temas e estilo incorporado
-
Clientlib base:
A biblioteca base do cliente contém informações de estilo. Para usar informações de estilo em bibliotecas do lado do cliente em temas.
- Navegue até Experience Manager > Forms > Temas.
- Na página Temas, selecione um tema e clique em Exibir Propriedades.
- Na página Propriedades que será aberta, clique em Avançado.
- Na guia Avançado, no campo Local da biblioteca de clientes, navegue e selecione a biblioteca de clientes que deseja usar.
- Clique em Salvar.
O estilo especificado na biblioteca do cliente é importado no tema que o utiliza. Por exemplo, você especifica o estilo de uma caixa de texto, caixa numérica e troca na biblioteca do cliente. Ao importar a biblioteca do cliente no tema, o estilo da caixa de texto, da caixa numérica e do switch é importado. É possível estilizar outros componentes usando o editor de 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 Obtendo aparência específica usando Temas -
Editor de temas:
O Editor de temas permite criar temas para estilizar o formulário ou a 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 ou comunicações interativas desenvolvidas. É recomendável especificar informações de estilo em um tema e, em seguida, aplicar o tema a um formulário.
-
Estilo embutido:
É possível estilizar componentes usando o modo Estilo no formulário ou o editor multicanal de comunicação interativa ao trabalhar 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 embutido de componentes.
-
-
Usando bibliotecas do lado do cliente
Se você quiser criar bibliotecas de clientes para importar informações de estilo, consulte Usando Bibliotecas do Lado do Cliente. Depois de criar uma biblioteca do cliente, você pode importá-la no tema usando as etapas mencionadas acima.
-
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.
-
Quando usar o editor de formulários ou de temas para trabalhar com o cabeçalho e o 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.