Création et utilisation des thèmes creating-and-using-themes

Adobe recommande d’utiliser la capture de données moderne et extensible. Composants principauxpour création d’un Forms adaptatifou Ajout de Forms adaptatif à des pages AEM Sites. Ces composants représentent une avancée significative dans la création de Forms adaptatif, ce qui garantit des expériences utilisateur impressionnantes. Cet article décrit l’approche plus ancienne de la création de Forms adaptatif à l’aide de composants de base.

Version
Lien de l’article
AEM 6.5
Cliquez ici
AEM as a Cloud Service
Cet article

Vous pouvez créer et appliquer des thèmes pour styliser un formulaire adaptatif. Un thème contient des détails de style pour les composants et les panneaux. Ces styles incluent les propriétés telles que les couleurs d’arrière-plan, les couleurs d’état, la transparence, l’alignement et la taille. Lorsque vous appliquez un thème, le style spécifié se reflète sur les composants correspondants. Le thème est géré indépendamment sans référence à un formulaire adaptatif.

Vous pouvez télécharger et installer le package de contenu de référence AEM Forms à partir du portail de distribution logicielle pour importer des thèmes et modèles de référence dans votre environnement.

Création, téléchargement ou chargement d’un thème creating-downloading-or-uploading-a-theme

Un thème est créé et enregistré en tant qu’entité distincte, avec des propriétés de métadonnées telles que les formulaires adaptatifs. Il permet de réutiliser un thème dans plusieurs formulaires adaptatifs. Vous pouvez également déplacer un thème vers une autre instance et le réutiliser.

Création d’un thème creating-a-theme

Pour créer un thème :

  1. Cliquez sur Adobe Experience Manager, sur Formulaires, puis sur Thèmes.

  2. Sur la page Thèmes, cliquez sur Créer > Thème.
    Un assistant de création de thème se lance.

  3. Spécifiez le Nom du thème.

  4. Spécifiez un formulaire pour prévisualiser le thème dans le champ Prévisualisation par défaut pour ce thème. Cliquez sur Utiliser la valeur par défaut pour utiliser le formulaire par défaut pour prévisualiser le thème.

  5. Spécifiez un Conteneur de configurations. Vous pouvez choisir un Conteneur de configurations comportant les détails de la configuration d’Adobe Font pour votre compte. Vous pouvez également laisser l’option vide pour l’instant et spécifier les détails ultérieurement à partir des propriétés du thème.

  6. Cliquez sur Créer, puis sur Modifier pour ouvrir le thème dans l’éditeur de thèmes, ou cliquez sur Terminé pour revenir à la page de thèmes.

Différence des thèmes entre Experience Manager 6.5 Forms et les versions antérieures difference-in-themes

Thèmes créés sur une instance de Cloud Service.

  • Portent la version numéro 2.

  • Sont stockés à /content/dam/formsanddocuments-themes/<theme-name>/

  • Ne fournissent pas d’option de bibliothèque cliente. Vous ne pouvez pas spécifier de catégorie et de chemin de bibliothèque cliente.

  • Ne disposent pas d’autorisations en écriture et de mise à jour sur l’emplacement /apps (le groupe Forms-user ne dispose pas d’autorisations en écriture et de mise à jour sur l’emplacement /apps).

  • Avant de télécharger un thème créé sur Experience Manager Forms 6.5 ou des versions antérieures sur une instance de Cloud Service, vérifiez que l’emplacement de la bibliothèque cliente est défini sur etc/clientlibs/fd/themes. Si la bibliothèque cliente n’existe pas dans le dossier etc, mettez manuellement à jour l’emplacement sur etc/clientlibs/fd/themes. Vous pouvez effectuer la modification sur votre instance Experience Manager Forms 6.5 ou versions antérieures. Après avoir défini l’emplacement de la bibliothèque cliente, un administrateur peut télécharger des thèmes sur l’instance de Cloud Service ou utiliser l’outil de transfert de contenu pour migrer les thèmes de la version 6.5 ou des instances de version précédente vers l’instance de Cloud Service.

    Modifiez également le nom de la catégorie. Si le nom n’est pas modifié, une erreur theme with same category name exists peut se produire. Lorsque vous modifiez le nom de la catégorie, cela n’a aucune incidence sur les formulaires adaptatifs qui utilisent le thème.

Téléchargement d’un thème downloading-a-theme

Vous pouvez exporter des thèmes dans un fichier .zip et les utiliser dans d’autres projets ou instances Experience Manager. Pour télécharger un thème :

  1. Cliquez sur Adobe Experience Manager, sur Formulaires, puis sur Thèmes.

  2. Dans la page Thèmes, sélectionnez un thème, puis cliquez sur Télécharger. Une boîte de dialogue contenant les détails du thème s’affiche.

  3. Cliquez sur Télécharger. Le thème est téléchargé sous forme de fichier .zip.

NOTE
Si vous téléchargez un thème auquel un formulaire adaptatif est associé et que ce dernier est basé sur un modèle personnalisé, téléchargez également le modèle personnalisé. Lorsque vous chargez le thème et le formulaire adaptatif téléchargés, chargez également le modèle personnalisé associé.

Chargement d’un thème uploading-a-theme

Un utilisateur disposant de droits d’administrateur peut télécharger un thème créé dans Experience Manager Forms 6.5 ou des versions antérieures.

Pour charger un thème :

  1. Cliquez sur Adobe Experience Manager, sur Formulaires, puis sur Thèmes.

  2. Sur la page Thèmes, cliquez sur Créer > Chargement de fichier.

  3. Dans l’invite de téléchargement de fichier, recherchez et sélectionnez un package de thème sur votre ordinateur et cliquez sur Charger.
    Le thème chargé est disponible dans la page Thèmes.

