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.
Conhecimento de CSS e da estrutura LESS.
O artigo lista classes css de formulários adaptáveis disponíveis publicamente. Você pode aproveitar essas classes para estilizar vários componentes de um formulário adaptável. O estilo dos componentes de criação, como caixas de diálogo e barras de status que exibem avisos, está fora do escopo deste artigo. Use essas construções de estilo para criar estilos (usando CSS ou Menos) somente quando não for possível estilizar componentes usando editor de tema.
A estrutura LESS simplifica o caso de uso para personalizar estilos em formulários adaptáveis. A estrutura permite definir estilos usando um conjunto de variáveis e funções (mixins). A estrutura LESS ajuda a reduzir o tamanho do código incorporado e aumenta sua reutilização.
É possível personalizar estilos de formulário adaptável das seguintes maneiras:
É possível alterar o tema de um formulário adaptável para garantir que sua aparência seja consistente com as páginas da Web nas quais o formulário adaptável está incorporado.
As alterações na aparência geral do formulário adaptável usando propriedades CSS normalmente fazem parte das alterações de tema. Alterações importantes no registro "ok e sentir" do formulário adaptável, como alterações no layout e na colocação dos componentes, não são consideradas alterações de tema.
Com base na inicialização, o seguinte conjunto de propriedades CSS define o tema de uma página da Web:
Atualmente, as variáveis LESS são definidas apenas para essas propriedades dos vários elementos em um formulário adaptável.
É possível fazer alterações na aparência, no layout, no posicionamento e na visibilidade dos elementos. Para realizar essa tarefa, crie ou atualize seus arquivos .css personalizados para incluir as construções de estilo listadas neste artigo.
Para aplicar um estilo a um formulário adaptável, abra o formulário adaptável no para edição, abra as propriedades do contêiner de formulário adaptável e especifique o caminho do Arquivo CSS personalizado na guia básico. Construtores de estilo padrão do formulário adaptável e substituídos pelas construções listadas no arquivo .css personalizado.
Os componentes discutidos neste artigo têm suas classes CSS predefinidas. Você pode editar as variáveis para modificar os estilos nas classes CSS. Como alternativa, você pode reescrever a classe inteira. Esta seção descreve as classes em componentes e estilos que você pode modificar usando variáveis.
Um contêiner é o componente de nível superior. Outros painéis e campos estão abaixo do componente de contêiner.
Classe CSS |
|
Variáveis Descrição |
Variáveis Descrição |
|
Cor do plano de fundo do contêiner |
|
Preenchimento do contêiner |
|
Margem para o contêiner |
|
Cor da fonte do contêiner |
Os formulários adaptáveis incluem vários tipos de campos. Cada campo tem um nome de classe exclusivo, que é o nome do campo. O campo também tem um nome de classe comum guideFieldNode
.
Os campos incluem rótulos, widgets, descrição da Ajuda (descrição longa e curta) e ícones da Ajuda do campo (ponto de interrogação).
Classe CSS |
|
Variáveis |
Descrição |
|
Preenchimento do campo |
|
Cor da fonte da mensagem de erro do campo |
|
Tamanho da fonte da mensagem de erro do campo |
O elemento HTML rótulo usado para o campo inclui as classes left ou top dependendo se o rótulo está na parte superior ou à esquerda.
Classe CSS |
|
Variáveis |
Descrição |
|
Cor da fonte do rótulo do campo |
|
Tamanho da fonte do rótulo do campo |
|
Propriedade de altura de linha CSS para o rótulo do campo |
|
Propriedade de peso da fonte CSS para o rótulo do campo |
|
Margem para o rótulo do campo |
As regras CSS para o rótulo são aplicadas usando o guideFieldLabel rótulo. Se você for um autor, substitua essa regra para tornar visíveis as alterações personalizadas.
Dependendo do tipo, os widgets também incluem classes. Geralmente, os widgets incluem o guideFieldWidget
classe. Os widgets enviados com o HTML normalmente usam a entrada de elemento de HTML padrão e selecionam. O estilo é feito de acordo. Não é possível estilizar um widget personalizado alterando as variáveis.
Classe CSS |
|
Variáveis |
Descrição |
|
Cor de fundo dos widgets (não funciona para a caixa de seleção e o botão de opção) |
|
Cor da borda dos widgets |
|
Tamanho da borda dos widgets |
|
Raio da borda dos widgets |
|
Tipo de borda dos widgets |
|
Tipo de foco das bordas do widget |
|
Estilo de borda consolidado dos widgets |
|
Cor do texto dentro do widget |
|
Tamanho do texto dentro do widget |
|
Propriedade lineheight CSS do widget |
|
Propriedade de preenchimento CSS para o widget |
|
Cor da borda quando o widget está em foco |
|
Cor da borda do widget para os campos obrigatórios |
|
Cor de fundo do widget para os campos obrigatórios |
|
Cor de fundo do widget quando o campo está desabilitado |
|
Cor da fonte do widget quando o campo está desabilitado |
|
Cor da borda do widget quando o campo está desabilitado |
|
Altura do widget (Não funciona para a caixa de seleção e o botão de opção) |
|
Altura da caixa de seleção e do botão de opção. |
|
Altura máxima para uma lista suspensa de várias seleções |
O estilo de campos focalizados, obrigatórios e desativados é restrito usando variáveis. No entanto, é possível alterá-la substituindo os estilos. A restrição usando variáveis é fornecida principalmente para manter o número de variáveis sob controle. A restrição pode ser relaxada se a aparência de um campo mudar drasticamente porque está em qualquer um dos estados discutidos anteriormente.
Um autor pode especificar o conteúdo da Ajuda nos campos usando componentes de descrição Curta e Longa. Ambos os componentes têm uma classe comum .guideHelpDescription
e outra classe .long
/ .short
, dependendo do tipo de descrição. O conteúdo da Ajuda está delimitado em um elemento de parágrafo para substituir o estilo da descrição. A descrição da Ajuda (longa e curta) é modificada usando variáveis que começam com widgetshelp, como mencionado na tabela a seguir:
Variáveis |
Descrição |
|
Cor de fundo da Ajuda longa dos widgets |
|
Cor da borda da Ajuda longa dos widgets |
|
Cor da borda do indicador esquerdo da Ajuda longa dos widgets |
|
Cor de fundo da Ajuda curta dos widgets |
|
Cor da fonte da pequena Ajuda dos widgets |
|
Cor de fundo da dica de ferramenta curta dos widgets Ajuda |
|
Cor da fonte da dica de ferramenta curta dos widgets Ajuda |
Os Termos e Condições (TnC
) permite especificar termos e condições. Você pode personalizar o widget usando as variáveis descritas na tabela a seguir.
Variáveis |
Descrição |
tnc-unvisited |
Cor da fonte do link tnc não visitado. |
tnc-visited |
Cor da fonte do link tnc visitado. |
Os botões também são widgets. No entanto, seu estilo é um pouco diferente dos widgets. Nos formulários adaptáveis, qualquer uma das seguintes opções constitui um botão:
Código HTML para o botão:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
Classe CSS |
Descrição |
|
Fornece ícones para o botão |
|
Etiqueta/legenda do botão Estilos |
Variáveis |
Descrição |
|
Tamanho da borda dos botões |
|
Tipo de borda |
|
Propriedade de preenchimento CSS para o botão |
|
Tamanho da fonte do botão |
|
Cor de fundo do botão |
|
Cor da fonte do botão |
|
Cor da borda do botão |
|
Preenchimento para os botões grandes (botões com classe .buttonlarge) |
|
Tamanho da fonte para botões grandes |
|
Preenchimento para os botões pequenos (botões com classe .buttonsmall) |
|
Tamanho da fonte para botões pequenos |
|
Cor de fundo dos botões informativos (botões com classe .buttoninformative) |
|
Cor da fonte para os botões informativos |
|
Cor da borda para botões informativos |
|
Cor de fundo dos botões com estilo de aviso (botões com classe .buttonwarning) |
|
Cor da fonte para botões com estilo de aviso |
|
Cor da borda para botões estilizados de aviso |
|
Cor de fundo dos botões de alerta (botões com classe .buttonalert) |
|
Cor da fonte dos botões de alerta |
|
Cor da borda dos botões de alerta |
Para os widgets, um questionMark é exibido quando um autor adiciona uma descrição longa no conteúdo da Ajuda. O ícone padrão fornecido na inicialização é usado. Para usar um ícone personalizado, é possível personalizar os ícones de inicialização.
Classe CSS |
|
Variáveis |
Descrição |
|
Cor do ícone |
|
Cor do ícone quando o mouse é posicionado sobre ele |
Você pode alterar o tema de cores das linhas de cabeçalho e corpo em uma tabela usando as variáveis a seguir.
Variáveis |
Descrição |
|
Cor de fundo da linha de cabeçalho. O valor padrão é |
|
Cor do plano de fundo para a linha de corpo ímpar. O valor padrão é |
|
Cor do plano de fundo para a linha de corpo par. O valor padrão é |
O widget Anexo de arquivo de formulários adaptáveis permite fazer upload de arquivos. Você também pode personalizar o widget usando as variáveis.
Variáveis |
Descrição |
|
Preenchimento dos arquivos exibidos no widget |
|
Cor de fundo do item de arquivo |
|
Cor da borda superior |
|
Cor da fonte do item de arquivo |
|
Cor do ícone de Visualização (ícone Bootstrap) no widget |
|
Altura do comentário para o item de arquivo |
Há quatro tipos de guias do navegador. Isso inclui guias à esquerda, na parte superior, no assistente e na opção. Cada navegador tem uma classe diferente.
Navegador |
Classe CSS |
|
.navegadores de acordeão |
|
.tab-navigators-vertical |
|
.tab-navigators |
|
.assistente-navegadores |
O código de HTML a seguir para o elemento tab navigator é (semelhante às guias de inicialização):
<li>
<a>tab title</a>
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></code>
........................... repeatable buttons, if the repeatable configuration is set ................................
<div class = "repeatableButtons">
<button name="Add" class="Add"/>
<button name="Remove" class="Remove"/>
</div>
</a>
</div>
................................ panel content ..................................
</div>
</div>
Você pode alterar o estilo do navegador usando regras CSS que selecionam os elementos usando descendente seletores. Por exemplo, para adicionar um estilo de decoração de texto à tag de âncora:
Navegador de guias na parte superior:
.tab-navigators
li a {
text-decoration:
underline;
}
Tab navigator on left:
.tab-navigators-vertical
li a {
text-decoration:
underline;
}
Accordion navigator:
.accordion-navigators .guideHeader a .guideSummary {
text-decoration:
underline;
}
Wizard navigator:
.wizard-navigators
li a {
text-decoration:
underline;
}
Além disso, há classes para estilizar os navegadores de guia (à esquerda e na parte superior) com base no fato de eles terem navegadores aninhados/secundários/secundários.
Classe CSS |
Descrição |
|
Navegadores de guias (à esquerda e acima) que têm navegadores aninhados/secundários/secundários |
|
Navegadores de guias (à esquerda e acima) que não têm navegadores aninhados/secundários/secundários |
A classe guideNavIcon fornece um ícone padrão para os navegadores de guia (à esquerda e acima) e os navegadores do assistente.
Classe CSS |
|
Você pode alterar o ícone de um navegador específico fornecendo uma classe CSS no painel em criação, exemplo de formulário <class_name>. Você adiciona um <class_name>_nav para o ícone do navegador.
Variáveis |
Descrição |
Navegadores de guia |
|
|
Cor de fundo para todo o navegador de guias |
|
Cor do plano de fundo da guia |
|
Cor da fonte da guia |
|
Cor do plano de fundo da guia ao passar o mouse |
|
Cor da fonte da guia ao passar o mouse |
|
Cor do plano de fundo quando o painel está em foco (ativo) |
|
Cor da fonte quando o painel está em foco |
|
Cor do plano de fundo quando a expressão de preenchimento do painel retorna "true" |
|
Cor da fonte quando a expressão de Término do painel retorna "true" |
|
Cor do plano de fundo quando o painel está em foco uma vez, mas a expressão de conclusão retorna falso |
|
Cor da fonte quando o painel está em foco uma vez, mas a expressão de conclusão retorna falso |
|
Cor da borda da guia |
|
Tamanho da fonte da guia |
|
Preenchimento da guia |
|
Margem para a guia |
|
Margem para as guias verticais |
|
Tamanho da borda das guias |
|
Altura mínima das guias |
|
Recuo para as abas aninhadas |
Navegadores do assistente |
|
|
Cor de fundo para todo o navegador do assistente |
|
Cor do plano de fundo do assistente |
|
Cor da fonte do assistente |
|
Cor do plano de fundo quando o painel está em foco (ativo) |
|
Cor da fonte quando o painel está em foco (focalizado) |
|
Cor do plano de fundo quando a expressão de preenchimento do painel retorna "true" |
|
Cor da fonte quando a expressão de Término do painel retorna "true" |
|
Cor do plano de fundo quando o painel está em foco uma vez, mas a expressão de conclusão retorna falso |
|
Cor da fonte quando o painel foi focalizado uma vez, mas a expressão de Término retorna falso |
|
Cor do assistente |
|
Tamanho da fonte do assistente |
|
Preenchimento do assistente |
|
Tamanho da borda do assistente |
|
Cor da borda do marcador do navegador do assistente (com prefixo da legenda/rótulo) |
|
Cor de fundo da barra de progresso do navegador do assistente |
|
Cor de preenchimento da barra de progresso |
Navegadores Acordeão |
|
|
Preenchimento para acordeão |
Um Painel inclui uma barra de ferramentas opcional e seu conteúdo.
Classe CSS |
|
Variáveis |
Descrição |
|
Cor do plano de fundo do painel |
|
Tamanho da fonte para o texto do painel |
|
Cor da fonte do texto do painel |
|
Preenchimento dentro do painel |
|
Tamanho da fonte da descrição do painel |
|
Preenchimento da descrição do painel |
|
Cor do plano de fundo para a ajuda do painel |
|
Cor da borda do indicador para ajuda do painel |
O nó do painel é dividido em navegadores e conteúdo. Há
não é um componente de estilo separado para o conteúdo. As variáveis descritas são aplicadas no navegador, bem como no conteúdo.
O painel mais acima (RootPanel) não tem essa classe.
Essas variáveis influenciam a barra de cabeçalho visível em um dispositivo móvel ou em dispositivos de tela pequena que contêm o título do painel e os navegadores próximo e posterior.
Classe CSS |
|
Variáveis |
Descrição |
|
Cor de fundo da barra de cabeçalho |
|
Cor da fonte do texto dentro da barra de cabeçalho |
|
Preenchimento da barra de cabeçalho |
Essas variáveis influenciam o indicador de rolagem, que é uma seta laranja exibida em um dispositivo móvel ou em dispositivos de tela pequena. Um indicador de Rolagem indica que há conteúdo além da parte visível da tela. Você pode rolar para baixo para vê-lo. Ao atingir o fim do conteúdo, a seta desaparece.
Classe CSS |
|
Variáveis |
Descrição |
|
Posição fixa do scrollindicator a partir da parte inferior |
|
Posição fixa do scrollindicator a partir da direita |
|
Largura de scrollindicator |
|
Altura do scrollindicator |
Essas variáveis na tabela a seguir influenciam o layout da barra de ferramentas fixa móvel.
Classe CSS |
|
Variáveis |
Descrição |
|
Posição fixa da barra de ferramentas, no dispositivo móvel, na parte inferior |
|
Posição fixa da barra de ferramentas, no dispositivo móvel, de cima |
|
Posição fixa da barra de ferramentas, no dispositivo móvel, da esquerda |
|
Posição fixa da barra de ferramentas, no dispositivo móvel, da direita |
|
Posição fixa do ícone dos botões da barra de ferramentas, a partir da parte superior |
|
Largura do ícone dos botões da barra de ferramentas no dispositivo móvel |
|
Altura do ícone dos botões da barra de ferramentas no dispositivo móvel |
|
Cor de fundo da barra de ferramentas em um dispositivo móvel |
A variável Inscrição simples theme em /etc/clientlibs/fd/af/guidetheme/simpleEnrollment e a categoria guide.theme.simpleEnrollment
também introduzem algumas variáveis. Se você quiser criar um tema que melhore a inscrição simples, poderá usar as seguintes "variáveis adicionais:
Variáveis |
Descrição |
|
Cor de fundo do botão em foco |
|
Cor do plano de fundo do botão ao passar o mouse |
|
Raio do botão |
|
Cor de fundo dos botões de navegação (voltar/próximo) |
|
Cor de fundo dos botões de navegação (voltar/próximo) ao passar o mouse |
|
Cor de fundo para os navegadores do assistente e a barra de progresso correspondente, quando renderizada pela primeira vez. |
|
Cor de fundo do navegador do assistente atual / ativo e barra de progresso correspondente |
|
Cor de fundo dos navegadores do assistente e barra de progresso correspondente, que foram visitados. |
|
Container de bifurcação de cor de borda em navegadores e painel |
|
A cor da borda inferior separa as guias à esquerda (navegadores de guias). |
|
Cor do plano de fundo dos navegadores aninhados/secundários/secundários do navegador |