Vous consultez actuellement l'aide de la version:

Remarque :

Cet article vous explique comment créer un site web à l’aide de JSP et basé sur l’interface utilisateur (IU) classique. Adobe vous recommande de tirer parti des technologies AEM les plus récentes pour vos sites web. Vous en trouverez une description détaillée dans l’article Prise en main du développement d’AEM Sites.

Ce tutoriel vous permet de créer un site web riche en fonctionnalités avec Adobe Experience Manager (AEM). Le site web sera architecturé autour d’un site web générique et s’adressera principalement aux développeurs web. Toute la phase de développement s’effectuera dans un environnement de création.

Ce tutoriel vous explique comment :

  1. Installer AEM.
  2. Accéder à CRXDE Lite (l’environnement de développement).
  3. Installer la structure du projet dans CRXDE Lite.
  4. Créer le modèle, le composant et les scripts utilisés comme base pour la création de pages de contenu.
  5. Créer la page racine de votre site web et ensuite les pages de contenu.
  6. Créer les composants suivants en vue de les utiliser sur vos pages :
    • Navigation supérieure
    • Liste des enfants
    • Logo
    • Image
    • Texte-Image
    • Recherche
  7. Inclure différents composants Foundation.

Une fois toutes les étapes exécutées, vos pages se présentent comme suit :

chlimage_1

Téléchargement du résultat final

Pour suivre le tutoriel plutôt que d’effectuer les exercices, téléchargez le fichier website-1.0.zip. Il s’agit d’un module de contenu AEM comprenant les résultats de ce tutoriel. Utilisez Package Manager pour installer le module sur votre instance de création.

REMARQUE : L’installation de ce module écrase toutes les ressources de votre instance de création que vous avez créées à l’aide de ce tutoriel.

 

Telechargement

Installation d’Adobe Experience Manager

Pour installer une instance AEM afin de développer votre site web, suivez les instructions de configuration d’un environnement de déploiement avec des instances de création et de publication ou effectuez une installation générique. Dans le cadre de l’installation générique, vous devez télécharger un fichier JAR Quickstart AEM, placer le fichier license.properties dans le même répertoire que le fichier JAR et ensuite double-cliquer sur le fichier JAR.  

Une fois que vous avez installé AEM, accédez à l’environnement de développement CRXDE Lite en cliquant sur le lien CRXDE Lite sur la page d’accueil : 

chlimage_1

Remarque :

L’URL de CRXDE Lite pour une instance de création AEM installée en local à l’aide du port par défaut est http://localhost:4502/crx/de/.

Installation de la structure du projet dans CRXDE Lite

Utilisez CRXDE Lite pour créer la structure d’application mywebsite dans le référentiel :

  1. Dans l’arborescence de gauche de CRXDE Lite, cliquez avec le bouton droit de la souris sur le dossier /apps, puis cliquez sur Créer > Créer Dossier. Dans la boîte de dialogue Créer un dossier, indiquez mywebsite comme nom de dossier, puis cliquez sur OK.

  2. Cliquez avec le bouton droit de la souris sur le dossier /apps/mywebsite, puis cliquez sur Créer > Créer un dossier. Dans la boîte de dialogue Créer un dossier, indiquez components comme nom de dossier, puis cliquez sur OK.

  3. Cliquez avec le bouton droit de la souris sur le dossier /apps/mywebsite, puis cliquez sur Créer > Créer un dossier. Dans la boîte de dialogue Créer un dossier, indiquez templates comme nom de dossier, puis cliquez sur OK.

    La structure de l’arborescence doit maintenant se présenter comme suit :

    chlimage_1
  4. Cliquez sur Enregistrer tout.

Configuration de la conception

Dans cette section, vous allez créer la conception de votre application à l’aide de l’outil Designer. Cette conception fournit des ressources d’image et CSS pour votre site web.

Remarque :

Cliquez sur le lien ci-dessous pour télécharger mywebsite.zip. L’archive contient le fichier static.css et les fichiers image nécessaires à votre conception.

Telechargement

  1. Sur la page d’accueil d’AEM, cliquez sur Outils. (http://localhost:4502/libs/cq/core/content/welcome.html)

    chlimage_1
  2. Dans l’arborescence, sélectionnez le dossier Designs, puis cliquez sur Nouveau > Nouvelle page. Indiquez mywebsite comme titre, puis cliquez sur Créer.

  3. Si l’élément mywebsite n’apparaît pas dans le tableau, actualisez l’arborescence ou le tableau.

  4. À l’aide de WebDAV, accédez à l’URL http://localhost:4502, puis copiez l’exemple de fichier static.css et le dossier images depuis le fichier mywebsite.zip téléchargé dans le dossier /etc/designs/mywebsite

    chlimage_1

Création du script, du composant et du modèle contentpage

Dans cette section, vous allez créer les éléments suivants :

  • Le modèle contentpage qui sera utilisé pour créer des pages de contenu dans l’exemple de site web
  • Le composant contentpage qui sera utilisé pour effectuer le rendu des pages de contenu
  • Le script contentpage

Création du modèle contentpage

Créez un modèle à utiliser comme base des pages web de votre site.

Un modèle définit le contenu par défaut d’une nouvelle page. Les sites web complexes peuvent utiliser plusieurs modèles pour créer différents types de pages. Dans le cadre de cet exercice, toutes les pages sont basées sur un modèle simple.

  1. Dans l’arborescence de CRXDE Lite, cliquez avec le bouton droit de la souris sur /apps/mywebsite/templates, puis cliquez sur Créer > Créer un modèle.

  2. Dans la boîte de dialogue Créer un modèle, entrez les valeurs ci-dessous et cliquez ensuite sur Suivant :

    • Libellé : contentpage
    • Titre : My Website Content Page Template (Modèle de page de contenu de mon site web)
    • Description : This is my Website Content Page Template (Il s’agit du modèle de page de contenu de mon site web)
    • Type de ressource : mywebsite/components/contentpage

    Utilisez la valeur par défaut pour la propriété Classement.

    chlimage_1

    Le type de ressource identifie le composant qui effectue le rendu de la page. Dans ce cas, le rendu de toutes les pages créées à l’aide du modèle contentpage est effectué par le composant mywebsite/components/contentpage.

  3. Pour spécifier les chemins d’accès des pages qui utilisent ce modèle, cliquez sur le bouton Plus et saisissez ensuite /content(/.*)? dans la zone de texte qui s’affiche. Cliquez ensuite sur Suivant.

    chlimage_1

    La valeur de la propriété de chemin autorisée est une expression régulière. Les pages dont le chemin d’accès correspond à l’expression peuvent utiliser le modèle. Dans ce cas, l’expression régulière correspond au chemin du dossier /content et à toutes les sous-pages.

    Lorsqu’un auteur crée une page sous /content, le modèle contentpage apparaît dans la liste des modèles pouvant être utilisés.

  4. Cliquez sur Suivant dans les panneaux Parents autorisés et Enfants autorisés, puis cliquez sur OK. Dans CRXDE Lite, cliquez sur Enregistrer tout.

    chlimage_1

Création du composant contentpage

Créez le composant qui définit le contenu et effectue le rendu des pages qui utilisent le modèle contentpage. L’emplacement du composant doit correspondre à la valeur de la propriété Type de ressource du modèle contentpage.

  1. Dans CRXDE Lite, cliquez avec le bouton droit de la souris sur /apps/mywebsite/components, puis cliquez sur Créer > Composant.

  2. Dans la boîte de dialogue Créer un composant, saisissez les valeurs de propriété suivantes : 

    • Libellé : contentpage
    • Titre : My Website Content Page Component (Composant de page de contenu de mon site web)
    • Description : This is My Website Content Page Component (Il s’agit du composant de page de contenu de mon site web)
    chlimage_1

    L’emplacement du nouveau composant est /apps/mywebsite/components/contentpage. Ce chemin correspond au type de ressource du modèle contentpage (sans la partie /apps/).

    Cette correspondance connecte le modèle au composant. Elle est essentielle pour le bon fonctionnement du site web.

  3. Cliquez sur Suivant jusqu’à ce que le panneau Enfants autorisés de la boîte de dialogue s’affiche. Cliquez ensuite sur OK. Dans CRXDE Lite, cliquez sur Enregistrer tout.

    La structure se présente désormais comme suit :

    chlimage_1

Développement du script du composant contentpage

Ajoutez le code au script contentpage.jsp pour définir le contenu de la page.

  1. Dans CRXDE Lite, ouvrez le fichier contentpage.jsp dans /apps/mywebsite/components/contentpage. Le fichier contient le code suivant par défaut :

    <%--
    
      My Website Content Page Component component.
    
      This is My Website Content Page Component.
    
    --%><%
    %><%@include file="/libs/foundation/global.jsp"%><%
    %><%@page session="false" %><%
    %><%
        /* TODO add you code here */
    %>
  2. Copiez le code ci-dessous et collez-le dans contentpage.jsp après le code par défaut :

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>My title</title>
    </head>
    <body>
    <div>My body</div>
    </body>
    </html>
  3. Cliquez sur Enregistrer tout pour enregistrer vos modifications.

Création de votre page de site web et des pages de contenu

Dans cette section, vous allez créer les pages suivantes qui utilisent toutes le modèle contentpage : My Website, English, Products, Services, et Customers.

  1. Sur la page d’accueil d’AEM (http://localhost:4502/libs/cq/core/content/welcome.html), cliquez sur Sites web.

    chlimage_1
  2. Dans l’arborescence, sélectionnez le dossier Sites web, puis cliquez sur Nouveau > Nouvelle page.

  3. Dans la fenêtre Créer une page, saisissez les informations suivantes :

    • Titre : My Website (Mon site web)
    • Nom : mywebsite
    • Sélectionnez My Website Content Page Template (Modèle de page de contenu de mon site web)
    chlimage_1
  4. Cliquez sur Créer. Dans l’arborescence, sélectionnez la page /Websites/My Website, puis cliquez sur Nouveau > Nouvelle page.

  5. Dans la boîte de dialogue Créer une page, entrez les valeurs de propriété ci-dessous et cliquez ensuite sur Créer :

    • Titre : Anglais
    • Nom : en
    • Sélectionnez My Website Content Page Template (Modèle de page de contenu de mon site web).
  6. Dans l’arborescence, sélectionnez la page /Websites/My Website/English, puis cliquez sur Nouveau > Nouvelle page.

  7. Dans la boîte de dialogue Créer une page, entrez les valeurs de propriété ci-dessous et cliquez ensuite sur Créer : 

    • Titre : Products
    • Sélectionnez My Website Content Page Template (Modèle de page de contenu de mon site web).

  8. Dans l’arborescence, sélectionnez la page /Websites/My Website/English, puis cliquez sur Nouveau > Nouvelle page.

  9. Dans la boîte de dialogue Créer une page, entrez les valeurs de propriété ci-dessous et cliquez ensuite sur Créer :

    • Titre : Services
    • Sélectionnez My Website Content Page Template (Modèle de page de contenu de mon site web).
  10. Dans l’arborescence, sélectionnez la page /Websites/My Website/English, puis cliquez sur Nouveau > Nouvelle page

  11. Dans la boîte de dialogue Créer une page, entrez les valeurs de propriété ci-dessous et cliquez ensuite sur Créer : 

    • Titre : Customers
    • Sélectionnez My Website Content Page Template (Modèle de page de contenu de mon site web). 

    La structure se présente comme suit :

    chlimage_1
  12. Pour lier vos pages à la conception mywebsite, sélectionnez le nœud /content/mywebsite/en/jcr:content dans CRXDE Lite. Sur l’onglet Propriétés, entrez les valeurs suivantes pour une nouvelle propriété, puis cliquez sur Ajouter :

    • Nom : cq:designPath
    • Type : Chaîne
    • Valeur : /etc/designs/mywebsite
    chlimage_1
  13. Dans un nouvel onglet ou une nouvelle fenêtre de navigateur web, ouvrez http://localhost:4502/content/mywebsite/en/products.html pour afficher la page Products :

    chlimage_1

Amélioration du script contentpage

Cette section décrit la procédure d’amélioration du script contentpage en utilisant des scripts de composant Foundation AEM et en rédigeant vos propres scripts.

La page Products se présente comme suit :

chlimage_1

Utilisation des scripts de page Foundation

Au cours de cet exercice, vous allez configurer votre composant pagecontent afin que son supertype corresponde au composant Page AEM. Les composants héritent des fonctionnalités de leur supertype. Votre composant pagecontent hérite donc des scripts et des propriétés du composant Page.

Par exemple, dans le code JSP de votre composant, vous pouvez référencer les scripts fournis par le composant supertype comme s’ils étaient inclus dans votre composant. 

  1. Dans CRXDE Lite, ajoutez une propriété au nœud /apps/mywebsite/components/contentpage.

    1. Sélectionnez le nœud /apps/mywebsite/components/contentpage.
    2. Au bas de l’onglet Propriétés, entrez les valeurs de propriété suivantes, puis cliquez sur Ajouter :
      • Nom : sling:resourceSuperType
      • Type : Chaîne
      • Valeur : foundation/components/page
    3. Cliquez sur Enregistrer tout.
  2. Ouvrez le fichier contentpage.jsp sous /apps/mywebsite/components/contentpage et remplacez le code existant par le suivant :

    <%@include file="/libs/foundation/global.jsp"%><%
    %><%@page session="false" contentType="text/html; charset=utf-8" %><%
    %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <cq:include script="head.jsp"/>
    <cq:include script="body.jsp"/>
    </html>
  3. Enregistrez vos modifications.

  4. Dans votre navigateur, rechargez la page Products. Elle se présente comme suit :

    chlimage_1

    Ouvrez la source de la page pour afficher les éléments JavaScript et HTML générés par les scripts head.jsp et body.jsp Le fragment de script suivant ouvre le sidekick lors de l’ouverture de la page :

    CQ.WCM.launchSidekick("/content/mywebsite/en/products",
                {propsDialog: "/libs/foundation/components/page/dialog",
                   locked: false locked: false
                 }); 

Utilisation de vos propres scripts

Dans cette section, vous allez créer plusieurs scripts qui génèrent, chacun, une partie du corps de la page. Vous allez ensuite créer le fichier body.jsp dans le composant pagecontent pour remplacer le fichier body.jsp du composant Page AEM. Dans votre fichier body.jsp, vous allez inclure les scripts qui génèrent les différentes parties du corps de la page. 

Conseil : Lorsqu’un composant inclut un fichier ayant le même nom et le même emplacement relatif qu’un fichier du supertype du composant, il est qualifié de recouvrement.

  1. Dans CRXDE Lite, créez le fichier left.jsp sous /apps/mywebsite/components/contentpage :

    1. Cliquez sur le nœud /apps/mywebsite/components/contentpage avec le bouton droit de la souris, puis sélectionnez Créer et Créer un fichier.
    2. Dans la fenêtre, saisissez left.jsp dans le champ Nom, puis cliquez sur OK.
  2. Modifiez le fichier left.jsp pour supprimer le contenu existant et le remplacer par le code suivant :

    <%@include file="/libs/foundation/global.jsp"%><%
    %><div class="left">
    <div>logo</div>
    <div>newslist</div>
    <div>search</div>
    </div>
  3. Enregistrez les modifications.

  4. Dans CRXDE Lite, créez le fichier center.jsp sous /apps/mywebsite/components/contentpage :

    1. Cliquez sur le nœud /apps/mywebsite/components/contentpage avec le bouton droit de la souris, puis sélectionnez Créer et Créer un fichier.
    2. Dans la boîte de dialogue, indiquez center.jsp dans le champ Nom, puis cliquez sur OK.
  5. Modifiez le fichier center.jsp pour supprimer le contenu existant et le remplacer par le code suivant :

    <%@include file="/libs/foundation/global.jsp"%><%
    %><div class="center">
    <div>trail</div>
    <div>title</div>
    <div>parsys</div>
    </div>
  6. Enregistrez les modifications.

  7. Dans CRXDE Lite, créez le fichier right.jsp sous /apps/mywebsite/components/contentpage :

    1. Cliquez sur le nœud /apps/mywebsite/components/contentpage avec le bouton droit de la souris, puis sélectionnez Créer et Créer un fichier.
    2. Dans la boîte de dialogue, indiquez right.jsp dans le champ Nom, puis cliquez sur OK.
  8. Modifiez le fichier right.jsp pour supprimer le contenu existant et le remplacer par le code suivant :

    <%@include file="/libs/foundation/global.jsp"%><%
    %><div class="right">
    <div>iparsys</div>
    </div>
  9. Enregistrez les modifications.

  10. Dans CRXDE Lite, créez le fichier body.jsp sous /apps/mywebsite/components/contentpage :

  11. Modifiez le fichier body.jsp pour supprimer le contenu existant et le remplacer par le code suivant :

    <%@include file="/libs/foundation/global.jsp"%><%
    %><body>
    <div id="CQ">
    <div class="topnav">topnav</div>
    <div class="content">
    <cq:include script="left.jsp" />
    <cq:include script="center.jsp" />
    <cq:include script="right.jsp" />
    </div>
    <div class="footer">
    <div class="toolbar">toolbar</div>
    </div>
    </div>
    </body>
  12. Enregistrez les modifications.

  13. Dans votre navigateur, rechargez la page Products. Elle se présente comme suit :

    chlimage_1

Création d’un composant de navigation supérieure

Dans cette section, vous allez créer un composant qui affiche des liens vers toutes les pages de niveau supérieur du site web afin de faciliter la navigation. Le contenu de ce composant apparaît en haut de toutes les pages qui sont créées à l’aide du modèle contentpage.

Dans la première version du composant de navigation supérieure (topnav), les éléments de navigation étaient des liens texte uniquement. Dans la deuxième version, vous implémentez le composant topnav avec des liens de navigation d’image.

Votre navigation supérieure se présente alors comme suit :

chlimage_1

Création d’un composant de navigation supérieure

  1. Dans CRXDE Lite, cliquez avec le bouton droit de la souris sur /apps/mywebsite/components, puis sélectionnez Créer et Créer un composant.

  2. Dans la fenêtre Créer un composant, saisissez les informations suivantes :

    • Libellé : topnav
    • Titre : My Top Navigation Component (Mon composant de navigation supérieure)
    • Description : This is My Top Navigation Component (Il s’agit de mon composant de navigation supérieure)

  3. Cliquez sur Suivant jusqu’à ce que vous accédiez à la dernière fenêtre. Cliquez alors sur OK. Enregistrez vos modifications.

Création du script de navigation supérieure avec des liens textuels

Ajoutez le script de rendu à topnav pour générer des liens textuels vers les pages enfants :

  1. Dans CRXDE Lite, ouvrez le fichier topnav.jsp sous /apps/mywebsite/components/topnav.

  2. Remplacez le code qui s’y trouve en copiant et en collant le code suivant :

    <%@include file="/libs/foundation/global.jsp"%><% 
    %><%@ page import="java.util.Iterator,
            com.day.text.Text, 
            com.day.cq.wcm.api.PageFilter, com.day.cq.wcm.api.Page" %><% 
        /* get starting point of navigation */
        Page navRootPage = currentPage.getAbsoluteParent(2); 
        if (navRootPage == null && currentPage != null) { 
        navRootPage = currentPage; 
        }
        if (navRootPage != null) { 
            Iterator<Page> children = navRootPage.listChildren(new PageFilter(request));
            while (children.hasNext()) { 
                Page child = children.next(); 
                %><a href="<%= child.getPath() %>.html"><%=child.getTitle() %></a><% 
            } 
        } 
    %> 

Intégration de la navigation supérieure (topnav) dans le composant contentpage

Pour inclure topnav dans votre composant contentpage, procédez comme suit :

  1. Dans CRXDE Lite, ouvrez le fichier body.jsp sous /apps/mywebsite/components/contentpage et remplacez :

    <div class="topnav">topnav</div>

    par :

    <cq:include path="topnav" resourceType="mywebsite/components/topnav" />
  2. Enregistrez les modifications.

  3. Dans votre navigateur, rechargez la page Products. La navigation supérieure se présente alors comme suit :

    chlimage_1

Amélioration de pages avec des sous-titres

Le composant Page définit les propriétés qui vous permettent de fournir des sous-titres pour les pages. Ajoutez des sous-titres qui fournissent des informations sur le contenu de la page.

  1. Dans votre navigateur, rechargez la page Products.

  2. Dans l’onglet Page du sidekick, cliquez sur Propriétés de la page.

  3. Dans l’onglet De base de la boîte de dialogue, développez Autres titres et description. Pour la propriété Sous-titre, indiquez opérations effectuées. Cliquez sur OK.

  4. Répétez les étapes précédentes pour ajouter le sous-titreabout our services (À propos de nos services) à la page Services.

  5. Répétez les étapes précédentes pour ajouter le sous-titre the trust we earn (Gagner la confiance) à la page Customers (Clients).

    Conseil : Dans CRXDE Lite, sélectionnez le nœud /content/mywebsite/en/products/jcr:content pour voir que la propriété Sous-titre a été ajoutée.

Amélioration de la navigation supérieure à l’aide de liens d’image

Améliorez le script de rendu du composant topnav afin d’utiliser des liens d’image plutôt que des hyperliens pour les commandes de navigation. L’image contient le titre et le sous-titre de la cible du lien.

Cet exercice illustre le traitement d’une requête Sling. Le script topnav.jsp est modifié de manière à appeler un script qui génère, de manière dynamique, des images à utiliser pour les liens de navigation. Au cours de cet exercice, Sling analyse l’URL des fichiers sources de l’image afin de déterminer le script à utiliser pour effectuer le rendu des images.

Par exemple, la source du lien d’image vers la page Products peut être http://localhost:4502/content/mywebsite/en/products.navimage.png. Sling analyse cette URL pour déterminer le type de ressource et le script à utiliser pour effectuer le rendu de la ressource :

  1. Sling détermine que le chemin d’accès de la ressource doit être /content/mwebysite/en/products.png.
  2. Sling fait correspondre ce chemin d’accès avec le nœud /content/mywebsite/en/products.
  3. Sling détermine que le sling:resourceType de ce nœud doit être mywebsite/components/contentpage.
  4. Sling identifie, dans ce composant, le script qui correspond le mieux au sélecteur d’URL (navimage) et à l’extension de nom de fichier (png).

Dans le cadre de cet exercice, Sling fait correspondre ces URL au script /apps/mywebsite/components/contentpage/navimage.png.java que vous créez.

  1. Dans CRXDE Lite, ouvrez le fichier topnav.jsp sous /apps/mywebsite/components/topnav. Localisez le contenu de l’élément d’ancrage (ligne 14) :

    <%=child.getTitle() %>
  2. Remplacez le contenu d’ancrage par le code suivant :

    <img alt="<%= child.getTitle() %>" src="<%= child.getPath() %>.navimage.png">
  3. Enregistrez les modifications.

  4. Cliquez avec le bouton droit de la souris sur le nœud /apps/mywebsite/components/contentpage, puis cliquez sur Créer > Créer un fichier.

  5. Dans la fenêtre Créer un fichier, dans le champ Nom, saisissez navimage.png.java.

    L’extension de nom de fichier .java indique à Sling que la prise en charge Java des scripts Apache Sling doit être utilisée pour compiler le script et créer un servlet.

  6. Copiez le code suivant dans navimage.png.java. Le code étend la classe AbstractImageServlet :

    • AbstractImageServlet crée un objet ImageContext qui stocke les propriétés de la ressource actuelle.
    • La page parent de la ressource est extraite de l’objet ImageContext. Le titre et le sous-titre de la page sont ensuite obtenus. 
    • ImageHelper est utilisé pour générer l’image depuis le fichier navimage_bg.jpg de la conception du site, le titre de la page et le sous-titre de la page.
    package apps.mywebsite.components.contentpage;
    
    import java.awt.Color; 
    import java.awt.Paint; 
    import java.awt.geom.Rectangle2D; 
    
    import java.io.IOException;  
    import javax.jcr.RepositoryException; 
     
    import com.day.cq.wcm.api.Page; 
    import com.day.cq.wcm.api.PageManager; 
    import com.day.cq.wcm.api.components.Component; 
    import com.day.cq.wcm.api.designer.Designer;
    
    import com.day.cq.commons.SlingRepositoryException; 
    import com.day.cq.wcm.commons.WCMUtils; 
    import com.day.cq.wcm.commons.AbstractImageServlet; 
    import com.day.cq.commons.ImageHelper; 
    
    import com.day.image.Font; 
    import com.day.image.Layer; 
    
    import org.apache.sling.api.SlingHttpServletRequest; 
    import org.apache.sling.api.SlingHttpServletResponse; 
    import org.apache.sling.api.resource.Resource; 
    import org.apache.sling.api.servlets.SlingSafeMethodsServlet; 
    
    /**
      * Renders the navigation image
      */ 
    public class navimage_png extends AbstractImageServlet {
    
          protected Layer createLayer(ImageContext ctx)
                 throws RepositoryException, IOException {
             PageManager pageManager = ctx.resolver.adaptTo(PageManager.class);
             Page currentPage = pageManager.getContainingPage(ctx.resource);
    
             /* constants for image appearance */
             int scale = 6;
             int paddingX = 24;
             int paddingY = 24;
             Color bgColor = new Color(0x004a565c, true);
             
             /* obtain the page title */
             String title = currentPage.getTitle();
             if (title == null) {
                 title = currentPage.getName();
             }
             
             /* format the title text */
             title = title.toUpperCase();
             Paint titleColor = Color.WHITE;
             Font titleFont = new Font("Myriad Pro", 10 * scale, Font.BOLD);
             int titleBase = 10 * scale;
    
             /* obtain and format the page subtitle */
             String subtitle = currentPage.getProperties().get("subtitle", "");
             Paint subtitleColor = new Color(0xffa9afb1, true);
             Font subTitleFont = new Font("Tahoma", 7);
             int subTitleBase = 20;
    
             /* create a layer that contains the background image from the mywebsite design */
             Designer dg = ctx.resolver.adaptTo(Designer.class);
             String imgPath = new String(dg.getDesignPath(currentPage)+"/images/navimage_bg.jpg");
             Layer bg = ImageHelper.createLayer(ctx.resolver.resolve(imgPath));
    
             /* draw the title text (4 times bigger) */
             Rectangle2D titleExtent = titleFont.getTextExtent(0, 0, 0, 0, title, Font.ALIGN_LEFT, 0, 0);
             Rectangle2D subtitleExtent = subTitleFont.getTextExtent(0, 0, 0, 0, subtitle, Font.ALIGN_LEFT, 0, 0);
    
             /* ensure subtitleExtent is wide enough */
             if ( subtitle.length() > 0 ) {
                 int titleWidth = (int)titleExtent.getWidth() / scale;
                 if ( subtitleExtent.getWidth() > titleWidth && subtitleExtent.getWidth() + 2 * paddingX >
     bg.getWidth() ) {
                     int charWidth = (int)subtitleExtent.getWidth() / subtitle.length();
                     int maxWidth = (bg.getWidth() > titleWidth + 2  * paddingX ? bg.getWidth() - 2 * paddingX : titleWidth);
                     int len = (maxWidth - ( 2 * charWidth) ) / charWidth;
                     subtitle = subtitle.substring(0, len) + "...";
                     subtitleExtent = subTitleFont.getTextExtent(0, 0, 0, 0, subtitle, Font.ALIGN_LEFT, 0, 0);
                 }
             }
             int width = Math.max((int) titleExtent.getWidth(), (int) subtitleExtent.getWidth());
            /* create the text layer */
             Layer text = new Layer(width, (int) titleExtent.getHeight() + 40, new Color(0x01ffffff, true));
             text.setPaint(titleColor);
             text.drawText(0, titleBase, 0, 0, title, titleFont, Font.ALIGN_LEFT | Font.ALIGN_BASE, 0, 0);
             text.resize(text.getWidth() / scale, text.getHeight() / scale);
             text.setX(0);
             text.setY(0);
    
             if (subtitle.length() > 0) {
                 /* draw the subtitle normal sized */
                 text.setPaint(subtitleColor);
                 text.drawText(0, subTitleBase, 0, 0, subtitle, subTitleFont, Font.ALIGN_LEFT | Font.ALIGN_BASE, 0, 0); 
             }
    
             /* merge the image and text layers */
             text.setY(paddingY);
             text.setX(paddingX);
             text.setBackgroundColor(bgColor);
    
             int bgWidth = bg.getWidth();
             if ( text.getWidth() + 2 * paddingX > bgWidth ) {
                 bgWidth = text.getWidth() + 2 * paddingX;
                 bg.resize(bgWidth, bg.getHeight());
             }
             bg.merge(text);
    
             return bg;
         }
     }
  7. Enregistrez les modifications.

  8. Dans votre navigateur, rechargez la page Products. La navigation supérieure se présente désormais comme suit :

    screen_shot_2012-03-07at10047pm

Création d’un composant Liste des enfants (listchildren)

Créez le composant listchildren qui génère une liste de liens de page contenant le titre, la description et la date des pages (les pages du produit, par exemple). Les liens ciblent les pages enfants de la page en cours, ou d’une page racine, qui est spécifiée dans la boîte de dialogue du composant.

chlimage_1

Création de pages de produits

Créez deux pages situées sous la page Produits. Pour chaque page décrivant deux produits spécifiques, vous définissez un titre, une description et une date.

  1. Dans l’arborescence de la page Sites web, sélectionnez l’élément Websites/My Website/English/Products, puis cliquez sur Nouveau > Nouvelle page.

  2. Dans la boîte de dialogue, entrez les valeurs de propriété ci-dessous et cliquez ensuite sur Créer :

    • Titre : Product 1.
    • Nom : product1.
    • Sélectionnez My Website Content Page Template (Modèle de page de contenu de mon site web).
  3. Créez une autre page sous Products à l’aide des valeurs de propriété suivantes :

    • Titre : Product 2
    • Nom : product2
    • Sélectionnez My Website Content Page Template (Modèle de page de contenu de mon site web).
  4.  

    Dans CRXDE Lite, définissez une description et une date pour la page Product 1 :

     

    1. Sélectionnez le nœud /content/mywebsite/en/products/product1/jcr:content.  
    2. Dans l’onglet Propriétés, entrez les valeurs suivantes :
      • Nom : jcr:description
      • Type : Chaîne
      • Valeur : This is a description of the Product 1! (Il s’agit d’une description du produit 1 !). 
    3. Cliquez sur Ajouter.
    4. Dans l’onglet Propriétés, créez une autre propriété à l’aide des valeurs suivantes :
      • Nom : date
      • Type : Chaîne
      • Valeur : 02/14/2008
      • Cliquez sur Ajouter.
    5. Cliquez sur Enregistrer tout.
  5. Dans CRXDE Lite, définissez une description et une date pour la page Product 2 :

    1. Sélectionnez le nœud /content/mywebsite/en/products/product2/jcr:content.  
    2. Dans l’onglet Propriétés, entrez les valeurs suivantes :
      • Nom : jcr:description
      • Type : Chaîne
      • Valeur : This is a description of the Product 2! (Il s’agit d’une description du produit 2 !). 
    3. Cliquez sur Ajouter.
    4. Dans les mêmes zones de texte, remplacez les valeurs précédentes par les valeurs suivantes :
      • Nom : date
      • Type : Chaîne
      • Valeur : 05/11/2012
      • Cliquez sur Ajouter.
    5. Cliquez sur Enregistrer tout.

Création d’un composant Liste des enfants (listchildren)

Pour créer le composant listchildren, procédez comme suit :

  1. Dans CRXDE Lite, cliquez avec le bouton droit de la souris sur /apps/mywebsite/components, puis sélectionnez Créer et Créer un composant.

  2. Dans la boîte de dialogue, entrez les valeurs de propriété ci-dessous et cliquez ensuite sur Suivant :

    • Libellé : listchildren.
    • Titre : My Listchildren Component (Mon composant Liste des enfants).
    • Description : This is My Listchildren Component (Il s’agit de mon composant Liste des enfants)
  3. Continuez à cliquer sur Suivant jusqu’à ce que le panneau Enfants autorisés s’affiche. Cliquez ensuite sur OK.

Création du script Liste des enfants

Développez le script pour le composant listchildren. 

  1. Dans CRXDE Lite, ouvrez le fichier listchildren.jsp sous /apps/mywebsite/components/listchildren.

  2. Remplacez le code par défaut par le code suivant :

    <%@include file="/libs/foundation/global.jsp"%><%
    %><%@ page import="java.util.Iterator,
             com.day.cq.wcm.api.PageFilter"%><%
         /* Create a new Page object using the path of the current page */    
          String listroot = properties.get("listroot", currentPage.getPath());
         Page rootPage = pageManager.getPage(listroot);
         /* iterate through the child pages and gather properties */
         if (rootPage != null) {
             Iterator<Page> children = rootPage.listChildren(new PageFilter(request));
             while (children.hasNext()) {
                 Page child = children.next();
                 String title = child.getTitle() == null ? child.getName() : child.getTitle();
                 String date = child.getProperties().get("date","");
                 %><div class="item">
                 <a href="<%= child.getPath() %>.html"><b><%= title %></b></a>
                 <span><%= date %></span><br>
                 <%= child.getProperties().get("jcr:description","") %><br>
                 </div><%
             }
         }
     %>
  3. Enregistrez les modifications.

Création de la boîte de dialogue Liste des enfants

Créez la boîte de dialogue utilisée pour configurer les propriétés du composant listchildren.

 

  1. Créez le nœud de boîte de dialogue sous le composant listchildren :

    1. Dans CRXDE Lite, cliquez avec le bouton droit de la souris sur le nœud /apps/mywebsite/components/listchildren, puis cliquez sur Créer > Créer une boîte de dialogue.
    2. Dans la boîte de dialogue, entrez les valeurs de propriété ci-dessous et cliquez ensuite sur OK.
      • Libellé : dialog
      • Titre : Edit Component (Modifier le composant) et cliquez ensuite sur OK.
    screen_shot_2012-03-07at45818pm

    Avec les propriétés suivantes :

    screen_shot_2012-03-07at50415pm
  2. Sélectionnez le nœud /apps/mywebsite/components/listchildren/dialog/items/items/tab1.

  3. Dans l’onglet Propriétés, modifiez la valeur de la propriété title pour la définir sur List Children (Liste des enfants).

    chlimage_1
  4. Sélectionnez le nœud tab1, cliquez sur Créer > Créer un nœud, entrez les valeurs de propriété suivantes, puis cliquez sur OK :

    • Nom : items
    • Type : cq:WidgetCollection
    screen_shot_2012-03-07at51018pm
  5. Créez un nœud sous le nœud des éléments à l’aide des valeurs de propriété suivantes :

    • Nom : listroot
    • Type : cq:Widget
    screen_shot_2012-03-07at51031pm
  6. Ajoutez des propriétés au nœud listroot afin de le configurer comme champ de texte. Chaque ligne du tableau suivant représente une propriété. Lorsque vous avez terminé, cliquez sur Enregistrer tout.

    Nom Type Valeur
    fieldLabel Chaîne Chemin d’accès de la liste racine
    name Chaîne ./listroot
    xtype Chaîne textfield
    screen_shot_2012-03-07at51433pm

Insertion de la liste des enfants dans le composant contentpage

Pour inclure le composant listchildren dans votre composant contentpage, procédez comme suit :

  1. Dans CRXDE Lite, ouvrez le fichier left.jsp sous /apps/mywebsite/components/contentpage et recherchez le code suivant (ligne 4) :

    <div>newslist</div>
  2. Remplacez ce code par le code suivant :

    <cq:include path="newslist" resourceType="mywebsite/components/listchildren" />
  3. Enregistrez les modifications.

Affichage de la liste des enfants dans une page

Pour afficher toutes les opérations de ce composant, vous pouvez consulter la page Products :

  • lorsque la page parent (« Chemin d’accès de la liste racine ») n’est pas définie ;
  • lorsque la page parent (« Chemin d’accès de la liste racine ») est définie.
  1. Dans votre navigateur, rechargez la page Products. Le composant listchildren se présente comme suit :

    chlimage_1
  2. chlimage_1
  3. Pour le chemin d’accès de la liste racine, saisissez : /content/mywebsite/en. Cliquez sur OK. Le composant listchildren figurant sur votre page se présente désormais comme suit :

    chlimage_1

Créez un composant qui affiche le logo de la société et qui fournit un lien vers la page d’accueil du site. Ce composant comporte une boîte de dialogue en mode Création, de sorte que les valeurs de propriété soient stockées dans la conception du site (/etc/designs/mywebsite) :

  • Les valeurs de propriété s’appliquent à toutes les instances du composant qui sont ajoutées aux pages utilisant la conception.
  • Les propriétés peuvent être configurées à l’aide de n’importe quelle instance du composant qui se trouve sur une page qui utilise la conception.

Votre boîte de dialogue en mode Création contient des propriétés permettant de définir l’image et le chemin d’accès du lien. Le composant logo sera placé dans le coin supérieur gauche de toutes les pages du site web.

Il s’affichera comme suit :

chlimage_1

Remarque :

Adobe Experience Manager propose un composant Logo plus riche en fonctionnalités (/libs/foundation/components/logo).

Pour créer le composant Logo, procédez comme suit :

  1. Dans CRXDE Lite, cliquez avec le bouton droit de la souris sur /apps/mywebsite/components, puis sélectionnez Créer et Créer un composant.

  2. Dans la boîte de dialogue Créer un composant, entrez les valeurs de propriété ci-dessous et cliquez ensuite sur Suivant :

    • Libellé : logo.
    • Titre : My Logo Component (Mon composant Logo).
    • Description : This is My Logo Component (Il s’agit de mon composant Logo).
  3. Cliquez sur Suivant jusqu’à ce que vous accédiez au dernier panneau de la boîte de dialogue, puis cliquez sur OK.

Cette section explique comment créer le script pour afficher l’image du logo avec un lien vers la page d’accueil.

  1. Dans CRXDE Lite, ouvrez le fichier logo.jsp sous /apps/mywebsite/components/logo.

  2. Le code suivant crée le lien vers la page d’accueil du site et ajoute une référence à l’image du logo. Copiez le code dans logo.jsp :

    <%@include file="/libs/foundation/global.jsp"%><%
    %><%@ page import="com.day.text.Text,
                       com.day.cq.wcm.foundation.Image,
                       com.day.cq.commons.Doctype" %><%
        /* obtain the path for home */
        long absParent = currentStyle.get("absParent", 2L);
        String home = Text.getAbsoluteParent(currentPage.getPath(), (int) absParent);
        /* obtain the image */
        Resource res = currentStyle.getDefiningResource("imageReference");
        if (res == null) {
            res = currentStyle.getDefiningResource("image");
        }
        /* if no image use text link, otherwise draw the image */
        %>
    <a href="<%= home %>.html"><%
        if (res == null) {
            %>Home<%
        } else {
            Image img = new Image(res);
            img.setItemName(Image.NN_FILE, "image");
            img.setItemName(Image.PN_REFERENCE, "imageReference");
            img.setSelector("img");
            img.setDoctype(Doctype.fromRequest(request));
            img.setAlt("Home");
            img.draw(out);
        }
        %></a>
  3. Enregistrez les modifications.

Créez la boîte de dialogue pour configurer votre composant Logo en mode Création. Les nœuds de la boîte de dialogue en mode Création doivent être nommés design_dialog.

  1. Créez le nœud de boîte de dialogue sous le composant Logo :

    1. Cliquez avec le bouton droit de la souris sur le nœud /apps/mywebsite/components/logo, puis cliquez sur Créer > Créer une boîte de dialogue.
    2. Saisissez les valeurs de propriété ci-dessous, puis cliquez sur OK :
      • Libellé : design_dialog 
      • Titre : Logo (Design)
  2. Cliquez avec le bouton droit de la souris sur le nœud tab1 dans la branche design_dialog et cliquez ensuite sur Supprimer. Cliquez sur Enregistrer tout.

  3. Sous le nœud design_dialog/items/items , créez un nœud nommé img du type cq:Widget. Ajoutez les propriétés suivantes et cliquez ensuite sur Enregistrer tout :

    Nom Type Valeur
    fileNameParameter Chaîne ./imageName
    fileReferenceParameter Chaîne ./imageReference
    name Chaîne ./image
    title Chaîne Image
    xtype Chaîne html5smartimage
    chlimage_1

Créez le script qui récupère l’image du logo et l’écrit sur la page. 

  1. Cliquez avec le bouton droit de la souris sur le nœud du composant Logo, puis cliquez sur Créer > Créer un fichier pour créer le fichier de script nommé img.GET.java.
  2. Ouvrez le fichier, copiez-y le code suivant, puis cliquez sur Enregistrer tout :

package apps.mywebsite.components.logo;

import java.io.IOException;
import java.io.InputStream;

import javax.jcr.RepositoryException;
import javax.jcr.Property;
import javax.servlet.http.HttpServletResponse;

import com.day.cq.wcm.foundation.Image;
import com.day.cq.wcm.commons.RequestHelper;
import com.day.cq.wcm.commons.WCMUtils;
import com.day.cq.wcm.commons.AbstractImageServlet;
import com.day.cq.commons.SlingRepositoryException;
import com.day.image.Layer;
import org.apache.commons.io.IOUtils;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ValueMap;
import org.apache.sling.api.servlets.SlingSafeMethodsServlet;

/**
 * Renders an image
 */
public class img_GET extends AbstractImageServlet {

    protected Layer createLayer(ImageContext c)
            throws RepositoryException, IOException {
        /* don't create the layer yet. handle everything later */
        return null;
    }

    protected void writeLayer(SlingHttpServletRequest req,
                              SlingHttpServletResponse resp,
                              ImageContext c, Layer layer)
            throws IOException, RepositoryException {

        Image image = new Image(c.resource);
        image.setItemName(Image.NN_FILE, "image");
        image.setItemName(Image.PN_REFERENCE, "imageReference");
        if (!image.hasContent()) {
            resp.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }
        /* get pure layer */
        layer = image.getLayer(false, false, false);

        /* do not re-encode layer, just spool */
        Property data = image.getData();
        InputStream in = data.getStream();
        resp.setContentLength((int) data.getLength());
        String contentType = image.getMimeType();
        if (contentType.equals("application/octet-stream")) {
            contentType=c.requestImageType;
        }
        resp.setContentType(contentType);
        IOUtils.copy(in, resp.getOutputStream());
        in.close();
      
        resp.flushBuffer();
    }
}

Ajout du composant Logo au composant contentpage

  1. Dans CRXDE Lite, ouvrez le fichier left.jsp sous /apps/mywebsite/components/contentpage et recherchez la ligne de code suivante :

    <div>logo</div>
  2. Remplacez ce code par la ligne de code suivante :

    <cq:include path="logo" resourceType="mywebsite/components/logo" />
  3. Enregistrez les modifications.

  4. Dans votre navigateur, rechargez la page Products. Le logo se présente comme suit, même si, pour le moment, il n’affiche que le lien sous-jacent :

    chlimage_1

Définition de l’image du logo dans une page

Cette section explique comment définir une image en tant que logo à l’aide de la boîte de dialogue en mode Création.

  1. Ouvrez la page Produits dans votre navigateur, puis cliquez sur le bouton Conception au bas du sidekick pour passer en mode Création.

    chlimage_1
  2. Dans la barre de conception du logo, cliquez sur Modifier pour utiliser la boîte de dialogue afin de modifier les paramètres du composant Logo.

  3. Dans la boîte de dialogue, cliquez dans le panneau de l’onglet Image, recherchez l’image logo.png que vous avez extraite du fichier mywebsite.zip, puis cliquez sur OK.

    chlimage_1
  4. Cliquez sur le triangle dans la barre de titre du sidekick pour revenir au mode Édition.

    chlimage_1
  5. Dans CRXDE Lite, accédez au nœud suivant pour afficher les valeurs de propriété stockées :

    /etc/designs/mywebsite/jcr:content/contentpage/logo

Insertion du composant Chemin de navigation

Cette section vous explique comment inclure le composant Chemin de navigation, qui est l’un des composants de base.

  1. Dans CRXDE Lite, accédez à /apps/mywebsite/components/contentpage, ouvrez le fichier center.jsp et remplacez :

    <div>trail</div>

    par :

    <cq:include path="trail" resourceType="foundation/components/breadcrumb" />
  2. Enregistrez les modifications.

  3. Dans votre navigateur, rechargez la page Products 1. Le composant de chemin de navigation se présente comme suit :

    chlimage_1

Insertion du composant Titre

Cette section vous explique comment inclure le composant Titre, qui est l’un des composants de base.

  1. Dans CRXDE Lite, accédez à /apps/mywebsite/components/contentpage, ouvrez le fichier center.jsp et remplacez :

    <div>title</div>

    par :

    <cq:include path="title" resourceType="foundation/components/title" />
  2. Enregistrez les modifications.

  3.  

    Dans votre navigateur, rechargez la page Products. Le composant Titre se présente comme suit :

     

    chlimage_1

     

    Remarque : Vous pouvez définir un autre titre, ainsi que le type et la taille, en mode d’édition.

     

Insertion du composant Système de paragraphes

Le système de paragraphes (parsys) constitue une partie importante d’un site web, dans la mesure où il gère une liste de paragraphes. Il permet aux auteurs d’ajouter des composants de paragraphe à la page et fournit la structure.

Ajoutez le composant parsys (l’un des composants de base) à votre composant contentpage.

  1. Dans CRXDE Lite, accédez à /apps/mywebsite/components/contentpage, ouvrez le fichier center.jsp et recherchez la ligne de code suivante :

    <div>parsys</div>
  2. Remplacez cette ligne de code par le code suivant, puis enregistrez les modifications :

    <cq:include path="par" resourceType="foundation/components/parsys" />
  3.  

    Dans votre navigateur, actualisez la page Products. Elle contient à présent le composant parsys, qui se présente comme suit :

     

    chlimage_1

Création du composant Image

Créez un composant qui affiche une image dans le système de paragraphes. Pour gagner du temps, le composant Image est créé sous la forme d’une copie du composant Logo avec quelques modifications au niveau des propriétés.

Remarque :

Adobe Experience Manager propose un composant Image plus riche en fonctionnalités (/libs/foundation/components/image).

Création du composant Image

  1. Cliquez avec le bouton droit de la souris sur le nœud /apps/mywebsite/components/logo, puis cliquez sur Copier.
  2. Cliquez avec le bouton droit de la souris sur le nœud /apps/mywebsite/components, puis cliquez sur Coller.
  3. Cliquez avec le bouton droit de la souris sur le nœud Copie de logo, cliquez sur Renommer, supprimez le texte existant, puis saisissez image.
  4. Sélectionnez le nœud du composant image et modifiez les valeurs de propriété suivantes :
    • jcr:title : My Image Component (Mon composant Image).
    • jcr:description : This is My Image Component (Il s’agit de mon composant Image).
  5. Ajoutez une propriété au nœud image avec les valeurs de propriété suivantes :
    • Nom : componentGroup
    • Type : Chaîne
    • Valeur : MyWebsite
  6. Sous le nœud image, renommez le nœud design_dialog en dialog.
  7. Renommez le fichier logo.jsp en image.jsp.
  8. Ouvrez img.GET.java et définissez le module sur apps.mywebsite.components.image.

chlimage_1

Création du script Image

Cette section explique comment créer le script Image.

  1. Ouvrez le fichier /apps/mywebsite/components/image/image.jsp.

  2. Remplacez le code existant par le code suivant, puis enregistrez les modifications :

    <%@include file="/libs/foundation/global.jsp"%><%
    %><%@ page import="com.day.cq.commons.Doctype,
                        com.day.cq.wcm.foundation.Image,
                        com.day.cq.wcm.api.components.DropTarget,
                        com.day.cq.wcm.api.components.EditConfig,
                        com.day.cq.wcm.commons.WCMUtils" %><%
     /* global.jsp provides access to the current resource through the resource object */
            Image img = new Image(resource);
            img.setItemName(Image.NN_FILE, "image");
            img.setItemName(Image.PN_REFERENCE, "imageReference");
            img.setSelector("img");
            img.setDoctype(Doctype.fromRequest(request));
            img.setAlt("Home");
            img.draw(out); %>
  3. Enregistrez les modifications.

Création du nœud cq:editConfig de l’image

Le type de nœud cq:editConfig vous permet de configurer certains comportements de composants lorsque vous modifiez leurs propriétés.

Dans cette section, vous allez utiliser un nœud cq:editConfig pour faire glisser des ressources du Content Finder vers votre composant Image.

  1. Dans CRXDE Lite, sous le nœud /apps/mywebsite/components/image, créez un nœud comme suit :

    • Nom : cq:editConfig.

    • Type : cq:EditConfig.

  2. Sous le nœud cq:editConfig, créez un nœud comme suit :

    • Nom : cq:dropTargets.

    • Type : cq:DropTargetConfig.

  3. Sous le nœud cq:dropTargets, créez un nœud comme suit :

    • Nom : image.

    • Type : nt:unstructured.

  4. Dans CRXDE, définissez les propriétés comme suit :
Nom Type Valeur
accept Chaîne image/(gif|jpeg|png)
groups Chaîne media
propertyName Chaîne ./imageReference
chlimage_1

Ajout de l’icône

Dans cette section, vous allez ajouter l’icône qui doit apparaître en regard du composant Image lorsqu’il est répertorié dans le sidekick :

  1. Dans CRXDE Lite, cliquez avec le bouton droit de la souris sur le fichier /libs/foundation/components/image/icon.png, puis sélectionnez Copier.

  2. Cliquez avec le bouton droit de la souris sur le nœud /apps/mywebsite/components/image, puis cliquez sur Coller et sur Enregistrer tout.

Utilisation du composant Image

Dans cette section, vous allez afficher la page Products et ajouter votre composant Image au système de paragraphes.

  1. Dans votre navigateur, rechargez la page Products.

  2. Dans le sidekick, cliquez sur l’icône du mode Création.

  3. Cliquez sur le bouton Modifier pour modifier la boîte de dialogue de conception du système de paragraphes.

  4. Une liste de Composants autorisés est affichée dans la boîte de dialogue ; accédez à MyWebsite, sélectionnez My Image Component (Mon composant Image), puis cliquez sur OK.

  5. Revenez au mode d’édition.

  6. Double-cliquez sur le cadre du système de paragraphes (Faire glisser des composants ou éléments ici). Les sélecteurs Insérer un nouveau composant et Sidekick se présentent comme suit :

    chlimage_1

Insertion du composant Barre d’outils

Cette section vous explique comment inclure le composant Barre d’outils, qui est l’un des composants de base.

Vous disposez de plusieurs options, aussi bien en mode d’édition qu’en mode de création.

  1. Dans CRXDE Lite, accédez à /apps/mywebsite/components/contentpage, ouvrez le fichier body.jsp et recherchez ensuite le code suivant :

    <div class="toolbar">toolbar</div>
  2. Remplacez ce code par le code suivant, puis enregistrez les modifications :

    <cq:include path="toolbar" resourceType="foundation/components/toolbar"/>
  3. Dans l’arborescence de la page AEM Websites, sélectionnez Websites/My Website/English, puis cliquez sur Nouveau > Nouvelle page. Indiquez les valeurs de propriété ci-dessous, puis cliquez sur Créer :

    • Titre : Barre d’outils
    • Sélectionnez My Website Content Page Template (Modèle de page de contenu de mon site web).
  4. Dans la liste des pages, cliquez avec le bouton droit de la souris sur la page Barre d’outils, puis cliquez sur Propriétés. Sélectionnez Masquer dans la navigation, puis cliquez sur OK.

    L’option Masquer dans la navigation empêche l’affichage de la page dans des composants de navigation, tels que topnav et listchildren.

  5. Créez les pages suivantes sous la barre d’outils :

    • Contacts
    • Commentaires
    • Connexion
    • Recherche
  6. Dans votre navigateur, rechargez la page Products. Elle se présente comme suit :

    chlimage_1

Création du composant Recherche

Dans cette section, vous allez créer un composant permettant de rechercher du contenu sur le site web. Ce composant de recherche peut être placé dans le système de paragraphes de n’importe quelle page (sur une page de résultats de recherche spécialisée, par exemple).

Votre zone de saisie des termes de recherche se présentera comme suit sur la page English :

chlimage_1

Création du composant Recherche

  1. Dans CRXDE Lite, cliquez avec le bouton droit de la souris sur /apps/mywebsite/components, puis sélectionnez Créer et Créer un composant.

  2. Utilisez la boîte de dialogue pour configurer le composant :

    1. Sur le premier panneau, spécifiez les valeurs de propriété suivantes :
      • Libellé : search
      • Titre : My Search Component (Mon composant Recherche)
      • Description : This is My Search Component (Il s’agit de mon composant Recherche)
      • Groupe : MyWebsite
    2. Cliquez sur suivant, puis à nouveau sur Suivant.
    3. Sur le panneau Parents autorisés, cliquez sur le bouton + et saisissez ensuite */parsys.
    4. Cliquez sur Suivant, puis sur OK.
  3. Cliquez sur Enregistrer tout.

  4. Copiez les nœuds suivants et collez-les dans le nœud apps/mywebsite/components/search :

    •  /libs/foundation/components/search/dialog
    •  /libs/foundation/components/search/i18n 
    •  /libs/foundation/components/search/icon.png  
  5. Cliquez sur Enregistrer tout.

Création du script de recherche

 Cette section explique comment créer le script Recherche :

  1. Ouvrez le fichier /apps/mywebsite/components/search/search.jsp.

  2. Copiez le code suivant dans search.jsp :

    <%@ page import="com.day.cq.wcm.foundation.Search,com.day.cq.tagging.TagManager" %>
    <%@include file="/libs/foundation/global.jsp" %><%
    %><cq:setContentBundle/><%
        Search search = new Search(slingRequest);
     
        String searchIn = (String) properties.get("searchIn");
        String requestSearchPath = request.getParameter("path");
        if (searchIn != null) {
            /* only allow the "path" request parameter to be used if it
             is within the searchIn path configured */
            if (requestSearchPath != null && requestSearchPath.startsWith(searchIn)) {
                search.setSearchIn(requestSearchPath);
            } else {
                search.setSearchIn(searchIn);
            }
        } else if (requestSearchPath != null) {
            search.setSearchIn(requestSearchPath);
        }
         
        pageContext.setAttribute("search", search);
        TagManager tm = resourceResolver.adaptTo(TagManager.class);
    %><c:set var="trends" value="${search.trends}"/><%
    %><center>
      <form action="${currentPage.path}.html">
        <input size="41" maxlength="2048" name="q" value="${fn:escapeXml(search.query)}"/>
        <input value="<fmt:message key="searchButtonText"/>" type="submit" />
      </form>
    </center>
    <br/>
    <c:set var="result" value="${search.result}"/>
    <c:choose>
      <c:when test="${empty result && empty search.query}">
      </c:when>
      <c:when test="${empty result.hits}">
        <c:if test="${result.spellcheck != null}">
          <p><fmt:message key="spellcheckText"/> <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${result.spellcheck}"/></c:url>"><b><c:out value="${result.spellcheck}"/></b></a></p>
        </c:if>
        <fmt:message key="noResultsText">
          <fmt:param value="${fn:escapeXml(search.query)}"/>
        </fmt:message>
      </c:when>
      <c:otherwise>
        <p class="searchmeta">Results ${result.startIndex + 1} - ${result.startIndex + fn:length(result.hits)} of ${result.totalMatches} for <b>${fn:escapeXml(search.query)}</b>. (${result.executionTime} seconds)</p>
       <br/>
       
      <div class="searchresults">    
        <div class="results">
          <c:forEach var="hit" items="${result.hits}" varStatus="status">
            <div class="hit">
            <a href="${hit.URL}">${hit.title}</a>
            <div class="excerpt">${hit.excerpt}</div>
           <div class="hiturl"> ${hit.URL}<c:if test="${!empty hit.properties['cq:lastModified']}"> - <c:catch><fmt:formatDate value="${hit.properties['cq:lastModified'].time}" dateStyle="medium"/></c:catch></c:if> - <a href="${hit.similarURL}"><fmt:message key="similarPagesText"/></a>
            </div></div>
          </c:forEach>
        </div>
          <br/>
          
         <div class="searchRight">
              <c:if test="${fn:length(trends.queries) > 0}">
                  <p><fmt:message key="searchTrendsText"/></p>
                  <div class="searchTrends">
                      <c:forEach var="query" items="${trends.queries}">
                          <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${query.query}"/></c:url>"><span style="font-size:${query.size}px"><c:out value="${query.query}"/></span></a>
                      </c:forEach>
                  </div>
              </c:if> 
              <c:if test="${result.facets.languages.containsHit}">
                  <p>Languages</p>
                  <c:forEach var="bucket" items="${result.facets.languages.buckets}">
                      <c:set var="bucketValue" value="${bucket.value}"/>
                      <c:set var="label" value='<%= new java.util.Locale((String) pageContext.getAttribute("bucketValue")).getDisplayLanguage(request.getLocale()) %>'/>
                      <c:choose>
                          <c:when test="${param.language != null}">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="language"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="language" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:forEach>
              </c:if> 
              <c:if test="${result.facets.tags.containsHit}">
                  <p>Tags</p>
                  <c:forEach var="bucket" items="${result.facets.tags.buckets}">
                      <c:set var="bucketValue" value="${bucket.value}"/>
                      <c:set var="tag" value="<%= tm.resolve((String) pageContext.getAttribute("bucketValue")) %>"/>
                      <c:if test="${tag != null}">
                          <c:set var="label" value="${tag.title}"/>
                          <c:choose>
                              <c:when test="<%= request.getParameter("tag") != null && java.util.Arrays.asList(request.getParameterValues("tag")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="tag" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                              <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="tag" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                          </c:choose><br/>
                      </c:if>
                  </c:forEach>
              </c:if> 
              <c:if test="${result.facets.mimeTypes.containsHit}">
                  <jsp:useBean id="fileTypes" class="com.day.cq.wcm.foundation.FileTypes"/>
                  <p>File types</p>
                  <c:forEach var="bucket" items="${result.facets.mimeTypes.buckets}">
                      <c:set var="bucketValue" value="${bucket.value}"/>
                      <c:set var="label" value="${fileTypes[bucket.value]}"/>
                      <c:choose>
                          <c:when test="<%= request.getParameter("mimeType") != null && java.util.Arrays.asList(request.getParameterValues("mimeType")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:forEach>
              </c:if>
              <c:if test="${result.facets.lastModified.containsHit}">
                  <p>Last Modified</p>
                  <c:forEach var="bucket" items="${result.facets.lastModified.buckets}">
                      <c:choose>
                          <c:when test="${param.from == bucket.from && param.to == bucket.to}">${bucket.value} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/><c:if test="${bucket.from != null}"><cq:addParam name="from" value="${bucket.from}"/></c:if><c:if test="${bucket.to != null}"><cq:addParam name="to" value="${bucket.to}"/></c:if></cq:requestURL>">${bucket.value} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:forEach>
              </c:if>
    
          <c:if test="${fn:length(search.relatedQueries) > 0}">
          
           <br/><br/><div class="related">
            <fmt:message key="relatedSearchesText"/>
            <c:forEach var="rq" items="${search.relatedQueries}">
                <a href="${currentPage.path}.html?q=${rq}"><c:out value="${rq}"/></a>
            </c:forEach></div>
          </c:if>
          </div>     
          
          <c:if test="${fn:length(result.resultPages) > 1}">
            <div class="pagination">  
                <fmt:message key="resultPagesText"/>
            <c:if test="${result.previousPage != null}">
              <a href="${result.previousPage.URL}"><fmt:message key="previousText"/></a>
            </c:if>
            <c:forEach var="page" items="${result.resultPages}">
              <c:choose>
                <c:when test="${page.currentPage}">${page.index + 1}</c:when>
                <c:otherwise>
                  <a href="${page.URL}">${page.index + 1}</a>
                </c:otherwise>
              </c:choose>
            </c:forEach>
            <c:if test="${result.nextPage != null}">
              <a href="${result.nextPage.URL}"><fmt:message key="nextText"/></a>
            </c:if>
            </div>
          </c:if>
          </div>
          
      </c:otherwise>
    </c:choose>
  3. Enregistrez les modifications.

Insertion d’une zone de recherche dans le composant contentpage

Pour inclure une zone de saisie des termes de recherche dans la partie gauche du composant contentpage, procédez comme suit :

  1. Dans CRXDE Lite, ouvrez le fichier left.jsp sous /apps/mywebsite/components/contentpage et recherchez le code suivant (ligne 2) :

    %><div class="left">
  2. Insérez le code suivant avant cette ligne :

    %><%@ page import="com.day.text.Text"%><%
    %><% String docroot = currentDesign.getPath(); 
    String home = Text.getAbsoluteParent(currentPage.getPath(), 2);%><%
  3. Recherchez la ligne de code suivante :

    <div>search</div>
  4. Remplacez ce code par le code suivant, puis enregistrez les modifications.

    <div class="form_1">
         <form class="geo" action="<%= home %>/toolbar/search.html" id="form" >
              <p>
                   <input class="geo" type="text" name="q"><br> 
                   <a href="<%= home %>/toolbar/search.html" class="link_1">advanced search</a> 
              </p>
         </form>
    </div>
  5.  

    Dans votre navigateur, rechargez la page Products. Le composant Recherche se présente comme suit :

     

    chlimage_1

Insertion du composant Recherche dans la page de recherche

Dans cette section, vous allez ajouter votre composant Recherche au système de paragraphes.

  1. Dans votre navigateur, ouvrez la page de recherche.

  2. Dans le sidekick, cliquez sur l’icône du mode Création.

  3. Dans le bloc Conception de paragraphe (sous le titre Recherche), cliquez sur Modifier.

  4. Dans la boîte de dialogue, faites défiler la liste vers le bas jusqu’au groupe Mes sites web, sélectionnez Mon composant Recherche, puis cliquez sur OK.

  5. Dans le sidekick, cliquez sur le triangle pour revenir au mode d’édition.

  6. Faites glisser Mon composant Recherche depuis le sidekick vers le cadre du système de paragraphes (parsys). Elle se présente comme suit :

    chlimage_1
  7. Accédez à votre page Produits. Recherchez des clients dans la zone de recherche et appuyez ensuite sur Entrée. Vous êtes alors redirigé vers la page de recherche. Basculez en mode Aperçu : le résultat ressemble à ceci :

    chlimage_1

Insertion du composant Iparsys

Cette section vous explique comment inclure le composant Système de paragraphes hérité (iparsys), qui est l’un des composants de base. Ce composant vous permet de créer une structure de paragraphes sur une page parent et de faire en sorte que les pages enfants héritent des paragraphes.

Pour ce composant, vous pouvez définir plusieurs paramètres tant en mode de création qu’en mode d’édition.

  1. Dans CRXDE Lite, accédez à /apps/mywebsite/components/contentpage, ouvrez le fichier right.jsp et remplacez :

    <div>iparsys</div>

    par :

    <cq:include path="rightpar" resourceType="foundation/components/iparsys" />
  2. Enregistrez les modifications.

  3. Dans votre navigateur, rechargez la page Products. Toute la page se présente comme suit :

    chlimage_1

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne