Créer un site web complet (JSP) create-a-fully-featured-website-jsp

Installez AEM.

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

Installer la structure du projet dans CRXDE Lite.

créer le modèle, le composant et les scripts utilisés comme base pour la création de pages de contenu ;

créer la page racine de votre site web, puis les pages de contenu ;

Créer les composants suivants en vue de les utiliser sur vos pages :

• Navigation supérieure
• Liste des enfants
• Logo
• Image
• Texte-Image
• Recherche

inclure divers composants de base.

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.

Cliquez avec le bouton droit 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.

Cliquez avec le bouton droit 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 :

Cliquez sur Enregistrer tout.

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

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

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

À l’aide de WebDAV, accédez à l’URL https://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.

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.

Dans la boîte de dialogue Créer un modèle, entrez les valeurs ci-dessous et cliquez ensuite 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.

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 du dossier /content et à toutes ses 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.

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

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

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  : il s’agit du 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.

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 :

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 */
%>

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>

Cliquez sur Enregistrer tout pour enregistrer vos modifications.

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

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

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

• Titre : My Website
• Nom : mywebsite
• Sélectionnez l’événement My Website Content Page Template.

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

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 : Français
• Nom : fr
• Sélectionnez My Website Content Page Template.

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

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.

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

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.

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

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.

La structure se présente comme suit :

Pour lier vos pages à la conception mywebsite, sélectionnez le nœud /content/mywebsite/en/jcr:content dans CRXDE Lite. Dans l’onglet 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

Dans un nouvel onglet ou une nouvelle fenêtre de navigateur web, ouvrez https://localhost:4502/content/mywebsite/en/products.html pour afficher la page Produits :

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.

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>

Enregistrez vos modifications.

Dans votre navigateur, rechargez la page Products. Elle 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. L’extrait 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
             });

Dans CRXDE Lite, créez le fichier left.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 fenêtre, saisissez left.jsp dans le champ Nom, puis cliquez sur OK.

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>

Enregistrez les modifications.

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, indiquez center.jsp dans le champ Nom, puis cliquez sur OK.

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>

Enregistrez les modifications.

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.

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>

Enregistrez les modifications.

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

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>

Enregistrez les modifications.

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

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

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

Cliquez sur Suivant jusqu’à la dernière fenêtre, puis cliquez sur OK. Enregistrez vos modifications.

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

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><%
        }
    }
%>

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" />

Enregistrez les modifications.

Dans votre navigateur, rechargez la page Produits. La navigation supérieure s’affiche comme suit :

Dans votre navigateur, ouvrez la page Products.

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

Dans l’onglet De base de la boîte de dialogue, développez Autres titres et description. Pour la propriété Sous-titre, entrez what we do. Cliquez sur OK.

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

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.

Sling détermine que le chemin d’accès de la ressource doit être /content/mwebysite/en/products.png..

Sling fait correspondre ce chemin d’accès avec le nœud /content/mywebsite/en/products.

Sling détermine que le sling:resourceType de ce nœud doit être mywebsite/components/contentpage.

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 CRXDE Lite, ouvrez le topnav.jsp sous /apps/mywebsite/components/topnav.Localisez le contenu de l’élément d’ancrage (ligne 14) :

<%=child.getTitle() %>

Remplacez le contenu de l’ancre de lien par le code suivant :

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

Enregistrez les modifications.

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

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.

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. On obtient ensuite le titre et le sous-titre de la page.
• ImageHelper sert à 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;
     }
 }

Enregistrez les modifications.

Dans votre navigateur, rechargez la page Produits. La navigation supérieure s’affiche désormais comme suit :

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

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électionner le modèle de page de contenu My Website

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

• Titre : Product 2
• Nom : product2
• Sélectionner le modèle de page de contenu My Website

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 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.

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!.

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.

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

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.
• Description : This is My Listchildren Component.

Continuez à cliquer sur Suivant jusqu’à ce que le panneau Enfants autorisés s’affiche, puis cliquez sur OK.

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

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 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 %></code><br>
             <%= child.getProperties().get("jcr:description","") %><br>
             </div><%
         }
     }
 %>

