Créer un composant de champ d’IU Granite

Dernière mise à jour : 2023-11-07

L’IU Granite fournit toute une gamme de composants conçus pour être utilisés dans des formulaires. Ils sont appelés champs selon la terminologie de l’IU Granite. Les composants de formulaire Granite standard sont disponibles sous :

/libs/granite/ui/components/foundation/form/*

REMARQUE

Ces champs de formulaire de l’IU Granite sont particulièrement intéressants, car ils sont utilisés pour boîtes de dialogue de composant.

REMARQUE

Pour plus d’informations sur les champs, voir Documentation de l’interface utilisateur Granite.

Utilisez la structure de base de l’IU Granite pour développer et/ou étendre les composants Granite. Celui-ci comporte deux éléments :

  • côté serveur :

    • un ensemble de composants de base ;

      • foundation : modulaire, composable, lisible, réutilisable
      • Composants : composants Sling
    • aide au développement des applications

  • côté client :

    • un ensemble de clientlibs fournissant un certain vocabulaire (c’est-à-dire une extension du langage de HTML) pour obtenir des modèles d’interaction génériques par le biais d’une interface utilisateur pilotée par Hypermedia.

Le composant d’IU Granite générique field se compose de deux fichiers d’intérêt :

  • init.jsp: gère le traitement générique ; l’étiquetage, la description et fournit la valeur de formulaire dont vous avez besoin lors du rendu de votre champ.
  • render.jsp: c’est là que le rendu réel du champ est effectué et doit être remplacé pour votre champ personnalisé ; est inclus par init.jsp.

Voir Documentation de l’IU Granite - Champ pour plus d’informations.

Pour consulter des exemples, voir :

  • cqgems/customizingfield/components/colorpicker

  • granite/ui/components/foundation/form

REMARQUE

Ce mécanisme utilisant JSP, i18n et XSS ne sont pas fournis prêts à l’emploi. Cela signifie que vous devez internationaliser et échapper vos chaînes. Le répertoire suivant contient les champs génériques d'une instance standard. Vous pouvez les utiliser comme référence :

Référentiel /libs/granite/ui/components/foundation/form

Création du script côté serveur pour le composant

Le champ personnalisé doit remplacer uniquement le script render.jsp, où vous fournissez le balisage de votre composant. Vous pouvez considérer le JSP (c’est-à-dire le script de rendu) comme un wrapper pour vos balises.

  1. Créez un composant qui utilise la variable sling:resourceSuperType pour hériter de :

    /libs/granite/ui/components/foundation/form/field

  2. Remplacez le script :

    render.jsp

    Dans ce script, générez le balisage hypermédia (c’est-à-dire enrichi, contenant l’abordage hypermédia) afin que le client sache interagir avec l’élément généré. Cela doit respecter le style de codage côté serveur de l’IU Granite.

    Lors de la personnalisation, vous devez avoir lu la valeur du formulaire (initialisée dans init.jsp) à partir de la requête à l’aide de :

    // Delivers the value of the field (read from the content)
    ValueMap vm = (ValueMap) request.getAttribute(Field.class.getName());
    vm.get("value, String.class");
    

    Pour plus d’informations, voir Implémentation des champs d’IU Granite prêts à l’emploi, par exemple : /libs/granite/ui/components/foundation/form/textfield.

    REMARQUE

    Actuellement, JSP est la méthode de script préférée, car la transmission d’informations d’un composant à un autre (fréquente dans le contexte d’un formulaire/de champs) n’est pas facile à réaliser dans HTL.

Création de la bibliothèque-client pour le composant

Pour ajouter un comportement client spécifique à votre composant :

  1. Créez une bibliothèque cliente de la catégorie cq.authoring.dialog.

  2. Créez une bibliothèque cliente de la catégorie cq.authoring.dialog et définissez votre CSS/JS à l’intérieur de celle-ci.

    Définissez votre CSS/JS à l’intérieur de la bibliothèque cliente.

    REMARQUE

    Actuellement, l’interface utilisateur Granite ne fournit aucun écouteur ou crochets prêts à l’emploi que vous pouvez utiliser directement pour ajouter un comportement JS. Ainsi, pour ajouter un comportement JS supplémentaire à votre composant, vous devez implémenter un crochet JS à une classe personnalisée que vous affectez ensuite à votre composant pendant la génération du balisage.

Sur cette page