Métadonnées d’un thème metadata-of-a-theme

Liste de propriétés des métadonnées d’un thème (sur la page Propriétés d’un thème).

ID
Nom
Peut être modifié
Description de la propriété
1.
Titre
Oui
Nom d’affichage du thème.
2.
Description
Oui
Description du thème.
3.
Type
Non
  • Type d’actif.
  • La valeur est toujours Thème.
4.
Créé
Non
Date de création du thème
5.
Nom de l’auteur
Oui
Auteur du thème. Calculé au moment de la création du thème.
6.
Date de la dernière modification
Non
Date à laquelle le thème a été modifié la dernière fois.
7.
État
Non
Statut du thème (modifié/publié).
8.
Heure d’activation de la publication
Oui
Heure de publication automatique du thème.
9.
Heure de désactivation de la publication
Oui
Heure de désactivation de la publication automatique du thème.
10.
Balises
Oui
Libellé associé au thème pour l’identification utilisée pour améliorer la recherche.

À propos de l’éditeur de thèmes about-the-theme-editor

C’est une interface conviviale pour les utilisateurs professionnels et les concepteurs Web/développeurs qui fournit les fonctionnalités nécessaires pour spécifier le style de différents éléments des formulaires adaptatifs facilement. Lorsque vous créez un thème, il est stocké en tant qu’entité distincte comme les formulaires .

L’éditeur de thèmes vous permet de personnaliser les styles des composants mis en forme dans un thème. Vous pouvez personnaliser l’apparence d’un formulaire sur un appareil.

L’éditeur de thèmes est divisé en deux panneaux :

  • Zone de travail : apparaît du côté droit. Elle montre un exemple de formulaire adaptatif dans lequel toutes les modifications de style sont immédiatement répercutées. Vous pouvez également sélectionner des objets directement à partir de la zone de travail pour consulter les styles qui y sont associés et les modifier. Une règle de résolution de l’appareil dans la partie supérieure régit la zone de travail. La sélection d’un point d’arrêt de résolution de la règle affiche l’aperçu de l’exemple de formulaire à la résolution appropriée. La zone de travail est expliquée en détails ci-dessous.

  • Barre latérale : apparaît sur le côté gauche. Elle comporte les éléments suivants :

    • Sélecteur : affiche le composant sélectionné pour le style, ainsi que ses propriétés dont vous pouvez définir le style. Le sélecteur représente tous les composants d’un type. Si vous sélectionnez un composant de zone de texte dans un thème pour la mise en forme, toutes les zones de texte de votre formulaire héritent du style. Les sélecteurs vous permettent de choisir un composant générique ou un composant spécifique pour le style. Par exemple, un composant de champ est un composant générique, et une zone de texte est un composant spécifique.

      Mettre en forme un composant générique : un champ peut être un champ de zone numérique, tel que l’âge, ou un champ de zone de texte, tel qu’une adresse.
      Lorsque vous mettez en forme un champ, tous les champs tels que l’âge, le nom et l’adresse sont stylisés.

      Mise en forme d’un composant spécifique : un composant spécifique a un impact sur les objets de la catégorie spécifique. Lorsque vous appliquez un style au composant numérique de la zone dans le thème, seul l’objet numérique de zone hérite du style.

      Par exemple, un champ de type boîte de texte tel que l’adresse est plus long et un champ de type boîte numérique tel que l’âge est plus court. Vous pouvez sélectionner un champ de zone numérique, réduire sa longueur et l’appliquer à votre formulaire. La largeur de tous les champs de zone numérique est réduite dans votre formulaire.

      Lorsque vous personnalisez tous les composants de champ avec une couleur d’arrière-plan spécifique, tous les champs tels que l’âge, le nom et l’adresse héritent de la couleur d’arrière-plan. Lorsque vous sélectionnez une zone numérique, telle que l’âge, et réduisez sa largeur, toutes les zones numériques telles que l’âge et le nombre de personnes dans une famille sont réduites. La largeur des champs de texte n’est pas modifiée.

    • Etat : vous permet de personnaliser les styles d’un objet dans un état spécifique. Par exemple, vous pouvez spécifier l’aspect d’un objet lorsqu’il est à l’état par défaut, mis au point, désactivé, survolé ou d’erreur.

    • Catégories de propriété : les propriétés de style sont divisées en différentes catégories. Par exemple : Dimension et position, Texte, Arrière-plan, Bordure et Effets. Sous chaque catégorie, vous fournissez des informations de mise en forme. Par exemple, sous Arrière-plan, vous pouvez indiquer la Couleur d’arrière-plan, l’Image et le Dégradé de l’arrière-plan.

    • Avancé : vous permet d’ajouter le CSS personnalisé à un objet, ce qui remplace les contrôles visuels de propriétés définis en cas de chevauchement.

    • Affichage CSS : vous permet d’afficher le fichier CSS du composant sélectionné.

    En outre, dans la barre latérale, vous verrez une flèche dans la partie inférieure. Lorsque vous cliquez sur la flèche, vous bénéficiez de deux options supplémentaires : Simuler la réussite et Simuler une erreur. Ces options, ainsi que les options décrites ci-dessus, sont expliquées en détails ci-dessous.

Éditeur de thèmes A. Barre latérale B. Zone de travail

Mise en forme des composants styling-components

