A AEM Forms fornece a Editor de temas capacidade de criar e modificar formulários adaptáveis temas. Execute as etapas listadas neste artigo somente se tiver atualizado de uma versão que não tenha Editor de temas e você tem um investimento existente em temas criados usando arquivos Less/CSS (método do editor de pré-tema).
Um tema de formulário adaptável é uma biblioteca de cliente AEM usada para definir os estilos (aparência e comportamento) de um formulário adaptável.
Você cria um modelo adaptável e aplique o tema ao modelo. Use esse modelo personalizado para criar um formulário adaptável.
O procedimento a seguir é descrito usando nomes de exemplo para objetos AEM, como nó, propriedades e pastas.
Se você seguir essas etapas usando os nomes, o modelo resultante deverá ser semelhante ao seguinte:
Figura: Amostra de tema da floresta
Criar um nó do tipo cq:ClientLibraryFolder
no /apps
nó.
Por exemplo, crie o seguinte nó:
/apps/myAfThemes/forestTheme
Adicionar uma propriedade de cadeia de caracteres de vários valores categories
ao nó e defina seu valor adequadamente.
Por exemplo, defina a propriedade como: af.theme.forest
.
Adicionar duas pastas, less
e css
e um arquivo css.txt
ao nó criado na etapa 1:
less
pasta: Contém o less
arquivos variáveis nos quais você define a variável less
variáveis e less mixins
que são usados para gerenciar os estilos .css.
Esta pasta consiste em less
arquivos variáveis, less
mixin de arquivos, less
arquivos definindo estilos usando mixins e variáveis. E todos esses menos arquivos são importados em style.less.
css
pasta: contém os arquivos .css nos quais você define os estilos estáticos a serem usados no tema.
Menos arquivos de variáveis: esses são os arquivos, nos quais você define ou substitui as variáveis usadas na definição de estilos CSS.
Os formulários adaptáveis fornecem variáveis OOTB definidas nos seguintes arquivos .less:
/apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less
/apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less
Os formulários adaptáveis também fornecem variáveis de terceiros definidas no:
/apps/clientlibs/fd/af/third-party/less/variables.less
Você pode usar menos variáveis fornecidas com formulários adaptáveis, pode substituir essas variáveis ou pode criar novas menos variáveis.
Ao importar os arquivos do pré-processador less, na instrução import especifique o caminho relativo dos arquivos.
Variáveis de substituição de exemplo:
@button-background-color: rgb(19, 102, 44);
@button-border-color: rgb(19, 102, 44);
@button-border-size: 0px;
@button-padding: 10px 15px;
@button-font-color: #ffffff;
Para substituir o less
variáveis:
Importar variáveis de formulário adaptáveis padrão:
/apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less/apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less
Em seguida, importe o menor arquivo que inclui variáveis substituídas.
Exemplo de novas definições de variáveis:
@button-focus-bg-color: rgb(40, 208, 90);
@button-hover-bg-color: rgb(30, 156, 67);
Menos arquivos mixin: Você pode definir as funções que aceitam variáveis como argumentos. A saída dessas funções são os estilos resultantes. Use esses mixins em diferentes estilos para evitar a repetição de estilos CSS.
Os formulários adaptáveis fornecem mixins OOTB definidos em:
/apps/clientlibs/fd/af/guidetheme/common/less/adaptiveforms-mixins.less
Os formulários adaptáveis também fornecem mixins de terceiros definidos em:
/apps/clientlibs/fd/af/third-party/less/mixins.less
Definição de mixin de exemplo:
.rounded-corners (@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
.border(@color, @type, @size) {
border: @color @size @type;
}
Arquivo Styles.less: Use esse arquivo para incluir menos arquivos (variáveis, mixins, estilos) que você precisa usar na biblioteca do cliente.
Na amostra a seguir styles.less
a instrução import pode ser colocada em qualquer ordem.
As instruções para importar os seguintes arquivos .less são obrigatórias:
globalvariables.less
layoutvariables.less
components.less
layouts.less
@import "../../../clientlibs/fd/af/guidetheme/common/less/globalvariables.less";
@import "../../../clientlibs/fd/af/guidetheme/common/less/layoutvariables.less";
@import "forestTheme-variables";
@import "../../../clientlibs/fd/af/guidetheme/common/less/components.less";
@import "../../../clientlibs/fd/af/guidetheme/common/less/layouts.less";
/* custom styles */
.guidetoolbar {
input[type="button"], button, .button {
.rounded-corners (@button-radius);
&:hover {
background-color: @button-hover-bg-color;
}
&:focus {
background-color: @button-focus-bg-color;
}
}
}
form {
background-image: url(../images/forest.png);
background-repeat: no-repeat;
background-size: 100%;
}
A variável css.txt
contém os caminhos de arquivos .css a serem baixados para a biblioteca.
Por exemplo:
#base=/apps/clientlibs/fd/af/third-party/css
bootstrap.css
#base=less
styles.less
#base=/apps/clientlibs/fd/xfaforms/xfalib/css
datepicker.css
listboxwidget.css
scribble.css
dialog.css
O arquivo style.less não é obrigatório. Isso significa que não é necessário criar esse arquivo se você não tiver definido estilos, variáveis ou mixins personalizados.
No entanto, se você não criar um arquivo style.less, no arquivo css.txt, será necessário remover o comentário da seguinte linha:
#base=less
E comente a seguinte linha:
styles.less
Depois de criar um tema de formulário adaptável, execute as seguintes etapas para usar esse tema em um formulário adaptável:
Para incluir o tema criado em para criar um tema de formulário adaptável , crie uma página personalizada do tipo cq:Component
.
Por exemplo, /apps/myAfCustomizations/myAfPages/forestPage
Adicionar um sling:resourceSuperType
propriedade e defina seu valor como fd/af/components/page/base
.
Para usar um tema na página, você precisa adicionar um arquivo de substituição library.jsp ao nó.
Em seguida, importe o tema criado na seção Para criar um tema de formulário adaptável deste artigo.
O trecho de código de amostra a seguir importa o af.theme.forest
tema.
<%@include file="/libs/fd/af/components/guidesglobal.jsp"%>
<cq:includeClientLib categories="af.theme.forest"/>
Opcional: na página personalizada, substitua header.jsp, footer.jsp e body.jsp, conforme necessário.
Criar um modelo personalizado (por exemplo: /apps/myAfCustomizations/myAfTemplates/forestTemplate
) cujo jcr:content aponta para a página personalizada criada na etapa anterior (por exemplo: myAfCustomizations/myAfPages/forestPage)
.
Crie um Formulário adaptável usando o modelo criado na etapa anterior. A aparência do formulário adaptável é definida pelo tema criado na seção Para criar um tema de formulário adaptável deste artigo.