Création d’un site web complet (JSP)

Ce tutoriel vous permet de créer un site web complet avec Adobe Experience Manager (AEM). Le site web est basé sur un site web générique et est principalement destiné aux développeurs web. Tout le développement aura lieu dans un environnement de création.

Ce tutoriel explique comment :

1. Installez AEM.

2. Accéder à CRXDE Lite (l’environnement de développement).

3. Installer la structure du projet dans CRXDE Lite.

4. Créez le modèle, le composant et les scripts utilisés comme base pour la création de pages de contenu.

5. Créez la page racine de votre site web, puis 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. Incluez divers composants de base.

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

Télécharger le résultat final

Pour suivre le tutoriel plutôt que d’effectuer les exercices, téléchargez le site web-1.0.zip. Ce fichier est un module de contenu AEM qui contient les résultats de ce tutoriel. Utilisation Gestionnaire de modules pour installer le module sur votre instance de création.

Package de contenu de site web

Obtenir le fichier

Installation d’Adobe Experience Manager

Pour installer une instance AEM pour 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 :

Configuration de la structure du projet dans CRXDE Lite

Utilisez CRXDE Lite pour créer la structure de l’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 :

   

4. Cliquez sur Enregistrer tout.

Configuration de la conception

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

Exemple de fichier static.css et d’images

Obtenir le fichier

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

   

2. Dans l’arborescence, sélectionnez le dossier Conceptions, 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. Utilisation de WebDAV Accédez à l’URL à l’adresse http://localhost:4502, copiez l’exemple static.css et images à partir du fichier mywebsite.zip téléchargé dans le fichier /etc/designs/mywebsite dossier.

   

Création d’un modèle, d’un composant et d’un script contentpage

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

• Modèle contentpage qui sera utilisé pour créer des pages de contenu dans l’exemple de site web
• 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 les différents types de pages du site. Dans 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 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, saisissez les valeurs suivantes, puis cliquez sur Suivant:

   • Libellé: contentpage
   • Titre: Modèle de page de contenu de mon site web
   • Description: 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.

   

   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 apparaît. Cliquez ensuite sur Suivant.

   

   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 à cette expression peuvent utiliser le modèle. Dans ce cas, l’expression régulière correspond au chemin de la propriété /content et toutes les sous-pages.

   Lorsqu’un auteur crée une page ci-dessous /content, la variable contentpage s’affiche dans la liste des modèles disponibles à utiliser.

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

   

Création du composant contentpage

Créez le component 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é Resource Type du modèle contentpage.

1. Dans CRXDE Lite, cliquez avec le bouton droit 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: Composant de page de contenu de mon site web
   • Description: Ceci est le composant de page de contenu de mon site web

   

   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/ initiale du chemin).

   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 :

   

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. Par défaut, le fichier contient le code suivant :

   <%--
   
     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 suivant 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"
   "https://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 : Website, English, Products, Services et Customers.

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

   

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
   • Nom : mywebsite
   • Sélectionnez la Modèle de page de contenu de mon site web

   

4. Cliquez sur Créer. Dans l’arborescence de dossiers, sélectionnez l’option /Websites/My Website page et clic 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 la Modèle de page de contenu de mon site web

6. Dans l’arborescence de dossiers, sélectionnez l’option /Websites/My Website/English page et clic 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: Produits
   • Sélectionnez la Modèle de page de contenu de mon site web

8. Dans l’arborescence de dossiers, sélectionnez l’option /Websites/My Website/English page et clic 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 la Modèle de page de contenu de mon site web

10. Dans l’arborescence de dossiers, sélectionnez l’option /Websites/My Website/English page et clic 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: Clients
    • Sélectionnez la Modèle de page de contenu de mon site web

    La structure se présente comme suit :

    

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

    • Nom: cq:designPath
    • Type: Chaîne
    • Valeur: /etc/designs/mywebsite

    

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 Produits :

    

Amélioration du script contentpage

Cette section décrit comment améliorer le script contentpage à l’aide des scripts AEM composant foundation et en écrivant vos propres scripts.

Le Produits se présente comme suit :

Utilisation des scripts de page Foundation