Vous pouvez utiliser un thème dans plusieurs formulaires adaptatifs, ce qui importe la mise en forme des composants de formulaire que vous avez spécifiée dans le thème. Vous pouvez mettre en forme différents composants, tels que les titres, la description, les panneaux, les champs, les icônes et les zones de texte. Utilisez des widgets pour configurer les propriétés des composants dans un thème. La connaissance préalable du code CSS ou LESS n’est pas obligatoire mais souhaitée, même si la section Remplacements de CSS vous permet d’écrire un code CSS ou de fournir des sélecteurs personnalisés. La section Remplacements de CSS apparaît lorsque vous sélectionnez un composant dans la barre latérale.

Composants pouvant être mis en forme dans la barre latérale

Les options de la barre latérale vous permettent de sélectionner et de mettre en forme différents composants.

Cliquer sur le bouton Modifier au niveau d’un composant dans la barre latérale sélectionne le composant dans Zone de travail et vous permet de mettre en forme le composant à l’aide des options de la barre latérale.

Certains composants tels que la zone de texte, la zone numérique, le bouton radio et la case à cocher sont classés sous des composants génériques comme Champ. Par exemple, vous souhaitez personnaliser le style des boutons radio. Pour sélectionner des boutons radio à mettre en forme, sélectionnez Champ > Widget > Bouton radio.

Mettre en forme les mises en page de panneaux styling-panel-layouts-br

Les thèmes dans AEM Forms prennent en charge la mise en forme d’éléments de la disposition des panneaux dans vos formulaires. La mise en forme d’éléments de mises en page prêtes à l’emploi et personnalisées est prise en charge.

Les panneaux prêts à l’emploi comprennent :

  • Onglets sur la gauche

  • Onglets dans la partie supérieure

  • Accordéon

  • Assistant

  • réactif

  • Mise en page mobile

    • Titres de panneau dans l’en-tête
    • Sans titres de panneau dans l’en-tête

Les sélecteurs varient pour chaque mise en page.
La mise en forme des dispositions personnalisées à partir de l’éditeur de thèmes implique ce qui suit :

  • La définition des composants pour une mise en page pouvant être mise en forme, et les sélecteurs CSS pour identifier de manière unique ces composants.
  • La définition des propriétés CSS pouvant être appliquées sur ces composants.
  • Définissez la mise en forme de ces composants de manière interactive à partir de l’interface utilisateur.

Différents styles pour différentes tailles d’écran different-styles-for-different-screen-sizes-br

Les dispositions sur les appareils de bureau et mobiles ont parfois des styles légèrement ou entièrement différents. Pour les appareils mobiles, la tablette et le téléphone partagent des dispositions similaires, à l’exception des tailles des composants.

Utilisez des points d’arrêt de l’éditeur de thèmes pour définir une autre mise en forme pour différents formats d’écran. Vous pouvez sélectionner un appareil ou une résolution de base sur lesquels vous commencez à générer le thème ; les variantes de mise en forme pour les autres résolutions sont générées automatiquement. Vous pouvez explicitement modifier la mise en forme pour toutes les résolutions.

NOTE

Mettre en forme des modifications en contexte des propriétés de la barre latérale lors de la sélection d’objets styling-properties-context-changes-in-sidebar-on-selecting-objects

Lorsque vous sélectionnez un composant dans Zone de travail, ses propriétés de mise en forme sont répertoriées dans la barre latérale. Sélectionnez le type d'objet et son état, puis indiquez sa mise en forme.

Styles récemment utilisés dans l’éditeur de thèmes recently-used-styles-in-theme-editor

L’éditeur de thèmes met en cache jusqu’à dix styles appliqués à un composant. Vous pouvez utiliser les styles mis en cache avec d’autres composants d’un thème. Les styles récemment utilisés sont disponibles juste en dessous du composant sélectionné dans la barre latérale sous forme de liste. Au début, la liste de styles récemment utilisée est vide.

Bibliothèque de ressources

Lorsque vous mettez en forme un composant, les styles sont mis en cache et répertoriés dans la zone de liste. Dans cet exemple, le libellé de la zone de texte est mis en forme pour modifier la taille et la couleur de la police. Vous pouvez suivre les mêmes étapes pour choisir une image ou modifier les couleurs pour appliquer un style à un composant. Observez comment le style est mis en cache et répertorié dans la zone de liste lorsque le style du libellé du champ est modifié.

Style de police d’un composant mis en cache disponible pour un autre composant

Dans cet exemple, le style du libellé du champ est modifié. Lorsque l’option Description du panneau réactif est sélectionnée pour le style, une entrée de liste est ajoutée à la bibliothèque de ressources. L’entrée dans la bibliothèque de ressources peut être utilisée pour modifier le style de la description du panneau réactif.

Lorsqu’un style est ajouté à la bibliothèque de ressources, il est disponible pour d’autres thèmes et dans le mode Style de l’éditeur de formulaires UI. De même, lorsque vous utilisez le mode Style de l’éditeur de formulaires pour personnaliser un composant, le style est mis en cache et disponible dans les thèmes.

Le bouton Plus de la bibliothèque de ressources vous permet d’enregistrer le style de façon permanente avec le nom de votre choix. Le bouton Plus enregistre le style, même si vous ne cliquez pas sur le bouton Enregistrer dans la barre latérale pour appliquer le style à un composant. Le bouton Plus permettant d’enregistrer un style pour une utilisation ultérieure n’est pas disponible en mode Style.

Attribution d’un nom de style personnalisé pour la bibliothèque de ressources

