Création de thèmes de formulaires adaptatifs personnalisés creating-custom-adaptive-form-themes

Créez un nœud de type cq:ClientLibraryFolder sous le nœud /apps.

Par exemple, créez le nœud suivant :

/apps/myAfThemes/forestTheme

Ajoutez une propriété à chaîne multi-valeur categories au nœud et définissez correctement sa valeur.

Par exemple, définissez la propriété sur : af.theme.forest.

Ajoutez deux dossiers, less et css, et un fichier css.txt au nœud créé à l’étape 1 :

• Le dossier less contient les fichiers de variables less dans lesquels vous définissez les variables less et les éléments less mixins utilisés pour gérer les styles .css.

  Ce dossier se compose de fichiers de variables less, de fichiers mixin less et de fichiers less de définition utilisant les mixins et les variables. Et tous ces fichiers less sont ensuite importés dans styles.less.

• dossiercss : contient les fichiers .css dans lesquels vous définissez les styles statiques à utiliser dans le thème.

Fichiers de variables less  : il s’agit des fichiers dans lesquels vous définissez ou remplacez les variables utilisées pour définir les styles CSS.

Les formulaires adaptatifs fournissent des variables prêtes à l’emploi définies dans les fichiers .less suivants :

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

Les formulaires adaptatifs offrent également des variables tierces définies dans :

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

Vous pouvez utiliser les variables less fournies avec les formulaires adaptatifs, vous pouvez remplacer ces variables ou créer de nouvelles variables less.

Exemples de variables de remplacement :

@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;

Pour remplacer les variables less :

1. Importez les variables de formulaire adaptatif par défaut :

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

2. Importez ensuite le fichier less contenant les variables remplacées.

Exemples de définitions de nouvelles variables :

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

Fichiers mixin less : Vous pouvez définir les fonctions qui acceptent les variables comme arguments. Les styles résultants constituent la sortie de ces fonctions. Utilisez ces mixins dans différents styles afin d’éviter la répétition de styles CSS.

Les formulaires adaptatifs offrent également des mixins prêts à l’emploi définis dans :

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

Les formulaires adaptatifs offrent également des mixins tiers définis dans :

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

Exemple de définition de mixin :

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

Fichier styles.less : utilisez ce fichier pour inclure tous les fichiers less (variables, mixins, styles) que vous devez utiliser dans la bibliothèque cliente.

Dans l’exemple de fichier styles.less suivant, les instructions d’importation peuvent être placées dans n’importe quel ordre.

Les instructions pour importer les fichiers .less suivants sont obligatoires :

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

Le dossier css.txt contient les chemins des fichiers .css à télécharger pour la bibliothèque.

Par exemple :

#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

Pour inclure le thème créé dans Création d’un thème de formulaire adaptatif, créez une page personnalisée de type cq:Component.

Par exemple, /apps/myAfCustomizations/myAfPages/forestPage

1. Ajoutez une propriété sling:resourceSuperType et définissez sa valeur sur fd/af/components/page/base.

   

2. Pour utiliser un thème dans la page, vous devez ajouter au nœud un fichier de remplacement library.jsp.

   Vous pouvez ensuite importer le thème créé dans la section Création d’un thème de formulaire adaptatif de cet article.

   L’exemple de fragment de code suivant importe le thème af.theme.forest.

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

3. Facultatif  : dans la page personnalisée, remplacez les fichiers header.jsp, footer.jsp, et body.jsp le cas échéant.

Créez un modèle personnalisé (par exemple : /apps/myAfCustomizations/myAfTemplates/forestTemplate) dont le jcr:content pointe vers la page personnalisée créée à l’étape précédente (par exemple : myAfCustomizations/myAfPages/forestPage).

Créez un formulaire adaptatif en utilisant le modèle créé à l’étape précédente. L’aspect du formulaire adaptatif est défini par le thème créé dans la section Création d’un thème de formulaire adaptatif de cet article.