L’IU classique utilise ExtJS pour créer des widgets qui donnent leur apparence aux composants. Compte tenu de la nature de ces widgets, il existe des différences entre la façon dont les composants interagissent avec l’interface utilisateur classique et l’interface utilisateur classique tactile.
De nombreux aspects du développement de composants sont communs à l’IU classique et à l’IU tactile. Par conséquent, vous devez lire Composants AEM - Principes de base avant à l’aide de cette page, qui traite des détails de l’IU classique.
Le langage HTL (HTML Template Language) et JSP peuvent tous deux être utilisés pour développer des composants pour l’IU classique. Cependant, cette page illustre le développement avec JSP. Cela est simplement dû au fait que JSP est traditionnellement utilisé dans l’IU classique.
HTL est désormais le langage de script recommandé pour AEM. Voir HTL et Développement de composants AEM pour comparer les méthodes.
La structure de base d’un composant est décrite sur la page Composants d’AEM - Principes de base, qui s’applique à la fois aux interfaces utilisateur tactile et classique. Même si vous ne devez pas utiliser les paramètres de l’IU tactile dans votre nouveau composant, il est intéressant de les connaître lorsque vous héritez des composants existants.
Les servlets ou scripts JSP peuvent être utilisés pour le rendu des composants. Selon les règles de traitement des requêtes de Sling, le nom du script par défaut est :
<*componentname*>.jsp
Le fichier de script JSP global.jsp
est utilisé pour fournir un accès rapide à des objets spécifiques (accéder à du contenu, par exemple) à n’importe quel fichier de script JSP utilisé pour le rendu d’un composant.
Par conséquent, global.jsp
doit être inclus dans chaque script JSP de rendu de composant dans lequel un ou plusieurs des objets fournis dans global.jsp
sont utilisés.
L’emplacement du fichier global.jsp
par défaut est le suivant :
/libs/foundation/global.jsp
Le chemin /libs/wcm/global.jsp
, qui était utilisé par les versions CQ 5.3 et antérieures, est désormais obsolète.
Vous trouverez, ci-dessous, les objets les plus importants fournis à partir du fichier global.jsp
par défaut :
Résumé :
<cq:defineObjects />
slingRequest
- Objet de requête encapsulé ( SlingHttpServletRequest
).slingResponse
- Objet de réponse encapsulé ( SlingHttpServletResponse
).resource
- Objet Ressource Sling ( slingRequest.getResource();
).resourceResolver
- Objet Sling Resource Resolver ( slingRequest.getResoucreResolver();
).currentNode
– Nœud JCR résolu pour la requête.log
- Enregistreur par défaut ().sling
- L’assistant de script Sling.properties
- Propriétés de la ressource gérée ( resource.adaptTo(ValueMap.class);
).pageProperties
– Propriétés de la page de la ressource gérée.pageManager
- Gestionnaire de pages pour l’accès aux AEM pages de contenu ( resourceResolver.adaptTo(PageManager.class);
).component
– Objet du composant AEM en cours.designer
- Objet designer pour la récupération des informations de conception ( resourceResolver.adaptTo(Designer.class);
).currentDesign
– Conception de la ressource gérée.currentStyle
– Style de la ressource gérée.Il existe trois méthodes pour accéder au contenu dans AEM WCM :
Via l’objet de propriétés introduit dans global.jsp
:
L’objet properties est une instance de ValueMap (voir API Sling) et contient toutes les propriétés de la ressource actuelle.
Exemple : String pageTitle = properties.get("jcr:title", "no title");
utilisé dans le script de rendu d’un composant de page.
Exemple : String paragraphTitle = properties.get("jcr:title", "no title");
utilisé dans le script de rendu d’un composant de paragraphe standard.
Via l’objet currentPage
introduit dans global.jsp
:
L’objet currentPage
est une instance d’une page (voir AEM API). La classe de page fournit plusieurs méthodes d’accès au contenu.
Exemple: String pageTitle = currentPage.getTitle();
Via l’objet currentNode
introduit dans global.jsp
:
L’objet currentNode
est une instance d’un noeud (voir API JCR). Les propriétés d'un noeud sont accessibles par la méthode getProperty()
.
Exemple: String pageTitle = currentNode.getProperty("jcr:title");
Les bibliothèques de balises CQ et Sling vous donnent accès à des fonctions spécifiques à utiliser dans le script JSP de vos modèles et composants.
Pour plus d’informations, voir le document Bibliothèques de balises.
Les sites web modernes sont très dépendants du traitement côté client effectué par du code JavaScript et CSS complexe. Organiser et optimiser la diffusion de ce code est une opération qui peut se révéler complexe.
Pour résoudre ce problème, AEM fournit des dossiers de bibliothèque côté client, qui vous permettent de stocker votre code côté client dans le référentiel, de l’organiser en catégories et de définir quand et comment chaque catégorie de code doit être diffusée au client. Le système de bibliothèque côté client se charge alors de la génération des liens appropriés dans la page web finale pour charger le code correct.
Pour plus d’informations, voir le document Utilisation de bibliothèques HTML côté client .
Votre composant a besoin d’une boîte de dialogue pour que les auteurs puissent ajouter et configurer le contenu.
Voir AEM Composants - Principes de base pour plus de détails.
Vous pouvez configurer le comportement de modification d’un composant. Cela inclut les attributs tels que les actions disponibles pour le composant, les caractéristiques de l’éditeur statique et les écouteurs associés aux événements sur le composant. La configuration est commune aux interfaces utilisateur tactile et classique, avec cependant quelques différences spécifiques.
La configuration du comportement de modification d’un composant s’effectue en ajoutant un nœud cq:editConfig
de type cq:EditConfig
sous le nœud de composant (de type cq:Component
), ainsi qu’en ajoutant des nœuds enfants et des propriétés spécifiques.
Pour plus d’informations, voir Utilisation et extension de widgets ExtJS.
Pour plus d’informations, voir Utilisation de xtypes.
Cette section vous explique comment créer vos propres composants et les ajouter au système de paragraphes.
Pour commencer rapidement, une méthode consiste à copier un élément existant, puis à effectuer les modifications de votre choix.
Le développement d’un composant est décrit en détail dans la section Extension du composant texte et image – Exemple.
Pour développer un nouveau composant pour AEM sur la base d’un composant existant, vous pouvez copier ce composant, créer un fichier JavaScript pour le nouveau composant et le stocker dans un emplacement accessible à AEM (voir Personnalisation des composants et d’autres éléments) :
À l’aide de CRXDE Lite, créez un dossier de composants dans :
/ apps/<myProject>/components/<myComponent>
Recréez la structure de nœud 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 :
/libs/foundation/components/text
/apps/myProject/components/text
Modifiez la balise jcr:title
afin de refléter son nouveau nom.
Ouvrez le nouveau dossier de composants et effectuez les modifications voulues. Supprimez également toute information superflue du dossier.
Vous pouvez effectuer les modifications suivantes :
Ajouter un nouveau champ dans la boîte de dialogue
cq:dialog
- boîte de dialogue pour l’IU tactiledialog
: boîte de dialogue pour l’interface utilisateur classiqueRemplacement du fichier .jsp
(nommez-le après votre nouveau composant)
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 .jsp
pour traiter l’entrée qui y est effectuée.
Un composant pour :
Une boîte de dialogue définie pour l’interface utilisateur classique fonctionne dans l’interface utilisateur tactile.
En revanche, une boîte de dialogue définie pour l’interface utilisateur tactile ne fonctionne pas dans l’interface utilisateur classique.
En fonction de l’instance et de l’environnement de création, vous pouvez définir les deux types de boîte de dialogue pour votre composant.
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’IU tactiledialog
: boîte de dialogue pour l’interface utilisateur classiquecq:editConfig
: comportement des composants dans l’environnement de modification (glisser-déposer, par exemple)design_dialog
- boîte de dialogue pour le mode de conception (IU classique uniquement)Activez le nouveau composant dans votre système de paragraphes en effectuant l’une des opérations suivantes :
<path-to-component>
(par exemple, /apps/geometrixx/components/myComponent
) aux composants de propriété du noeud /etc/designs/geometrixx/jcr:content/contentpage/par
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.
Pour afficher les statistiques de minutage pour le chargement de la page, vous pouvez utiliser Ctrl+Maj+U, avec ?debugClientLibs=true
défini dans l’URL.
Une fois que le composant a été développé, vous l’ajoutez au système de paragraphes, ce qui permet aux auteurs de le sélectionner et de l’utiliser lors de la modification d’une page.
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 à nouveau, par exemple :
<contextPath>/ Test.html?wcmmode=design
Cliquez sur Conception dans le sidekick.
Vous êtes maintenant en mode Création et vous pouvez modifier le système de paragraphes.
Cliquez sur Modifier.
La liste des composants appartenant au système de paragraphes est affichée. 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 vérifier qu’il est bien disponible.
Cette section vous explique comment étendre le composant Texte et image standard (un composant couramment utilisé) avec une fonctionnalité de placement d’images configurable.
L’extension du composant Texte et image permet aux éditeurs d’utiliser toutes les fonctionnalités existantes du composant et leur offre, en outre, la possibilité de positionner l’image :
Après avoir étendu ce composant, vous pouvez configurer le positionnement des images au moyen de la boîte de dialogue correspondante.
Les techniques suivantes sont décrites dans cet exercice :
Cet exemple concerne l’IU classique.
Cet exemple est basé sur l’échantillon de contenu Geometrixx. Celui-ci n’est plus fourni avec AEM et a été remplacé par We.Retail. Consultez le document Implémentation de référence We.Retail pour savoir comment télécharger et installer Geometrixx.
Pour créer le composant, nous utilisons le composant textimage standard comme base et nous le modifions. Nous allons stocker le nouveau composant dans l’exemple d’application Geometrixx AEM WCM.
Copiez le composant textimage standard de /libs/foundation/components/textimage
dans le dossier du composant Geometrixx, /apps/geometrixx/components
, en utilisant textimage comme nom du noeud 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 :
textimage/dialog
textimage/textimage.jsp
textimage/cq:editConfig
La définition de la boîte de dialogue dépend de l’interface utilisateur :
textimage/cq:dialog
textimage/dialog
Modifiez les métadonnées du composant :
Nom du composant
jcr:description
sur Text Image Component (Extended)
jcr:title
sur Text Image (Extended)
Groupe, où le composant est répertorié dans le sidekick (laisser tel quel)
componentGroup
défini sur General
Composant parent pour le nouveau composant (le composant textimage standard)
sling:resourceSuperType
sur foundation/components/textimage
Après cette étape, le nœud de composant ressemble à ceci :
Modifiez la propriété sling:resourceType
du noeud de configuration d’édition de l’image (propriété : textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType
) en 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 afin d’inclure la nouvelle option. Le nouveau composant hérite des sections de la boîte de dialogue qui sont identiques à l’original. Le seul ajout que nous effectuons consiste à étendre l’onglet Avancé, en ajoutant une liste déroulante Position d’image, avec les options Gauche et Droite :
textimage/dialog
inchangées.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) :
/libs/foundation/components/textimage/dialog/items/tab1.infinity.json
et /libs/foundation/components/textimage/dialog/items/tab2.infinity.json
, respectivement.Pour tab3 :
Ne modifiez pas les autres propriétés et sous-nœuds.
Ajoutez une nouvelle définition de champ à tab3/items
, position de noeud de type cq:Widget
Définissez les propriétés suivantes (de type Chaîne) pour le nouveau noeud tab3/items/position
:
name
: ./imagePosition
xtype
: selection
fieldLabel
: Image Position
type
: select
Ajoutez le sous-noeud position/options
de type cq:WidgetCollection
pour représenter les deux choix de placement d’image, et sous celui-ci, créez deux noeuds, o1 et o2 de type nt:unstructured
.
Pour le noeud position/options/o1
, définissez les propriétés : text
à Left
et value
à left.
Pour le noeud position/options/o2
, définissez les propriétés : text
à Right
et value
à 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é.
Une fois que le composant a été développé, vous pouvez l’ajouter au système de paragraphes, ce qui permet aux auteurs de le sélectionner et de l’utiliser lors de la modification d’une page. Les étapes suivantes vous permettent de tester le composant.
Le composant stocke son contenu dans un paragraphe sur la page Company.
Pour désactiver cette fonctionnalité, nous utilisons le composant d’image standard comme base et nous le modifions. Nous allons stocker le nouveau composant dans l’exemple d’application Geometrixx.
Copiez le composant d’image standard de /libs/foundation/components/image
dans le dossier de composants de Geometrixx, /apps/geometrixx/components
, en utilisant image comme nom de noeud cible.
Modifiez les métadonnées du composant :
Image (Extended)
Accéder à /apps/geometrixx/components/image/dialog/items/image
.
Ajouter une nouvelle propriété :
allowUpload
String
false
Cliquez sur Enregistrer tout. Le composant est prêt à être testé.
Ouvrez une page dans Geometrixx ; English / Company, par exemple.
Basculez vers le mode Création 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 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.