Lorsque vous indiquez un nom personnalisé pour un style, le style est lié à un thème et n’est plus disponible pour les autres thèmes. Pour supprimer un style enregistré :

  1. Dans la barre d’outils ZONE DE TRAVAIL, cliquez sur Options du thème theme-options > Gérer les styles.

  2. Dans la boîte de dialogue Gérer les styles, sélectionnez un style enregistré, cliquez sur Supprimer.

    Supprimer le style enregistré

Prévisualiser, enregistrer et ignorer les modifications en direct live-preview-save-and-discard-changes

Les modifications apportées à la mise en forme sont immédiatement répercutées dans le formulaire chargé dans la zone de travail. L’aperçu en direct vous permet de définir et de visualiser de manière interactive l’impact de la mise en forme. Lorsque vous modifiez la mise en forme d’un composant, le bouton Terminé est activé dans la barre latérale. Pour conserver les modifications, utilisez le bouton Terminé.

NOTE
Lorsqu’un caractère non valide est saisi dans un champ, la couleur de la limite du champ devient rouge et un message d’erreur s’affiche dans le coin supérieur gauche de l’écran. Par exemple, si vous saisissez des lettres dans une zone de texte qui accepte les caractères numériques comme entrées, la couleur de la bordure de la zone de saisie devient rouge. Vous ne pouvez pas enregistrer un tel thème sans résoudre l’erreur affichée au centre en bas de l’écran.

Thème avec un autre formulaire adaptatif theme-with-another-adaptive-form

Lorsque vous créez un thème, il est créé à l’aide d’un formulaire fourni avec l’éditeur de thèmes. Vous indiquez la mise en forme pour les composants de ce formulaire. Au lieu du formulaire fourni avec l’éditeur de thèmes, vous pouvez sélectionner un formulaire de votre choix pour définir une mise en forme et prévisualiser ses résultats.

Pour remplacer le formulaire actuel ou dans la zone de travail de l’éditeur de thèmes :

  1. Dans le panneau ÉDITEUR DE THÈMES, cliquez sur Options du thème theme-options >Configurer.

  2. Dans l’onglet Général, recherchez et sélectionnez un formulaire adaptatif ou une pour le champ Formulaire adaptatif.

Rétablir/annuler redo-undo

Vous pouvez annuler ou rétablir les modifications indésirables qui se produisent accidentellement. Utilisez les boutons Rétablir/annuler de la Zone de travail.

Rétablir et annuler des actions

Les boutons Rétablir/annuler apparaissent lorsque vous mettez en forme un composant dans l’éditeur de thèmes.

Utilisation de l’éditeur de thèmes using-the-theme-editor

L’éditeur de thèmes vous permet de modifier un thème que vous avez créé ou téléchargé. Accédez à Formulaires et documents > Thèmes, sélectionnez un thème et ouvrez-le. Le thème s’ouvre dans l’éditeur de thèmes.

Comme nous l’avons mentionné ci-dessus, l’éditeur de thèmes présente deux panneaux : Barre latérale et Zone de travail.
Éditeur de thèmes

Personnalisation du style de réussite du composant Widget de zone de texte dans l’éditeur de thèmes. Le composant est sélectionné dans la zone de travail, et son état est sélectionné dans la barre latérale. Les options de mise en forme disponibles dans la barre latérale sont utilisées pour personnaliser l’aspect d’un composant.

Utiliser la zone de travail using-canvas

Le thème est créé à l’aide du formulaire prêt à l’emploi ou du formulaire de votre choix. La zone de travail affiche un aperçu du formulaire ou de la utilisé(e) pour créer le thème avec les personnalisations spécifiées dans le thème. La règle au-dessus du formulaire est utilisée pour déterminer la disposition selon la taille de l’affichage de votre appareil.

Dans la barre d’outils de la zone de travail se trouvent les éléments suivants :

  • Activer/désactiver le panneau latéral toggle-side-panel : permet d’afficher ou de masquer la barre latérale.

  • Options du thème theme-options : propose trois options.

    • Configurer : propose des options pour sélectionner le formulaire de prévisualisation et la configuration Adobe Fonts.
    • Afficher le thème CSS : génère des CSS pour le thème sélectionné.
    • Gérer les styles : fournit des options de gestion des styles de texte et d’images
    • Aide : exécute une visite guidée de l’image de l’éditeur de thèmes.
  • Émulateur ruler : vous permet de simuler l’aspect de votre thème pour différentes tailles d’affichage. Une taille d’affichage est traitée comme un point d’arrêt dans l’émulateur. Vous pouvez sélectionner un point d’arrêt et spécifier un style pour ce point. Par exemple, Bureau et Tablette sont deux points d’arrêt. Vous pouvez spécifier différents styles pour chaque point d’arrêt.

Lorsque vous sélectionnez un composant dans la zone de travail, la barre d’outils du composant s’affiche au-dessus. La barre d’outils de composant vous permet de sélectionner des composants ou de passer aux composants génériques. Par exemple, vous sélectionnez une zone de texte numérique dans un panneau. Les options suivantes s’affichent dans la barre d’outils du composant :

  • Widget de zone numérique : vous permet de sélectionner le composant pour personnaliser son aspect dans la barre latérale.

  • Widget de champ : vous permet de sélectionner le composant générique pour la mise en forme. Dans cet exemple, tous les composants de saisie de texte (zone de texte/zone numérique/exécution numérique pas à pas/saisie de date) sont sélectionnés pour la mise en forme.

  • field-level : permet de sélectionner le composant parent pour la mise en forme. Si vous sélectionnez une zone numérique et cliquez sur cette icône, le composant de champ est sélectionné. Si vous sélectionnez un composant de champ et que vous sélectionnez cette icône, le panneau est sélectionné. Si vous continuez à appuyer sur cette icône pour la sélection, vous finissez par sélectionner le style de la mise en forme.

