Creare un sito Web completo (JSP)

ATTENZIONE

Questo articolo descrive come creare un sito Web utilizzando JSP e in base all’interfaccia classica. Adobe consiglia di utilizzare le tecnologie AEM più recenti per i siti Web, come descritto in dettaglio nell'articolo Primi passi nello sviluppo AEM Sites.

Questa esercitazione consente di creare un sito Web completo con Adobe Experience Manager (AEM). Il sito web sarà basato su un sito web generico ed è rivolto principalmente agli sviluppatori web. Tutte le attività di sviluppo si svolgeranno in un ambiente di authoring.

Questa esercitazione descrive come:

  1. Installare AEM.

  2. Access CRXDE Lite (l'ambiente di sviluppo).

  3. Configurate la struttura del progetto in CRXDE Lite.

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

  5. Create la pagina principale per il sito Web e quindi le pagine di contenuto.

  6. Create i seguenti componenti da usare sulle pagine:

    • Navigazione superiore
    • Elementi figli elenco
    • Logo
    • Immagine
    • Testo-immagine
    • Ricerca
  7. Include vari componenti di base.

Dopo aver eseguito tutti i passaggi, le pagine avranno il seguente aspetto:

chlimage_1-99

Download del risultato finale

Per seguire l'esercitazione anziché eseguire gli esercizi, scaricate il sito Web-1.0.zip. Questo file è un pacchetto di contenuti AEM che contiene i risultati di questa esercitazione. Usate Package Manager per installare il pacchetto nell’istanza di creazione.

Nota

L’installazione di questo pacchetto sovrascrive tutte le risorse sull’istanza di authoring creata con questa esercitazione.

Pacchetto contenuto del sito Web

Ottieni file

Installing Adobe Experience Manager

Per installare un’istanza AEM per lo sviluppo del sito Web, seguite le istruzioni per configurare un ambiente di distribuzione con le istanzedi creazione e pubblicazione oppure eseguite un’installazione generica. L'installazione generica prevede il download del file JAR AEM Quickstart, il posizionamento del file license.properties nella stessa directory del file JAR e il doppio clic sul file JAR.

Dopo aver installato AEM, accedete all’ambiente di sviluppo CRXDE Lite facendo clic sul collegamento CRXDE Lite nella pagina di benvenuto:

chlimage_1-100

Nota

L’URL del CRXDE Lite per un’istanza di creazione AEM installata localmente utilizzando la porta predefinita è http://localhost:4502/crx/de/.

Impostazione della struttura del progetto in CRXDE Lite

Utilizzate CRXDE Lite per creare la struttura dell’applicazione miosito Web nella directory archivio:

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

  2. Fate clic con il pulsante destro del mouse sulla /apps/mywebsite cartella e fate clic su Crea > Crea cartella. Nella finestra di dialogo Crea cartella , digitate components il nome della cartella e fate clic su OK.

  3. Fate clic con il pulsante destro del mouse sulla /apps/mywebsite cartella e fate clic su Crea > Crea cartella. Nella finestra di dialogo Crea cartella , digitate templates il nome della cartella e fate clic su OK.

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

    chlimage_1-101

  4. Fate clic su Salva tutto.

Impostazione della progettazione

In questa sezione è possibile creare la progettazione dell'applicazione utilizzando lo strumento Designer. La progettazione fornisce file CSS e risorse di immagine per il sito Web.

Nota

Fate clic sul seguente collegamento per scaricare mywebsite.zip. L'archivio contiene i file static.css e le immagini per la progettazione.

Esempio di file static.css e immagini

Ottieni file

  1. Nella pagina di AEM benvenuto, fate clic su Strumenti. (http://localhost:4502/libs/cq/core/content/welcome.html)

    chlimage_1-102

  2. Nella struttura delle cartelle, selezionare la cartella Progettazione , quindi fare clic su Nuovo > Nuova pagina. Digitare mywebsite il titolo e fare clic su Crea.

  3. Se l’elemento del sito Web non viene visualizzato nella tabella, aggiornare la struttura ad albero o la tabella.

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

    chlimage_1-103

Creazione di un modello, un componente e uno script per la pagina Contenuto

In questa sezione potete creare quanto segue:

  • Modello di pagina di contenuto che verrà utilizzato per creare pagine di contenuto nel sito Web di esempio
  • Componente pagina di contenuto che verrà utilizzato per il rendering delle pagine di contenuto
  • Lo script contentpage

Creazione del modello di pagina di contenuto

Create un modello da usare come base per le pagine Web del sito.

Un modello definisce il contenuto predefinito di una nuova pagina. I siti Web complessi possono utilizzare diversi modelli per la creazione di diversi tipi di pagine nel sito. In questo esercizio, tutte le pagine sono basate su un modello semplice.

  1. Nella struttura delle cartelle del CRXDE Lite, fare clic con il pulsante destro del mouse /apps/mywebsite/templates e scegliere Crea > Crea modello.

  2. Nella finestra di dialogo Crea modello, digitate i seguenti valori e fate clic su Avanti:

    • Etichetta: contentpage
    • Titolo: Modello pagina contenuto sito Web personale
    • Descrizione: Questo è il mio modello di pagina del contenuto del sito Web
    • Tipo risorsa: sito Web/componenti/pagina di contenuto

    Utilizzare il valore predefinito per la proprietà Classificazione.

    chlimage_1-104

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

  3. 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 fate clic su Avanti.

    chlimage_1-105

    Il valore della proprietà path consentita è un'espressione regolare. Per le pagine con un percorso che corrisponde all'espressione è possibile utilizzare il modello. In questo caso l'espressione regolare corrisponde al percorso della /content cartella e di tutte le relative sottopagine.

    Quando un autore crea una pagina /contentdi seguito, il modello di pagina del contenuto viene visualizzato in un elenco di modelli disponibili da utilizzare.

  4. Fate clic su Avanti nei pannelli Genitori ​consentiti e Figli ​consentiti e fate clic su OK. In CRXDE Lite, fate clic su Salva tutto.

    chlimage_1-106

Creazione del componente della pagina di contenuto

Create il componente che definisce il contenuto ed esegue il rendering delle pagine che utilizzano il modello di pagina del contenuto. La posizione del componente deve corrispondere al valore della proprietà Tipo risorsa del modello di pagina del contenuto.

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

  2. Nella finestra di dialogo Crea componente , digitare i seguenti valori di proprietà:

    • Etichetta: contentpage
    • Titolo: Componente pagina contenuto sito Web personale
    • Descrizione: Componente Pagina contenuto sito Web personale

    chlimage_1-107

    La posizione del nuovo componente è /apps/mywebsite/components/contentpage. Questo percorso corrisponde al tipo di risorsa del modello di pagina del contenuto (meno la /apps/ parte iniziale del percorso).

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

  3. Fate clic su Avanti fino a visualizzare il pannello Elementi figlio consentiti della finestra di dialogo, quindi fate clic su OK. In CRXDE Lite, fate clic su Salva tutto.

    La struttura ora si presenta come segue:

    chlimage_1-108

Sviluppo dello script del componente della pagina di contenuto

Aggiungete il codice allo script contentpage.jsp per definire il contenuto della pagina.

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

    <%--
    
      My Website Content Page Component component.
    
      This is My Website Content Page Component.
    
    --%><%
    %><%@include file="/libs/foundation/global.jsp?lang=it"%><%
    %><%@page session="false" %><%
    %><%
        /* TODO add you code here */
    %>
    
  2. Copiate il codice seguente e incollatelo 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>
    
  3. Fate clic su Salva tutto per salvare le modifiche.

Creazione di una pagina Web e di pagine di contenuto

In questa sezione vengono create le seguenti pagine che utilizzano tutte il modello di pagina di contenuto: Il mio sito Web, inglese, prodotti, servizi e clienti.

  1. Nella AEM pagina di benvenuto (http://localhost:4502/libs/cq/core/content/welcome.html), fate clic su Siti Web.

    chlimage_1-109

  2. Nella struttura delle cartelle, selezionate la cartella Siti Web e fate clic su Nuovo > Nuova pagina.

  3. Nella finestra Crea pagina , immettete quanto segue:

    • Titolo: My Website
    • Nome: mywebsite
    • Selezionate il modello di pagina del contenuto del sito Web

    chlimage_1-110

  4. Fai clic su Crea. Nella struttura delle cartelle, selezionate la /Websites/My Website pagina e fate clic su Nuovo > Nuova pagina.

  5. Nella finestra di dialogo Crea pagina , immettete i seguenti valori di proprietà e fate clic su Crea:

    • Titolo: Inglese
    • Nome: en
    • Selezionate il modello di pagina del contenuto del sito Web
  6. Nella struttura delle cartelle, selezionate la /Websites/My Website/English pagina e fate clic su Nuovo > Nuova pagina.

  7. Nella finestra di dialogo Crea pagina , immettete i seguenti valori di proprietà e fate clic su Crea:

    • Titolo: Prodotti
    • Selezionate il modello di pagina del contenuto del sito Web
  8. Nella struttura delle cartelle, selezionate la /Websites/My Website/English pagina e fate clic su Nuovo > Nuova pagina.

  9. Nella finestra di dialogo Crea pagina , immettete i seguenti valori di proprietà e fate clic su Crea:

    • Titolo: Servizi
    • Selezionate il modello di pagina del contenuto del sito Web
  10. Nella struttura delle cartelle, selezionate la /Websites/My Website/English pagina e fate clic su Nuovo > Nuova pagina.

  11. Nella finestra di dialogo Crea pagina , immettete i seguenti valori di proprietà e fate clic su Crea:

    • Titolo: Clienti
    • Selezionate il modello di pagina del contenuto del sito Web

    La struttura si presenta come segue:

    chlimage_1-111

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

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

    chlimage_1-112

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

    chlimage_1-113

Ottimizzazione dello script di ContentPage

Questa sezione descrive come migliorare lo script della pagina di contenuto utilizzando gli script dei componenti AEM foundation e scrivendo script personalizzati.

La pagina Prodotti sarà la seguente:

chlimage_1-4

Utilizzo degli script di pagina Foundation

In questo esercizio, è possibile configurare il componente contenuto pagina in modo che il relativo tipo di superficie sia il componente Pagina AEM. Poiché i componenti ereditano le funzionalità del relativo tipo di superpagina, il contenuto della pagina eredita gli script e le proprietà del componente Pagina.

Ad esempio, nel codice JSP del componente, è possibile fare riferimento agli script forniti dal componente supertipo come se fossero inclusi nel componente.

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

    1. Select the /apps/mywebsite/components/contentpage node.

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

      • Nome: sling:resourceSuperType
      • Tipo: Stringa
      • Valore: foundation/components/page
    3. Fate clic su Salva tutto.

  2. Aprite il contentpage.jsp file in /apps/mywebsite/components/contentpage e sostituite il codice esistente con il seguente codice:

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

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

    chlimage_1-5

    Aprite l'origine della pagina per visualizzare gli elementi javascript e HTML generati dagli script head.jsp e body.jsp. Lo snippet di script seguente apre la barra laterale quando si apre la pagina:

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

Utilizzo di script personalizzati

In questa sezione vengono creati diversi script che generano ciascuno una parte del corpo della pagina. Quindi create il file body.jsp nel componente PageContent per ignorare il file body.jsp del componente Pagina AEM. Nel file body.jsp è possibile includere gli script che generano le diverse parti del corpo della pagina.

Suggerimento: Quando un componente include un file con lo stesso nome e posizione relativa di un file nel supertipo del componente, viene chiamato sovrapposizione.

  1. In CRXDE Lite, create 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 digitare left.jsp Name e fare clic su OK.
  2. Modificate il file left.jsp per rimuovere il contenuto esistente e sostituirlo con il seguente codice:

    <%@include file="/libs/foundation/global.jsp?lang=it"%><%
    %><div class="left">
    <div>logo</div>
    <div>newslist</div>
    <div>search</div>
    </div>
    
  3. Salva le modifiche.

  4. In CRXDE Lite, create 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, digitate center.jsp come Nome e fate clic su OK.
  5. Modificate il file center.jsp per rimuovere il contenuto esistente e sostituirlo con il seguente codice:

    <%@include file="/libs/foundation/global.jsp?lang=it"%><%
    %><div class="center">
    <div>trail</div>
    <div>title</div>
    <div>parsys</div>
    </div>
    
  6. Salva le modifiche.

  7. In CRXDE Lite, create 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, digitare right.jsp come Nome e fare clic su OK.
  8. Modificate il file right.jsp per rimuovere il contenuto esistente e sostituirlo con il seguente codice:

    <%@include file="/libs/foundation/global.jsp?lang=it"%><%
    %><div class="right">
    <div>iparsys</div>
    </div>
    
  9. Salva le modifiche.

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

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

    <%@include file="/libs/foundation/global.jsp?lang=it"%><%
    %><body>
    <div id="CQ">
    <div class="topnav">topnav</div>
    <div class="content">
    <cq:include script="left.jsp" />
    <cq:include script="center.jsp" />
    <cq:include script="right.jsp" />
    </div>
    <div class="footer">
    <div class="toolbar">toolbar</div>
    </div>
    </div>
    </body>
    
  12. Salva le modifiche.

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

    chlimage_1-6

Creazione del componente di navigazione superiore

In questa sezione, potete creare un componente per visualizzare i collegamenti a tutte le pagine di livello principale del sito Web per semplificare la navigazione. Il contenuto di questo componente viene visualizzato nella parte superiore di tutte le pagine create utilizzando il modello di pagina del contenuto.

Nella prima versione del componente di navigazione superiore (navigazione superiore), gli elementi di navigazione sono solo collegamenti di testo. Nella seconda versione implementate la navigazione topnav con i collegamenti di navigazione delle immagini.

La navigazione superiore avrà il seguente aspetto:

chlimage_1-114

Creazione del componente di navigazione superiore

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

  2. Nella finestra Crea componente , immettere quanto segue:

    • Etichetta: topnav
    • Titolo: My Top Navigation Component
    • Descrizione: This is My Top Navigation Component
  3. Fare clic su Avanti fino all'ultima finestra in cui si fa clic su OK. Salvare le modifiche.

Aggiungete lo script di rendering alla navigazione superiore per generare collegamenti di testo alle pagine figlie:

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

  2. Sostituite il codice presente copiando e incollando il seguente codice:

    <%@include file="/libs/foundation/global.jsp?lang=it"%><% 
    %><%@ 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><% 
            } 
        } 
    %> 
    

Inclusione della navigazione in alto nel componente Pagina contenuto

Per includere la navigazione superiore nel componente della pagina di contenuto:

  1. In CRXDE Lite, aprire la body.jsp sezione /apps/mywebsite/components/contentpagee sostituire:

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

    con:

    <cq:include path="topnav" resourceType="mywebsite/components/topnav" />
    
  2. Salva le modifiche.

  3. Nel browser, ricaricate la pagina Prodotti . La navigazione superiore viene visualizzata come segue:

    chlimage_1-115

Miglioramento delle pagine con i sottotitoli

Il componente Pagina definisce le proprietà che consentono di fornire sottotitoli per le pagine. Aggiungete sottotitoli che forniscono informazioni sul contenuto della pagina.

  1. Nel browser, aprite la pagina Prodotti .

  2. Nella scheda Pagina barra laterale, fare clic su Proprietà ​pagina.

  3. Nella scheda Base della finestra di dialogo, espandete Altri titoli e Descrizione e, per la proprietà Sottotitolo , digitate what we do. Fai clic su OK.

  4. Ripetere i passaggi precedenti per aggiungere il sottotitolo sui nostri servizi alla pagina Servizi .

  5. Ripetete i passaggi precedenti per aggiungere il sottotitolo del trust guadagnato alla pagina Clienti .

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

Migliorate lo script di rendering del componente nav principale per utilizzare i collegamenti immagine invece del testo ipertestuale per i controlli di navigazione. L’immagine include il titolo e il sottotitolo della destinazione del collegamento.

Questo esercizio illustra l'elaborazione della richiesta Sling. Lo script topnav.jsp viene modificato per richiamare uno script che genera dinamicamente immagini da utilizzare per i collegamenti di navigazione della pagina. In questo esercizio Sling analizza l’URL dei file sorgente delle immagini per determinare lo script da utilizzare per il rendering delle immagini.

Ad esempio, l’origine del collegamento immagine alla pagina Prodotti potrebbe essere http://localhost:4502/content/mywebsite/en/products.navimage.png. Sling analizza questo URL per determinare il tipo di risorsa e lo script da utilizzare per il rendering della risorsa:

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

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

  3. Sling determina il sling:resourceType nodo da mywebsite/components/contentpageassegnare.

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

In questo esercizio, Sling corrisponde a questi URL per lo script /apps/mywebsite/components/contentpage/navimage.png.java creato dall'utente.

  1. In CRXDE Lite, aprite la topnav.jsp sezione /apps/mywebsite/components/topnav.Individua il contenuto dell’elemento di ancoraggio (riga 14):

    <%=child.getTitle() %>
    
  2. Sostituite il contenuto dell’ancoraggio con il seguente codice:

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

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

  5. Nella finestra Crea file , digitare Nomenavimage.png.java.

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

  6. Copiate il codice seguente nel navimage.png.java.codice che 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. Il titolo e il sottotitolo della pagina vengono quindi ottenuti.
    • ImageHelper consente di generare l’immagine dal file navimage_bg.jpg della struttura 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;
         }
     }
    
  7. Salva le modifiche.

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

    screen_shot_2012-03-07at10047pm

