Criação de temas de formulário adaptáveis personalizados creating-custom-adaptive-form-themes

Crie um nó do tipo cq:ClientLibraryFolder sob o nó /apps.

Por exemplo, crie o seguinte nó:

/apps/myAfThemes/forestTheme

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

Adicione duas pastas, less e css, e um arquivo css.txt ao nó criado na etapa 1:

• Pasta less: contém os arquivos de variáveis less nos quais você define as variáveis less e less mixins que são usadas para gerenciar os estilos .css.

  Esta pasta consiste em less arquivos de variáveis, less arquivos de mixin, less arquivos definindo estilos usando mixins e variáveis. E todos esses less arquivos são importados com style.less.

• csspasta: contém os arquivos .css nos quais você define os estilos estáticos a serem usados no tema.

Menos arquivos de variáveis: são os arquivos em que você define ou substitui as variáveis usadas na definição de estilos CSS.

Os formulários adaptáveis fornecem variáveis prontas para uso definidas nos seguintes .less arquivos:

• /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 as variáveis less fornecidas com formulários adaptáveis, pode substituir essas variáveis ou pode criar novas variáveis less.

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 as lessvariáveis:

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

2. 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 de 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 prontos para uso 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 este arquivo para incluir todos os less arquivos (variáveis, mixins, estilos) que você deve usar na biblioteca do cliente.

No arquivo de amostra styles.less a seguir, a instrução import pode ser colocada em qualquer ordem.

As instruções para importar os .less arquivos a seguir 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%;
}

O 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

Para incluir o tema criado em para criar uma seção de tema de formulário adaptável, crie uma página personalizada do tipo cq:Component.

Por exemplo, /apps/myAfCustomizations/myAfPages/forestPage

1. Adicione uma propriedade sling:resourceSuperType e defina seu valor como fd/af/components/page/base.

   

2. Para usar um tema na página, você deve adicionar um arquivo de substituição library.jsp ao nó.

   Em seguida, você pode importar o tema criado na seção Para criar um tema de formulário adaptável deste artigo.

   O trecho de código de exemplo a seguir importa o tema af.theme.forest.

   code language-jsp
   <%@include file="/libs/fd/af/components/guidesglobal.jsp"%> <cq:includeClientLib categories="af.theme.forest"/>

3. Opcional: na página personalizada, substitua header.jsp, footer.jsp e body.jsp, conforme necessário.

Crie um modelo personalizado (por exemplo: /apps/myAfCustomizations/myAfTemplates/forestTemplate) cujo jcr:content aponte para uma 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.