NOTE
Les options disponibles dans la barre d’outils de composants varient en fonction du composant sélectionné.

Utiliser la barre latérale using-rail

La barre latérale dans l’éditeur de thèmes fournit des options pour personnaliser les styles pour les composants d’un thème et pour utiliser des sélecteurs. Les sélecteurs vous permettent de sélectionner un groupe de composants ou des composants individuels ; vous pouvez également rechercher des sélecteurs dans la barre latérale. Vous pouvez écrire des sélecteurs pour les composants personnalisés.

Lorsque vous sélectionnez un composant dans la zone de travail ou des sélecteurs dans la barre latérale, cette dernière affiche toutes les options vous permettant de personnaliser les styles.
Vous trouverez ci-dessous les options qui s’affichent dans la barre latérale lorsque vous sélectionnez un composant :

  • État
  • Feuille de propriété
  • Simuler une erreur/un succès

État state

Un état est un indicateur d’interaction utilisateur avec un composant. Par exemple, lorsqu’un utilisateur saisit des données erronées dans une zone de texte, l’état des modifications de la zone de texte passe à un état d’erreur. L’éditeur de thèmes vous permet de spécifier un état spécifique.

Les options de personnalisation des styles d’état varient en fonction des différents composants.

Feuille de propriété property-sheet

Propriété
Utilisez
Dimensions et position

Permet de mettre en forme l’alignement, la taille, le positionnement et le placement des composants dans le thème.

Les options disponibles sont les paramètres d’affichage, le remplissage, la marge, la largeur, la hauteur et l’indice Z.

Vous pouvez également utiliser le mode Mise en page pour définir la largeur des composants à l’aide d’une interface simple par glisser-déposer. Pour plus d’informations, voir Utilisation du mode Mise en page pour redimensionner les composants.

Texte

Vous permet de personnaliser les styles de texte dans le composant du thème.

Par exemple, vous souhaitez modifier l’aspect du texte saisi dans la zone de texte.

Vos options sont les suivantes : famille de polices, épaisseur, couleur, taille, hauteur de ligne, alignement du texte, espacement, interlettrage, retrait du texte, surlignement, italique, transformation de texte, alignement vertical, ligne de base et orientation.

Contexte
Vous permet de remplir l’arrière-plan du composant par une image ou une couleur.
Bordure

Permet de choisir l’aspect de la bordure du composant. Par exemple, vous souhaitez que la zone de texte ait une bordure rouge foncé épaisse, avec une ligne en pointillé.

Les options disponibles sont : largeur, style, rayon et couleur de la bordure.

Effets
Vous permet d’ajouter des effets spéciaux aux composants, tels que l’opacité, le mode de fusion et les ombres.
Avancé

Permet d’ajouter :

  • Propriétés pour les pseudo éléments ::before et ::after pour ajouter du contenu après ou avant le contenu du sélecteur et le mettre en forme.
    Voir Pseudo-éléments CSS.
  • Code CSS personnalisé intégré à un composant.

Lorsque vous ajoutez un code CSS personnalisé, il remplace la personnalisation que vous avez ajoutée à l’aide des options de la barre latérale.

Simuler une erreur/la réussite simulate-error-success

Les options Simuler une erreur et une réussite sont situées en bas de la barre latérale. Vous pouvez les afficher à l’aide de la flèche afficher/masquer visible en bas de la barre latérale. À l’aide de l’éditeur de thèmes, vous pouvez définir le style des différents états d’un composant.

Par exemple, vous ajoutez un champ numérique dans votre formulaire, puis indiquez son style dans l’éditeur de thèmes. Lorsque les utilisateurs saisissent une valeur alphanumérique dans le champ, vous souhaitez que la couleur d’arrière-plan de la zone de texte change. Sélectionnez le champ numérique dans le thème, et utilisez l’option d’état dans la barre latérale. Vous sélectionnez l’état d’erreur dans la barre latérale et modifiez la couleur d’arrière-plan en rouge. Pour prévisualiser le comportement, vous pouvez utiliser l’option Simuler une erreur disponible dans la barre latérale. Les options Simuler une erreur et une réussite sont décrites en détails ci-dessous :

  • Simuler la réussite :
    vous permet de voir à quoi ressemble un composant si vous spécifiez sa mise en forme pour l’état de réussite. Par exemple, dans un formulaire, les clients définissent le mot de passe. Les utilisateurs peuvent définir un mot de passe en fonction des directives que vous donnez. Lorsqu’un utilisateur saisit un mot de passe en suivant tous les conseils que vous avez fournis, la zone de texte se met en vert. Lorsque la zone de texte passe au vert, elle est en état de réussite. Vous pouvez spécifier la mise en forme d’un composant dans l’état de réussite et simuler son aspect à l’aide de l’option Simuler la réussite.

  • Simuler une erreur:
    vous permet de voir à quoi ressemble un composant si vous spécifiez sa mise en forme pour l’état d’erreur. Par exemple, dans un formulaire, les clients définissent le mot de passe. Les utilisateurs peuvent définir un mot de passe en fonction des directives que vous donnez. Lorsqu’un utilisateur saisit un mot de passe qui ne suit pas toutes les directives données, la zone de texte passe au rouge. Lorsque la zone de texte passe au rouge, elle est en état d’erreur. Vous pouvez spécifier la mise en forme d’un composant à l’état d’erreur, et simuler son aspect à l’aide de l’option Simuler une erreur.