Enregistrez les modifications.

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 :

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

Dans l’onglet Propriétés, modifiez la valeur de la propriété title pour la définir sur List Children.

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

• Nom : items
• Type : cq:WidgetCollection

Créez un nœud sous le nœud items à l’aide des valeurs de propriété suivantes :

• Nom : listroot
• Type : cq:Widget

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.

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

<div>newslist</div>

Remplacez ce code par le code suivant :

<cq:include path="newslist" resourceType="mywebsite/components/listchildren" />

Enregistrez les modifications.

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

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 :

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

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

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

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

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>

Enregistrez les modifications.

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)

Cliquez avec le bouton droit sur le nœud tab1 dans la branche design_dialog, puis cliquez sur Supprimer. Cliquez sur Enregistrer tout.

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 :

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

<div>logo</div>

Remplacez ce code par la ligne de code suivante :

<cq:include path="logo" resourceType="mywebsite/components/logo" />

Enregistrez les modifications.

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

Une fois la page Products ouverte dans votre navigateur, cliquez sur le bouton Conception au bas du sidekick pour passer en mode de conception.

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.

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

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

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

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" />

Enregistrez les modifications.

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

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" />

Enregistrez les modifications.

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

Remarque  : vous pouvez définir un autre titre et changer le type et la taille en mode d’édition.

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

<div>parsys</div>

Remplacez cette ligne de code par le code suivant, puis enregistrez les modifications :

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

Dans votre navigateur, actualisez la page Products. Elle contient désormais le composant parsys, qui apparaît comme suit :

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

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

Cliquez avec le bouton droit sur le nœud Copy of logo, cliquez sur Renommer, supprimez le texte existant, puis saisissez image.

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

Ajoutez une propriété au nœud image avec les valeurs de propriété suivantes :

• Nom : componentGroup
• Type : chaîne
• Valeur : MyWebsite

Sous le nœud image, renommez le nœud design_dialog en dialog.

Renommez logo.jsp en image.jsp..

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

Ouvrez /apps/mywebsite/components/image/ image.jsp.

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); %>

Enregistrez les modifications.

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

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

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

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

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

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

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

Dans votre navigateur, rechargez la page Products.

Dans le sidekick, cliquez sur l’icône du mode de conception.

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

Dans la boîte de dialogue, vous trouverez une liste de Composants autorisés. Accédez à MyWebsite, sélectionnez Mon composant Image et cliquez sur OK.

Revenez en mode d’édition.

Double-cliquez sur le cadre parsys (sur Faire glisser ici des composants ou des ressources). Les sélecteurs Insérer un nouveau composant et Sidekick se présentent comme suit :

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>

Remplacez ce code par le code suivant, puis enregistrez les modifications :

<cq:include path="toolbar" resourceType="foundation/components/toolbar"/>

Dans l’arborescence de dossiers de la page des 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 : Toolbar
• Sélectionner le modèle de page de contenu My Website

Dans la liste des pages, cliquez avec le bouton droit sur la page Toolbar, 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 les composants de navigation, tels que topnav et listchildren.

Sous Toolbar, créez les pages suivantes :

• Contacts
• Feedback
• Connexion
• Recherche

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

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

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 : My Search Component
   • Description : This is My Search Component
   • 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.

Cliquez sur Enregistrer tout.

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

Cliquez sur Enregistrer tout.

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

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}"/></code></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>

Enregistrez les modifications.

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

%><div class="left">

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);%><%

Recherchez la ligne de code suivante :

<div>search</div>

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>

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

Dans votre navigateur, ouvrez la page Search.

Dans le sidekick, cliquez sur l’icône du mode de conception.

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

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.

Dans sidekick, cliquez sur le triangle pour revenir au mode de modification.

Faites glisser le composant Ma recherche du sidekick dans le cadre parsys. Elle se présente comme suit :

Accédez à votre page Products. Recherchez des clients ou des clientes dans la zone de saisie et appuyez sur Entrée. Vous êtes redirigé sur la page de recherche. Passez en mode Aperçu : le format de la sortie est similaire à ce qui suit :

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" />

Enregistrez les modifications.

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