Conditions préalables
- Configuration de l’environnement de développement AEM
- AEM version 6 ou supérieure
- La bibliothèque Commons ACS AEM (ma version 5.1.2) doit être installée dans votre instance AEM.
- Compréhension du framework Granite UI
Adobe Experience Manager (AEM) est un puissant système de gestion de contenu Web qui permet aux développeurs de créer et de gérer des expériences numériques sur différents canaux. L’une de ses principales caractéristiques est le framework Granite UI, qui offre un moyen flexible et extensible de créer des interfaces utilisateur.
Ce billet de blog explore le concept d’importation et de configuration de composants à l’aide du framework Granite UI. Plus précisément, il se concentre sur le type de ressource « acs-commons/granite/ui/components/include », qui nous permet d’importer et d’inclure d’autres composants dans une page ou un composant dans AEM. Cette fonctionnalité fournit un mécanisme puissant pour la réutilisation du code, ce qui rend le développement plus efficace et maintient la cohérence dans l’ensemble de l’application.
Le billet de blog utilise un exemple de scénario pour montrer comment utiliser le type de ressource « acs-commons/granite/ui/components/include » pour importer et partager une configuration centralisée pour les couleurs sur plusieurs composants.
À la fin de l’article de blog, vous aurez une compréhension de base de la façon d’importer et de configurer des composants à l’aide de l’infrastructure d’interface utilisateur Granite dans AEM.
Le granit comprend
L’une des fonctionnalités clés d’AEM est la possibilité d’importer et de configurer des composants à l’aide de l’infrastructure d’interface utilisateur Granite. Dans ce blog, nous verrons comment importer la configuration et définir les paramètres à l’aide de « acs-commons/granite/ui/components/include » type de ressource. Le « acs-commons/granite/ui/components/include » Le type de ressource est utilisé pour importer et inclure d’autres composants dans une page ou un composant. Cela nous permet de réutiliser les composants et les configurations existants, ce qui rend le développement plus rapide et plus efficace.
Dans mon cas, j’avais des exigences pour différents composants qui nécessitaient soit une couleur d’arrière-plan, soit une couleur de bouton, les deux utilisant les mêmes nuances de couleur. L’écriture de la configuration des couleurs pour chaque composant séparément serait redondante. Au lieu de cela, j’ai décidé de créer une configuration commune qui pourrait être incluse dans plusieurs composants. Cela assurerait non seulement la cohérence, mais permettrait également une intégration facile dans les futurs composants. Pour importer le « couleur » configuration, nous pouvons utiliser le « chemin » paramètre dans le « acs-commons/granite/ui/components/include » composant, comme celui-ci.
La configuration des couleurs :
La configuration du composant Bouton :
Ici, nous utilisons le « champ de couleur » balise pour inclure le « couleur » configuration depuis le « monProjet/composants/commun/configs/colorconfig » chemin. Cette configuration comprend un ensemble de couleurs prédéfinies qui peuvent être utilisées dans le composant pour sélectionner une couleur d’arrière-plan pour le bouton. Une fois que nous avons importé le « couleur » configuration, nous pouvons définir des paramètres pour configurer le comportement et l’apparence du composant. Dans ce cas, nous avons défini les paramètres suivants, comme indiqué dans l’image ci-dessus.
Il contient un ensemble de paramètres définis dans le « paramètres » bloc pour spécifier la description du champ, l’étiquette du champ et la clé du champ pour le composant. Le « champDescription » Le paramètre fournit une description de l’objectif du champ, qui est de « Choisissez la couleur de la police du bouton ». Le « étiquette de champ » paramètre spécifie l’étiquette qui sera affichée pour le champ, qui est « Couleur de la police. » Finalement, le « clé de champ » paramètre spécifie la clé qui sera utilisée pour identifier le champ, qui est « couleur. »
En important le « couleur » configuration et réglage de ces paramètres, nous avons créé notre bouton composant, et nous pouvons l’utiliser « couleur » configuration à travers nos pages et composants AEM.
Le composant Bouton :
Conclusion
Dans l’ensemble, le « acs-commons/granite/ui/components/include » type de ressource et le « paramètres » sont des outils puissants pour importer et configurer des composants dans AEM. En utilisant efficacement ces outils, nous pouvons créer des fonctions et des fonctionnalités personnalisées qui répondent aux besoins uniques de nos utilisateurs et de notre entreprise. Suivez-nous sur les réseaux sociaux pour plus de mises à jour et consultez nos autres articles de blog pour plus d’informations.
Les références
juillet 13, 2023
Comment configurer efficacement les composants dans AEM avec un espace de noms paramétré
Conditions préalables
Adobe Experience Manager (AEM) est un puissant système de gestion de contenu Web qui permet aux développeurs de créer et de gérer des expériences numériques sur différents canaux. L’une de ses principales caractéristiques est le framework Granite UI, qui offre un moyen flexible et extensible de créer des interfaces utilisateur.
Ce billet de blog explore le concept d’importation et de configuration de composants à l’aide du framework Granite UI. Plus précisément, il se concentre sur le type de ressource « acs-commons/granite/ui/components/include », qui nous permet d’importer et d’inclure d’autres composants dans une page ou un composant dans AEM. Cette fonctionnalité fournit un mécanisme puissant pour la réutilisation du code, ce qui rend le développement plus efficace et maintient la cohérence dans l’ensemble de l’application.
Le billet de blog utilise un exemple de scénario pour montrer comment utiliser le type de ressource « acs-commons/granite/ui/components/include » pour importer et partager une configuration centralisée pour les couleurs sur plusieurs composants.
À la fin de l’article de blog, vous aurez une compréhension de base de la façon d’importer et de configurer des composants à l’aide de l’infrastructure d’interface utilisateur Granite dans AEM.
Le granit comprend
L’une des fonctionnalités clés d’AEM est la possibilité d’importer et de configurer des composants à l’aide de l’infrastructure d’interface utilisateur Granite. Dans ce blog, nous verrons comment importer la configuration et définir les paramètres à l’aide de « acs-commons/granite/ui/components/include » type de ressource. Le « acs-commons/granite/ui/components/include » Le type de ressource est utilisé pour importer et inclure d’autres composants dans une page ou un composant. Cela nous permet de réutiliser les composants et les configurations existants, ce qui rend le développement plus rapide et plus efficace.
Dans mon cas, j’avais des exigences pour différents composants qui nécessitaient soit une couleur d’arrière-plan, soit une couleur de bouton, les deux utilisant les mêmes nuances de couleur. L’écriture de la configuration des couleurs pour chaque composant séparément serait redondante. Au lieu de cela, j’ai décidé de créer une configuration commune qui pourrait être incluse dans plusieurs composants. Cela assurerait non seulement la cohérence, mais permettrait également une intégration facile dans les futurs composants. Pour importer le « couleur » configuration, nous pouvons utiliser le « chemin » paramètre dans le « acs-commons/granite/ui/components/include » composant, comme celui-ci.
La configuration des couleurs :
La configuration du composant Bouton :
Ici, nous utilisons le « champ de couleur » balise pour inclure le « couleur » configuration depuis le « monProjet/composants/commun/configs/colorconfig » chemin. Cette configuration comprend un ensemble de couleurs prédéfinies qui peuvent être utilisées dans le composant pour sélectionner une couleur d’arrière-plan pour le bouton. Une fois que nous avons importé le « couleur » configuration, nous pouvons définir des paramètres pour configurer le comportement et l’apparence du composant. Dans ce cas, nous avons défini les paramètres suivants, comme indiqué dans l’image ci-dessus.
Il contient un ensemble de paramètres définis dans le « paramètres » bloc pour spécifier la description du champ, l’étiquette du champ et la clé du champ pour le composant. Le « champDescription » Le paramètre fournit une description de l’objectif du champ, qui est de « Choisissez la couleur de la police du bouton ». Le « étiquette de champ » paramètre spécifie l’étiquette qui sera affichée pour le champ, qui est « Couleur de la police. » Finalement, le « clé de champ » paramètre spécifie la clé qui sera utilisée pour identifier le champ, qui est « couleur. »
En important le « couleur » configuration et réglage de ces paramètres, nous avons créé notre bouton composant, et nous pouvons l’utiliser « couleur » configuration à travers nos pages et composants AEM.
Le composant Bouton :
Conclusion
Dans l’ensemble, le « acs-commons/granite/ui/components/include » type de ressource et le « paramètres » sont des outils puissants pour importer et configurer des composants dans AEM. En utilisant efficacement ces outils, nous pouvons créer des fonctions et des fonctionnalités personnalisées qui répondent aux besoins uniques de nos utilisateurs et de notre entreprise. Suivez-nous sur les réseaux sociaux pour plus de mises à jour et consultez nos autres articles de blog pour plus d’informations.
Les références
TROUVÉ CELA UTILE ? PARTAGEZ-LE
Source link
Partager :
Articles similaires