Mise en forme d’un composant styling-a-component

Par exemple, dans votre formulaire, vous disposez de deux types de zones de texte : une qui accepte uniquement les valeurs numériques et d’autres qui acceptent des valeurs alphanumériques. Vous pouvez personnaliser la mise en forme de la zone de texte acceptant les valeurs numériques uniquement (une zone numérique).

Pour personnaliser la mise en forme d’un composant particulier (une zone numérique dans cet exemple), procédez comme suit :

  1. Dans l’éditeur de thèmes, sélectionnez la zone numérique dans la zone de travail.

  2. Lorsque vous sélectionnez la zone numérique, vous pouvez afficher la barre d’outils des composants avec trois options :

    • Widget de zone numérique
    • Widget de champ
  3. Sélectionnez Widget de zone numérique.

  4. Le titre de la barre latérale passe à Widget de zone numérique et affiche des options pour personnaliser son aspect.
    Utilisez l’option Dimension et position dans la barre latérale pour personnaliser la taille du composant. Vérifiez que l’état est bien Par défaut.

Au lieu de sélectionner Widget de zone numérique, sélectionnez Widget de champ dans la barre d’outils de composants et effectuez les étapes ci-dessus. Quand vous sélectionnez des dimensions pour l’option Widget de champ, toutes les zones de texte, à l’exception de la zone numérique, ont la même taille.

Mise en forme des champs pour un état donné styling-fields-given-state

Avec la barre d’outils de composants, vous pouvez également spécifier la mise en forme des composants pour les différents états. Par exemple, si un composant est désactivé, il est à l’état désactivé. Les états généralement utilisés d’un composant que vous pouvez mettre en forme dans l’éditeur de thèmes sont les suivants : Par défaut, Activé, Désactivé, Erreur, Succès et Survol. Vous pouvez sélectionner un composant dans la zone de travail et utiliser l’option État de la zone de travail pour personnaliser son aspect.

Pour personnaliser la mise en forme d’un composant dans un état spécifique, procédez comme suit :

  1. Sélectionnez un composant dans la zone de travail, puis sélectionnez l’option appropriée dans la barre d’outils de composants.
    La barre latérale affiche les options de personnalisation de la mise en forme du composant.
  2. Sélectionnez un état dans la barre latérale. Par exemple, l’état Erreur.
  3. Utilisez des options telles que Bordure, Arrière-plan dans la barre latérale pour personnaliser l’aspect des composants.
  4. Utilisez l’option Simuler une erreur en bas de la barre latérale pour voir à quoi ressemble la mise en page lors de la modification.

Lorsque vous personnalisez la mise en forme d’un composant après avoir spécifié son état, la personnalisation s’affiche pour le composant uniquement pour l’état spécifié. Par exemple, si vous personnalisez la mise en forme du composant alors que l’état Survol est sélectionné. La personnalisation s’affiche pour le composant lorsque vous déplacez le pointeur de la souris sur le composant du formulaire rendu auquel vous appliquez le thème.

Pour simuler le comportement d’états autres que l’erreur et la réussite, utilisez le mode Aperçu. Pour utiliser le mode Aperçu, cliquez sur Aperçu dans la barre d’outils de la page.

Mise en forme des mises en page pour des écrans de plus petite taille styling-layouts-for-smaller-displays

Utilisez la règle dans la zone de travail pour sélectionner des points d’arrêt pour les appareils équipés de plus petits écrans. Cliquez sur l’émulateur ruler dans la zone de travail pour afficher la règle et les points d’arrêt. Les points d’arrêt vous permettent de prévisualiser un formulaire pour les formats d’affichage de différents appareils tels que les téléphones et les tablettes. Plusieurs formats d’affichage sont pris en charge dans l’éditeur de thèmes.

Pour mettre en forme des composants pour différents points d’arrêt :

  1. Dans la zone de travail, sélectionnez un point d’arrêt au-dessus de la règle.
    Un point d’arrêt représente un appareil mobile et son format d’affichage.
  2. Utilisez la barre latérale pour personnaliser la mise en forme des composants de formulaire dans le thème pour le format d’affichage sélectionné.
  3. Vérifiez que la personnalisation est enregistrée.

Vous pouvez mettre en forme des composants de formulaire pour plusieurs appareils. Les composants de formulaire pour les ordinateurs de bureau et les appareils mobiles ont parfois des styles totalement différents.

Utiliser des polices web dans un thème using-web-fonts-in-a-theme

Vous pouvez désormais utiliser les polices disponibles dans un service Web dans un formulaire adaptatif . Adobe Fonts, le service prêt à l’emploi de polices Web d’Adobe, est disponible sous forme de configuration. Pour utiliser Adobe Fonts, créez un kit, ajoutez-y des polices et obtenez l’identifiant du kit auprès de Adobe Fonts.

Pour configurer Adobe Fonts dans Experience Manager, effectuez les étapes suivantes :

  1. Dans l’instance d’auteur, cliquez sur Adobe Experience Manager Adobe Experience Manager ​ >​ Outils ​ hammer >​ Déploiement ​ >​ Cloud Services ​.

  2. Sur la page Cloud Services, accédez à l’option Adobe Fonts et ouvrez-la. Ouvrez le dossier de configuration, puis cliquez sur Créer.

  3. Dans la boîte de dialogue Créer une configuration, indiquez un titre pour la configuration et cliquez sur Créer.

    Vous êtes redirigé sur la page de configuration.

  4. Dans la boîte de dialogue Modifier le composant qui s’affiche, indiquez votre ID de kit, puis cliquez sur OK.

