DocumentationAEM 6.4Guide de développement

Créer un composant de champ d’IU Granite creating-a-new-granite-ui-field-component

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Developer
CAUTION
AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.

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/*

NOTE
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.
NOTE
Pour plus d’informations sur les champs, reportez-vous à la section 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 ; le balisage et la description, et fournit la valeur de formulaire dont vous aurez besoin lors du rendu du champ.
  • render.jsp : il s’agit de l’emplacement où le rendu du champ est effectué, il doit être remplacé pour votre champ personnalisé ; il est inclus par init.jsp.

Reportez-vous à la section Documentation de l’IU Granite - Champ si vous voulez plus de détails.

Pour consulter des exemples, voir :

  • cqgems/customizingfield/components/colorpicker

  • granite/ui/components/foundation/form

NOTE
Ce mécanisme utilisant JSP, i18n et XSS ne sont pas fournis prêts à l’emploi. Cela signifie que vous devrez 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 creating-the-server-side-script-for-the-component

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 votre balisage.

  1. Créez un composant qui utilise la propriété sling:resourceSuperType à hériter de :

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

  2. Remplacez le script :

    render.jsp

    Dans ce script, vous devez générer 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 :

    code language-none 
    // 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, consultez la mise en œuvre des champs prêts à l’emploi de l’IU Granite, par exemple, /libs/granite/ui/components/foundation/form/textfield.

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

Création de la bibliothèque-client pour le composant creating-the-client-library-for-the-component

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.

    note note
    NOTE
    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.
recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e