Creare un sito web completo (JSP) create-a-fully-featured-website-jsp

Installare AEM.

Accedere a CRXDE Lite (l’ambiente di sviluppo).

Imposta la struttura del progetto in CRXDE Lite.

Crea il modello, il componente e gli script utilizzati come base per la creazione delle pagine di contenuto.

Crea la pagina root per il tuo sito web e quindi per le pagine di contenuto.

Crea i seguenti componenti da utilizzare sulle pagine:

• Navigazione superiore
• Elementi figli elenco
• Logo
• Immagine
• Text-Image
• Ricerca

Includi vari componenti di base.

Nella struttura ad albero sul lato sinistro di CRXDE Lite, fare clic con il pulsante destro del mouse sulla cartella /apps e scegliere Crea > Crea Cartella. Nella finestra di dialogo Crea cartella digitare mywebsite come nome della cartella e fare clic su OK.

Fare clic con il pulsante destro del mouse sulla cartella /apps/mywebsite e scegliere Crea > Crea cartella. Nella finestra di dialogo Crea cartella digitare components come nome della cartella e fare clic su OK.

Fare clic con il pulsante destro del mouse sulla cartella /apps/mywebsite e scegliere Crea > Crea cartella. Nella finestra di dialogo Crea cartella digitare templates come nome della cartella e fare clic su OK.

La struttura nell’albero ora dovrebbe essere simile a questa:

Fare clic su Salva tutto.