Creazione del componente Elenco figli

Creare il componente Elenco figlie che genera un elenco di collegamenti di pagina che include il titolo, la descrizione e la data delle pagine (ad esempio, pagine di prodotto). I collegamenti sono destinati alle pagine figlie della pagina corrente o di una pagina principale specificata nella finestra di dialogo del componente.

chlimage_1-116

Creazione di pagine di prodotto

Create due pagine sotto la pagina Prodotti . Per ogni pagina, che descrive due prodotti specifici, potete impostare un titolo, una descrizione e una data.

  1. Nella struttura delle cartelle della pagina Siti Web, selezionate l’elemento Siti Web/Sito Web personale/Inglese/Prodotti e fate clic su Nuovo > Nuova pagina.

  2. Nella finestra di dialogo immettete i seguenti valori di proprietà e fate clic su Crea:

    • Titolo: Prodotto 1.
    • Nome: product1.
    • Seleziona modello pagina contenuto sito Web personale
  3. Create un'altra pagina sotto Products utilizzando i seguenti valori delle proprietà:

    • Titolo: Prodotto 2
    • Nome: product2
    • Seleziona modello pagina contenuto sito Web personale
  4. In CRXDE Lite, imposta una descrizione e una data per la pagina Prodotto 1:

    1. Select the /content/mywebsite/en/products/product1/jcr:content node.

    2. Nella scheda Proprietà , immettete i seguenti valori:

      • Nome: jcr:description
      • Tipo: String
      • Valore: This is a description of the Product 1!.
    3. Fate clic su Aggiungi.

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

      • Nome: date
      • Tipo: Stringa
      • Valore: 14/02/2008
      • Fate clic su Aggiungi.
    5. Fate clic su Salva tutto.

  5. In CRXDE Lite, imposta una descrizione e una data per la pagina Prodotto 2:

    1. Select the /content/mywebsite/en/products/product2/jcr:content node.

    2. Nella scheda Proprietà , immettete i seguenti valori:

      • Nome: jcr:description
      • Tipo: Stringa
      • Valore: Questa è una descrizione del Prodotto 2!.
    3. Fate clic su Aggiungi.

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

      • Nome: date
      • Tipo: Stringa
      • Valore: 11/05/2012
      • Fate clic su Aggiungi.
    5. Fate clic su Salva tutto.

Creazione del componente Elenco figli

Per creare il componente ListChildren:

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

  2. Nella finestra di dialogo immettete i seguenti valori delle proprietà e fate clic su Avanti:

    • Etichetta: ascolta i bambini.
    • Titolo: Componente Listchild
    • Descrizione: Questo è il componente ListChildren
  3. Continuate a fare clic su Avanti fino a visualizzare il pannello Elementi figlio consentiti, quindi fate clic su OK.

Creazione dello script List Children

Sviluppare lo script per il componente listchild.

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

  2. Sostituite il codice predefinito con il seguente codice:

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

Creazione della finestra di dialogo Elenca elementi figlio

Creare la finestra di dialogo utilizzata per configurare le proprietà del componente ListChildren.

  1. Create il nodo di dialogo sotto il componente listchild:

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

    2. Nella finestra di dialogo, immettete i seguenti valori di proprietà e fate clic su OK

      • Etichetta: dialog
      • Titolo: Edit Component quindi fate clic su OK.

    screen_shot_2012-03-07at45818pm

    Con le seguenti proprietà:

    screen_shot_2012-03-07at50415pm

  2. Select the /apps/mywebsite/components/listchildren/dialog/items/items/tab1 node.

  3. Nella scheda Proprietà , modificare il valore della proprietà title in List Children

    chlimage_1-117

  4. Selezionare il nodo tab1 e fare clic su Crea > Crea nodo, immettere i seguenti valori di proprietà, quindi fare clic su OK:

    • Nome: items
    • Tipo: cq:WidgetCollection

    screen_shot_2012-03-07at51018pm

  5. Create un nodo sotto il nodo items utilizzando i seguenti valori di proprietà:

    • Nome: listroot
    • Tipo: cq:Widget

    screen_shot_2012-03-07at51031pm

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

    Nome Tipo Valore
    fieldLabel Stringa Percorso della directory principale elenco
    name Stringa ./listroot
    xtype Stringa textfield

    screen_shot_2012-03-07at51433pm

Inclusione di List Children nel componente ContentPage

Per includere il componente listchild nel componente per la pagina di contenuto, procedete come segue:

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

    <div>newslist</div>
    
  2. Sostituire il codice con il codice seguente:

    <cq:include path="newslist" resourceType="mywebsite/components/listchildren" />
    
  3. Salva le modifiche.

Visualizzazione degli elementi secondari di un elenco in una pagina

Per visualizzare il funzionamento completo di questo componente è possibile visualizzare la pagina Prodotti:

  • quando la pagina padre ("Percorso della directory principale dell'elenco") non è definita.
  • quando è definita la pagina padre ("Percorso della directory principale dell'elenco").
  1. Nel browser, ricaricate la pagina Prodotti . Il componente ListChildren viene visualizzato come segue:

    chlimage_1-118

  2. chlimage_1-119

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

    chlimage_1-120

Creazione del componente Logo

Create un componente che visualizzi il logo della società e fornisca un collegamento alla pagina principale del sito. Il componente contiene una finestra di dialogo in modalità di progettazione che consente di memorizzare i valori delle proprietà nella struttura del sito (ad esempio, nelle progettazioni o in un sito Web):

  • I valori delle proprietà si applicano a tutte le istanze del componente che vengono aggiunte alle pagine che utilizzano la progettazione.
  • Le proprietà possono essere configurate utilizzando qualsiasi istanza del componente presente in una pagina che utilizza la progettazione.

