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

Installa AEM.

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

Imposta la struttura del progetto in CRXDE Lite.

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

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

Crea i seguenti componenti da utilizzare sulle pagine:

• Navigazione superiore
• Elementi figli elenco
• Logo
• Immagine
• Testo-immagine
• Ricerca

Includi vari componenti di base.

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

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

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

La struttura nell'albero dovrebbe ora avere un aspetto simile al seguente:

Fai clic su Salva tutto.

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

Nella struttura delle cartelle, seleziona la Disegni e fai 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 ad albero o la tabella.

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

Nella struttura delle cartelle di CRXDE Lite, 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 pagina contenuto sito Web personale
• Descrizione: Questo è il mio modello di pagina del contenuto del sito Web
• Tipo di risorsa: mywebsite/components/contentpage

Utilizzare il valore predefinito per la proprietà Classifica.

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 di contenuto vengono sottoposte a rendering dal 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. Per le pagine con un percorso che corrisponde all’espressione è possibile utilizzare il modello . In questo caso l'espressione regolare corrisponde al percorso del /content e tutte le pagine secondarie.

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

Fai clic su Successivo in Genitori consentiti e Bambini consentiti e fai clic su OK. In CRXDE Lite, fai clic su Salva tutto.

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

In Crea componente digitare i seguenti valori di proprietà nella finestra di dialogo:

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

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

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

Fai clic su Successivo fino al Bambini consentiti viene visualizzato il pannello della finestra di dialogo, quindi fai clic su OK. In CRXDE Lite, fai clic su Salva tutto.

La struttura si presenta ora come segue:

In CRXDE Lite, 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 codice seguente e incollalo in contentpage.jsp dopo il codice predefinito:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My title</title>
</head>
<body>
<div>My body</div>
</body>
</html>

Fai clic su Salva tutto per salvare le modifiche.

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

Nella struttura delle cartelle, seleziona la Siti Web e fai clic su Nuovo > Nuova pagina.

In Crea pagina immetti quanto segue:

• Titolo: My Website
• Nome: mywebsite
• Seleziona la Modello pagina contenuto sito Web personale

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

In Crea pagina immetti i seguenti valori di proprietà e fai clic su Crea:

• Titolo: Inglese
• Nome: en
• Seleziona la Modello pagina contenuto sito Web personale

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

In Crea pagina immetti i seguenti valori di proprietà e fai clic su Crea:

• Titolo: Prodotti
• Seleziona la Modello pagina contenuto sito Web personale

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

In Crea pagina immetti i seguenti valori di proprietà e fai clic su Crea:

• Titolo: Servizi
• Seleziona la Modello pagina contenuto sito Web personale

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

In Crea pagina immetti i seguenti valori di proprietà e fai clic su Crea:

• Titolo: Clienti
• Seleziona la Modello pagina contenuto sito Web personale

La struttura si presenta come segue:

Per collegare le pagine alla progettazione del sito web mysite, in CRXDE Lite, seleziona la /content/mywebsite/en/jcr:content nodo. Sulla Proprietà digitare i seguenti valori per una nuova proprietà, quindi fare clic su Aggiungi:

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

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

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

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

2. Nella parte inferiore della scheda Proprietà, digita i seguenti valori di proprietà e fai 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 le Prodotti pagina. Si presenta come segue:

Apri la pagina sorgente per visualizzare gli elementi javascript e HTML generati dagli script head.jsp e body.jsp. Il seguente snippet di script apre la barra laterale all’apertura della pagina:

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

In CRXDE Lite, crea il file . left.jsp sotto /apps/mywebsite/components/contentpage:

1. Fai clic con il pulsante destro del mouse sul nodo /apps/mywebsite/components/contentpage, quindi seleziona Crea then Crea file.
2. Nella finestra, digita left.jsp come ​ Nome e fai clic su OK.

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

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

Salva le modifiche.

In CRXDE Lite, crea il file . center.jsp sotto /apps/mywebsite/components/contentpage:

1. Fai 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 come Nome e fai clic su OK.

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

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

Salva le modifiche.

In CRXDE Lite, crea il file . right.jsp sotto /apps/mywebsite/components/contentpage:

1. Fai 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 come Nome e fai clic su OK.

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

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

Salva le modifiche.

In CRXDE Lite, crea il file . body.jsp sotto /apps/mywebsite/components/contentpage:

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

<%@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 le Prodotti pagina. Si presenta come segue:

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

