Personnalisation des champs de dialogue Touch UI AEM
La personnalisation de l’interface utilisateur est un élément essentiel de tout projet. Découvrez comment personnaliser les champs de dialogue Touch UI AEM dans AEM 6.1. La personnalisation de l’interface utilisateur est un élément essentiel de tout projet, et AEM 6.1 offre de nombreux points d’extension à cet effet. Cet article de blog décrira comment personnaliser les champs de dialogue Touch UI dans AEM 6.1. Plusieurs propriétés prêtes à l’emploi sont disponibles pour ajouter des dialogues Touch UI, mais ce n’est parfois pas suffisant. Il existe de nombreux articles sur la personnalisation des dialogues Classic UI, mais Touch UI nécessite une personnalisation différente.
Je vais vous guider à travers le processus de personnalisation du dialogue Touch UI en utilisant l’exemple d’un dialogue de sélection de couleur.
Pour construire ce dialogue, créez un nouveau champ personnalisé (je l’ai nommé « colorpicker ») et héritez-le de « granite/ui/components/foundation/form/field ». Ensuite, créez une bibliothèque cliente locale (clientlib) et surchargez « render.jsp ».
Dans le script render.jsp, définissez les propriétés nécessaires pour configurer les dialogues et liez-les à la clientlib.
Après cela, créez un nouveau composant et définissez le resourceType du champ « color » comme « training/components/colorpicker ».
Ensuite, créez un fichier .html pour afficher la valeur de la couleur. Nous pouvons enfin choisir une couleur avec notre sélecteur de couleurs personnalisé et visualiser le résultat.
Mais que se passe-t-il si vous devez synchroniser d’autres valeurs de champ avec le champ personnalisé que vous avez créé (par exemple, forcer le champ « color value » à avoir la même valeur que « color ») ?
Pour ce faire, créez un nouveau champ appelé « color value », héritez-le de textfield (granite/ui/components/foundation/form/textfield), et configurez la valeur « granite:class » dans les champs « colorvalue » et « color ».
Dans le champ « color », configurez la valeur « granite:class » pour la liaison.
Et liez-les en créant un nœud « granite:data » sous le champ « color ».
Vous pouvez comparer les valeurs des propriétés granite:data et « granite:class » pour comprendre quelles valeurs et quels noms de propriétés doivent y figurer.