Pour configurer un thème pour utiliser la configuration Adobe Fonts, effectuez les étapes suivantes :

  1. Dans l’instance de l’auteur, ouvrez un thème dans l’éditeur de thèmes.

  2. Dans l’éditeur de thèmes, cliquez sur Options du thème theme-options > Configurer.

  3. Dans le champ Configuration d’Adobe Fonts, sélectionnez un kit et cliquez sur Enregistrer.

    Maintenant, vous pouvez voir que les polices sont ajoutées à la propriété font-family du thème.

Sélectionner des polices dans l’éditeur de thèmes selecting-fonts-in-theme-editor

Vous pouvez utiliser le bouton + pour ajouter une police. Lorsque vous ajoutez une police, elle est répertoriée dans la barre latérale.

Nouvelle police répertoriée dans l’éditeur de thèmes

Outre l’option de configuration du thème, vous pouvez également ajouter votre police à partir de l’éditeur de thème lui-même. Saisissez la police que vous souhaitez utiliser dans le champ de famille de polices sous la barre latérale et appuyez sur la touche Entrée de votre clavier.

Saisie et sélection d’une police dans l’éditeur de thèmes

Lorsque vous sélectionnez une police, elle est ajoutée sous la liste des familles de polices. Vous pouvez utiliser l’option Masque dans l’éditeur de thèmes pour désactiver ou activer les polices répertoriées.

Polices multiples

Vous pouvez voir la modification de la police du composant.

Le champ Famille de polices prend en charge plusieurs polices. Lorsque vous saisissez une police, le navigateur la recherche et l’applique au composant sélectionné. Si le navigateur ne trouve pas de police, il recherche une police qui se trouve à côté de celle-ci dans la famille. Vous pouvez commencer par saisir la police spécifique que vous recherchez. Si vous ne trouvez pas la police que vous souhaitez utiliser, vous pouvez saisir une police générique dans la famille et l’utiliser.

Masquage les styles appliqués dans l’éditeur de thèmes mask-styles-applied-in-theme-editor

Vous pouvez masquer les styles appliqués dans un thème. Dans la barre latérale de l’éditeur de thèmes, vous pouvez utiliser l’icône toggle_eye pour désactiver un style appliqué. Par exemple, si vous modifiez les dimensions d’un composant dans un formulaire , vous pouvez utiliser le bouton de masquage situé à gauche d’une propriété pour la désactiver. Lorsque vous enregistrez un thème, les options de masquage sélectionnées sont conservées.

Option de masque disponible dans la barre latérale de l’éditeur de thèmes

L’exemple ci-dessous montre des styles masqués et non masqués dans un thème.

Styles masqués et non masqués

Appliquer un thème à un formulaire applying-a-theme-to-a-form-or-interactive-communication-br

Pour appliquer un thème à un formulaire adaptatif :

  1. Ouvrez votre formulaire en mode d’édition. Pour ouvrir un formulaire en mode d’édition, sélectionnez-le et cliquez sur Ouvrir.

  2. En mode d’édition, sélectionnez un composant, puis cliquez sur field-level > Conteneur de formulaires adaptatifs, puis sur cmppr .

    Vous pouvez modifier les propriétés de votre formulaire dans la barre latérale.

  3. Dans la barre latérale, cliquez sur Mise en forme.

  4. Sélectionnez votre thème dans le menu déroulant Thème de formulaire adaptatif et cliquez sur Terminé bouton de vérification.

Vous pouvez également définir un thème pour un formulaire adaptatif lorsque vous le créez.

Modifier le thème d’un formulaire au moment de l’exécution change-theme-of-a-form-at-runtime

Un thème définit le style de différents composants d’un formulaire. Vous pouvez utiliser la propriété themeOverride pour modifier le thème d’un formulaire de façon dynamique. Voici une URL typique de formulaire :

https://<server>:<port>/content/forms/af/test.html

Vous pouvez utiliser le paramètre themeOverride pour appliquer un thème au moment de l’exécution.

https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme

L’option themeOverride vous permet de fournir un chemin d’accès à un thème. Elle modifie le thème du formulaire et l’actualise avec des styles mis à jour.

Obtenir un aspect spécifique à l’aide des thèmes specific-af-appearance

Avec AEM Forms et le thème de la zone de travail prête à l’emploi par défaut, il existe de nombreux autres thèmes. Si vous souhaitez concevoir votre formulaire à l’aide d’autres thèmes, avec des modifications supplémentaires, copiez le thème à partir du dossier de la bibliothèque des thèmes. Collez les thèmes copiés en dehors du dossier de la bibliothèque de thèmes et modifiez le thème copié en fonction des modifications que vous souhaitez apporter.

Pour copier un thème, procédez comme suit :

  1. Dans l’instance de création, accédez à Adobe Experience Manager > Formulaires > Thèmes.
  2. Ouvrez le dossier de la bibliothèque des thèmes.
  3. Dans le dossier de la bibliothèque de thèmes, placez le pointeur sur le thème prêt à l’emploi correspondant, puis sélectionnez Copier.
  4. Collez le thème copié en dehors du dossier de la bibliothèque de thèmes.
  5. Personnalisez le thème copié.

Après avoir personnalisé le thème, appliquez-le à votre formulaire .

NOTE
Ne modifiez pas les thèmes disponibles dans le dossier de la bibliothèque de thèmes. Ce dossier contient des thèmes système. Toute modification apportée à ces thèmes est remplacée lors de l’installation d’une version plus récente ou d’un correctif logiciel d’AEM Forms.