Nella pagina iniziale del AEM, fai clic su Strumenti. (https://localhost:4502/libs/cq/core/content/welcome.html)

Nella struttura delle cartelle selezionare la cartella Designs e quindi fare clic su New > New Page. Digitare mywebsite come titolo e fare clic su Crea.

Se l'elemento del sito Web non viene visualizzato nella tabella, aggiornare la struttura o la tabella.

Utilizzando l'accesso WebDAV all'URL in https://localhost:4502, copiare il file static.css di esempio e la cartella images dal file mywebsite.zip scaricato nella cartella /etc/designs/mywebsite.

Nell'albero delle cartelle di CRXDE Lite fare clic con il pulsante destro del mouse su /apps/mywebsite/templates e scegliere Crea > Crea modello.

Nella finestra di dialogo Crea modello, digita i seguenti valori, quindi fai clic su Avanti:

• Etichetta: contentpage
• Titolo: Modello pagina contenuto sito Web personale
• Descrizione: questo è il modello per la pagina di contenuto del sito Web
• Tipo risorsa: miosito/componenti/paginacontenuto

Utilizzare il valore predefinito per la proprietà Ranking.

Il tipo di risorsa identifica il componente che esegue il rendering della pagina. In questo caso, il rendering di tutte le pagine create utilizzando il modello contentpage viene eseguito dal componente mywebsite/components/contentpage.

Per specificare i percorsi delle pagine che possono utilizzare questo modello, fare clic sul pulsante più e digitare /content(/.*)? nella casella di testo visualizzata. Quindi fare clic su Avanti.

Il valore della proprietà del percorso consentito è un'espressione regolare . Le pagine con un percorso corrispondente all'espressione possono utilizzare il modello. In questo caso, l'espressione regolare corrisponde al percorso della cartella /content e di tutte le pagine secondarie.

Quando un autore crea una pagina sotto /content, il modello contentpage viene visualizzato in un elenco di modelli disponibili da utilizzare.

Fai clic su Avanti nei pannelli Padri consentiti e Figli consentiti e fai clic su OK. In CRXDE Lite, fare clic su Salva tutto.

In CRXDE Lite, fare clic con il pulsante destro del mouse su /apps/mywebsite/components e scegliere Crea > Componente.

Nella finestra di dialogo Crea componente, digita i seguenti valori di proprietà:

• Etichetta: contentpage
• Titolo: Componente Pagina Contenuto Del Sito Web
• Descrizione: componente pagina contenuto del sito Web

Il percorso del nuovo componente è /apps/mywebsite/components/contentpage. Questo percorso corrisponde al tipo di risorsa del modello contentpage meno la parte /apps/ iniziale del percorso.

Questa corrispondenza collega il modello al componente ed è fondamentale per il corretto funzionamento del sito web.

Fare clic su Avanti finché non viene visualizzato il pannello Elementi figlio consentiti della finestra di dialogo, quindi fare clic su OK. In CRXDE Lite, fare clic su Salva tutto.

La struttura si presenta ora come segue:

In CRXDE Lite, aprire il file contentpage.jsp in /apps/mywebsite/components/contentpage. Per impostazione predefinita, il file contiene il seguente codice:

<%--

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

Copia il seguente codice e incollalo in contentpage.jsp dopo il codice predefinito:

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

Fai clic su Salva tutto per salvare le modifiche.

Nella pagina di benvenuto AEM (https://localhost:4502/libs/cq/core/content/welcome.html) fare clic su Siti Web.

Nella struttura delle cartelle selezionare la cartella Siti Web e quindi fare clic su Nuovo > Nuova pagina.

Nella finestra Crea pagina, immetti quanto segue:

• Titolo: My Website
• Nome: mywebsite
• Seleziona My Website Content Page Template

Fai clic su Crea. Nell'albero delle cartelle selezionare la pagina /Siti Web/Sito Web e fare clic su Nuovo > Nuova pagina.

Nella finestra di dialogo Crea pagina, immetti i seguenti valori delle proprietà, quindi fai clic su Crea:

• Titolo: Inglese
• Nome: it
• Seleziona il modello per pagina di contenuto del sito Web personale

Nell'albero delle cartelle selezionare la pagina /Siti Web/Sito Web personale/Inglese e fare clic su Nuova> Nuova pagina.

Nella finestra di dialogo Crea pagina, immettere i valori delle proprietà seguenti, quindi fare clic su Crea:

• Title: Prodotti
• Seleziona il modello per pagina di contenuto del sito Web personale

Nell'albero delle cartelle selezionare la pagina /Siti Web/Sito Web personale/Inglese e fare clic su Nuovo > Nuova pagina.

Nella finestra di dialogo Crea pagina, immettere i valori delle proprietà seguenti, quindi fare clic su Crea:

• Titolo: Servizi
• Seleziona il modello per pagina di contenuto del sito Web personale

Nell'albero delle cartelle selezionare la pagina /Siti Web/Sito Web personale/Inglese e fare clic su Nuovo > Nuova pagina.

Nella finestra di dialogo Crea pagina, immettere i valori delle proprietà seguenti, quindi fare clic su Crea:

• Titolo: Clienti
• Seleziona il modello per pagina di contenuto del sito Web personale

La struttura si presenta come segue:

Per collegare le pagine alla progettazione del sito Web, in CRXDE Lite selezionare il nodo /content/mywebsite/en/jcr:content. Nella scheda Proprietà digitare i valori seguenti per una nuova proprietà e quindi fare clic su Aggiungi:

• Nome: cq:designPath
• Tipo: String
• Valore: /etc/designs/mywebsite

In una nuova scheda o finestra del browser Web, apri https://localhost:4502/content/mywebsite/en/products.html per visualizzare la pagina Prodotti:

In CRXDE Lite, aggiungere una proprietà al nodo /apps/mywebsite/components/contentpage.

1. Selezionare il nodo /apps/mywebsite/components/contentpage.

2. Nella parte inferiore della scheda Proprietà, digitare i seguenti valori di proprietà e quindi fare clic su Aggiungi:

   • Nome: sling:resourceSuperType
   • Tipo: Stringa
   • Valore: foundation/components/page

3. Fai clic su Salva tutto.

Apri il file contentpage.jsp in /apps/mywebsite/components/contentpage e sostituisci il codice esistente con il seguente codice:

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

Salva le modifiche.

Nel browser, ricarica la pagina Prodotti. Si presenta come segue:

Apri la sorgente della pagina per visualizzare gli elementi JavaScript e HTML generati dagli script head.jsp e body.jsp. Il seguente snippet di script apre il Sidekick quando apri la pagina:

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

In CRXDE Lite, creare il file left.jsp in /apps/mywebsite/components/contentpage:

1. Fare clic con il pulsante destro del mouse sul nodo /apps/mywebsite/components/contentpage, quindi selezionare Crea ​ quindi Crea file.

2. Nella finestra, digita left.jsp come Nome e fai clic su OK.

Modificare il file left.jsp per rimuovere il contenuto esistente e sostituirlo con il seguente codice:

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

Salva le modifiche.

In CRXDE Lite, creare il file center.jsp in /apps/mywebsite/components/contentpage:

1. Fare clic con il pulsante destro del mouse sul nodo /apps/mywebsite/components/contentpage, selezionare Crea, quindi Crea file.

2. Nella finestra di dialogo, digita center.jsp come Nome e fai clic su OK.

Modificare il file center.jsp per rimuovere il contenuto esistente e sostituirlo con il codice seguente:

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

Salva le modifiche.

In CRXDE Lite, creare il file right.jsp in /apps/mywebsite/components/contentpage:

1. Fare clic con il pulsante destro del mouse sul nodo /apps/mywebsite/components/contentpage, selezionare Crea, quindi Crea file.

2. Nella finestra di dialogo, digita right.jsp come Nome e fai clic su OK.

Modificare il file right.jsp per rimuovere il contenuto esistente e sostituirlo con il seguente codice:

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

Salva le modifiche.

In CRXDE Lite, creare il file body.jsp in /apps/mywebsite/components/contentpage:

Modificare il file body.jsp per rimuovere il contenuto esistente e sostituirlo con il seguente codice:

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

Salva le modifiche.

Nel browser, ricarica la pagina Prodotti. Si presenta come segue:

In CRXDE Lite, fare clic con il pulsante destro del mouse su /apps/mywebsite/components, selezionare Crea, quindi Crea componente.

Nella finestra Crea componente, immettere quanto segue:

• Etichetta: topnav

• Titolo: My Top Navigation Component

• Descrizione: This is My Top Navigation Component

Fare clic su Avanti fino a visualizzare l'ultima finestra in cui si fa clic su OK. Salva le modifiche.

In CRXDE Lite, aprire il file topnav.jsp in /apps/mywebsite/components/topnav.

Sostituisci il codice esistente copiando e incollando il seguente codice:

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

In CRXDE Lite, apri body.jsp in /apps/mywebsite/components/contentpage e sostituisci:

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

con:

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

Salva le modifiche.

Nel browser, ricarica la pagina dei prodotti. La navigazione superiore viene visualizzata come segue:

Nel browser aprire la pagina Prodotti.

Nella scheda Pagina del Sidekick fare clic su Proprietà pagina.

Nella scheda Base della finestra di dialogo, espandi Altri titoli e descrizioni, e per la proprietà Sottotitoli, digita le operazioni da eseguire. Fai clic su OK.

Ripeti i passaggi precedenti per aggiungere il sottotitolo sui servizi alla pagina Servizi.

Ripeti i passaggi precedenti per aggiungere il sottotitolo il trust guadagnato alla pagina Clienti.

Suggerimento: In CRXDE Lite, selezionare il nodo /content/mywebsite/en/products/jcr:content per verificare che la proprietà subtitle sia stata aggiunta.

Sling determina il percorso della risorsa da /content/mwebysite/en/products.png.

Sling corrisponde a questo percorso con il nodo /content/mywebsite/en/products.

Sling determina che sling:resourceType di questo nodo sia mywebsite/components/contentpage.

Sling trova lo script in questo componente che corrisponde meglio al selettore URL ( navimage) e all'estensione del nome file ( png).

In CRXDE Lite, apri topnav.jsp in /apps/mywebsite/components/topnav.Individua il contenuto dell'elemento di ancoraggio (riga 14):

<%=child.getTitle() %>

Sostituisci il contenuto di ancoraggio con il seguente codice:

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

Salva le modifiche.

Fare clic con il pulsante destro del mouse sul nodo /apps/mywebsite/components/contentpage e scegliere Crea > Crea file.

Nella finestra Crea file, come Nome, digitare navimage.png.java.

L’estensione del nome file .java indica a Sling che il supporto Java™ per script Apache Sling deve essere utilizzato per compilare lo script e creare un servlet.

Copiare il codice seguente in navimage.png.java.Il codice estende la classe AbstractImageServlet:

• AbstractImageServlet crea un oggetto ImageContext che memorizza le proprietà della risorsa corrente.
• La pagina padre della risorsa viene estratta dall'oggetto ImageContext. Vengono quindi ottenuti il titolo e il sottotitolo della pagina.
• ImageHelper viene utilizzato per generare l'immagine dal file navimage_bg.jpg della progettazione del sito, dal titolo della pagina e dal sottotitolo della pagina.

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

Salva le modifiche.

Nel browser, ricarica la pagina Prodotti. La navigazione superiore ora viene visualizzata come segue:

Nell'albero delle cartelle della pagina Siti Web selezionare l'elemento Siti Web/Sito Web personale/Inglese/Prodotti e fare clic su Nuovo > Nuova pagina.

Nella finestra di dialogo, immetti i seguenti valori delle proprietà, quindi fai clic su Crea:

• Titolo: Prodotto 1.
• Nome: product1.
• Seleziona il modello per pagina di contenuto del sito Web

Crea un'altra pagina sotto Prodotti utilizzando i seguenti valori di proprietà:

• Title: Prodotto 2
• Nome: product2
• Seleziona il modello per pagina di contenuto del sito Web

In CRXDE Lite, imposta una descrizione e una data per la pagina Product 1:

1. Selezionare il nodo /content/mywebsite/en/products/product1/jcr:content.

2. Nella scheda Proprietà immettere i valori seguenti:

   • Nome: jcr:description
   • Tipo: String
   • Valore: This is a description of the Product 1!.

3. Fare clic su Aggiungi.

4. Nella scheda Proprietà, crea un'altra proprietà utilizzando i valori seguenti:

   • Nome: data
   • Tipo: String
   • Valore: 02/14/2008
   • Fai clic su Aggiungi.

5. Fai clic su Salva tutto.

In CRXDE Lite, imposta una descrizione e una data per la pagina del prodotto 2:

1. Seleziona il nodo /content/mywebsite/en/products/product2/jcr:content.

2. Nella scheda Proprietà immettere i valori seguenti:

   • Nome: jcr:description
   • Tipo: String
   • Valore: questa è una descrizione del prodotto 2!.

3. Fare clic su Aggiungi.

4. Nelle stesse caselle di testo sostituire i valori precedenti con i valori seguenti:

   • Nome: data
   • Tipo: String
   • Valore: 05/11/2012
   • Fai clic su Aggiungi.

5. Fai clic su Salva tutto.

In CRXDE Lite, fare clic con il pulsante destro del mouse su /apps/mywebsite/components, selezionare Crea, quindi Crea componente.

Nella finestra di dialogo, immetti i seguenti valori delle proprietà, quindi fai clic su Avanti:

• Etichetta: listchildren.
• Titolo: Il mio componente Listchildren.
• Descrizione: questo è il componente Listchildren personale.

Continuate a fare clic su Avanti fino a visualizzare il pannello Figli consentiti, quindi fate clic su OK.

In CRXDE Lite, aprire il file listchildren.jsp in /apps/mywebsite/components/listchildren.

Sostituisci il codice predefinito con il seguente codice:

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

Salva le modifiche.

Crea il nodo della finestra di dialogo sotto il componente listchildren:

1. In CRXDE Lite, fare clic con il pulsante destro del mouse sul nodo /apps/mywebsite/components/listchildren e scegliere Crea > Crea finestra di dialogo.

2. Nella finestra di dialogo, immetti i seguenti valori delle proprietà e fai clic su OK

   • Etichetta: dialog

   • Titolo: Edit Component e fare clic su OK.

Con le seguenti proprietà:

Selezionare il nodo /apps/mywebsite/components/listchildren/dialog/items/items/tab1.

Nella scheda Proprietà, modifica il valore della proprietà title in List Children

Seleziona il nodo tab1 e fai clic su Crea > Crea nodo, immetti i seguenti valori delle proprietà e fai clic su OK:

• Nome: elementi
• Tipo: cq:WidgetCollection

Crea un nodo sotto il nodo elementi utilizzando i seguenti valori di proprietà:

• Nome: listroot
• Tipo: cq:Widget

Aggiungi le proprietà per il nodo listroot per configurarlo come campo di testo. Ogni riga della tabella seguente rappresenta una proprietà. Al termine, fare clic su Salva tutto.

In CRXDE Lite, aprire il file left.jsp in /apps/mywebsite/components/contentpage e individuare il seguente codice (riga 4):

<div>newslist</div>

Sostituisci il codice con il seguente:

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

Salva le modifiche.

Nel browser, ricarica la pagina dei prodotti. Il componente listchildren viene visualizzato come segue:

Come Percorso della directory principale dell'elenco, immettere: /content/mywebsite/en. Fare clic su OK. Il componente Listchildren sulla pagina ora si presenta come segue:

In CRXDE Lite, fare clic con il pulsante destro del mouse su /apps/mywebsite/components, selezionare Create, quindi Create Component.

Nella finestra di dialogo Crea componente immetti i seguenti valori delle proprietà, quindi fai clic su Avanti:

• Etichetta: logo.
• Titolo: My Logo Component.
• Descrizione: This is My Logo Component.

Fare clic su Avanti fino a raggiungere il pannello finale della finestra di dialogo e quindi fare clic su OK.

In CRXDE Lite, aprire il file logo.jsp in /apps/mywebsite/components/logo.

Il codice seguente crea il collegamento alla home page del sito e aggiunge un riferimento all'immagine del logo. Copia il codice in 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>

Salva le modifiche.

Crea il nodo della finestra di dialogo sotto il componente logo:

1. Fare clic con il pulsante destro del mouse sul nodo /apps/mywebsite/components/logo e scegliere Crea > Crea finestra di dialogo.

2. Digitare i valori delle proprietà seguenti e quindi fare clic su OK:

   • Etichetta: design_dialog

   • Titolo: Logo (Design)

Fate clic con il pulsante destro del mouse sul nodo tab1 nel ramo design_dialog e scegliete Elimina (Delete). Fai clic su Salva tutto.

Nel nodo design_dialog/items/items creare un nodo denominato img di tipo cq:Widget. Aggiungi le seguenti proprietà e fai clic su Salva tutto:

In CRXDE Lite, apri left.jsp in /apps/mywebsite/components/contentpage file e individua la seguente riga di codice:

<div>logo</div>

Sostituire il codice con la seguente riga di codice:

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

Salva le modifiche.

Nel browser, ricarica la pagina Prodotti. Il logo ha il seguente aspetto, anche se attualmente mostra solo il collegamento sottostante:

Con la pagina Prodotti aperta nel browser, fai clic sul pulsante Progettazione nella parte inferiore del Sidekick per accedere alla modalità progettazione.

Nella barra Progettazione logo, fai clic su Modifica per utilizzare la finestra di dialogo per modificare le impostazioni del componente logo.

Nella finestra di dialogo, fai clic su nel pannello della scheda Immagine, individua l’immagine logo.png estratta dal file mywebsite.zip e fai clic su OK.

Fate clic sul triangolo sulla barra del titolo del Sidekick per tornare alla modalità Modifica.

In CRXDE Lite, passa al seguente nodo per visualizzare i valori delle proprietà memorizzate:

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

In CRXDE Lite, passare a /apps/mywebsite/components/contentpage, aprire il file center.jsp e sostituire:

<div>trail</div>

con:

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

Salva le modifiche.

Nel browser, ricarica la pagina Prodotti 1. Il componente trail si presenta come segue:

In CRXDE Lite, passare a /apps/mywebsite/components/contentpage, aprire il file center.jsp e sostituire:

<div>title</div>

con:

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

Salva le modifiche.

Nel browser, ricarica la pagina Prodotti. Il componente Titolo si presenta così:

Nota: in modalità di modifica è possibile impostare un titolo diverso e il tipo o la dimensione.

In CRXDE Lite, passare a /apps/mywebsite/components/contentpage, aprire il file center.jsp e individuare la seguente riga di codice:

<div>parsys</div>

Sostituisci tale riga di codice con il seguente codice, quindi salva le modifiche:

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

Nel browser, aggiorna la pagina Prodotti. Ora ha la componente parsys, che si vede come segue:

Fare clic con il pulsante destro del mouse sul nodo /apps/mywebsite/components/logo e scegliere Copia.

Fare clic con il pulsante destro del mouse sul nodo /apps/mywebsite/components e scegliere Incolla.

Fare clic con il pulsante destro del mouse sul nodo Copy of logo, scegliere Rinomina, eliminare il testo esistente e digitare image.

Selezionare il nodo del componente image e modificare i valori delle proprietà seguenti:

• jcr:title: Il mio componente immagine.
• jcr:description: questo è il mio componente immagine.

Aggiungi una proprietà al nodo image con i seguenti valori di proprietà:

• Nome: componentGroup
• Tipo: String
• Valore: MyWebsite

Sotto il nodo image, rinominare il nodo design_dialog in dialog.

Rinomina logo.jsp in image.jsp.

Aprire img.GET.java e modificare il pacchetto in apps.mywebsite.components.image.

Apri /apps/mywebsite/components/image/ image.jsp

Sostituisci il codice esistente con il seguente codice, quindi salva le modifiche:

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

Salva le modifiche.

In CRXDE Lite, sotto il nodo /apps/mywebsite/components/image, crea un nodo come segue:

• Nome: cq:editConfig.
• Tipo: cq:EditConfig.

Crea un nodo sotto il nodo cq:editConfig come segue:

• Nome: cq:dropTarget.
• Tipo: cq:DropTargetConfig.

Crea un nodo sotto il nodo cq:dropTargets come segue:

• Nome: immagine.
• Tipo: nt:unstructured.

In CRXDE impostare le proprietà come segue:

Nel browser, ricarica la pagina Prodotti.

Nel Sidekick fare clic sull'icona modalità progettazione.

Fare clic sul pulsante Modifica per modificare la finestra di dialogo di progettazione della parte.

Nella finestra di dialogo viene visualizzato un elenco di Componenti consentiti. Passare a Sito Web, selezionare Componente immagine personale e fare clic su OK.

Torna alla modalità modifica.

Fare doppio clic sulla cornice parsys (su Trascinare qui i componenti o le risorse). I selettori Inserisci nuovo componente e Sidekick hanno il seguente aspetto:

In CRXDE Lite, passa a /apps/mywebsite/components/contentpage, apri il file body.jsp e individua il seguente codice:

<div class="toolbar">toolbar</div>

Sostituire il codice con il codice seguente, quindi salvare le modifiche.

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

Nella struttura ad albero delle cartelle della pagina Siti Web AEM, seleziona Siti Web/Il mio sito Web/Inglese, quindi fai clic su Nuovo > Nuova pagina. Specifica i seguenti valori delle proprietà e fai clic su Crea:

• Titolo: barra degli strumenti
• Seleziona il modello per pagina di contenuto del sito Web

Nell'elenco delle pagine fare clic con il pulsante destro del mouse sulla pagina della barra degli strumenti e scegliere Proprietà. Selezionare Nascondi in navigazione e fare clic su OK.

L’opzione Nascondi in navigazione impedisce la visualizzazione della pagina nei componenti di navigazione, come topnav e listchild.

Nella barra degli strumenti, crea le pagine seguenti:

• Contatti
• Feedback
• Accesso
• Ricerca

Nel browser, ricarica la pagina Prodotti. Si presenta come segue:

In CRXDE Lite, fare clic con il pulsante destro del mouse su /apps/mywebsite/components, selezionare Crea, quindi Crea componente.

Utilizza la finestra di dialogo per configurare il componente:

1. Un primo pannello specifica i seguenti valori di proprietà:

   • Etichetta: search
   • Titolo: Componente Ricerca personale
   • Descrizione: questo è il mio componente di ricerca
   • Gruppo: MyWebsite

2. Fare clic su Avanti, quindi di nuovo su Avanti.

3. Nel pannello Elementi padre consentiti fare clic sul pulsante + e digitare */parsys.

4. Fare clic su Avanti e quindi su OK.

Fai clic su Salva tutto.

Copia i seguenti nodi e incollali nel nodo apps/mywebsite/components/search:

• /libs/foundation/components/search/dialog

• "/libs/foundation/components/search/i18n

• /libs/foundation/components/search/icon.png

Fai clic su Salva tutto.

Aprire il file /apps/mywebsite/components/search/search.jsp.

Copia il seguente codice in 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>

Salva le modifiche.

In CRXDE Lite, aprire il file left.jsp in /apps/mywebsite/components/contentpage e individuare il seguente codice (riga 2):

%><div class="left">

Inserire il seguente codice prima di tale riga:

%><%@ page import="com.day.text.Text"%><%
%><% String docroot = currentDesign.getPath();
String home = Text.getAbsoluteParent(currentPage.getPath(), 2);%><%

Individua la seguente riga di codice:

<div>search</div>

Sostituire il codice con il codice seguente, quindi salvare le modifiche.

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

Nel browser, ricarica la pagina Prodotti. Il componente Ricerca si presenta come segue:

Nel browser, apri la pagina Ricerca.

Nel Sidekick, fate clic sull'icona della modalità progettazione.

Nel blocco Design of par (sotto il titolo Search), fare clic su Edit (Modifica).

Nella finestra di dialogo, scorri verso il basso fino al gruppo Siti Web personali, seleziona Componente ricerca personale e fai clic su OK.

Su Sidekick, fate clic sul triangolo per tornare alla modalità di modifica.

Trascinate il componente Ricerca personale dal Sidekick alla cornice parsys. Si presenta come segue:

Passa alla pagina Prodotti. Cercare i clienti nella casella di input e premere Invio. Viene eseguito il reindirizzamento alla pagina Ricerca. Passa alla modalità anteprima: l’output è in un formato simile al seguente:

In CRXDE Lite, passare a /apps/mywebsite/components/contentpage, aprire il file right.jsp e sostituire:

<div>iparsys</div>

con:

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

Salva le modifiche.

Nel browser, ricarica la pagina ​ Products. L’aspetto dell’intera pagina è il seguente: