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

Installare AEM.

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

Imposta la struttura del progetto in CRXDE Liti.

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 Liti, fare clic con il pulsante destro del mouse su /apps cartella e fai clic su Crea > Crea Cartella. In Crea cartella finestra di dialogo, digita mywebsite come nome della cartella e fai clic su OK.

Fare clic con il pulsante destro del mouse /apps/mywebsite cartella e fai clic su Crea > Crea cartella. In Crea cartella finestra di dialogo, digita components come nome della cartella e fai clic su OK.

Fare clic con il pulsante destro del mouse /apps/mywebsite cartella e fai clic su Crea > Crea cartella. In Crea cartella finestra di dialogo, digita templates come nome della cartella e fai clic su OK.

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

Clic Salva tutto.

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

Nella struttura ad albero delle cartelle, seleziona Progettazioni cartella e quindi fare clic su Nuovo > Nuova pagina. Tipo mywebsite come titolo e fai clic su Crea.

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

Utilizzo di WebDAV accedere all’URL all’indirizzo https://localhost:4502, copia l’esempio static.css file e images cartella dal file mywebsite.zip scaricato in /etc/designs/mywebsite cartella.

Nella struttura ad albero delle cartelle di CRXDE Liti, fai clic con il pulsante destro del mouse su /apps/mywebsite/templates e fai clic su Crea > Crea modello.

Nella finestra di dialogo Crea modello, digita i seguenti valori e fai clic su Successivo:

• Etichetta: contentpage
• Titolo: Modello per pagina di contenuto del mio sito web
• Descrizione: questo è il modello per la pagina di contenuto del mio sito web
• Tipo risorsa: mywebsite/components/contentpage

Utilizzare il valore predefinito per la proprietà Ranking.

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

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

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

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

Clic Successivo nel Elementi padre consentiti e Elementi figlio consentiti e fai clic su OK. In CRXDE Liti, fai clic su Salva tutto.

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

In Crea componente , digitare i seguenti valori di proprietà:

• Etichetta: contentpage
• Titolo: Componente Pagina di contenuto del sito Web
• Descrizione: questo è il componente Pagina di contenuto del mio sito web

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

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

Clic Successivo finché non viene visualizzato il pannello Figli consentiti della finestra di dialogo, quindi fate clic su OK. In CRXDE Liti, fai clic su Salva tutto.

La struttura si presenta ora come segue:

In CRXDE Liti, apri 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>

Clic Salva tutto per salvare le modifiche.

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

Nella struttura ad albero delle cartelle, seleziona Siti Web cartella e quindi fare clic su Nuovo > Nuova pagina.

In Crea pagina immettere quanto segue:

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

Fai clic su Crea. Nella struttura ad albero delle cartelle, seleziona /Siti Web/Sito Web personale pagina e fai 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

Nella struttura ad albero delle cartelle, seleziona /Websites/My Website/English pagina e fai clic su Nuovo> Nuova pagina.

In Crea pagina , immettere i valori delle proprietà seguenti e quindi fare clic su Crea:

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

Nella struttura ad albero delle cartelle, seleziona /Websites/My Website/English pagina e fai clic su Nuovo > Nuova pagina.

In Crea pagina , immettere i valori delle proprietà seguenti e quindi fare clic su Crea:

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

Nella struttura ad albero delle cartelle, seleziona /Websites/My Website/English pagina e fai clic su Nuovo > Nuova pagina.

In Crea pagina , immettere i valori delle proprietà seguenti e 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 Liti seleziona la /content/mywebsite/en/jcr:content nodo. 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 Liti, aggiungi una proprietà al file /apps/mywebsite/components/contentpage nodo.

1. Seleziona la /apps/mywebsite/components/contentpage nodo.

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 contentpage.jsp file 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 Liti, crea 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 seleziona Crea ​ quindi Crea file.

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

Modifica 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 Liti, crea il file center.jsp in /apps/mywebsite/components/contentpage:

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

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

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

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

Salva le modifiche.

In CRXDE Liti, crea il file right.jsp in /apps/mywebsite/components/contentpage:

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

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

Modifica 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 Liti, crea il file body.jsp in /apps/mywebsite/components/contentpage:

Modifica 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 Liti, fai clic con il pulsante destro del mouse /apps/mywebsite/components, seleziona Crea, quindi Crea componente.

In Crea componente immettere quanto segue:

• Etichetta: topnav

• Titolo: My Top Navigation Component

• Descrizione: This is My Top Navigation Component