In Crea componente immetti quanto segue:

• Etichetta: topnav
• Titolo: My Top Navigation Component
• Descrizione: This is My Top Navigation Component

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

In CRXDE Lite, apri il file . topnav.jsp sotto /apps/mywebsite/components/topnav.

Sostituisci il codice presente copiando e incollando il seguente codice:

<%@include file="/libs/foundation/global.jsp"%><%
%><%@ page import="java.util.Iterator,
        com.day.text.Text,
        com.day.cq.wcm.api.PageFilter, com.day.cq.wcm.api.Page" %><%
    /* get starting point of navigation */
    Page navRootPage = currentPage.getAbsoluteParent(2);
    if (navRootPage == null && currentPage != null) {
    navRootPage = currentPage;
    }
    if (navRootPage != null) {
        Iterator<Page> children = navRootPage.listChildren(new PageFilter(request));
        while (children.hasNext()) {
            Page child = children.next();
            %><a href="<%= child.getPath() %>.html"><%=child.getTitle() %></a><%
        }
    }
%>

In CRXDE Lite, apri le body.jsp sotto /apps/mywebsite/components/contentpagee sostituiscono:

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

con:

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

Salva le modifiche.

Nel browser, ricarica le Prodotti Pagina. La navigazione superiore viene visualizzata come segue:

Nel browser, apri le Prodotti pagina.

Sulla barra laterale Pagina scheda , fai clic su Proprietà pagina.

Sulla Base scheda della finestra di dialogo, espandi Altri titoli e descrizioni e per Sottotitolo proprietà, tipo what we do. 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 Lite, seleziona il nodo /content/mywebsite/en/products/jcr:content per verificare che la proprietà subtitle sia aggiunta.

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

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

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

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

In CRXDE Lite, apri le topnav.jsp sotto /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.

Fai clic con il pulsante destro del mouse sul pulsante /apps/mywebsite/components/contentpage nodo e fai clic su Crea > Crea file.

In Crea file come Nome, tipo navimage.png.java.

L'estensione del nome 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.

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

• AbstractImageServlet crea un oggetto ImageContext in cui vengono memorizzate 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 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;
     }
 }

Salva le modifiche.

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

Nella struttura delle cartelle di Siti Web , seleziona la Website/My Website/English/Products e fai clic su Nuovo > Nuova pagina.

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

• Titolo: Prodotto 1.
• Nome: prodotto1.
• Seleziona Modello pagina contenuto sito Web personale

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

• Titolo: Prodotto 2
• Nome: prodotto2
• Seleziona Modello pagina contenuto sito Web personale

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

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

2. In Proprietà , immetti i seguenti valori:

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

3. Fai clic su Aggiungi.

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

   • Nome: date
   • Tipo: Stringa
   • Valore: 14/02/2008
   • Fai clic su Aggiungi.

5. Fai clic su Salva tutto.

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

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

2. In Proprietà , immetti i seguenti valori:

   • Nome: jcr:description
   • Tipo: Stringa
   • Valore: Questa è una descrizione del Prodotto 2!.

3. Fai 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
   • Fai clic su Aggiungi.

5. Fai clic su Salva tutto.

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

Nella finestra di dialogo, immetti i seguenti valori di proprietà e fai clic su Successivo:

• Etichetta: Ascolta dei bambini.
• Titolo: Componente Listchildren .
• Descrizione: Questo è il componente Listchildren .

Continua a fare clic Successivo fino al Bambini consentiti viene visualizzato il pannello, quindi fai clic su OK.

In CRXDE Lite, apri il file . listchildren.jsp sotto /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 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><%
         }
     }
 %>

Salva le modifiche.

Crea il nodo di dialogo sotto il componente listchildren :

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

2. Nella finestra di dialogo, immetti i seguenti valori di 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.

In Proprietà , modifica il valore del title proprietà di List Children

Seleziona la scheda1 nodo e fai clic su Crea > Crea nodo, immetti i seguenti valori di proprietà e fai clic su OK:

• Nome: items
• Tipo: cq:WidgetCollection

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

• Nome: listroot
• Tipo: cq:Widget

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

In CRXDE Lite, apri il file . left.jsp sotto /apps/mywebsite/components/contentpage e individua il seguente codice (riga 4):

<div>newslist</div>

Sostituisci il codice con il seguente codice:

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

Salva le modifiche.

Nel browser, ricarica le Prodotti pagina. Il componente listchildren viene visualizzato come segue:

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

