Développer des composants AEM (IU classique) developing-aem-components-classic-ui

À l’aide de CRXDE Lite, créez un dossier de composants dans :

/ apps/<myProject>/components/<myComponent>

Recréez la structure de noeud comme dans libs, puis copiez la définition d’un composant existant, tel que le composant Texte . Par exemple, pour personnaliser le composant Texte, copiez :

• de /libs/foundation/components/text
• vers /apps/myProject/components/text

Modifiez le jcr:title en tenant compte de son nouveau nom.

Ouvrez le nouveau dossier de composants et apportez les modifications nécessaires. Supprimez également toutes les informations superflues contenues dans le dossier.

Vous pouvez apporter des modifications telles que :

• ajout d’un nouveau champ dans la boîte de dialogue

  • cq:dialog : boîte de dialogue pour l’interface utilisateur tactile
  • dialog : boîte de dialogue pour l’interface utilisateur classique

• Remplacer le fichier .jsp (lui donner le nom du nouveau composant) ou

• Retravailler complètement le composant, si vous le souhaitez

Par exemple, si vous prenez une copie du composant Texte standard, vous pouvez ajouter un champ supplémentaire à la boîte de dialogue, puis mettre à jour le fichier .jsp pour traiter l’entrée qui y est effectuée.

L’un des nœuds suivants doit être présent et correctement initialisé pour que le nouveau composant puisse s’afficher :

• cq:dialog : boîte de dialogue pour l’interface utilisateur tactile
• dialog : boîte de dialogue pour l’interface utilisateur classique
• cq:editConfig : comportement des composants dans l’environnement de modification (glisser-déposer, par exemple)
• design_dialog : boîte de dialogue pour le mode Création (interface utilisateur classique uniquement)

Activez le nouveau composant dans votre système de paragraphes en effectuant l’une des opérations suivantes :

• Utilisez CRXDE Lite pour ajouter la valeur <path-to-component> (par exemple : /apps/geometrixx/components/myComponent) à la propriété Composants du nœud /etc/designs/geometrixx/jcr:content/contentpage/par.
• suivez les instructions de la section Ajout de nouveaux composants aux systèmes de paragraphes

Dans AEM WCM, ouvrez une page de votre site web et insérez un nouveau paragraphe du type que vous venez de créer pour vous assurer que le composant fonctionne correctement.

Accédez à une page de votre environnement de création qui utilise le système de paragraphes ; par exemple, <contentPath>/Test.html.

Pour basculer vers le mode Création, effectuez l’une des opérations suivantes :

• Ajoutez ?wcmmode=design à la fin de l’URL et accédez-y à nouveau. Par exemple :

  <contextPath>/ Test.html?wcmmode=design

• clic sur Conception dans le sidekick

Vous êtes désormais en mode de conception et pouvez modifier le système de paragraphes.

Cliquez sur Modifier.

Une liste des composants appartenant au système de paragraphes s’affiche. Votre nouveau composant est également répertorié.

Les composants peuvent être activés (ou désactivés) pour déterminer lesquels sont proposés à l’auteur lors de la modification d’une page.

Activez votre composant, puis revenez au mode d’édition normal pour confirmer qu’il est disponible.

Copiez le composant textimage standard depuis /libs/foundation/components/textimage dans le dossier de composants Geometrixx, /apps/geometrixx/components, en utilisant textimage comme nom de nœud cible. (Pour copier le composant, accédez à son emplacement, cliquez avec le bouton droit de la souris, sélectionnez Copier, puis accédez au répertoire cible.)

Pour que cet exemple reste simple, accédez au composant que vous avez copié et supprimez tous les sous-nœuds du nouveau nœud textimage, à l’exception de ceux mentionnés ci-dessous :

• définition de boîte de dialogue : textimage/dialog
• script de composant : textimage/textimage.jsp
• nœud de configuration d’édition (autorisant le déplacement de ressources par glisser-déposer) : textimage/cq:editConfig

Modifiez les métadonnées du composant :

• Nom du composant

  • Définissez jcr:description sur Text Image Component (Extended).
  • Définissez jcr:title sur Text Image (Extended).

• Groupe où le composant est répertorié dans le sidekick (laisser tel quel)

  • Conservez la définition de componentGroup sur General.

• Composant parent pour le nouveau composant (le composant textimage standard)

  • Définissez sling:resourceSuperType sur foundation/components/textimage.

Après cette étape, le nœud de composant ressemble à ceci :

Modifiez la propriété sling:resourceType du nœud de configuration d’édition de l’image (propriété : textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType) sur geometrixx/components/textimage..

De cette manière, lorsqu’une image est déposée sur le composant de la page, la propriété sling:resourceType du composant textimage étendu est définie sur geometrixx/components/textimage..

Modifiez la boîte de dialogue du composant pour inclure la nouvelle option. Le nouveau composant hérite des parties de la boîte de dialogue qui sont identiques à celles de l’original. Le seul ajout que nous faisons est d'étendre la variable Avancé , ajout d’un Position de l’image liste déroulante, avec options Left et Right:

• Laissez les propriétés textimage/dialog telles quelles.

Notez que textimage/dialog/items comporte quatre sous-nœuds, tab1 à tab4, qui représentent les quatre onglets de la boîte de dialogue textimage.

• Pour les deux premiers onglets (tab1 et tab2) :

  • Modifiez xtype en cqinclude (pour hériter du composant standard).
  • Ajoutez une propriété path avec les valeurs /libs/foundation/components/textimage/dialog/items/tab1.infinity.json et /libs/foundation/components/textimage/dialog/items/tab2.infinity.json, respectivement.
  • Supprimez toutes les autres propriétés ou sous-noeuds.

• Pour tab3 :

  • Ne modifiez pas les propriétés et les sous-noeuds.

  • Ajoutez une nouvelle définition de champ à tab3/items, la position du nœud de type cq:Widget.

  • Définissez les propriétés suivantes (du type String) pour le nouveau nœud tab3/items/position :

    • name: ./imagePosition
    • xtype: selection
    • fieldLabel: Image Position
    • type: select

  • Ajoutez un sous-nœud position/options de type cq:WidgetCollection pour représenter les deux options de positionnement d’images. En dessous, créez deux nœuds, o1 et o2, de type nt:unstructured.

  • Pour le nœud position/options/o1, définissez les propriétés : text sur Left et value sur left.

  • Pour le nœud position/options/o2, définissez les propriétés : text sur Right et value sur right.

• Supprimez tab4.

La position de l’image est conservée dans le contenu en tant que propriété imagePosition du nœud représentant le paragraphe textimage. Après avoir suivi ces étapes, la boîte de dialogue du composant ressemble à ceci :

Étendez le script du composant, textimage.jsp, avec une gestion supplémentaire du nouveau paramètre :

Image image = new Image(resource, "image");

if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
     image.loadStyleData(currentStyle);

Nous allons remplacer le fragment de code %><div class="image"><% par le nouveau code qui génère un style personnalisé pour cette balise.

// todo: add new CSS class for the 'right image' instead of using
// the style attribute
String style="";
     if (properties.get("imagePosition", "left").equals("right")) {
          style = "style=\"float:right\"";
     }
     %><div <%= style %> class="image"><%

Enregistrez le composant dans le référentiel. Le composant est prêt à être testé.

Copiez le composant image standard depuis /libs/foundation/components/image dans le dossier de composants Geometrixx, /apps/geometrixx/components, en utilisant « image » comme nom de nœud cible.

Modifiez les métadonnées du composant :

• Définissez jcr:title sur Image (Extended).

Accédez à /apps/geometrixx/components/image/dialog/items/image.

Ajouter une nouvelle propriété :

• Nom  : allowUpload
• Type  : String
• Valeur  : false

Cliquez sur Enregistrer tout. Le composant est prêt à être testé.

Ouvrez une page en Geometrixx, par exemple en anglais/société.

Passez en mode de conception et activez Image (étendu).

Revenez au mode d’édition et ajoutez-le au système de paragraphes. Sur les images suivantes, vous pouvez voir les différences entre le composant d’image d’origine et celui que vous venez de créer.

Composant image d’origine :

Votre nouveau composant image :

Le composant est maintenant prêt à l’emploi.