Création d’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éez le modèle, le composant et les scripts utilisés comme base pour la création de pages de contenu.

Créez 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

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

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 :

Cliquez sur Enregistrer tout.

Sur la page d’accueil d’AEM, cliquez sur Outils. (http://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.

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.

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

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.

Cliquez sur Suivant dans le Parents autorisés et Enfants autorisés panneaux 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: 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.

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 AEM (http://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 la Modèle de page de contenu de mon site web

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

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

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

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

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

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 :

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. 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
             });

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.

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, saisissez center.jsp as Nom et 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 Products. Il 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’à ce que la dernière fenêtre dans laquelle vous cliquez 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 variable Produits Page. 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.

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.

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 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 et 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 . 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;
     }
 }

Enregistrez les modifications.

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

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.

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

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

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.

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.

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

Poursuivre le clic Suivant jusqu’à ce que la variable 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 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><%
         }
     }
 %>

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 le Propriétés , modifiez la valeur de la variable title de List Children

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

Créez un noeud sous le noeud 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 Products. 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é suivantes, puis cliquez sur OK:

   • Libellé design_dialog
   • Titre Logo (Design)

Cliquez avec le bouton droit sur le noeud tab1 dans la branche design_dialog et 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, puis cliquez 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 Products. Le logo se présente comme suit, même si, pour le moment, il n’affiche que le lien sous-jacent :

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

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

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

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 variable Produits 1 page. Le composant Suivi 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 Products. Le composant Titre se présente comme suit :

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 variable Produits page. Il comporte désormais le composant parsys, qui se présente comme suit :

Cliquez avec le bouton droit sur le nœud /apps/mywebsite/components/logo, puis 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 noeud /apps/mywebsite/components/image, créez un noeud comme suit :

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

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

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

Sous le noeud cq:dropTargets, créez un noeud 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 le Mode de conception icône .

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

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.

Revenir à Mode d’édition.

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 :

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

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.

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

• Contacts
• Commentaires
• Connexion
• Recherche

Dans votre navigateur, rechargez la page Products. Il 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: 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.

Cliquez sur Enregistrer tout.

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

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

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 Products. Le composant de recherche se présente comme suit :

Dans votre navigateur, ouvrez le Rechercher page.

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

Dans le bloc Conception de par (sous le titre de la 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 le sidekick, cliquez sur le triangle pour revenir à Modifier mode .

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

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 :

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 :