In CRXDE Lite, 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 di proprietà e 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 Lite, apri il file . logo.jsp sotto /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 di dialogo sotto il componente logo:

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

2. Digita i seguenti valori di proprietà e fai clic su OK:

   • Etichetta design_dialog
   • Titolo Logo (Design)

Fare clic con il pulsante destro del mouse sul nodo tab1 nel ramo design_dialog e scegliere Elimina. Fai clic su Salva tutto.

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

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

<div>logo</div>

Sostituisci il codice con la seguente riga di codice:

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

Salva le modifiche.

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

Con la Prodotti aperta nel browser, fai clic sul pulsante Progettazione nella parte inferiore della barra laterale da inserire Progettazione modalità.

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

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

Fai clic sul triangolo nella barra del titolo della barra laterale per tornare a Modifica modalità.

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

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

In CRXDE Lite, cerca /apps/mywebsite/components/contentpage, apri il file center.jsp e sostituiscono:

<div>trail</div>

con:

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

Salva le modifiche.

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

In CRXDE Lite, cerca /apps/mywebsite/components/contentpage, apri il file center.jsp e sostituiscono:

<div>title</div>

con:

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

Salva le modifiche.

Nel browser, ricarica le Prodotti pagina. Il componente Titolo si presenta come segue:

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

<div>parsys</div>

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

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

Nel browser, aggiorna la Prodotti pagina. Ora ha il componente parsys, che viene visto come segue:

Fai clic con il pulsante destro del mouse /apps/mywebsite/components/logo nodo e fai clic su Copia.

Fai clic con il pulsante destro del mouse sul pulsante /apps/mywebsite/components nodo e fai clic su Incolla.

Fai clic con il pulsante destro del mouse sul pulsante Copy of logo nodo, fai clic su Rinomina, elimina il testo esistente e digita image.

Seleziona la image nodo componente e modificare i seguenti valori di proprietà:

• jcr:title: Componente immagine personale.
• jcr:description: Questo è il componente Immagine personale.

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

• Nome: componentGroup
• Tipo: Stringa
• Valore: Sito Web personale

Sotto la image nodo, rinominare 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 codice seguente, quindi salva le modifiche:

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

Salva le modifiche.

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

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

Sotto il nodo cq:editConfig, crea un nuovo nodo come segue:

• Nome: cq:dropTargets.
• Tipo: cq:DropTargetConfig.

Sotto il nodo cq:dropTargets, crea un nuovo nodo come segue:

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

In CRXDE imposta le proprietà come segue:

Nel browser, ricarica le Prodotti pagina.

Nella barra laterale, fai clic sul pulsante Modalità Progettazione icona.

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

Nella finestra di dialogo, un elenco di Componenti consentiti è indicato; naviga a Sito Web personale, seleziona Componente immagine personale e fai clic su OK.

Torna a Modalità Modifica.

Fare doppio clic sul frame parsys (in Trascina qui i componenti o le risorse). La Inserisci nuovo componente e Barra laterale i selettori si presentano come segue:

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

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

Sostituisci il codice con il codice seguente, quindi salva le modifiche.

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

Nella struttura delle cartelle della pagina Siti Web AEM, selezionare Websites/My Website/English, quindi fai clic su Nuovo > Nuova pagina. Specifica i seguenti valori di proprietà e fai clic su Crea:

• Titolo: Barra degli strumenti
• Seleziona Modello pagina contenuto sito Web personale

Nell’elenco delle pagine, fai clic con il pulsante destro del mouse sul pulsante Barra degli strumenti e fai clic su Proprietà. Seleziona Nascondi in navigazione e fai clic su OK.

La Nascondi in navigazione impedisce la visualizzazione della pagina nei componenti di navigazione, ad esempio navigazione in alto e elementi di elenco secondari.

Sotto Barra degli strumenti, crea le pagine seguenti:

• Contatti
• Feedback
• Accesso
• Ricerca

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

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

Utilizza la finestra di dialogo per configurare il componente:

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

   • Etichetta: ricerca
   • Titolo: Componente Ricerca personale
   • Descrizione: Questo è il mio componente di ricerca
   • Gruppo: Sito Web personale

2. Fai clic su Successivo, quindi fai clic su Successivo di nuovo.

3. Sulla Genitori consentiti fai clic sul + pulsante e tipo */parsys.

4. Fai clic su Successivo quindi fai clic su OK.

Fai clic su Salva tutto.

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

