Crear un sitio web con todas las funciones (JSP) create-a-fully-featured-website-jsp

AEM Instalar.

CRXDE Lite de acceso (el entorno de desarrollo).

Configure la estructura del proyecto en CRXDE Lite.

Cree la plantilla, el componente y los scripts utilizados como base para crear páginas de contenido.

Cree la página raíz del sitio web y, a continuación, las páginas de contenido.

Cree los siguientes componentes para utilizarlos en sus páginas:

• Navegación superior
• Lista de secundarios
• Logotipo
• Imagen
• Text-Image
• Búsqueda

Incluir varios componentes de base.

En el árbol que hay a la izquierda del CRXDE Lite, haz clic con el botón derecho en la carpeta /apps y haz clic en Crear > Crear Carpeta. En el cuadro de diálogo Crear carpeta, escriba mywebsite como nombre de la carpeta y haga clic en Aceptar.

Haga clic con el botón derecho en la carpeta /apps/mywebsite y luego haga clic en Crear > Crear carpeta. En el cuadro de diálogo Crear carpeta, escriba components como nombre de la carpeta y haga clic en Aceptar.

Haga clic con el botón derecho en la carpeta /apps/mywebsite y luego haga clic en Crear > Crear carpeta. En el cuadro de diálogo Crear carpeta, escriba templates como nombre de la carpeta y haga clic en Aceptar.

La estructura del árbol debería tener un aspecto similar al siguiente:

Haga clic en Guardar todo.

AEM En la página de bienvenida de la, haga clic en Herramientas. (https://localhost:4502/libs/cq/core/content/welcome.html)

En el árbol de carpetas, seleccione la carpeta Diseños y, a continuación, haga clic en Nuevo > Nueva página. Escriba mywebsite como título y haga clic en Crear.

Si el elemento de mi sitio Web no aparece en la tabla, actualice el árbol o la tabla.

Usando WebDAV acceso a la dirección URL en https://localhost:4502, copie el archivo de muestra static.css y la carpeta images del archivo mywebsite.zip descargado en la carpeta /etc/designs/mywebsite.

En el árbol de carpetas del CRXDE Lite, haga clic con el botón secundario en /apps/mywebsite/templates y haga clic en Crear > Crear plantilla.

En el cuadro de diálogo Crear plantilla, escriba los siguientes valores y haga clic en Siguiente:

• Etiqueta: contentpage
• Título: Plantilla de página de contenido de Mi sitio web
• Descripción: Esta es la plantilla de página de contenido de mi sitio web
• Tipo de recurso: mywebsite/components/contentpage

Utilice el valor predeterminado para la propiedad Ranking.

El tipo de recurso identifica el componente que procesa la página. En este caso, el componente mywebsite/components/contentpage procesa todas las páginas creadas con la plantilla contentpage.

Para especificar las rutas de acceso de las páginas que pueden utilizar esta plantilla, haga clic en el botón más y escriba /content(/.*)? en el cuadro de texto que aparece. A continuación, haga clic en Siguiente.

El valor de la propiedad path permitida es una expresión regular . Las páginas que tienen una ruta de acceso que coincide con la expresión pueden utilizar la plantilla. En este caso, la expresión regular coincide con la ruta de la carpeta /content y todas las subpáginas.

Cuando un autor crea una página debajo de /content, la plantilla contentpage aparece en una lista de plantillas disponibles para usar.

Haga clic en Siguiente en los paneles Padres permitidos y Hijos permitidos y haga clic en Aceptar. En CRXDE Lite, haga clic en Guardar todo.

En el CRXDE Lite, haga clic con el botón secundario en /apps/mywebsite/components y luego haga clic en Crear > Componente.

En el cuadro de diálogo Crear componente, escriba los siguientes valores de propiedad:

• Etiqueta: contentpage
• Título: Componente Página de contenido de Mi sitio web
• Descripción: Este es el componente Página de contenido de mi sitio web

La ubicación del nuevo componente es /apps/mywebsite/components/contentpage. Esta ruta corresponde al tipo de recurso de la plantilla contentpage (menos la parte inicial /apps/ de la ruta).

Esta correspondencia conecta la plantilla con el componente y es crítica para el correcto funcionamiento del sitio web.

Haga clic en Siguiente hasta que aparezca el panel Elementos secundarios permitidos del cuadro de diálogo y, a continuación, haga clic en Aceptar. En CRXDE Lite, haga clic en Guardar todo.

La estructura ahora tiene el siguiente aspecto:

En el CRXDE Lite, abra el archivo contentpage.jsp en /apps/mywebsite/components/contentpage. El archivo contiene el siguiente código de forma predeterminada:

<%--

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

Copie el siguiente código y péguelo en contentpage.jsp después del código predeterminado:

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

Haga clic en Guardar todo para guardar los cambios.

AEM En la página de bienvenida de la (https://localhost:4502/libs/cq/core/content/welcome.html), haga clic en Sitios web.

En el árbol de carpetas, seleccione la carpeta Sitios web y, a continuación, haga clic en Nuevo > Nueva página.

En la ventana Crear página, escriba lo siguiente:

• Título: My Website
• Nombre: mywebsite
• Seleccione el(la) My Website Content Page Template

Haga clic en Crear. En el árbol de carpetas, seleccione la página /Sitios web/Mi sitio web y haga clic en Nuevo > Nueva página.

En el cuadro de diálogo Crear página, escriba los siguientes valores de propiedad y haga clic en Crear:

• Título: Español
• Nombre: en
• Seleccione la plantilla Página de contenido de Mi sitio web

En el árbol de carpetas, seleccione la página /Sitios web/Mi sitio web/Inglés y haga clic en Nueva> Nueva página.

En el cuadro de diálogo Crear página, escriba los siguientes valores de propiedad y haga clic en Crear:

• Título: Productos
• Seleccione la plantilla Página de contenido de Mi sitio web

En el árbol de carpetas, seleccione la página /Sitios web/Mi sitio web/Inglés y haga clic en Nuevo > Nueva página.

En el cuadro de diálogo Crear página, escriba los siguientes valores de propiedad y haga clic en Crear:

• Título: Servicios
• Seleccione la plantilla Página de contenido de Mi sitio web

En el árbol de carpetas, seleccione la página /Sitios web/Mi sitio web/Inglés y haga clic en Nuevo > Nueva página.

En el cuadro de diálogo Crear página, escriba los siguientes valores de propiedad y haga clic en Crear:

• Título: Clientes
• Seleccione la plantilla Página de contenido de Mi sitio web

La estructura tiene el siguiente aspecto:

Para vincular sus páginas al diseño de mi sitio web, en CRXDE Lite, seleccione el nodo /content/mywebsite/en/jcr:content. En la ficha Propiedades, escriba los siguientes valores para una nueva propiedad y haga clic en Agregar:

• Nombre: cq:designPath
• Tipo: cadena
• Valor: /etc/designs/mywebsite

En una nueva ficha o ventana del explorador web, abra https://localhost:4502/content/mywebsite/en/products.html para ver la página Productos:

En el CRXDE Lite, agregue una propiedad al nodo /apps/mywebsite/components/contentpage.

1. Seleccione el nodo /apps/mywebsite/components/contentpage.

2. En la parte inferior de la pestaña Propiedades, escriba los siguientes valores de propiedad y haga clic en Agregar:

   • Nombre: sling:resourceSuperType
   • Tipo: cadena
   • Valor: foundation/components/page

3. Haga clic en Guardar todo.

Abra el archivo contentpage.jsp en /apps/mywebsite/components/contentpage y reemplace el código existente por el siguiente código:

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

Guarde los cambios.

En el explorador, vuelva a cargar la página Productos. Tiene el siguiente aspecto:

Abra el origen de la página para ver los elementos JavaScript y HTML que generaron los scripts head.jsp y body.jsp. El siguiente fragmento de script abre el Sidekick cuando abre la página:

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

En el CRXDE Lite, cree el archivo left.jsp en /apps/mywebsite/components/contentpage:

1. Haga clic con el botón derecho en el nodo /apps/mywebsite/components/contentpage y, a continuación, seleccione Crear ​ luego Crear archivo.

2. En la ventana, escriba left.jsp como Nombre y haga clic en Aceptar.

Edite el archivo left.jsp para eliminar el contenido existente y reemplace con el siguiente código:

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

Guarde los cambios.

En el CRXDE Lite, cree el archivo center.jsp en /apps/mywebsite/components/contentpage:

1. Haga clic con el botón derecho en el nodo /apps/mywebsite/components/contentpage, seleccione Crear y, a continuación, Crear archivo.

2. En el cuadro de diálogo, escriba center.jsp como Nombre y haga clic en Aceptar.

Edite el archivo center.jsp para eliminar el contenido existente y reemplácelo por el siguiente código:

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

Guarde los cambios.

En el CRXDE Lite, cree el archivo right.jsp en /apps/mywebsite/components/contentpage:

1. Haga clic con el botón derecho en el nodo /apps/mywebsite/components/contentpage, seleccione Crear y, a continuación, Crear archivo.

2. En el cuadro de diálogo, escriba right.jsp como Nombre y haga clic en Aceptar.

Edite el archivo right.jsp para eliminar el contenido existente y reemplace con el siguiente código:

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

Guarde los cambios.

En el CRXDE Lite, cree el archivo body.jsp en /apps/mywebsite/components/contentpage:

Edite el archivo body.jsp para eliminar el contenido existente y reemplace con el siguiente código:

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

Guarde los cambios.

En el explorador, vuelva a cargar la página Productos. Tiene el siguiente aspecto:

En el CRXDE Lite, haga clic con el botón derecho en /apps/mywebsite/components, seleccione Crear y luego Crear componente.

En la ventana Crear componente, escriba lo siguiente:

• Etiqueta: topnav

• Título: My Top Navigation Component

• Descripción: This is My Top Navigation Component

Haz clic en Siguiente hasta que llegues a la última ventana donde hiciste clic en Aceptar. Guarde los cambios.

En el CRXDE Lite, abra el archivo topnav.jsp en /apps/mywebsite/components/topnav.

Reemplace el código que se encuentra allí copiando y pegando el código siguiente:

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

En CRXDE Lite, abra body.jsp en /apps/mywebsite/components/contentpage y reemplace:

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

con:

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

Guarde los cambios.

En el explorador, vuelva a cargar la página Productos. La navegación superior aparece de la siguiente manera:

En su explorador, abra la página Productos.

En la ficha Sidekick Página, haga clic en Propiedades de página.

En la ficha Básico del cuadro de diálogo, expanda Más títulos y descripción y, para la propiedad Subtítulo, escriba lo que hacemos. Haga clic en OK.

Repita los pasos anteriores para agregar el subtítulo acerca de nuestros servicios a la página Servicios.

Repita los pasos anteriores para agregar el subtítulo la confianza que ganamos a la página Clientes.

Sugerencia: En el CRXDE Lite, seleccione el nodo /content/mywebsite/en/products/jcr:content para ver que se agrega la propiedad subtitle.

Sling determina la ruta del recurso que se va a /content/mwebysite/en/products.png.

Sling coincide con esta ruta de acceso con el nodo /content/mywebsite/en/products.

Sling determina que sling:resourceType de este nodo es mywebsite/components/contentpage.

Sling encuentra el script en este componente que mejor coincide con el selector de URL ( navimage) y la extensión de nombre de archivo ( png).

En CRXDE Lite, abra topnav.jsp en /apps/mywebsite/components/topnav.Busque el contenido del elemento de anclaje (línea 14):

<%=child.getTitle() %>

Reemplace el contenido del anclaje con el siguiente código:

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

Guarde los cambios.

Haga clic con el botón derecho en el nodo /apps/mywebsite/components/contentpage y haga clic en Crear > Crear archivo.

En la ventana Crear archivo, como Nombre, escriba navimage.png.java.

La extensión de nombre de archivo .java indica a Sling que la compatibilidad con Apache Sling Scripting Java™ debe utilizarse para compilar el script y crear un servlet.

Copie el código siguiente en navimage.png.java.El código amplía la clase AbstractImageServlet:

• AbstractImageServlet crea un objeto ImageContext que almacena las propiedades del recurso actual.
• La página principal del recurso se extrae del objeto ImageContext. A continuación, se obtienen el título y el subtítulo de la página.
• ImageHelper se usa para generar la imagen a partir del archivo navimage_bg.jpg del diseño del sitio, el título de la página y el subtítulo de la página.

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

Guarde los cambios.

En el explorador, vuelva a cargar la página Productos. La navegación superior ahora aparece de la siguiente manera:

En el árbol de carpetas de la página Sitios web, seleccione el elemento Sitios web/Mi sitio web/Inglés/Productos y haga clic en Nuevo > Nueva página.

En el cuadro de diálogo, introduzca los siguientes valores de propiedad y haga clic en Crear:

• Título: Producto 1.
• Nombre: product1.
• Seleccionar plantilla de página de contenido de Mi sitio web

Cree otra página debajo de Productos con los siguientes valores de propiedad:

• Título: Producto 2
• Nombre: product2
• Seleccionar plantilla de página de contenido de Mi sitio web

En CRXDE Lite, defina una descripción y una fecha para la página del producto 1:

1. Seleccione el nodo /content/mywebsite/en/products/product1/jcr:content.

2. En la ficha Propiedades, escriba los siguientes valores:

   • Nombre: jcr:description
   • Tipo: String
   • Valor: This is a description of the Product 1!.

3. Haga clic en Agregar.

4. En la ficha Propiedades, cree otra propiedad con los siguientes valores:

   • Nombre: date
   • Tipo: cadena
   • Valor: 14/02/2008
   • Haga clic en Agregar.

5. Haga clic en Guardar todo.

En CRXDE Lite, defina una descripción y una fecha para la página del producto 2:

1. Seleccione el nodo /content/mywebsite/en/products/product2/jcr:content.

2. En la ficha Propiedades, escriba los siguientes valores:

   • Nombre: jcr:description
   • Tipo: cadena
   • Valor: Esta es una descripción del producto 2.

3. Haga clic en Agregar.

4. En los mismos cuadros de texto, reemplace los valores anteriores por los siguientes valores:

   • Nombre: date
   • Tipo: cadena
   • Valor: 11/05/2012
   • Haga clic en Agregar.

5. Haga clic en Guardar todo.

En el CRXDE Lite, haga clic con el botón derecho en /apps/mywebsite/components, seleccione Crear y luego Crear componente.

En el cuadro de diálogo, introduzca los siguientes valores de propiedad y haga clic en Siguiente:

• Etiqueta: listchildren.
• Título: Componente Mis listas secundarias.
• Descripción: Este es el componente Mis listas de elementos secundarios.

Siga haciendo clic en Siguiente hasta que aparezca el panel Elementos secundarios permitidos y, a continuación, haga clic en Aceptar.

En el CRXDE Lite, abra el archivo listchildren.jsp en /apps/mywebsite/components/listchildren.

Reemplace el código predeterminado por el siguiente código:

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

Guarde los cambios.

Cree el nodo de diálogo en el componente listchildren:

1. En el CRXDE Lite, haga clic con el botón derecho en el nodo /apps/mywebsite/components/listchildreny haga clic en Crear > Crear cuadro de diálogo.

2. En el cuadro de diálogo, introduzca los siguientes valores de propiedad y haga clic en Aceptar

   • Etiqueta: dialog

   • Título: Edit Component y haga clic en Aceptar.

Con las siguientes propiedades:

Seleccione el nodo /apps/mywebsite/components/listchildren/dialog/items/items/tab1.

En la pestaña Propiedades, cambie el valor de la propiedad title a List Children

Seleccione el nodo tab1 y haga clic en Crear > Crear nodo, introduzca los siguientes valores de propiedad y haga clic en Aceptar:

• Nombre: elementos
• Tipo: cq:WidgetCollection

Cree un nodo debajo del nodo de elementos con los siguientes valores de propiedad:

• Nombre: listroot
• Tipo: cq:Widget

Agregue propiedades al nodo listroot para configurarlo como un campo de texto. Cada fila de la siguiente tabla representa una propiedad. Cuando termine, haga clic en Guardar todo.

En el CRXDE Lite, abra el archivo left.jsp en /apps/mywebsite/components/contentpage y busque el siguiente código (línea 4):

<div>newslist</div>

Reemplace ese código con el siguiente código:

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

Guarde los cambios.

En el explorador, vuelva a cargar la página Productos. El componente listchildren aparece de la siguiente manera:

Como ruta de acceso de la raíz de la lista, escriba: /content/mywebsite/en. Haga clic en Aceptar. El componente listchildren de la página ahora tiene el siguiente aspecto:

En el CRXDE Lite, haga clic con el botón derecho en /apps/mywebsite/components, seleccione Crear y, a continuación, Crear componente.

En el cuadro de diálogo Crear componente, escriba los siguientes valores de propiedad y haga clic en Siguiente:

• Etiqueta: logo.
• Título: My Logo Component.
• Descripción: This is My Logo Component.

Haga clic en Siguiente hasta que llegue al panel final del cuadro de diálogo y, a continuación, haga clic en Aceptar.

En el CRXDE Lite, abra el archivo logo.jsp en /apps/mywebsite/components/logo.

El siguiente código crea el vínculo a la página principal del sitio y agrega una referencia a la imagen del logotipo. Copie el código en 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>

Guarde los cambios.

Cree el nodo de diálogo en el componente del logotipo:

1. Haga clic con el botón derecho en el nodo /apps/mywebsite/components/logo y haga clic en Crear > Crear cuadro de diálogo.

2. Escriba los siguientes valores de propiedad y haga clic en Aceptar:

   • Etiqueta: design_dialog

   • Título: Logo (Design)

Haga clic con el botón derecho en el nodo tab1 de la rama design_dialog y haga clic en Eliminar. Haga clic en Guardar todo.

En el nodo design_dialog/items/items, cree un nodo denominado img de tipo cq:Widget. Agregue las siguientes propiedades y haga clic en Guardar todo:

En el CRXDE Lite, abra left.jsp en /apps/mywebsite/components/contentpage file y busque la siguiente línea de código:

<div>logo</div>

Reemplace ese código con la siguiente línea de código:

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

Guarde los cambios.

En el explorador, vuelva a cargar la página Productos. El logotipo tiene el siguiente aspecto, aunque actualmente solo muestra el vínculo subyacente:

Con la página Productos abierta en el explorador, haga clic en el botón Diseño en la parte inferior del Sidekick para entrar en el modo de diseño.

En la barra Diseño del logotipo, haga clic en Editar para utilizar el cuadro de diálogo y editar la configuración del componente Logotipo.

En el cuadro de diálogo, haga clic en el panel de la pestaña Imagen, busque la imagen logo.png que ha extraído del archivo mywebsite.zip y haga clic en Aceptar.

Haga clic en el triángulo de la barra de título del Sidekick para volver al modo de edición.

En CRXDE Lite, vaya al siguiente nodo para ver los valores de las propiedades almacenadas:

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

En el CRXDE Lite, vaya a /apps/mywebsite/components/contentpage, abra el archivo center.jsp y reemplace:

<div>trail</div>

con:

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

Guarde los cambios.

En el explorador, vuelva a cargar la página Productos 1. El componente de seguimiento tiene el siguiente aspecto:

En el CRXDE Lite, vaya a /apps/mywebsite/components/contentpage, abra el archivo center.jsp y reemplace:

<div>title</div>

con:

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

Guarde los cambios.

En el explorador, vuelva a cargar la página Productos. El componente de título tiene el siguiente aspecto:

Nota: puede establecer un Título y el Tipo/Tamaño diferentes en el modo de edición.

En el CRXDE Lite, vaya a /apps/mywebsite/components/contentpage, abra el archivo center.jsp y busque la línea de código siguiente:

<div>parsys</div>

Reemplace esa línea de código con el siguiente código y, a continuación, guarde los cambios:

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

En el explorador, actualice la página Productos. Ahora tiene el componente parsys, que se ve de la siguiente manera:

Haga clic con el botón derecho en el nodo /apps/mywebsite/components/logo y haga clic en Copiar.

Haga clic con el botón derecho en el nodo /apps/mywebsite/components y haga clic en Pegar.

Haga clic con el botón secundario en el nodo Copy of logo, haga clic en Cambiar nombre, elimine el texto existente y escriba image.

Seleccione el nodo de componente image y cambie los siguientes valores de propiedad:

• jcr:title: Mi componente de imagen.
• jcr:description: Este es mi componente de imagen.

Agregue una propiedad al nodo image con los siguientes valores de propiedad:

• Nombre: componentGroup
• Tipo: cadena
• Valor: MyWebsite

Bajo el nodo image, cambie el nombre del nodo design_dialog a dialog.

Cambiar nombre de logo.jsp a image.jsp.

Abra img.GET.java y cambie el paquete a apps.mywebsite.components.image.

Abrir /apps/mywebsite/components/image/ image.jsp

Reemplace el código existente por el siguiente código y, a continuación, guarde los cambios:

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

Guarde los cambios.

En CRXDE Lite, en el nodo /apps/mywebsite/components/image, cree un nodo de la siguiente manera:

• Nombre: cq:editConfig.
• Tipo: cq:EditConfig.

En el nodo cq:editConfig, cree un nodo como se indica a continuación:

• Nombre: cq:dropTargets.
• Tipo: cq:DropTargetConfig.

En el nodo cq:dropTargets, cree un nodo como se indica a continuación:

• Nombre: image.
• Tipo: nt:unstructured.

En CRXDE, establezca las propiedades como se indica a continuación:

En el explorador, vuelva a cargar la página Productos.

En el Sidekick, haga clic en el icono modo de diseño.

Haga clic en el botón Editar para editar el cuadro de diálogo de diseño de la pieza.

En el cuadro de diálogo, se muestra una lista de Componentes permitidos; navegue hasta MyWebsite, seleccione el Componente de mi imagen y haga clic en Aceptar.

Volver al modo de edición.

Haga doble clic en el marco parsys (en Arrastrar componentes o recursos aquí). Los selectores Insertar nuevo componente y Sidekick tienen el siguiente aspecto:

En el CRXDE Lite, vaya a /apps/mywebsite/components/contentpage, abra el archivo body.jsp y busque el siguiente código:

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

Reemplace ese código con el siguiente código y, a continuación, guarde los cambios.

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

AEM En el árbol de carpetas de la página Sitios web de la, seleccione Sitios web/Mi sitio web/Inglés y, a continuación, haga clic en Nuevo > Nueva página. Especifique los siguientes valores de propiedad y haga clic en Crear:

• Título: Barra de herramientas
• Seleccionar plantilla de página de contenido de Mi sitio web

En la lista de páginas, haga clic con el botón secundario en la página Barra de herramientas y haga clic en Propiedades. Seleccione Ocultar en navegación y haga clic en Aceptar.

La opción Ocultar en navegación evita que la página aparezca en los componentes de navegación, como la navegación superior y los elementos secundarios de lista.

En Barra de herramientas, cree las siguientes páginas:

• Contactos
• Comentarios
• Inicio de sesión
• Búsqueda

En el explorador, vuelva a cargar la página Productos. Tiene el siguiente aspecto:

En el CRXDE Lite, haga clic con el botón derecho en /apps/mywebsite/components, seleccione Crear y luego Crear componente.

Utilice el cuadro de diálogo para configurar el componente:

1. En el primer panel, especifique los siguientes valores de propiedad:

   • Etiqueta: buscar
   • Título: Componente Mi búsqueda
   • Descripción: Este es mi componente de búsqueda
   • Grupo: Mi sitio web

2. Haga clic en Siguiente y, a continuación, en Siguiente.

3. En el panel Principales permitidos, haga clic en el botón + y escriba */parsys.

4. Haga clic en Siguiente y, a continuación, en Aceptar.

Haga clic en Guardar todo.

Copie los siguientes nodos y péguelos en el nodo apps/mywebsite/components/search:

• /libs/foundation/components/search/dialog

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

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

Haga clic en Guardar todo.

Abra el archivo /apps/mywebsite/components/search/search.jsp.

Copie el siguiente código en 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>

Guarde los cambios.

En el CRXDE Lite, abra el archivo left.jsp en /apps/mywebsite/components/contentpage y busque el siguiente código (línea 2):

%><div class="left">

Inserte el siguiente código antes de esa línea:

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

Busque la siguiente línea de código:

<div>search</div>

Reemplace ese código con el siguiente código y, a continuación, guarde los cambios.

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

En el explorador, vuelva a cargar la página Productos. El componente de búsqueda tiene el siguiente aspecto:

En el explorador, abra la página Buscar.

En el Sidekick, haga clic en el icono del modo de diseño.

En el bloque Diseño de la parte (debajo del título Buscar), haga clic en Editar.

En el cuadro de diálogo, desplácese hacia abajo hasta el grupo Mis sitios web, seleccione Mi componente de búsqueda y haga clic en Aceptar.

En Sidekick, haga clic en el triángulo para volver al modo de edición.

Arrastre el componente Mi búsqueda desde el Sidekick al marco parsys. Tiene el siguiente aspecto:

Vaya a la página Productos. Busque clientes en el cuadro de entrada y pulse Intro. Se le redirigirá a la página Buscar. Cambiar a modo de vista previa: la salida tiene un formato similar al siguiente:

En CRXDE Lite, vaya a /apps/mywebsite/components/contentpage, abra el archivo right.jsp y reemplace:

<div>iparsys</div>

con:

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

Guarde los cambios.

En el explorador, vuelva a cargar la página ​ productos ​. Toda la página tiene el siguiente aspecto: