Crear temáticas de formularios adaptables personalizadas creating-custom-adaptive-form-themes

Crear un nodo de tipo cq:ClientLibraryFolder en el nodo /apps.

Por ejemplo, cree el siguiente nodo:

/apps/myAfThemes/forestTheme

Agregue una propiedad categories de cadena de varios valores al nodo y establezca su valor apropiadamente.

Por ejemplo, establezca la propiedad en: af.theme.forest.

Agregue dos carpetas, less y css y un archivo css.txt al nodo creado en el paso 1:

• less carpeta: Contiene los archivos de la variable less en los que define las variables less y less mixins que se utilizan para administrar los estilos .css.

  Esta carpeta consta de less archivos de variables, less archivos de mezcla, less archivos que definen estilos mediante mezclas y variables. Y todos estos less archivos se importan en styles.less.

• css carpeta: Contiene los archivos .css en los que se definen los estilos estáticos que se utilizarán en la temática.

Archivos de variables Less: estos son los archivos donde define o anula las variables que se usan para definir estilos CSS.

Los formularios adaptables proporcionan variables predeterminadas definidas en los siguientes .less archivos:

• /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less
• /apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less

Los formularios adaptables también proporcionan variables de terceros definidas en:

/apps/clientlibs/fd/af/third-party/less/variables.less

Puede utilizar las variables less que se proporcionan con los formularios adaptables, puede anular estas variables o crear nuevas variables less.

Variables de anulación de ejemplo:

@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 anular la variable less:

1. Importe variables de formulario adaptable predeterminadas:

   /apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less/apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less

2. A continuación, importe el archivo Less que incluya variables anuladas.

Ejemplo de nuevas definiciones de variables:

@button-focus-bg-color: rgb(40, 208, 90);
@button-hover-bg-color: rgb(30, 156, 67);

Archivos de mezcla Less: puede definir las funciones que aceptan variables como argumentos. El resultado de estas funciones son los estilos resultantes. Utilice estas mezclas en diferentes estilos para evitar la repetición de estilos CSS.

Los formularios adaptables proporcionan mezclas integradas definidas en lo siguiente:

• /apps/clientlibs/fd/af/guidetheme/common/less/adaptiveforms-mixins.less

Los formularios adaptables también proporcionan mezclas de terceros definidas en:

• /apps/clientlibs/fd/af/third-party/less/mixins.less

Definición de mezcla de muestra:

.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;
}

Archivo Styles.less: Use este archivo para incluir todos los archivos less (variables, mezclas, estilos) que debe usar en la biblioteca de cliente.

En el siguiente archivo de ejemplo styles.less, la instrucción import se puede colocar en cualquier orden.

Las instrucciones para importar los siguientes .less archivos son obligatorias:

• 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%;
}

El css.txt contiene las rutas de los archivos .css que se van a descargar para la biblioteca.

Por ejemplo:

#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 la temática creada en para crear una temática de formulario adaptable, cree una página personalizada de tipo cq:Component.

Por ejemplo, /apps/myAfCustomizations/myAfPages/forestPage.

1. Agregue una propiedad sling:resourceSuperType y establezca su valor como fd/af/components/page/base.

   

2. Para utilizar una temática en la página, debe agregar un archivo de anulación library.jsp al nodo.

   A continuación, puede importar la temática creada en la sección Crear una temática de formulario adaptable de este artículo.

   El siguiente fragmento de código de ejemplo importa la temática af.theme.forest.

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

3. Opcional: en la página personalizada, reemplace header.jsp, footer.jsp y body.jsp, según sea necesario.

Cree una plantilla personalizada (por ejemplo: /apps/myAfCustomizations/myAfTemplates/forestTemplate) cuyo jcr:content apunta a la página personalizada creada en el paso anterior (por ejemplo: myAfCustomizations/myAfPages/forestPage).

Crear un formulario adaptable mediante la plantilla creada en el paso anterior. El aspecto del formulario adaptable se define mediante la temática creada en la sección Crear una temática del formulario adaptable de este artículo.