• /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}"/></span></a>
                  </c:forEach>
              </div>
          </c:if>
          <c:if test="${result.facets.languages.containsHit}">
              <p>Languages</p>
              <c:forEach var="bucket" items="${result.facets.languages.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="label" value='<%= new java.util.Locale((String) pageContext.getAttribute("bucketValue")).getDisplayLanguage(request.getLocale()) %>'/>
                  <c:choose>
                      <c:when test="${param.language != null}">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="language"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="language" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.tags.containsHit}">
              <p>Tags</p>
              <c:forEach var="bucket" items="${result.facets.tags.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="tag" value="<%= tm.resolve((String) pageContext.getAttribute("bucketValue")) %>"/>
                  <c:if test="${tag != null}">
                      <c:set var="label" value="${tag.title}"/>
                      <c:choose>
                          <c:when test="<%= request.getParameter("tag") != null && java.util.Arrays.asList(request.getParameterValues("tag")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="tag" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="tag" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:if>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.mimeTypes.containsHit}">
              <jsp:useBean id="fileTypes" class="com.day.cq.wcm.foundation.FileTypes"/>
              <p>File types</p>
              <c:forEach var="bucket" items="${result.facets.mimeTypes.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="label" value="${fileTypes[bucket.value]}"/>
                  <c:choose>
                      <c:when test="<%= request.getParameter("mimeType") != null && java.util.Arrays.asList(request.getParameterValues("mimeType")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.lastModified.containsHit}">
              <p>Last Modified</p>
              <c:forEach var="bucket" items="${result.facets.lastModified.buckets}">
                  <c:choose>
                      <c:when test="${param.from == bucket.from && param.to == bucket.to}">${bucket.value} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/><c:if test="${bucket.from != null}"><cq:addParam name="from" value="${bucket.from}"/></c:if><c:if test="${bucket.to != null}"><cq:addParam name="to" value="${bucket.to}"/></c:if></cq:requestURL>">${bucket.value} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>

      <c:if test="${fn:length(search.relatedQueries) > 0}">

       <br/><br/><div class="related">
        <fmt:message key="relatedSearchesText"/>
        <c:forEach var="rq" items="${search.relatedQueries}">
            <a href="${currentPage.path}.html?q=${rq}"><c:out value="${rq}"/></a>
        </c:forEach></div>
      </c:if>
      </div>

      <c:if test="${fn:length(result.resultPages) > 1}">
        <div class="pagination">
            <fmt:message key="resultPagesText"/>
        <c:if test="${result.previousPage != null}">
          <a href="${result.previousPage.URL}"><fmt:message key="previousText"/></a>
        </c:if>
        <c:forEach var="page" items="${result.resultPages}">
          <c:choose>
            <c:when test="${page.currentPage}">${page.index + 1}</c:when>
            <c:otherwise>
              <a href="${page.URL}">${page.index + 1}</a>
            </c:otherwise>
          </c:choose>
        </c:forEach>
        <c:if test="${result.nextPage != null}">
          <a href="${result.nextPage.URL}"><fmt:message key="nextText"/></a>
        </c:if>
        </div>
      </c:if>
      </div>

  </c:otherwise>
</c:choose>

Salva le modifiche.

In CRXDE Lite, apri il file . left.jsp sotto /apps/mywebsite/components/contentpage e individua il seguente codice (riga 2):

%><div class="left">

Inserire il seguente codice prima tale linea:

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

Sostituisci il codice con il codice seguente, quindi salva 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 le Prodotti pagina. Il componente di ricerca si presenta come segue:

Nel browser, apri le Ricerca pagina.

Nella barra laterale, fai clic sul pulsante Progettazione icona della modalità.

Nel Design del blocco par (sotto il titolo Ricerca), fai clic su Modifica.

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

Nella barra laterale, fate clic sul triangolo a cui tornare Modifica modalità.

Trascina Ricerca personale Dalla barra laterale al frame parsys. Si presenta come segue:

Passa alla Prodotti pagina. Cerca clienti nella casella di input e premi Invio. Viene reindirizzato a Ricerca pagina. Passa a Anteprima modalità: l'output è in un formato simile al seguente:

In CRXDE Lite, passa a /apps/mywebsite/components/contentpage, apri il file right.jsp e sostituiscono:

<div>iparsys</div>

con:

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

Salva le modifiche.

Nel browser, ricarica le Prodotti pagina. L'intera pagina si presenta come segue: