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

Criar um nó do tipo cq:ClientLibraryFolder no /appsnó.

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 csse 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 tudo isso less os arquivos são importados no 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: esses 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 no seguinte .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 o less fornecidas com formulários adaptáveis, você pode substituir essas variáveis ou criar novas less variáveis.

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 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 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 todas as less arquivos (variáveis, mixins, estilos) que você deve 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 o seguinte .less os arquivos são obrigatórios:

• 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

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

1. Adicionar um sling:resourceSuperType propriedade 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 amostra a seguir importa o af.theme.forest tema.

   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.

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.