La finestra di dialogo in modalità progettazione contiene le proprietà per impostare l’immagine e il percorso del collegamento. Il componente logo viene posizionato in alto a sinistra su tutte le pagine del sito Web.

Si presenterà come segue:

chlimage_1-121

Nota

Adobe Experience Manager offre un componente logo più completo ( /libs/foundation/components/logo).

Creazione del nodo componente logo

Per creare il componente logo, effettuate le seguenti operazioni:

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

  2. Nella finestra di dialogo Crea componente, immettete i seguenti valori di proprietà e fate clic su Avanti:

    • Etichetta: logo.
    • Titolo: My Logo Component.
    • Descrizione: This is My Logo Component.
  3. Fate clic su Avanti fino al pannello finale della finestra di dialogo, quindi fate clic su OK.

Creazione dello script del logo

Questa sezione descrive come creare lo script per visualizzare l'immagine del logo con un collegamento alla pagina principale.

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

  2. Il codice seguente crea il collegamento alla home page del sito e aggiunge un riferimento all’immagine del logo. Copiate il codice in logo.jsp:

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

Creazione della finestra di dialogo Progettazione logo

Create la finestra di dialogo per configurare il componente logo in modalità Progettazione. È necessario assegnare un nome ai nodi della finestra di dialogo in modalità Progettazione design_dialog.

  1. Create il nodo di dialogo sotto il componente logo:

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

    2. Digitate i seguenti valori di proprietà e fate clic su OK:

      • Etichetta design_dialog
      • Titolo Logo (Design)
  2. Fare clic con il pulsante destro del mouse sul nodo tab1 nel ramo design_dialog e scegliere Elimina. Fate clic su Salva tutto.

  3. Sotto il design_dialog/items/itemsnodo, creare un nuovo nodo denominato img di tipo cq:Widget. Aggiungete le seguenti proprietà e fate clic su Salva tutto:

    Nome Tipo Valore
    fileNameParameter Stringa ./imageName
    fileReferenceParameter Stringa ./imageReference
    name Stringa ./immagine
    titolo Stringa Immagine
    xtype Stringa html5smartimage

    chlimage_1-122

Creazione dello script di rendering del logo

Create lo script che recupera l'immagine logo e la scrive nella pagina.

  1. Fate clic con il pulsante destro del mouse sul nodo del componente logo e fate clic su Crea > Crea file per creare il file di script denominato img.GET.java.
  2. Aprite il file, copiate il seguente codice nel file, quindi fate clic su Salva tutto:
package apps.mywebsite.components.logo;

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

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

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

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

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

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

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

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

        resp.flushBuffer();
    }
}

Aggiunta del componente Logo al componente Pagina contenuto

  1. In CRXDE Lite, aprire la left.jsp sezione /apps/mywebsite/components/contentpage file e individuare la seguente riga di codice:

    <div>logo</div>
    
  2. Sostituire il codice con la seguente riga di codice:

    <cq:include path="logo" resourceType="mywebsite/components/logo" />
    
  3. Salva le modifiche.

  4. Nel browser, ricaricate la pagina Prodotti . Il logo ha il seguente aspetto, ma al momento mostra solo il collegamento sottostante:

    chlimage_1-123

Impostazione dell’immagine del logo in una pagina

Questa sezione descrive come impostare un’immagine come logo utilizzando la finestra di dialogo della modalità di progettazione.

  1. Con la pagina Prodotti aperta nel browser, fate clic sul pulsante Progettazione nella parte inferiore della barra laterale per passare alla modalità Progettazione .

  2. Nella barra Progettazione del logo, fate clic su Modifica per usare la finestra di dialogo per modificare le impostazioni per il componente logo.

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

    chlimage_1-124

  4. Fate clic sul triangolo nella barra del titolo della barra laterale per tornare alla modalità di modifica .

    chlimage_1-7

  5. In CRXDE Lite, andare al nodo seguente per vedere i valori delle proprietà memorizzate:

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

Inclusione del componente Breadcrumb

In questa sezione viene incluso il componente breadcrumb (trail), che è uno dei componenti di base.

  1. In CRXDE Lite, individuate /apps/mywebsite/components/contentpage, aprite il file center.jsp e sostituite:

    <div>trail</div>
    

    con:

    <cq:include path="trail" resourceType="foundation/components/breadcrumb" />
    
  2. Salva le modifiche.

  3. Nel browser, ricaricate la pagina Products 1 . Il componente trail si presenta come segue:

    chlimage_1-125

Inclusione del componente Titolo

In questa sezione viene incluso il componente titolo, uno dei componenti di base.

  1. In CRXDE Lite, individuate /apps/mywebsite/components/contentpage, aprite il file center.jsp e sostituite:

    <div>title</div>
    

    con:

    <cq:include path="title" resourceType="foundation/components/title" />
    
  2. Salva le modifiche.

  3. Nel browser, ricaricate la pagina Prodotti . Il componente Titolo si presenta come segue:

    chlimage_1-126

Nota

Potete impostare un diverso Titolo e Tipo/Dimensione in modalità Modifica .

Inclusione del componente del sistema paragrafo

Il sistema paragrafo (parsys) è una parte significativa di un sito Web in quanto gestisce un elenco di paragrafi. Consente agli autori di aggiungere componenti paragrafo alla pagina e fornisce la struttura.

Aggiungete il componente parsys (uno dei componenti di base) al componente della pagina di contenuto.

  1. In CRXDE Lite, individuate /apps/mywebsite/components/contentpage, aprite il file center.jsp e individuate la seguente riga di codice:

    <div>parsys</div>
    
  2. Sostituite la riga di codice con il codice seguente, quindi salvate le modifiche:

    <cq:include path="par" resourceType="foundation/components/parsys" />
    
  3. Nel browser, aggiorna la pagina Prodotti . Ora ha il componente parsys, che è visto come segue:

    chlimage_1-127

Creazione del componente Immagine

Create un componente per visualizzare un’immagine nel sistema di paragrafi. Per risparmiare tempo, il componente immagine viene creato come copia del componente logo con alcune modifiche alle proprietà.

Nota

Adobe Experience Manager offre un componente immagine più completo ( /libs/foundation/components/image).

Creazione del componente Immagine

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

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

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

  4. Selezionate il nodo del image componente e modificate i seguenti valori delle proprietà:

    • jcr:title: Componente immagine personale.
    • jcr:description: Questo è il componente Immagine personale.
  5. Aggiungere una proprietà al image nodo con i seguenti valori di proprietà:

    • Nome: componentGroup
    • Tipo: Stringa
    • Valore: MyWebsite
  6. Sotto il image nodo, rinominare il design_dialog nodo in dialog.

  7. Rename logo.jsp to image.jsp.

  8. Aprite img.GET.java e modificate il pacchetto in apps.mywebsite.components.image.

chlimage_1-128

Creazione dello script immagine

Questa sezione descrive come creare lo script immagine.

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

  2. Sostituite il codice esistente con il seguente codice, quindi salvate le modifiche:

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

Creazione del nodo cq:editConfig dell’immagine

Il tipo di cq:editConfig nodo consente di configurare alcuni comportamenti dei componenti durante la modifica delle relative proprietà.

In questa sezione, utilizzate un nodo cq:editConfig per consentire di trascinare le risorse da Content Finder nel componente immagine.

  1. In CRXDE Lite, sotto il nodo /apps/mywebsite/components/image, create un nuovo nodo come segue:

    • Nome: cq:editConfig.
    • Tipo: cq:EditConfig.
  2. Sotto il nodo cq:editConfig, crea un nuovo nodo come segue:

    • Nome: cq:dropTargets.
    • Tipo: cq:DropTargetConfig.
  3. Sotto il nodo cq:dropTargets, create un nuovo nodo come segue:

    • Nome: immagine.
    • Tipo: nt:unstructure.
  4. In CRXDE impostare le proprietà come segue:

Nome Tipo Valore
accetto Stringa image/(gif
groups Stringa media
propertyName Stringa ./imageReference

chlimage_1-129

Aggiunta dell'icona

In questa sezione, l’icona viene aggiunta per essere visualizzata accanto al componente immagine quando è elencato nella barra laterale:

  1. In CRXDE Lite, fare clic con il pulsante destro del mouse sul file /libs/foundation/components/image/icon.png e selezionare Copia.
  2. Fare clic con il pulsante destro del mouse sul nodo /apps/mywebsite/components/image e scegliere Incolla, quindi fare clic su Salva tutto.

Utilizzo del componente Immagine

In questa sezione verrà visualizzata la pagina Prodotti e verrà aggiunto il componente immagine al sistema di paragrafi.

  1. Nel browser, ricaricate la pagina Prodotti .

  2. Nella barra laterale, fate clic sull’icona della modalità ​Progettazione.

  3. Fate clic sul pulsante Modifica per modificare la finestra di dialogo di progettazione di par.

  4. Nella finestra di dialogo viene visualizzato un elenco dei componenti consentiti ; passare a MyWebsite, selezionare il componente Immagine personale e fare clic su OK.

  5. Tornate alla modalità di modifica.

  6. Fate doppio clic sulla cornice parsys ( Trascinate qui i componenti o le risorse). I selettori Inserisci nuovo componente e Barra laterale si presentano come segue:

    chlimage_1-8

Inclusione del componente Barra degli strumenti

In questa sezione viene incluso il componente della barra degli strumenti, che è uno dei componenti di base.

Sono disponibili diverse opzioni, sia in modalità di modifica che in modalità di progettazione.

  1. In CRXDE Lite , andate a /apps/mywebsite/components/contentpage, aprite il body.jsp file e individuate il seguente codice:

    <div class="toolbar">toolbar</div>
    
  2. Sostituire il codice con il codice seguente, quindi salvare le modifiche.

    <cq:include path="toolbar" resourceType="foundation/components/toolbar"/>
    
  3. Nella struttura delle cartelle della pagina AEM Siti Web, selezionate Websites/My Website/English, quindi fate clic su Nuovo > Nuova pagina. Specificate i seguenti valori di proprietà e fate clic su Crea:

    • Titolo: Barra degli strumenti
    • Seleziona modello pagina contenuto sito Web personale
  4. Nell’elenco delle pagine, fare clic con il pulsante destro del mouse sulla pagina 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 la navigazione superiore e gli elenchi secondari.

  5. In Barra degli strumenti, creare le pagine seguenti:

    • Contatti
    • Commenti
    • Accesso
    • Ricerca
  6. Nel browser, ricaricate la pagina Prodotti . Si presenta come segue:

    chlimage_1-130

Creazione del componente Ricerca

In questa sezione, potete creare il componente per cercare contenuti nel sito Web. Questo componente di ricerca può essere inserito nel sistema paragrafo di qualsiasi pagina (ad esempio, in una pagina di risultati di ricerca specializzata).

Nella pagina inglese la casella di immissione della ricerca sarà visualizzata come segue:

chlimage_1-131

Creazione del componente Ricerca

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

  2. Utilizzare la finestra di dialogo per configurare il componente:

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

      • Etichetta: search
      • Titolo: My Search Component
      • Descrizione: Questo è il componente Ricerca personale
      • Gruppo: MyWebsite
    2. Fate clic su Avanti, quindi fate di nuovo clic su Avanti .

    3. Nel pannello Genitori consentiti, fate clic sul pulsante + e digitate */parsys.

    4. Click Next and then click OK.

  3. Fate clic su Salva tutto.

  4. Copiate i nodi seguenti e incollateli nel apps/mywebsite/components/search nodo:

    • /libs/foundation/components/search/dialog
    • `` /libs/foundation/components/search/i18n
    • /libs/foundation/components/search/icon.png
  5. Fate clic su Salva tutto.

Creazione dello script di ricerca

Questa sezione descrive come creare lo script di ricerca:

  1. Open the /apps/mywebsite/components/search/search.jsp file.

  2. Copiate 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?lang=it" %><%
    %><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}"/%3E%3C%%20%20%20%%3E%3Ccenter%3E%20%20%20%20%20%3Cform%20action=?lang=it"${currentPage.path}.html">
        <input size="41" maxlength="2048" name="q" value="${fn:escapeXml(search.query)}"/%3E%20%20%20%20%20%20%20%3Cinput%20value=?lang=it"<fmt:message key="searchButtonText"/%3E?lang=it" type="submit" />
      </form>
    </center>
    <br/>
    <c:set var="result" value="${search.result}"/%3E%20%20%20%3Cc:choose%3E%20%20%20%20%20%3Cc:when%20test=?lang=it"${empty result && empty search.query}">
      </c:when>
      <c:when test="${empty result.hits}">
        <c:if test="${result.spellcheck != null}">
          <p><fmt:message key="spellcheckText"/%3E%20%3Ca%20href=?lang=it"<c:url value="${currentPage.path}.html"><c:param name="q" value="${result.spellcheck}"/%3E%3C/c:url%3E?lang=it"><b><c:out value="${result.spellcheck}"/%3E%3C/b%3E%3C/a%3E%3C/p%3E%20%20%20%20%20%20%20%3C/c:if%3E%20%20%20%20%20%20%20%3Cfmt:message%20key=?lang=it"noResultsText">
          <fmt:param value="${fn:escapeXml(search.query)}"/%3E%20%20%20%20%20%20%20%3C/fmt:message%3E%20%20%20%20%20%3C/c:when%3E%20%20%20%20%20%3Cc:otherwise%3E%20%20%20%20%20%20%20%3Cp%20class=?lang=it"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"/%3E%3C/c:catch%3E%3C/c:if%3E%20-%20%3Ca%20href=?lang=it"${hit.similarURL}"><fmt:message key="similarPagesText"/%3E%3C/a%3E%20%20%20%20%20%20%20%20%20%20%20%3C/div%3E%3C/div%3E%20%20%20%20%20%20%20%20%20%3C/c:forEach%3E%20%20%20%20%20%20%20%3C/div%3E%20%20%20%20%20%20%20%20%20%3Cbr/%3E%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class=?lang=it"searchRight">
              <c:if test="${fn:length(trends.queries) > 0}">
                  <p><fmt:message key="searchTrendsText"/%3E%3C/p%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class=?lang=it"searchTrends">
                      <c:forEach var="query" items="${trends.queries}">
                          <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${query.query}"/%3E%3C/c:url%3E?lang=it"><span style="font-size:${query.size}px"><c:out value="${query.query}"/%3E%3C/span%3E%3C/a%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/c:forEach%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/div%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%3C/c:if%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:if%20test=?lang=it"${result.facets.languages.containsHit}">
                  <p>Languages</p>
                  <c:forEach var="bucket" items="${result.facets.languages.buckets}">
                      <c:set var="bucketValue" value="${bucket.value}"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:set%20var=?lang=it"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"/%3E%3C/cq:requestURL%3E?lang=it">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="language" value="${bucket.value}"/%3E%3C/cq:requestURL%3E?lang=it">${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}"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:set%20var=?lang=it"tag" value="<%= tm.resolve((String) pageContext.getAttribute("bucketValue")) %>"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:if%20test=?lang=it"${tag != null}">
                          <c:set var="label" value="${tag.title}"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:choose%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:when%20test=?lang=it"<%= 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}"/%3E%3C/cq:requestURL%3E?lang=it">remove filter</a></c:when>
                              <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="tag" value="${bucket.value}"/%3E%3C/cq:requestURL%3E?lang=it">${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"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3EFile%20types%3C/p%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:forEach%20var=?lang=it"bucket" items="${result.facets.mimeTypes.buckets}">
                      <c:set var="bucketValue" value="${bucket.value}"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:set%20var=?lang=it"label" value="${fileTypes[bucket.value]}"/%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:choose%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:when%20test=?lang=it"<%= 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}"/%3E%3C/cq:requestURL%3E?lang=it">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="mimeType" value="${bucket.value}"/%3E%3C/cq:requestURL%3E?lang=it">${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"/%3E%3Ccq:removeParam%20name=?lang=it"to"/%3E%3C/cq:requestURL%3E?lang=it">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:removeParam name="from"/%3E%3Ccq:removeParam%20name=?lang=it"to"/%3E%3Cc:if%20test=?lang=it"${bucket.from != null}"><cq:addParam name="from" value="${bucket.from}"/%3E%3C/c:if%3E%3Cc:if%20test=?lang=it"${bucket.to != null}"><cq:addParam name="to" value="${bucket.to}"/%3E%3C/c:if%3E%3C/cq:requestURL%3E?lang=it">${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"/%3E%20%20%20%20%20%20%20%20%20%20%20%3Cc:forEach%20var=?lang=it"rq" items="${search.relatedQueries}">
                <a href="${currentPage.path}.html?q=${rq}"><c:out value="${rq}"/%3E%3C/a%3E%20%20%20%20%20%20%20%20%20%20%20%3C/c:forEach%3E%3C/div%3E%20%20%20%20%20%20%20%20%20%3C/c:if%3E%20%20%20%20%20%20%20%20%20%3C/div%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cc:if%20test=?lang=it"${fn:length(result.resultPages) > 1}">
            <div class="pagination"> 
                <fmt:message key="resultPagesText"/%3E%20%20%20%20%20%20%20%20%20%20%20%3Cc:if%20test=?lang=it"${result.previousPage != null}">
              <a href="${result.previousPage.URL}"><fmt:message key="previousText"/%3E%3C/a%3E%20%20%20%20%20%20%20%20%20%20%20%3C/c:if%3E%20%20%20%20%20%20%20%20%20%20%20%3Cc:forEach%20var=?lang=it"page" items="${result.resultPages}">
              <c:choose>
                <c:when test="${page.currentPage}">${page.index + 1}</c:when>
                <c:otherwise>
                  <a href="${page.URL}">${page.index + 1}</a>
                </c:otherwise>
              </c:choose>
            </c:forEach>
            <c:if test="${result.nextPage != null}">
              <a href="${result.nextPage.URL}"><fmt:message key="nextText"/></a>
            </c:if>
            </div>
          </c:if>
          </div>
    
      </c:otherwise>
    </c:choose>
    
  3. Salva le modifiche.

Inclusione di una casella di ricerca nel componente Pagina contenuto

Per includere una casella di input per la ricerca nella sezione sinistra della pagina di contenuto, procedere come segue:

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

    %><div class="left">
    
  2. Inserire il codice seguente prima di tale riga:

    %><%@ page import="com.day.text.Text"%><%
    %><% String docroot = currentDesign.getPath(); 
    String home = Text.getAbsoluteParent(currentPage.getPath(), 2);%><%
    
  3. Individuate la seguente riga di codice:

    <div>search</div>
    
  4. 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>
    
  5. Nel browser, ricaricate la pagina Prodotti . Il componente di ricerca si presenta come segue:

    chlimage_1-132

Inclusione del componente Ricerca nella pagina di ricerca

In questa sezione viene aggiunto il componente di ricerca al sistema di paragrafi.

  1. Nel browser, aprite la pagina di ricerca .

  2. Nella barra laterale fate clic sull’icona della modalità Progettazione .

  3. Nella struttura del blocco par (sotto il titolo Cerca), fare clic su Modifica.

  4. Nella finestra di dialogo, scorrete verso il basso fino al gruppo Siti Web personali, selezionate il componente di ricerca personale e fate clic su OK.

  5. Nella barra laterale, fate clic sul triangolo per tornare alla modalità Modifica .

  6. Trascinate il componente Ricerca ​personale dalla barra laterale alla cornice parsys. Si presenta come segue:

    chlimage_1-133

  7. Passate alla pagina Prodotti . Cercare i clienti nella casella di input e premere Invio. Viene nuovamente visualizzata la pagina Ricerca . Passate alla modalità Anteprima : l'output è in un formato simile al seguente:

    chlimage_1-134

Inclusione del componente Iparsys

In questa sezione viene incluso il componente Iparsys (Inheritance Paragraph System), uno dei componenti di base. Questo componente consente di creare una struttura di paragrafi su una pagina padre e fare in modo che le pagine figlie ereditino i paragrafi.

Per questo componente potete impostare diversi parametri sia in modalità di modifica che in modalità di progettazione.

  1. In CRXDE Lite , andate a /apps/mywebsite/components/contentpage, aprite il file right.jsp e sostituite:

    <div>iparsys</div>
    

    con:

    <cq:include path="rightpar" resourceType="foundation/components/iparsys" />
    
  2. Salva le modifiche.

  3. Nel browser, ricaricate la pagina Prodotti . L’intera pagina si presenta come segue:

    chlimage_1-9

In questa pagina