Au cours de cet exercice, vous configurez votre composant pagecontent de sorte que son supertype soit le 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. En 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" "https://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. Il se présente comme suit :

   

   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 lorsque vous ouvrez 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 créez plusieurs scripts qui génèrent chacun une partie du corps de la page. Vous créez ensuite le fichier body.jsp dans le composant pagecontent pour remplacer le fichier body.jsp du composant Page AEM. Dans le fichier body.jsp, vous incluez vos 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 avec le bouton droit sur le noeud /apps/mywebsite/components/contentpage, puis sélectionnez Créer then Créer un fichier.
   2. Dans la fenêtre, saisissez left.jsp comme ​ 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 avec le bouton droit sur le nœud /apps/mywebsite/components/contentpage, puis sélectionnez Créer et Créer un fichier.
   2. Dans la boîte de dialogue, saisissez center.jsp as Nom et 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 avec le bouton droit sur le nœud /apps/mywebsite/components/contentpage, 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. Il se présente comme suit :

    

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

Dans cette section, vous créez un composant qui affiche des liens vers toutes les pages de niveau supérieur du site web afin de faciliter la navigation. Ce contenu de composant s’affiche en haut de toutes les pages créées à l’aide du modèle contentpage .

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

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

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

1. Dans CRXDE Lite, cliquez avec le bouton droit 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
   • Description : This is My Top Navigation Component

3. Cliquez sur Suivant jusqu’à ce que la dernière fenêtre dans laquelle vous cliquez OK. Enregistrez vos modifications.

Création d’un script de navigation supérieure avec des liens textuels

Ajoutez le script de rendu à topnav pour générer des liens texte 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><%
           }
       }
   %>
   

Inclusion de la navigation supérieure dans le composant contentpage

Pour inclure topnav dans votre composant contentpage :

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 variable Produits Page. La navigation supérieure s’affiche comme suit :

   

Amélioration des pages avec des sous-titres

Le Page Le composant 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, ouvrez la page Products.

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

3. Sur le De base de la boîte de dialogue, développez Autres titres et description et pour le Sous-titre propriété, type what we do. Cliquez sur OK.

4. Répétez les étapes précédentes pour ajouter le sous-titre about our services à la page Services.

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

   Conseil : Dans CRXDE Lite, sélectionnez le noeud /content/mywebsite/en/products/jcr:content pour voir que la propriété subtitle est 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 au lieu d’hypertexte pour les commandes de navigation. L’image comprend le titre et le sous-titre de la cible du lien.

Cet exercice démontre Traitement des requêtes Sling. Le script topnav.jsp est modifié pour appeler un script qui génère de manière dynamique des images à utiliser pour les liens de navigation de la page. Dans cet exercice, Sling analyse l’URL des fichiers source de l’image pour déterminer le script à utiliser pour effectuer le rendu des images.

Par exemple, la source du lien de l’image vers la page Produits 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 topnav.jsp sous /apps/mywebsite/components/topnav.Localisez le contenu de l’élément d’ancrage (ligne 14) :

   <%=child.getTitle() %>
   

2. Remplacez le contenu de l’ancre par le code suivant :

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

3. Enregistrez les modifications.

4. Cliquez avec le bouton droit sur le nœud /apps/mywebsite/components/contentpage et 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 active.
   • La page parente 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 à partir du fichier navimage_bg.jpg de la conception du site, du titre de la page et du 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 s’affiche désormais comme suit :

   

Création du composant Liste des enfants

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

Création de pages de produit

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

1. Dans l’arborescence de dossiers du Sites web , sélectionnez Sites web/Mon site web/Anglais/Produits élément et cliquez sur Nouveau > Nouvelle page.

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

   • Titre: Produit 1.
   • Nom: product1.
   • Sélectionner Modèle de page de contenu de mon site web

3. Créez une autre page sous Produits à l’aide des valeurs de propriété suivantes :

   • Titre: Product 2
   • Nom: product2
   • Sélectionner 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 : String
      • Valeur : This is a description of the Product 1!.

   3. Cliquez sur Ajouter.

   4. Dans le 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: Ceci est 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 du composant Liste des enfants

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

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

2. Dans la boîte de dialogue, saisissez les valeurs de propriété suivantes, puis cliquez sur Suivant:

   • Libellé: listchildren.
   • Titre: Composant Mes enfants de liste.
   • Description: Voici le composant Mes enfants de liste.

3. Poursuivre le clic Suivant jusqu’à ce que la variable Enfants autorisés s’affiche, puis cliquez sur OK.

Création du script List Children

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 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. Cliquez ensuite sur OK.

   

   Avec les propriétés suivantes :

   

2. Sélectionnez le nœud /apps/mywebsite/components/listchildren/dialog/items/items/tab1.

3. Dans le Propriétés , modifiez la valeur de la variable title de List Children

   

4. Sélectionnez la tab1 noeud et cliquez sur Créer > Créer un noeud, saisissez les valeurs de propriété suivantes, puis cliquez sur OK:

   • Nom : items
   • Type: cq:WidgetCollection

   

5. Créez un noeud sous le noeud items à l’aide des valeurs de propriété suivantes :

   • Nom: listroot
   • Type: cq:Widget

   

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	Path of list root
   name	Chaîne	./listroot
   xtype	Chaîne	textfield

   

Inclusion des enfants de liste 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 l’intégralité du fonctionnement de ce composant, vous pouvez afficher la page Produits :

• lorsque la page parente ("Chemin de la racine de liste") n’est pas définie.
• lorsque la page parente ("Chemin de la racine de liste") est définie.

1. Dans votre navigateur, rechargez la page Products. Le composant listchildren apparaît comme suit :

   

2. 

3. Pour Path of list root, saisissez : /content/mywebsite/en. Cliquez sur OK. Le composant listchildren de votre page se présente désormais comme suit :

   

Création du composant Logo

Créez un composant qui affiche le logo de l’entreprise et fournit un lien vers la page d’accueil du site. Le composant contient une boîte de dialogue de mode conception afin que les valeurs de propriété soient stockées dans la conception du site (/etc/designs/mywebsite?lang=fr) :

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

Votre boîte de dialogue de mode de conception contient des propriétés pour définir l’image et le chemin du lien. Le composant Logo sera placé dans le coin supérieur gauche de toutes les pages du site web.

Il se présente comme suit :

Création du noeud du composant Logo

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

1. Dans CRXDE Lite, cliquez avec le bouton droit 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.
   • Description: This is My Logo Component.

3. Cliquez sur Suivant jusqu’à ce que vous accédiez au panneau final de la boîte de dialogue, puis cliquez sur OK.

Création du script du logo

Cette section décrit 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éation de la boîte de dialogue de conception de logo

Créez la boîte de dialogue pour configurer votre composant Logo en mode Conception. 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é suivantes, puis cliquez sur OK:

      • Libellé design_dialog
      • Titre Logo (Design)

2. Cliquez avec le bouton droit sur le noeud tab1 dans la branche design_dialog et cliquez 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, puis cliquez sur Enregistrer tout:

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

   

Création du script de rendu du logo

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

1. Cliquez avec le bouton droit sur le noeud 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 le code suivant dans le fichier, 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 left.jsp sous /apps/mywebsite/components/contentpage file et localisez 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 :

   

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

Cette section décrit comment définir une image comme logo à l’aide de la boîte de dialogue de mode de conception.

1. Avec le Produits ouvrez la page dans votre navigateur, cliquez sur Conception au bas du sidekick pour entrer Conception mode .

   

2. Dans la barre 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 sur dans le panneau de la fonction Image , recherchez la variable logo.png image que vous avez extraite de la fonction mywebsite.zip puis cliquez sur OK.

   

4. Cliquez sur le triangle de la barre de titre du sidekick pour revenir à Modifier mode .

   

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

Inclusion du composant de chemin de navigation

Dans cette section, vous incluez 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 variable Produits 1 page. Le composant Suivi se présente comme suit :

   

Inclusion du composant Titre

Dans cette section, vous incluez 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 :

   

Inclusion du composant Système de paragraphe

Le système de paragraphes (parsys) est une partie importante d’un site web, car il gère une liste de paragraphes. Il permet aux auteurs d’ajouter des composants de paragraphe à la page et fournit une 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 variable Produits page. Il comporte désormais le composant parsys, qui se présente comme suit :

   

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 d’image est créé sous la forme d’une copie du composant Logo avec certaines modifications de propriété.

Création du composant Image

1. Cliquez avec le bouton droit sur le nœud /apps/mywebsite/components/logo, puis cliquez sur Copier.

2. Cliquez avec le bouton droit sur le nœud /apps/mywebsite/components, puis cliquez sur Coller.

3. Cliquez avec le bouton droit sur le nœud Copy of 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
   • jcr:description : This is My Image Component

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 logo.jsp en image.jsp..

8. Ouvrez img.GET.java et définissez le package sur apps.mywebsite.components.image.

Création du script d’image

Cette section décrit comment créer le script d’image.

1. Ouvrez /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 noeud 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 utilisez un noeud cq:editConfig pour vous permettre de faire glisser des ressources de l’outil de recherche de contenu vers votre composant d’image.

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

   • Nom: cq:editConfig.
   • Type: cq:EditConfig.

2. Sous le noeud cq:editConfig, créez un noeud comme suit :

   • Nom: cq:dropTargets.
   • Type: cq:DropTargetConfig.

3. Sous le noeud cq:dropTargets, créez un noeud comme suit :

   • Nom: image.
   • Type: nt:unstructured.

4. Dans CRXDE, définissez les propriétés comme suit :

Ajouter l'icône

Dans cette section, vous ajoutez l’icône à afficher en regard du composant d’image lorsqu’il est répertorié dans le sidekick :

1. Dans CRXDE Lite, cliquez avec le bouton droit sur le fichier /libs/foundation/components/image/icon.png, puis sélectionnez Copier.
2. Cliquez avec le bouton droit sur le nœud /apps/mywebsite/components/image, puis cliquez sur Coller puis 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 le Mode de conception icône .

3. Cliquez sur le bouton Modifier pour modifier la boîte de dialogue de conception de par.

4. Dans la boîte de dialogue, une liste de Composants autorisés s’affiche ; accéder à MyWebsite, sélectionnez la variable Mon composant d’image et cliquez sur OK.

5. Revenir à Mode d’édition.

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

   

Inclusion du composant Barre d’outils

Dans cette section, vous incluez le composant de barre d’outils, qui est l’un des composants de base.

Vous disposez de plusieurs options, en mode d’édition et en mode de conception.

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 dossiers de la page Sites Web AEM, sélectionnez Websites/My Website/English, puis cliquez sur Nouveau > Nouvelle page. Spécifiez les valeurs de propriété suivantes, puis cliquez sur Créer :

   • Titre: Barre d’outils
   • Sélectionner 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 l’onglet Barre d’outils page et clic Propriétés. Sélectionner Masquer dans la navigation, puis cliquez sur OK.

   Le Masquer dans la navigation L’option empêche la page d’apparaître dans les composants de navigation, tels que topnav et listchildren.

5. Sous Barre d’outils, créez les pages suivantes :

   • Contacts
   • Commentaires
   • Connexion
   • Recherche

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

   

Création du composant Recherche

Dans cette section, vous créez le composant pour 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 (par exemple, sur une page de résultats de recherche spécialisée).

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

Création du composant Recherche

1. Dans CRXDE Lite, cliquez avec le bouton droit 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. Dans un premier panneau, spécifiez les valeurs de propriété suivantes :

      • Libellé: search
      • Titre: Mon composant Recherche
      • Description: Ceci est mon composant Recherche
      • Groupe: MyWebsite

   2. Cliquez sur Suivant, puis cliquez sur Suivant encore une fois.

   3. Sur le Parents autorisés , cliquez sur le panneau + bouton et type */parsys.

   4. Cliquez sur Suivant puis cliquez sur OK.

3. Cliquez sur Enregistrer tout.

4. Copiez les noeuds suivants et collez-les dans le apps/mywebsite/components/search node:

   • /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 « search » :

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.

Inclusion d’une zone de recherche dans le composant contentpage

Pour inclure une zone de saisie de recherche dans la section gauche de votre page de contenu, 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 de recherche se présente comme suit :

   

Insertion du composant Recherche dans la page de recherche

Dans cette section, vous ajoutez votre composant de recherche au système de paragraphes.

1. Dans votre navigateur, ouvrez le Rechercher page.

2. Dans le sidekick, cliquez sur le Conception icône de mode.

3. Dans le bloc Conception de par (sous le titre de la 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 de recherche, puis cliquez sur OK.

5. Dans le sidekick, cliquez sur le triangle pour revenir à Modifier mode .

6. Faites glisser le Ma recherche du sidekick vers le cadre parsys. Il se présente comme suit :

   

7. Accédez à Produits page. Recherchez des clients dans la zone de saisie, puis appuyez sur Entrée. Vous êtes redirigé vers le Rechercher page. Basculer vers Aperçu mode : la sortie est dans un format similaire à celui-ci :

   

Inclusion du composant Iparsys

Dans cette section, vous incluez le composant Système de paragraphe d’héritage (iparsys), qui est l’un des composants de base. Ce composant permet de créer une structure de paragraphes sur une page parente et de faire hériter les paragraphes par les pages enfants.

Pour ce composant, vous pouvez définir plusieurs paramètres en mode d’édition et en mode de conception.

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. La page se présente comme suit :

   

Ressources Business.Adobe.com

Content Insights Customer Communications Mobile Forms Version History Dynamic Media Digital Signage