Impact sur d’autres cas d’utilisation de formulaire adaptatif impact-on-other-adaptive-form-use-cases

  • Publier/dépublier un formulaire : à la publication d’un formulaire, le thème appliqué est également publié (si ce n’est pas déjà fait)
  • Importer/exporter un formulaire : à l’importation ou à l’exportation d’un formulaire, son thème associé est automatiquement importé ou exporté également.
  • Références d’un formulaire : la section Référence dans les références du formulaire contient une entrée supplémentaire pour le thème.
  • Heure de la dernière modification d’un formulaire : mise à jour lors de la modification du thème associé.

Séquence de génération CSS css-generation-sequence

Lorsque vous sélectionnez Affichage CSS, l’éditeur de thème collecte toutes les informations de style et crée une page CSS. Il collecte des informations dans l’ordre suivant :

  1. La mise en forme définie par l’utilisateur, spécifiée à l’aide des propriétés dans la barre latérale.
  2. Le style CSS fourni à l’aide de l’option de remplacement de CSS.

Par exemple, la couleur d’arrière-plan d’une zone de texte est bleue. Vous la remplacez par la couleur rose à l’aide des propriétés de la barre latérale. Lorsque vous générez un fichier CSS, la couleur d’arrière-plan de la zone de texte est rose. Après la modification de la couleur d’arrière-plan à l’aide des propriétés, un autre auteur utilise l’option de remplacement de CSS pour modifier la zone de texte de couleur d’arrière-plan en blanc. Lorsque vous générez des fichiers CSS, la couleur d’arrière-plan blanche apparaît dans le CSS généré.

Débogage des styles debugging-styles

Lorsque vous spécifiez des styles pour les composants dans l’éditeur de thèmes, un fichier CSS est généré. Lorsque vous définissez le style d’un composant générique, plusieurs composants intégrés sont également mis en forme. Par exemple, lorsque vous définissez le style d’un champ, la zone de texte et l’étiquette qu’elle contient sont également mises en forme. Lorsque vous mettez en forme la zone de texte dans le champ, elle obtient son propre CSS. Si vous souhaitez déboguer le CSS généré pour le champ et le composant, l’éditeur de thèmes fournit des options qui vous permettent d’afficher le CSS.

Vous pouvez voir le fichier CSS généré à l’aide des options suivantes :

  • Option Affichage CSS dans la barre latérale : lorsque vous sélectionnez un composant dans le thème, vous pouvez voir l’option AFFICHAGE CSS dans la barre latérale. Elle affiche le fichier CSS généré, y compris le CSS pour les pseudo éléments ::before et ::after.
  • Option Afficher le thème CSS dans la barre d’outils de la zone de travail : dans la barre d’outils de la zone de travail, cliquez sur theme-option > Afficher le thème CSS. Vous pouvez voir tout le thème CSS généré à partir des propriétés que vous définissez dans l’éditeur de thèmes.

Dépannage, recommandations et bonnes pratiques troubleshooting-recommendations-and-best-practices

  • éviter les actifs d’un autre thème

    Lorsque vous modifiez un thème, vous pouvez parcourir et ajouter des actifs (tels que des images) d’autres thèmes. Par exemple, vous pouvez modifier l’arrière-plan d’une page. Par exemple, lorsque vous sélectionnez la Page bouton de modification > Arrière plan > Ajoutez > Image, une boîte de dialogue s’affiche et vous permet de parcourir et d’ajouter des images dans l’autre thème.

  • Vous pouvez rencontrer des problèmes avec votre thème actuel si un actif est ajouté à partir d’un autre thème et l’autre thème est déplacé ou supprimé. Nous vous recommandons d’éviter de parcourir les actifs d’autres thèmes et de les ajouter.

    Vous pouvez également créer un thème, créer des copies de ce thème, puis modifiez la mise en forme fournie dans les thèmes copiés pour des cas d’utilisation similaires.
    Voir Obtention d’une apparence spécifique à l’aide de Thèmes

    • Éditeur de thèmes :

    l’éditeur de thèmes vous permet de créer des thèmes pour mettre en forme votre formulaire <!-- ou communication interactive -->. Vous pouvez spécifier la mise en forme des composants dans un thème, ce qui permet d’assurer la cohérence de l’aspect entre les différents formulaires que vous développez. La spécification des informations de style dans un thème, puis l’application du thème à un formulaire sont recommandées.

    • Style intégré :

    vous pouvez mettre en forme des composants à l’aide du mode Style de l’éditeur de formulaires <!-- ou de communications interactives --> multicanal lorsque vous utilisez un formulaire. L’utilisation du mode Style pour modifier la mise en forme d’un composant de formulaire remplace la mise en forme indiquée dans le thème. Si vous choisissez de modifier le style de certains composants d’un formulaire spécifique, voir Style intégré de composants

  • Modification de la largeur de disposition du panneau conteneur

    Il n’est pas recommandé de modifier la largeur de disposition du panneau conteneur. Lorsque vous spécifiez la largeur d’un panneau de contenu, il devient statique et ne s’adapte pas aux différents affichages.

  • Dans quel cas utiliser l’éditeur de formulaires ou l’éditeur de thèmes pour travailler sur l’en-tête et le pied de page

    Utilisez l’éditeur de thèmes si vous souhaitez mettre en forme l’en-tête et le pied de page à l’aide d’options de style telles que le style de police, l’arrière-plan et la transparence.
    Si vous souhaitez fournir des informations comme une image de logo, le nom de l’entreprise dans l’en-tête et des informations de copyright dans le pied de page, utilisez les options de l’éditeur de formulaires.

Voir également see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab