Nom
Dernière mise à jour le
1 mai 2021
Résumé de l'article.
| Résumé |
Il décrit comment développer un composant CQ utilisé par le système Parsys. Le composant prend en charge une boîte de dialogue avec plusieurs onglets et une image. Il se connecte aux fonctionnalités offertes par le trouveur de contenu. |
| Solution(s) de marketing numérique. | Adobe Experience Manager (Adobe CQ). |
| Public |
Développeur (intermédiaire) |
| Compétences requises |
JavaScript, JCR, Sling. |
| Testé sur | Adobe CQ 5.5 |
Vous pouvez créer un composant AEM qui gère le texte et une image. En outre, le composant que vous apprenez à créer dans cet article comporte une boîte de dialogue CQ qui permet à l’utilisateur de sélectionner une image pendant la conception.
Lorsque l'utilisateur sélectionne une image, celle-ci s'affiche dans le widget.
Dans cet article, l’image est modifiable par un auteur de contenu et peut être déplacée depuis le trouveur de contenu.
Pour cet article, l’image :
- Est un widget de boîte de dialogue (xtype d'image intelligente).
- Il doit être configuré dans le composant cq:editConfig pour permettre de faire glisser des images à partir du trouveur de contenu, comme présenté dans cette illustration.
Le texte enrichi :
1. Est un widget de dialogue (xtype de texte enrichi).
2. Le widget active toutes les fonctionnalités du tableau de modification du texte enrichi.
3. Le widget possède du texte par défaut.
Le chemin d’accès à la page :
1. Est un widget de dialogue de conception, probablement un xtype de réalisation du chemin d'accès.
2. Le widget doit avoir une propriété regex avec une validation régulière de l’entrée de l’utilisateur (par exemple, « /^\/content\/training\/()).*$/").
3. Le widget doit avoir une propriété regexText avec un message d’erreur si l’expression régulière échoue.
Création d’une structure de dossiers d’application CQ.
Créez une structure de dossier d'application Adobe CQ contenant des modèles, des composants et des pages à l'aide de CRXDE Lite.
Le code suivant décrit chaque dossier d’application :
- Nom de l'application: contient toutes les ressources utilisées par une application. Les ressources peuvent être des modèles, des pages, des composants, etc.
- Composants: contient des composants utilisés par votre application.
- Page: contient des composants de page. Un composant de page est un script tel qu’un fichier JSP.
- Global: contient des composants globaux utilisés par votre application.
- Modèle: contient des modèles sur lesquels vous basez des composants de page.
- SRC: contient le code source qui comprend un composant OSGi (cet article de développement ne crée pas de regroupement OSGi utilisant ce dossier).
- Installation: contient un conteneur de regroupement OSGi compilé.
Création d’une structure de dossiers d’application :
1. Pour afficher la page d'accueil CQ, saisissez l'URL http://[host name] : [port] dans un navigateur Internet. Par exemple, http://localhost:4502.
2. Sélectionnez CRXDE Lite.
3. Cliquez avec le bouton droit sur le dossier des applications (ou le dossier parent) > Sélectionnez Créer > Créez un dossier.
4. Entrez le nom du dossier dans la boîte de dialogue « créer un dossier ». Saisir composant d'image.
5. Répétez les étapes 1 à 4 pour chaque dossier spécifié dans l'illustration précédente.
6. Cliquez sur le bouton « Tout enregistrer ».
Remarque :
Vous devez cliquer sur le bouton « Tout enregistrer », lorsque vous travaillez dans CRXDELite pour que les modifications soient effectuées.
Création d’un modèle
Vous pouvez créer un modèle à l’aide de CRXDE Lite. Un modèle CQ permet de définir un style cohérent pour les pages de votre application. Un modèle comprend des nœuds qui spécifient la structure de la page. Pour plus d'informations sur les modèles, consultez http://dev.day.com/docs/en/cq/current/developing/templates.html.
Pour créer un modèle, effectuez ces tâches :
1. Pour afficher la page d’accueil de CQ, saisissez l’URL http://[nom hôte]:[port] dans un navigateur Internet. Par exemple, http://localhost:4502.
2. Sélectionnez CRXDE Lite.
3. Cliquez avec le bouton droit sur le dossier du modèle (dans votre application) > Sélectionnez Créer > Créez
un modèle.
4. Entrez les informations suivantes dans la boîte de dialogue « Créer un modèle » :
- Étiquette: le nom du modèle à créer. Saisissez modèle de l'image.
- Titre: le titre attribué au modèle.
- Description: la description attribuée au modèle.
- Type de ressource: Le chemin d'accès du composant affecté au modèle et copié dans les pages d'implémentation. Saisissez imagecomponent/components/page/templatelmage.
- Classement: l'ordre (croissant) dans lequel ce modèle apparait par rapport aux autres modèles. La définition de cette valeur sur 1 garantit que le modèle apparaisse en premier dans la liste.
5. Ajoutez un chemin d'accès aux chemins autorisés. Cliquez sur le signe plus et saisissez la valeur suivante : /content(/.*)?.
6. Cliquez sur Suivant pour les parents autorisés.
7. Sélectionnez OK sur les enfants autorisés.
Création du composant Image.
Les composants sont des modules réutilisables qui implémentent une logique d’application spécifique pour effectuer le rendu du contenu de votre site Internet. Vous pouvez considérer un composant comme une collection de scripts (par exemple, JSPs, Java servlets, etc.) qui réalisent complètement une fonction spécifique. Afin de réaliser cette fonctionnalité, il est de votre responsabilité en tant que développeur CQ de créer des scripts qui exécutent des fonctionnalités spécifiques. Pour plus d'informations sur les composants, consultez http://dev.day.com/docs/en/cq/current/developing/components.html.
Par défaut, un composant possède au moins un script par défaut, identique au nom du composant. Pour créer un composant de rendu, procédez ainsi :
1. Pour afficher la page d’accueil de CQ, saisissez l’URL http://[nom hôte]:[port] dans un navigateur Internet. Par exemple, http://localhost:4502.
2. Sélectionnez CRXDE Lite.
3. Cliquez avec le bouton droit sur /apps/imagecomponent/components/page > Ensuite, sélectionnez
Créer > Créer un composant.
4. Entrez les informations suivantes dans la boîte de dialogue « Créer un composant » :
- Etiquette: le nom du composant à créer. Saisissez modèle de l'image.
- Titre : le titre attribué au composant.
- Description: la description attribuée au modèle.
5. Sélectionnez Suivant pour paramétrer des composants avancés et les parents autorisés.
6. Sélectionnez OK sur les enfants autorisés.
7. Ouvrez le fichier templateImage.jsp situé dans : /apps/imagecomponent/components/page/templateImage/templateImage.jsp.
8. Entrez le code JSP suivant.
<%@include file="/libs/foundation/global.jsp" %> <cq:include script="/libs/wcm/core/components/init/init.jsp"/> <body> <h1>Here is where the Component will go</h1> <cq:include path="par" resourceType="foundation/components/parsys" /> </body> </html>
Remarque :
C'est le composant de page où vous allez ajouter le composant d’image que vous créez dans cet article de développement. La partie restante de cet article explique comment créer le composant qui vous permet d’utiliser une image.
Développez le composant qui supporte le glisser-déposer des images.
Vous créez maintenant le composant complexe qui prend en charge toutes les exigences répertoriées au début de cet article. L'illustration suivante montre la structure du composant créé dans cette section.
Effectuez les tâches suivantes à l’aide de CRXDE :
1. Cliquez avec le bouton droit sur /apps/imagecomponent/components puis sélectionnez Nouveau > Composant.
2. Entrez les informations suivantes dans la boîte de dialogue « Créer un composant » :
- Étiquette: Le nom du composant à créer. Saisissez complexe.
- Titre : le titre attribué au composant. Saisissez Complexe de formation.
- Description: la description attribuée au modèle. Saisissez Composant complexe.
- Super type de ressource: Saisir foundation/components/parbase.
- Groupe: le groupe dans le kick latéral où le composant apparaît. Saisissez Formation.
- Parents autorisés: saisir */*parsys
3. Ouvrez complex.jsp et entrez le code JavaScript suivant :
<%@include file="/libs/foundation/global.jsp"%>
<%@ page import="com.day.cq.wcm.foundation.Image" %>
<%
// getting the image from the Dialog/resouce
// notice the use of the second parameter "image" -- this signifies that the
// image will live on a resource (called image) below the requested resource
Image image = new Image(resource, "image");
// setting the selector so that the "parbase" can work its magic
image.setSelector(".img");
// getting the rich text from the Dialog
String text = properties.get("text", "TEXT NA");
// getting the path from the Design Dialog
String path = currentStyle.get("path", "PATH NA");
%>
<h2><%= path %></h2>
<%= text %><br />
<%
image.draw(out);
%>
4. Ajoutez une boîte de dialogue au composant complexe. Sélectionnez /apps/imagecomponent/components/complex. Faites un clic droit et sélectionnez Nouveau > Dialogue.
5. Créez un nœud éléments (Type de nœud cq:WidgetCollection) sous le nœud tab1 de
la boîte de dialogue du composant.
6. Créez un nœud texte (Type de nœud cq:Widget) sous le nouveau nœud éléments.
7. Attribuez les propriétés suivantes au nœud fraîchement créé texte :
|
|
Type |
Valeur |
Description |
|
nom |
Chaîne |
./text |
Définit l’emplacement de stockage du contenu. |
|
xtype |
Chaîne |
Texte enrichi. |
Il définit le type de Widget. |
|
hideLabel |
Boolean |
true |
Il permet de cacher l'étiquette du Widget. |
|
Valeur par défaut |
Chaîne |
Il s’agit du texte par défaut. |
Il définit la valeur du texte par défaut. |
8. Créez un nœud rtePlugins (Type de nœud nt : non structuré) sous le fraîchement créé
nœud de texte.
9. Créez un nœud table (Type de nœud nt : non structuré) sous le fraîchement créé
rtePlugins nœud.
10. Attribuez la propriété des caractéristiques (Type = Shaîne, Valeur = *) au nœud fraîchement créé table.
11. Copiez les noeuds onglet 2 et onglet 3 sous le nœud /libs/foundation/components/textimage/dialog/items. Collez dans la boîte de dialogue du composant complexe pour qu'ils soient un homologue de l'onglet 1 (par exemple, /apps/imagecomponent/components/complex/dialog/items/items).
L'onglet 2 correspond à l'onglet image intelligente et l'onglet 3 correspond aux propriétés avancées de l'image. Il est souvent plus efficace de copier-coller des dialogues/widgets existants qui répondent à vos besoins. Il est recommandé de vérifier et de comprendre ce que vous venez de copier pour mieux comprendre le fonctionnement interne de CQ.
Si vous examinez soigneusement la procédure, vous constatez que le widget stocke le contenu associé à l’image à un niveau plus profond que la ressource actuelle (par exemple, ./image/file, ./image/fileReference, etc.). Cela correspond au code dans complex.jsp (Image de l’image = nouvelle image (ressource, « image »);).
12. Créez un nœud éléments (Type de nœud cq:WidgetCollection) sous le nœud onglet 1 de la boîte de dialogue de conception de votre composant.
13. Créez un nœud chemin (Type de nœud cq:Widget) sous le nœud éléments.
14. Affectez les propriétés suivantes au nœud du chemin :
|
Nom |
Type |
Valeur |
Description |
|
nom |
Chaîne |
./path |
Il définit l'emplacement de stockage du contenu. |
|
xtype |
Chaîne |
pathfield |
Il définit le type de Widget. |
|
fieldLabel |
Chaîne |
Saisir un chemin d'accès. |
Il définit l'étiquette appliquée au Widget. |
|
rootPath |
Chaîne |
/content/trainingSite |
Il définit le chemin d'accès racine à afficher. |
|
regex |
Chaîne |
/^\/content\/trainingSite\/(.)*$/ |
Il définit l’expression régulière utilisée pour évaluer la saisie de l'utilisateur. |
|
regexText |
Chaîne |
Insérez une page sous /content/trainingSite. |
Définissez le message d’erreur si l’entrée d’un utilisateur échoue à l’expression régulière. |
15. Copiez le nœud /libs/foundation/components/textimage/cq:editConfig. Collez au nœud racine de votre composant complexe (/apps/imagecomponent/components/complex).
Cette action active les fonctionnalités de glisser-déposer à partir du trouveur de contenu.
Afin de glisser-déposer des ressources du trouveur de contenu vers un composant sur une page, il doit y avoir un nœud de configuration des cibles de dépôt appelé cq:dropTargets (de type nt:unstructured) sous le nœud de configuration d'édition (cq:editConfig) d'un composant.
16. A l'aide de CRXDE, naviguez sur ce chemin d'accès :
/apps/imagecomponent/components/complex/cq:editConfig/cq:dropTargets/image
Vérifiez que le nœud d’image possède les propriétés suivantes :
- Acceptez (Type = Chaîne) - Les types de média à accepter (par exemple, image/.*, etc.)
- Groupes (Type = Chaîne) - Les groupes dans le trouveur de contenu peuvent être
acceptés (par exemple, un média). - Nom de la propriété (Type = Chaîne) - La propriété dans laquelle la référence doit être stockée
(par exemple/image/fileReference)
17. Naviguez jusqu'au nœud de paramètres qui est un enfant du nœud d'image. Changez
la valeur de la propriété sling:resourceType pour avoir la valeur : formation
composants/complexe. La propriété sling:resourceType
doit faire référence à l'emplacement pour rechercher un script rendu.
Créez une page Internet CQ qui utilise le nouveau composant
La tâche finale consiste à créer un site contenant une page basée sur modèle de l'image (le modèle créé précédemment dans cet article de développement). Cette page CQ vous permet de sélectionner le widget complexe que vous venez de créer à côté de CQ, comme illustré dans l’illustration ci-dessous.
1. Rendez vous à la page d'accueil du CQ à l'adresse suivante http://[host name] : [port] ; par exemple, http://localhost:4502.
Cliquez sur sites Web.
2. Dans le volet de gauche, cliquez sur sites Web.
3. Cliquez sur nouvelle page.
4. Spécifiez le titre de la page dans le champ titre.
5. Spécifiez le nom de la page dans le champ nom.
6. Sélectionnez Modèle de l'image dans la liste des modèles qui apparaît. Cette valeur représente le modèle créé dans cet article de développement. Si vous ne le voyez pas, répétez les étapes listées dans cet article de développement. Par exemple, si vous faites une faute de frappe lors de la saisie des informations sur le chemin d'accès, le modèle ne peut pas s’afficher pas dans la boîte de dialogue « Nouvelle page ».
6. Ouvrez la nouvelle page que vous avez créée en double-cliquant dessus dans le volet de droite. La nouvelle page s’ouvre dans un navigateur Internet.
7. Depuis l'acolyte, cliquez sur l'icône Design située en bas.
8. Cliquez sur le bouton d'édition qui apparaît.
9. Dans la boîte de dialogue « Modifier le composant » qui apparaît, sélectionnez le composant sous formation, comme indiqué dans cette illustration.
10. Cliquez sur OK.
11. Maintenant, le nouveau composant apparaît sur l'acolyte. Faites glisser le composant vers la page Internet. Vous pouvez voir maintenant le composant comme indiqué au début de cet article. S'il n'apparaît pas, vérifiez que vous avez créé tous les noeuds et propriétés créés dans cet article.
Adobe
Recevez de l’aide plus rapidement et plus facilement
Nouvel utilisateur ?