Apprenez à créer un thème personnalisé, à appliquer un style à des composants individuels et à utiliser les polices web dans un thème.
Ce didacticiel est une étape de la série Création de votre premier formulaire adaptatif. Il est recommandé de suivre la série dans l’ordre chronologique pour comprendre, exécuter et démontrer le cas d’utilisation complet du didacticiel.
Vous pouvez utiliser des thèmes pour donner une apparence et un style uniques à un formulaire adaptatif. Vous pouvez appliquer des thèmes prêts à l’emploi fournis avec l’éditeur de formulaires adaptatifs ou créer vos propres thèmes. Les formulaires AEM fournissent un éditeur de thème pour créer des thèmes personnalisés. Un seul thème peut conférer une apparence différente au même formulaire adaptatif ouvert sur un mobile, une tablette ou un ordinateur de bureau. Aucune connaissance préalable de CSS ou de LESS n’est nécessaire pour utiliser l’éditeur de thèmes, mais cela est préférable.
À la fin du didacticiel, vous découvrirez comment :
Lorsque vous aurez terminé le didacticiel, le modèle de données de formulaire se présentera comme ceci :
Téléchargez sur votre ordinateur local les images de style d’en-tête et de logo présentées ci-dessous. L’en-tête du formulaire adaptatif shipping-address-add-update-form
utilise les images de style d’en-tête et de logo. L’image de style d’en-tête s’affiche à droite de l’en-tête.
L’éditeur de formulaires adaptatifs fournit plusieurs thèmes prêts à l’emploi. Si vous envisagez de ne pas utiliser de style personnalisé pour votre formulaire adaptatif, vous pouvez également publier vos formulaires adaptatifs avec un thème prêt à l’emploi. Les thèmes sont indépendants des formulaires adaptatifs. Vous pouvez appliquer le même thème à plusieurs formulaires adaptatifs. Pour appliquer un thème à un formulaire adaptatif :
Ouvrez le formulaire adaptatif pour le modifier.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Ouvrez les propriétés du conteneur de formulaires adaptatifs. Dans le navigateur de propriétés, accédez à De base > Thème de formulaire adaptatif. Le champ Thème de formulaire adaptatif répertorie tous les thèmes prêts à l’emploi et personnalisés. Par défaut, le thème Zone de travail est appliqué.
Sélectionnez votre thème dans le champ Thème de formulaire adaptatif. Par exemple, Thème Enquête. Appuyez sur pour appliquer le thème sélectionné.
Figure:formulaire adaptatif avec le thème par défaut
Figure : formulaire adaptatif avec le thème Questionnaire
La conception présentée ci-dessus nécessite des modifications du texte et du logo de l’espace réservé de votre formulaire adaptatif existant. Effectuez les étapes suivantes pour faire les changements nécessaires :
Modifiez le logo existant et le texte de l’en-tête. Pour supprimer le logo :
Ouvrez le formulaire dans l’éditeur de formulaires.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Appuyez sur l’image de logo dans le composant d’en-tête et appuyez sur les propriétés . Dans la propriété d’image, appuyez sur X pour supprimer l’image du logo existant.
Appuyez sur télécharger, sélectionnez le fichier logo.png, puis appuyez sur pour enregistrer les modifications. L'image a été téléchargée dans la section Avant votre début.
Appuyez sur le texte de l’en-tête We.Retail
, puis sur edit. Remplacez le texte de l’en-tête par
we retail
. Applique la mise en forme en gras uniquement à we
dans we retail
.
Supprimez le titre et ajouter un texte d’espace réservé :
Vous pouvez utiliser un éditeur de thèmes pour créer des thèmes personnalisés. L’éditeur de thèmes est un éditeur WYSIWYG très puissant. Il s’agit d’une méthode visuelle permettant d’appliquer un style CSS à divers composants d’un formulaire adaptatif. Il fournit des commandes plus précises aux composants de style et aux panneaux d’un formulaire adaptatif.
Un thème est une entité distincte au même titre que les formulaires adaptatifs. Il contient des styles (CSS) pour les composants et les panneaux d’un formulaire adaptatif. Ces styles incluent des propriétés CSS 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é est appliqué aux composants correspondants d’un formulaire adaptatif.
Dans ce didacticiel, vous allez appliquer un style aux en-têtes et aux pieds de page, aux composants texte et numériques, aux composants de pièces jointes et aux boutons. Commençons par la création d’ un thème :
Connectez-vous à l’instance d’auteur AEM et accédez à Adobe Experience Manager > Forms > Thèmes. L’URL par défaut est http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.
Appuyez sur Créer et sélectionnez Thème. La page Créer un thème s’affiche avec les champs requis pour créer un thème. Les champs Titre et Nom sont obligatoires :
Appuyez sur Create (Créer). Un thème est créé et une boîte de dialogue pour ouvrir le formulaire à modifier s’affiche. Appuyez sur Ouvrir pour ouvrir le thème nouvellement créé dans un nouvel onglet. Le thème s’ouvre dans l’éditeur de thèmes. Pour le style, l’éditeur de thèmes utilise un formulaire adaptatif prêt à l’emploi fourni avec AEM Forms.
Pour plus d’informations sur l’utilisation de l’interface utilisateur de l’éditeur de thème, voir A propos de l’éditeur de thème.
Appuyez sur Options de thème > Configurer. Dans le champ Formulaire de Prévisualisation, sélectionnez le formulaire adaptatif, appuyez sur
, appuyez sur Enregistrer. L’éditeur de thème est maintenant configuré pour utiliser votre propre formulaire adaptatif au lieu du formulaire adaptatif par défaut. Appuyez sur Annuler pour revenir à l’éditeur de thèmes.
Figure : éditeur de thème avec le formulaire adaptatif expédition-address-add-update-form
Figure:formulaire adaptatif avec le formulaire par défaut
L’en-tête et le pied de page donnent un aspect cohérent et distinctif à un formulaire adaptatif. En général, l’en-tête contient le logo et le nom de l’organisation, le pied de page contient des informations de copyright. Ces éléments restent identiques dans plusieurs formulaires d’une organisation. Pour appliquer un style à l’en-tête et au pied de page du formulaire adaptatif shipping-address-add-update-form :
Accédez à l’option En-tête > Texte dans le panneau Sélecteurs. Le panneau Sélecteurs se trouve à gauche de l’éditeur de thèmes. Si le panneau n’est pas visible, appuyez sur Basculer le panneau latéral.
Définissez les propriétés suivantes dans l’accordéon Texte et appuyez sur .
Propriétés | Valeur |
---|---|
Famille de polices | Arial |
Couleur de la police | FFFFFF |
Taille de la police | 54px |
Appuyez sur le widget d’en-tête, puis sur En-tête. Les options permettant d’appliquer un style au widget En-tête s’affichent à gauche. Développez l’accordéon Dimensions et position, définissez Hauteur sur 120px
, puis appuyez sur .
Développez l’accordéon Arrière-plan du widget d’en-tête, définissez la couleur d’arrière-plan sur F6921E.
Passez la souris sur Image et dégradé > + Ajoute, puis appuyez sur Image. Définissez les propriétés suivantes et appuyez sur .
Propriétés | Valeur |
---|---|
image | Téléchargez le fichier header-style.png. L'image a été téléchargée dans la section Avant votre début. |
Position | En bas à droite |
Mosaïque | Pas de répétition |
Dans l’éditeur de thème, appuyez sur le logo dans l’en-tête puis appuyez sur Logo de l’en-tête. Développez l’accordéon Dimensions & Position, définissez les propriétés suivantes et appuyez sur .
Marge | Valeur |
Marge |
Conseil : appuyez sur l’ |
Hauteur | 4,75 rem |
F6921E
, puis appuyez sur Vous pouvez utiliser plusieurs composants dans un formulaire adaptatif pour capturer des données. Par exemple, zone de texte et zone numérique. Vous pouvez fournir un style identique à tous les composants de capture de données ou un style distinct pour chaque composant. Dans ce didacticiel, un style identique est appliqué aux zones numériques (ID client, Code postal) et aux zones de texte (ID client, Nom, Adresse de livraison, État, Adresse électronique). Pour mettre en forme les composants de capture de données :
Accordéon | Propriétés | Valeur |
de la bordure | Couleur de la bordure | A7A9AC |
de la bordure | Rayon de bordure |
|
Text (Texte) | Famille de polices | Arial |
Text (Texte) | Couleur de la police | 939598 |
Text (Texte) | Taille de la police | 18px |
Dimensions et position | Largeur | 60% |
Dimensions et position | Marge |
|
Appuyez sur la zone vide au-dessus du champ ID de client et appuyez sur Conteneur de panneau réactif. Définissez Arrière-plan > Couleur d’arrière-plan sur F1F2F2. Appuyez sur .
Vous pouvez utiliser un thème personnalisé pour appliquer un style identique à tous les boutons du formulaire adaptatif et le style intégré pour appliquer un style à un bouton spécifique. Pour appliquer un style aux boutons :
Accordéon | Propriétés | Valeur |
Arrière-plan | Couleur d’arrière-plan | F6921E |
de la bordure |
Couleur de la bordure | F6921E |
de la bordure | Rayon de bordure |
|
Texte |
Famille de polices | Arial |
Text (Texte) | Couleur de la police | FFFFFF |
Text (Texte) | Taille de la police | 18 px |
Appliquez le thème personnalisé, Thème global, à votre formulaire adaptatif. Si le style ne se reflète pas sur le formulaire adaptatif, videz le cache du navigateur et réessayez.
Certains styles ne s’appliquent qu’à un composant spécifique. Un style est appliqué à ces composants dans l’éditeur de formulaires adaptatifs.
Ouvrez le formulaire adaptatif pour le modifier. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Dans la barre supérieure, sélectionnez l’option Style.
Appuyez sur le bouton Joindre et appuyez sur l’icône . Définissez les propriétés suivantes dans les Dimensions et Position en accordéon :
Propriétés | Valeur |
---|---|
Flottant | Gauche |
Largeur | 10% |
Appuyez sur l'option BAT d'adresse approuvé par le gouvernement et appuyez sur l'icône . Définissez les propriétés suivantes :
Accordéon | Propriétés | Valeur |
Dimensions et position | Flottant | Gauche |
Dimensions et position | Largeur | 73% |
Dimensions et position | Remplissage |
|
Dimensions et position | Hauteur | 40px |
Dimensions et position |
Marge |
|
Arrière-plan | Couleur d’arrière-plan | FFFFFF |
de la bordure | Largeur de bordure | 1px |
de la bordure | Style de la bordure | Pleine |
de la bordure | Couleur de la bordure | A7A9AC |
de la bordure | Rayon de bordure | 7px |
Text (Texte) | Famille de polices | Arial |
Text (Texte) | Couleur de la police | BCBEC0 |
Text (Texte) | Taille de la police | 18 px |
Text (Texte) | Hauteur de ligne | 2 |
Accordéon | Propriétés | Valeur |
Dimensions et position | Flottant | Droite |
Dimensions et position | Marge |
|
Arrière-plan | Couleur d’arrière-plan | F6921E |
de la bordure | Couleur de la bordure | F6921E |
Vous pouvez utiliser différentes polices pour concevoir un formulaire adaptatif. Tous les périphériques sur lesquels le formulaire adaptatif est visualisé peuvent ne pas utiliser les polices pour concevoir le formulaire adaptatif. Vous pouvez utiliser un service de polices Web pour fournir les polices requises au périphérique de la cible.
Adobe Typekit est un service de polices web d’Adobe. Vous pouvez configurer et utiliser le service avec les formulaires adaptatifs. Pour utiliser Adobe Typekit dans un formulaire adaptatif :
fontsTypekit est désormais appelé Adobe Fonts et est inclus avec Creative Cloud et autres abonnements. En savoir plus.
Créez un compte Adobe Typekit, créez un kit, ajoutez la police Myriad Pro au kit, publiez le kit et obtenez l’identifiant du kit. Il est nécessaire d’utiliser les polices Adobe Typekit (polices web) dans un formulaire adaptatif.
Dans le serveur AEM Forms, accédez à Adobe Experience Manager > Outils
> Déploiement > Cloud Services. Sur la page Cloud Services, accédez à Services tiers > Typekit, puis cliquez sur Configurer Maintenant sous Typekit. Si une configuration est déjà disponible, cliquez sur le bouton + pour créer une nouvelle instance.
Dans la boîte de dialogue Créer une configuration, spécifiez un Titre pour la configuration, puis cliquez sur Créer. Vous êtes redirigé sur la page de configuration. Dans la boîte de dialogue Modifier le composant qui s’affiche, fournissez votre ID de kit et cliquez sur OK.
Configurez un thème de sorte qu’il utilise la configuration Typekit. Sur l’instance d’auteur, ouvrez Thème global dans l’éditeur de thème. Dans l’éditeur de thème, accédez à Options du thème > Configurer. Dans le champ Typekit Configuration, sélectionnez le kit, puis cliquez sur Enregistrer.
Les polices ajoutées au Typekit peuvent être sélectionnées dans l'accordéon Texte de tous les composants.