Clic Successivo fino all'ultima finestra in cui si fa clic su OK. Salva le modifiche.

In CRXDE Liti, apri 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 Liti, apri body.jsp in /apps/mywebsite/components/contentpagee sostituire:

<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, apri la Prodotti pagina.

Sul Sidekick Pagina , fare clic su Proprietà pagina.

Nella scheda Base della finestra di dialogo, espandi Altri titoli e descrizioni, e per Sottotitolo proprietà, tipo cosa facciamo. Fai clic su OK.

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

Ripeti i passaggi precedenti per aggiungere il sottotitolo la fiducia che guadagniamo al Clienti pagina.

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

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

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

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

Sling trova lo script in questo componente che corrisponde meglio al selettore URL ( navimage) ed estensione file ( png).

In CRXDE Liti, 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 /apps/mywebsite/components/contentpage e fai clic su Crea > Crea file.

In Crea file finestra, come Nome, tipo 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.

Copia il seguente codice 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 Liti, imposta una descrizione e una data per la pagina Product 1:

1. Seleziona la /content/mywebsite/en/products/product1/jcr:content nodo.

2. In Proprietà , immettere i seguenti valori:

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

3. Clic Aggiungi.

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

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

5. Fai clic su Salva tutto.

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

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

2. In Proprietà , immettere i seguenti valori:

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

3. Clic 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 Liti, fai clic con il pulsante destro del mouse /apps/mywebsite/components, seleziona 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 Liti, apri 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 Liti, fai clic con il pulsante destro del mouse su /apps/mywebsite/components/listchildrene fai clic su 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 fai clic su OK.

Con le seguenti proprietà:

Seleziona la /apps/mywebsite/components/listchildren/dialog/items/items/tab1 nodo.

Nella scheda Proprietà, modifica il valore di titolo proprietà a 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 Liti, apri il file left.jsp in /apps/mywebsite/components/contentpage e individua 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, immetti: /content/mywebsite/en. Fare clic su OK. Il componente Listchildren sulla pagina ora si presenta come segue:

In CRXDE Liti, fai clic con il pulsante destro del mouse su /apps/mywebsite/components, seleziona Crea, quindi Crea componente.

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.

Fai clic su Avanti fino a raggiungere il pannello finale della finestra di dialogo, quindi fai clic su OK.

In CRXDE Liti, apri 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 /apps/mywebsite/components/logo e fai clic su 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.

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

In CRXDE Liti, 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 Liti, passa al seguente nodo per visualizzare i valori delle proprietà memorizzate:

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

In CRXDE Liti, passa a /apps/mywebsite/components/contentpage, apri il file center.jspe sostituisci:

<div>trail</div>

con:

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

Salva le modifiche.

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

In CRXDE Liti, passa a /apps/mywebsite/components/contentpage, apri il file center.jspe sostituisci:

<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 puoi impostare un Titolo diverso e il Tipo/Dimensione.

In CRXDE Liti, passa a /apps/mywebsite/components/contentpage, apri il file center.jspe individua 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 /apps/mywebsite/components/logo e fai clic su Copia.

Fare clic con il pulsante destro del mouse /apps/mywebsite/components e fare clic su Incolla.

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

Seleziona la image e modificare i seguenti valori delle proprietà:

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

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

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

Sotto image , rinomina il design_dialog nodo a dialog.

Rinomina logo.jsp a image.jsp.

Apri img.GET.java e modifica 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 Liti, 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 il Prodotti pagina.

Nel Sidekick, fai clic su modalità progettazione icona.

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

Nella finestra di dialogo, un elenco di Componenti consentiti viene visualizzato; passa a Sito Web personale, seleziona la Componente Immagine personale e fai clic su OK.

Torna a modalità di modifica.

Fare doppio clic sulla cornice parsys (su Trascina qui i componenti o le risorse). Il Inserisci nuovo componente e Sidekick i selettori si presentano come segue:

In CRXDE Liti, passa a /apps/mywebsite/components/contentpage, apri body.jsp e individuare 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 Liti, fai clic con il pulsante destro del mouse /apps/mywebsite/components, seleziona 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 Padri consentiti, fate clic sul pulsante + e digitate */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.

Apri /apps/mywebsite/components/search/search.jsp file.

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 Liti, apri il file left.jsp in /apps/mywebsite/components/contentpage e individua il seguente codice (riga 2):

%><div class="left">

Inserisci 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 fino a I miei siti Web gruppo, 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 Liti, passa a /apps/mywebsite/components/contentpage, apri il file right.jspe sostituisci:

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