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

CAUTION
AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.
CAUTION
AEM Forms fournit la fonctionnalité Éditeur de thèmes, qui permet de créer et de modifier des thèmes de formulaires adaptatifs. Exécutez les étapes mentionnées dans cet article uniquement si vous avez effectué une mise à niveau à partir d’une version qui ne dispose pas de l’Éditeur de thèmes et que vous possédez déjà des thèmes créés à l’aide de fichiers Less/CSS (méthode antérieure à l’Éditeur de thèmes).

Prérequis prerequisites

Thème de formulaire adaptatif adaptive-form-theme

Un thème de formulaire adaptatif est une bibliothèque cliente AEM que vous utilisez pour définir les styles (apparence) d’un formulaire adaptatif.

Vous pouvez créer une modèle adaptatif et appliquez le thème au modèle. Vous pouvez ensuite utiliser ce modèle personnalisé pour créer une formulaire adaptatif.

Formulaire adaptatif et bibliothèque cliente

Pour créer un thème de formulaire adaptatif to-create-an-adaptive-form-theme

NOTE
La procédure suivante est décrite à l’aide d’exemples de noms pour des objets AEM tels que le noeud, les propriétés et les dossiers.
Si vous procédez comme suit en utilisant les noms, le modèle résultant ressemble normalement à l’instantané suivant :

Aperçu d’un formulaire adaptatif avec thème Forêt
Figure : Exemple de thème Forêt

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

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

    Instantané du référentiel CRX

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

    note note
    NOTE
    Lors de l’importation des fichiers du préprocesseur less, spécifiez le chemin d’accès relatif des fichiers dans l’instruction d’importation.

    Exemples de variables de remplacement :

    code language-none
    @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 :

    code language-none
    @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. La sortie de ces fonctions correspond aux styles résultants. Utilisez ces mixins dans différents styles pour éviter de répéter les styles CSS.

    Les formulaires adaptatifs fournissent 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 :

    code language-none
    .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 fichierstyles.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
    code language-none
    @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 :

    code language-none
    #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
    
    note note
    NOTE
    Le fichier styles.less n’est pas obligatoire. Cela signifie que vous n’avez pas besoin de créer ce fichier si vous n’avez défini aucun style, variable ou mixin personnalisé.
    Cependant, si vous ne créez pas de fichier style.less, dans le fichier css.txt, vous devez annuler la mise en commentaire de la ligne suivante :
    #base=less
    Et commenter la ligne suivante :
    styles.less

Pour utiliser un thème dans un formulaire adaptatif to-use-a-theme-in-an-adaptive-form

Après avoir créé un thème de formulaire adaptatif, effectuez les étapes suivantes pour utiliser ce thème dans un formulaire adaptatif :

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

      Instantané du référentiel CRX

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

      Vous importez ensuite le thème créé dans la section Pour créer 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-none
      <%@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.

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

    Instantané du référentiel CRX

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

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da