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

CAUTION
AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.
CAUTION
Este artículo describe cómo crear un sitio web utilizando JSP y basado en la IU clásica. Adobe recomienda aprovechar las últimas tecnologías de AEM para sus sitios web como se describe detalladamente en el artículo Introducción al desarrollo de AEM Sites.

Este tutorial le permite crear un sitio web con todas las funciones con Adobe Experience Manager (AEM). El sitio web se basa en un sitio web genérico y está dirigido principalmente a los desarrolladores web. Todo el desarrollo se llevará a cabo dentro de un entorno de creación.

Este tutorial describe cómo:

  1. Instalar AEM.

  2. CRXDE Lite de acceso (entorno de desarrollo).

  3. Configure la estructura del proyecto en CRXDE Lite.

  4. Cree la plantilla, el componente y las secuencias de comandos que se utilizan como base para crear páginas de contenido.

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

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

    • Navegación superior
    • Lista de secundarios
    • Logotipo
    • Imagen
    • Imagen de texto
    • Buscar
  7. Incluya varios componentes de base.

Después de realizar todos los pasos, las páginas se verán de la siguiente manera:

imagen_1-99

Descargar el resultado final

Para seguir el tutorial en lugar de realizar los ejercicios, descargue el sitio web-1.0.zip. Este archivo es un paquete de contenido AEM que contiene los resultados de este tutorial. Uso Administrador de paquetes para instalar el paquete en la instancia de autor.

NOTE
La instalación de este paquete sobrescribirá los recursos de la instancia de creación que haya creado con este tutorial.

Paquete de contenido del sitio web

Obtener archivo

Instalación de Adobe Experience Manager installing-adobe-experience-manager

Para instalar una instancia de AEM para desarrollar su sitio web, siga las instrucciones para configurar una entorno de implementación con instancias de autor y publicacióno realizar una instalación genérica. La instalación genérica implica descargar el archivo JAR de inicio rápido AEM, colocar el archivo license.properties en el mismo directorio que el archivo JAR y hacer doble clic en el archivo JAR.

Después de instalar AEM, acceda al entorno de desarrollo de CRXDE Lite haciendo clic en el vínculo del CRXDE Lite en la página de bienvenida:

chlimage_1-100

NOTE
La URL del CRXDE Lite para una instancia de creación de AEM que se instala localmente mediante el puerto predeterminado es http://localhost:4502/crx/de/.

Configuración de la estructura del proyecto en el CRXDE Lite setting-up-the-project-structure-in-crxde-lite

Utilice el CRXDE Lite para crear la estructura de la aplicación mywebsite en el repositorio:

  1. En el árbol de la parte izquierda del CRXDE Lite, haga clic con el botón derecho en la variable /apps carpeta y haga clic en Crear > Crear carpeta. En el Crear carpeta cuadro de diálogo, tipo mywebsite como nombre de la carpeta y haga clic en OK.

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

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

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

    chlimage_1-101

  4. Haga clic en Guardar todo.

Configuración del diseño setting-up-the-design

En esta sección, se crea el diseño para la aplicación con la herramienta Designer. El diseño proporciona recursos de imagen y CSS para el sitio web.

NOTE
Haga clic en el siguiente vínculo para descargar mywebsite.zip. El archivo contiene los archivos static.css e image para su diseño.

Archivo static.css de muestra e imágenes

Obtener archivo

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

    chlimage_1-102

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

  3. Si el elemento mywebsite no aparece en la tabla, actualice el árbol o la tabla.

  4. Uso de WebDAV acceso a la URL en http://localhost:4502, copie el ejemplo static.css y images desde el archivo mywebsite.zip descargado al /etc/designs/mywebsite carpeta.

    chlimage_1-103

Creación de plantillas, componentes y secuencias de comandos de la página de contenido creating-the-contentpage-template-component-and-script

En esta sección, se crea lo siguiente:

  • Plantilla de la página de contenido que se utilizará para crear páginas de contenido en el sitio web de ejemplo
  • Componente contentpage que se utilizará para procesar páginas de contenido
  • La secuencia de comandos contentpage

Creación de la plantilla Contentpage creating-the-contentpage-template

Cree una plantilla para utilizarla como base de las páginas web del sitio.

Una plantilla define el contenido predeterminado de una página nueva. Los sitios web complejos pueden utilizar varias plantillas para crear los distintos tipos de páginas del sitio. En este ejercicio, todas las páginas se basan en una plantilla sencilla.

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

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

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

    Utilice el valor predeterminado de la propiedad Ranking .

    chlimage_1-104

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

  3. Para especificar las rutas 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.

    chlimage_1-105

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

    Cuando un autor crea una página a continuación /content, el contentpage aparece en una lista de plantillas disponibles para usar.

  4. Haga clic en Siguiente en el Principales permitidos y Niños permitidos paneles y haga clic en OK. En el CRXDE Lite, haga clic en Guardar todo.

    chlimage_1-106

Creación del componente Contentpage creating-the-contentpage-component

Cree la variable componente que define el contenido y procesa las páginas que utilizan la plantilla contentpage . La ubicación del componente debe corresponder al valor de la propiedad Tipo de recurso de la plantilla de página de contenido.

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

  2. En el Crear componente , escriba los siguientes valores de propiedad:

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

    chlimage_1-107

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

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

  3. Haga clic en Siguiente hasta que Niños permitidos del cuadro de diálogo y, a continuación, haga clic en OK. En el CRXDE Lite, haga clic en Guardar todo.

    La estructura ahora tiene el siguiente aspecto:

    chlimage_1-108

Desarrollo del script de componente Contentpage developing-the-contentpage-component-script

Agregue código al script contentpage.jsp para definir el contenido de la página.

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

    code language-java
    <%--
    
      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 */
    %>
    
  2. Copie el siguiente código y péguelo en contentpage.jsp después del código predeterminado:

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

Creación de la página del sitio web y de las páginas de contenido creating-your-website-page-and-content-pages

En esta sección, se crean las páginas siguientes, que todas utilizan la plantilla de página de contenido: Mi sitio web, inglés, productos, servicios y clientes.

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

    chlimage_1-109

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

  3. En el Crear página , introduzca lo siguiente:

    • Título: My Website
    • Nombre: mywebsite
    • Seleccione el Plantilla de página de contenido de Mi sitio web

    chlimage_1-110

  4. Haga clic en Crear. En el árbol de carpetas, seleccione la /Websites/My Website página y haga clic en Nuevo > Nueva página.

  5. En el Crear página , introduzca los siguientes valores de propiedad y haga clic en Crear:

    • Título: Inglés
    • Nombre: en
    • Seleccione el Plantilla de página de contenido de Mi sitio web
  6. En el árbol de carpetas, seleccione la /Websites/My Website/English página y haga clic en Nuevo > Nueva página.

  7. En el Crear página , introduzca los siguientes valores de propiedad y haga clic en Crear:

    • Título: Productos
    • Seleccione el Plantilla de página de contenido de Mi sitio web
  8. En el árbol de carpetas, seleccione la /Websites/My Website/English página y haga clic en Nuevo > Nueva página.

  9. En el Crear página , introduzca los siguientes valores de propiedad y haga clic en Crear:

    • Título: Servicios
    • Seleccione el Plantilla de página de contenido de Mi sitio web
  10. En el árbol de carpetas, seleccione la /Websites/My Website/English página y haga clic en Nuevo > Nueva página.

  11. En el Crear página , introduzca los siguientes valores de propiedad y haga clic en Crear:

    • Título: Clientes
    • Seleccione el Plantilla de página de contenido de Mi sitio web

    La estructura tiene el siguiente aspecto:

    chlimage_1-111

  12. Para vincular las páginas al diseño de mywebsite, en CRXDE Lite, seleccione la opción /content/mywebsite/en/jcr:content nodo . En el Propiedades , escriba los siguientes valores para una nueva propiedad y haga clic en Agregar:

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

    chlimage_1-112

  13. En una nueva pestaña o ventana del explorador web, abra http://localhost:4502/content/mywebsite/en/products.html para ver la página Productos :

    chlimage_1-113

Mejora del script de la página de contenido enhancing-the-contentpage-script

En esta sección se describe cómo mejorar el script contentpage utilizando los scripts de componente de base de AEM y escribiendo sus propios scripts.

La variable Productos La página tendrá el siguiente aspecto:

Chlimage_1-4

Uso de los scripts de página de base using-the-foundation-page-scripts

En este ejercicio, se configura el componente de contenido de página para que su supertipo sea el componente de página AEM. Dado que los componentes heredan las características de su supertipo, el contenido de la página hereda las secuencias de comandos y propiedades del componente Página.

Por ejemplo, en el código JSP del componente, puede hacer referencia a las secuencias de comandos que proporciona el componente de supertipo como si se incluyeran en el componente.

  1. En el CRXDE Lite, agregue una propiedad a la variable /apps/mywebsite/components/contentpage nodo .

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

    2. En la parte inferior de la ficha 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.

  2. Abra el contentpage.jsp file under /apps/mywebsite/components/contentpage y reemplace el código existente por el siguiente código:

    code language-xml
    <%@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>
    
  3. Guarde los cambios.

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

    Chlimage_1-5

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

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

Uso de sus propios scripts using-your-own-scripts

En esta sección se crean varias secuencias de comandos que generan una parte del cuerpo de la página. A continuación, cree el archivo body.jsp en el componente de contenido de página para anular el body.jsp del componente de página AEM. En el archivo body.jsp, se incluyen las secuencias de comandos que generan las diferentes partes del cuerpo de la página.

Sugerencia: Cuando un componente incluye un archivo que tiene el mismo nombre y ubicación relativa que un archivo en el supertipo del componente, se llama superposición.

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

    1. Haga clic con el botón derecho en el nodo /apps/mywebsite/components/contentpagey, a continuación, seleccione Crear then Crear archivo.
    2. En la ventana , escriba left.jsp como ​ Nombre y haga clic en OK.
  2. Editar el archivo left.jsp para eliminar el contenido existente y sustituirlo por el siguiente código:

    code language-java
    <%@include file="/libs/foundation/global.jsp"%><%
    %><div class="left">
    <div>logo</div>
    <div>newslist</div>
    <div>search</div>
    </div>
    
  3. Guarde los cambios.

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

    1. Haga clic con el botón derecho en el nodo /apps/mywebsite/components/contentpage, seleccione Crear, luego Crear archivo.
    2. En el cuadro de diálogo, escriba center.jsp como Nombre y haga clic en OK.
  5. Editar el archivo center.jsp para eliminar el contenido existente y sustituirlo por el siguiente código:

    code language-java
    <%@include file="/libs/foundation/global.jsp"%><%
    %><div class="center">
    <div>trail</div>
    <div>title</div>
    <div>parsys</div>
    </div>
    
  6. Guarde los cambios.

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

    1. Haga clic con el botón derecho en el nodo /apps/mywebsite/components/contentpage, seleccione Crear, luego Crear archivo.
    2. En el cuadro de diálogo, escriba right.jsp como Nombre y haga clic en OK.
  8. Editar el archivo right.jsp para eliminar el contenido existente y sustituirlo por el siguiente código:

    code language-java
    <%@include file="/libs/foundation/global.jsp"%><%
    %><div class="right">
    <div>iparsys</div>
    </div>
    
  9. Guarde los cambios.

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

  11. Editar el archivo body.jsp para eliminar el contenido existente y sustituirlo por el siguiente código:

    code language-java
    <%@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>
    
  12. Guarde los cambios.

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

    Chlimage_1-6

Creación del componente de navegación superior creating-the-top-navigation-component

En esta sección, se crea un componente que muestra vínculos a todas las páginas de nivel superior del sitio web para facilitar la navegación. El contenido de este componente aparece en la parte superior de todas las páginas que se crean con la plantilla de página de contenido.

En la primera versión del componente de navegación superior (navegación superior), los elementos de navegación solo son vínculos de texto. En la segunda versión, implemente la barra de navegación con vínculos de navegación de imágenes.

La navegación superior tendrá el siguiente aspecto:

chlimage_1-114

Creación del componente de navegación superior creating-the-top-navigation-component-1

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

  2. En el Crear componente , introduzca lo siguiente:

    • Etiqueta: topnav
    • Título: My Top Navigation Component
    • Descripción: This is My Top Navigation Component
  3. Haga clic en Siguiente hasta que llegue a la última ventana en la que hace clic OK. Guarde los cambios.

Añada la secuencia de comandos de renderización a la barra de navegación superior para generar vínculos de texto a páginas secundarias:

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

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

    code language-xml
    <%@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><%
            }
        }
    %>
    

Inclusión de la navegación superior en el componente Contentpage including-top-navigation-in-the-contentpage-component

Para incluir la navegación superior en el componente de la página de contenido:

  1. En el CRXDE Lite, abra el body.jsp under /apps/mywebsite/components/contentpagey reemplace:

    code language-xml
    <div class="topnav">topnav</div>
    

    a:

    code language-xml
    <cq:include path="topnav" resourceType="mywebsite/components/topnav" />
    
  2. Guarde los cambios.

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

    chlimage_1-115

Mejora de páginas con subtítulos enhancing-pages-with-subtitles

La variable Página define propiedades que permiten proporcionar subtítulos para páginas. Agregue subtítulos que proporcionen información sobre el contenido de la página.

  1. En el navegador, abra la Productos página.

  2. En la barra de tareas Página , haga clic en Propiedades de página.

  3. En el Básico del cuadro de diálogo, expanda Más títulos y descripción y para Subtítulo propiedad, tipo what we do. Haga clic en Aceptar.

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

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

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

Mejore la secuencia de comandos de renderización del componente de navegación superior para utilizar vínculos de imagen en lugar de hipertexto para los controles de navegación. La imagen incluye el título y el subtítulo del destino del vínculo.

Este ejercicio demuestra Procesamiento de solicitudes de Sling. El script topnav.jsp se modifica para llamar a un script que genere dinámicamente imágenes para utilizarlas en los vínculos de navegación de la página. En este ejercicio, Sling analiza la dirección URL de los archivos de origen de imagen para determinar el script que se utilizará para procesar las imágenes.

Por ejemplo, la fuente del vínculo de imagen a la página Productos podría ser http://localhost:4502/content/mywebsite/en/products.navimage.png. Sling analiza esta dirección URL para determinar el tipo de recurso y la secuencia de comandos que se utilizará para procesar el recurso:

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

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

  3. Sling determina sling:resourceType de este nodo que se va a mywebsite/components/contentpage.

  4. Sling encuentra el script de este componente que mejor se ajusta al selector de URL ( navimage) y extensión de nombre de archivo ( png).

En este ejercicio, Sling hace coincidir estas direcciones URL con el script /apps/mywebsite/components/contentpage/navimage.png.java que usted crea.

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

    code language-xml
    <%=child.getTitle() %>
    
  2. Sustituya el contenido de anclaje por el siguiente código:

    code language-xml
    <img alt="<%= child.getTitle() %>" src="<%= child.getPath() %>.navimage.png">
    
  3. Guarde los cambios.

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

  5. En el Crear archivo como Nombre, tipo navimage.png.java.

    La extensión de nombre de archivo .java indica a Sling que el soporte Java de scripts de Apache Sling debe usarse para compilar el script y crear un servlet.

  6. Copie el siguiente código 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 utiliza 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.
    code language-java
    package apps.mywebsite.components.contentpage;
    
    import java.awt.Color;
    import java.awt.Paint;
    import java.awt.geom.Rectangle2D;
    
    import java.io.IOException;
    import javax.jcr.RepositoryException;
    
    import com.day.cq.wcm.api.Page;
    import com.day.cq.wcm.api.PageManager;
    import com.day.cq.wcm.api.components.Component;
    import com.day.cq.wcm.api.designer.Designer;
    
    import com.day.cq.commons.SlingRepositoryException;
    import com.day.cq.wcm.commons.WCMUtils;
    import com.day.cq.wcm.commons.AbstractImageServlet;
    import com.day.cq.commons.ImageHelper;
    
    import com.day.image.Font;
    import com.day.image.Layer;
    
    import org.apache.sling.api.SlingHttpServletRequest;
    import org.apache.sling.api.SlingHttpServletResponse;
    import org.apache.sling.api.resource.Resource;
    import org.apache.sling.api.servlets.SlingSafeMethodsServlet;
    
    /**
      * Renders the navigation image
      */
    public class navimage_png extends AbstractImageServlet {
    
          protected Layer createLayer(ImageContext ctx)
                 throws RepositoryException, IOException {
             PageManager pageManager = ctx.resolver.adaptTo(PageManager.class);
             Page currentPage = pageManager.getContainingPage(ctx.resource);
    
             /* constants for image appearance */
             int scale = 6;
             int paddingX = 24;
             int paddingY = 24;
             Color bgColor = new Color(0x004a565c, true);
    
             /* obtain the page title */
             String title = currentPage.getTitle();
             if (title == null) {
                 title = currentPage.getName();
             }
    
             /* format the title text */
             title = title.toUpperCase();
             Paint titleColor = Color.WHITE;
             Font titleFont = new Font("Myriad Pro", 10 * scale, Font.BOLD);
             int titleBase = 10 * scale;
    
             /* obtain and format the page subtitle */
             String subtitle = currentPage.getProperties().get("subtitle", "");
             Paint subtitleColor = new Color(0xffa9afb1, true);
             Font subTitleFont = new Font("Tahoma", 7);
             int subTitleBase = 20;
    
             /* create a layer that contains the background image from the mywebsite design */
             Designer dg = ctx.resolver.adaptTo(Designer.class);
             String imgPath = new String(dg.getDesignPath(currentPage)+"/images/navimage_bg.jpg");
             Layer bg = ImageHelper.createLayer(ctx.resolver.resolve(imgPath));
    
             /* draw the title text (4 times bigger) */
             Rectangle2D titleExtent = titleFont.getTextExtent(0, 0, 0, 0, title, Font.ALIGN_LEFT, 0, 0);
             Rectangle2D subtitleExtent = subTitleFont.getTextExtent(0, 0, 0, 0, subtitle, Font.ALIGN_LEFT, 0, 0);
    
             /* ensure subtitleExtent is wide enough */
             if ( subtitle.length() > 0 ) {
                 int titleWidth = (int)titleExtent.getWidth() / scale;
                 if ( subtitleExtent.getWidth() > titleWidth && subtitleExtent.getWidth() + 2 * paddingX >
     bg.getWidth() ) {
                     int charWidth = (int)subtitleExtent.getWidth() / subtitle.length();
                     int maxWidth = (bg.getWidth() > titleWidth + 2  * paddingX ? bg.getWidth() - 2 * paddingX : titleWidth);
                     int len = (maxWidth - ( 2 * charWidth) ) / charWidth;
                     subtitle = subtitle.substring(0, len) + "...";
                     subtitleExtent = subTitleFont.getTextExtent(0, 0, 0, 0, subtitle, Font.ALIGN_LEFT, 0, 0);
                 }
             }
             int width = Math.max((int) titleExtent.getWidth(), (int) subtitleExtent.getWidth());
            /* create the text layer */
             Layer text = new Layer(width, (int) titleExtent.getHeight() + 40, new Color(0x01ffffff, true));
             text.setPaint(titleColor);
             text.drawText(0, titleBase, 0, 0, title, titleFont, Font.ALIGN_LEFT | Font.ALIGN_BASE, 0, 0);
             text.resize(text.getWidth() / scale, text.getHeight() / scale);
             text.setX(0);
             text.setY(0);
    
             if (subtitle.length() > 0) {
                 /* draw the subtitle normal sized */
                 text.setPaint(subtitleColor);
                 text.drawText(0, subTitleBase, 0, 0, subtitle, subTitleFont, Font.ALIGN_LEFT | Font.ALIGN_BASE, 0, 0);
             }
    
             /* merge the image and text layers */
             text.setY(paddingY);
             text.setX(paddingX);
             text.setBackgroundColor(bgColor);
    
             int bgWidth = bg.getWidth();
             if ( text.getWidth() + 2 * paddingX > bgWidth ) {
                 bgWidth = text.getWidth() + 2 * paddingX;
                 bg.resize(bgWidth, bg.getHeight());
             }
             bg.merge(text);
    
             return bg;
         }
     }
    
  7. Guarde los cambios.

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

    screen_shot_2012-03-07at10047pm

Creación del componente Lista de elementos secundarios creating-the-list-children-component

Cree el componente listchildren que genera una lista de vínculos de página que incluyen el título, la descripción y la fecha de las páginas (por ejemplo, páginas de producto). Los vínculos se dirigen a las páginas secundarias de la página actual o a una página raíz que se especifica en el cuadro de diálogo del componente.

chlimage_1-116

Creación de páginas de producto creating-product-pages

Cree dos páginas debajo de la variable Productos página. Para cada página, que describe dos productos específicos, se establece un título, una descripción y una fecha.

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

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

    • Título: Producto 1.
    • Nombre: product1.
    • Select Plantilla de página de contenido de Mi sitio web
  3. Cree otra página debajo de Productos con los siguientes valores de propiedad:

    • Título: Product 2
    • Nombre: product2
    • Select Plantilla de página de contenido de Mi sitio web
  4. En CRXDE Lite, establezca una descripción y una fecha para la página Product 1:

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

    2. En el Propiedades , introduzca los siguientes valores:

      • Nombre: jcr:description
      • Tipo: String
      • Valor: This is a description of the Product 1!.
    3. Haga clic en Agregar.

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

      • Nombre: date
      • Tipo: Cadena
      • Valor: 14/2/2008
      • Haga clic en Agregar.
    5. Haga clic en Guardar todo.

  5. En CRXDE Lite, establezca una descripción y una fecha para la página Product 2:

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

    2. En el Propiedades , introduzca 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/5/2012
      • Haga clic en Agregar.
    5. Haga clic en Guardar todo.

Creación del componente Lista de elementos secundarios creating-the-list-children-component-1

Para crear el componente listchildren:

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

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

    • Etiqueta: listchildren.
    • Título: Componente Mis Listchildren .
    • Descripción: Este es mi componente Listchildren.
  3. Siga haciendo clic en Siguiente hasta que Niños permitidos y haga clic en OK.

Creación del script de elementos secundarios de lista creating-the-list-children-script

Desarrolle la secuencia de comandos para el componente listchildren.

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

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

    code language-xml
    <%@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><%
             }
         }
     %>
    
  3. Guarde los cambios.

Creación del cuadro de diálogo Lista de elementos secundarios creating-the-list-children-dialog

Cree el cuadro de diálogo que se utiliza para configurar las propiedades del componente listchildren.

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

    1. En el CRXDE Lite, haga clic con el botón derecho en el /apps/mywebsite/components/listchildrennodo y 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 OK.

    screen_shot_2012-03-07at45818pm

    Con las siguientes propiedades:

    screen_shot_2012-03-07at50415pm

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

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

    chlimage_1-117

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

    • Nombre: items
    • Tipo: cq:WidgetCollection

    screen_shot_2012-03-07at51018pm

  5. Cree un nodo debajo del nodo elementos utilizando los siguientes valores de propiedad:

    • Nombre: listroot
    • Tipo: cq:Widget

    screen_shot_2012-03-07at51031pm

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

    table 0-row-3 1-row-3 2-row-3 3-row-3
    Nombre Tipo Valor
    fieldLabel Cadena Ruta de raíz de lista
    name Cadena ./listroot
    xtype Cadena textfield

    screen_shot_2012-03-07at51433pm

Incluir elementos secundarios de lista en el componente de página de contenido including-list-children-in-the-contentpage-component

Para incluir el componente listchildren en el componente contentpage, siga este procedimiento:

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

    code language-xml
    <div>newslist</div>
    
  2. Reemplace ese código por el siguiente código:

    code language-xml
    <cq:include path="newslist" resourceType="mywebsite/components/listchildren" />
    
  3. Guarde los cambios.

Visualización de elementos secundarios de una lista en una página viewing-list-children-in-a-page

Para ver el funcionamiento completo de este componente, puede ver la página Productos :

  • cuando la página principal ("Ruta de la raíz de la lista") no está definida.
  • cuando se define la página principal ("Ruta de la raíz de la lista").
  1. En el explorador, vuelva a cargar la variable Productos página. El componente listchildren aparece de la siguiente manera:

    chlimage_1-118

  2. chlimage_1-119

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

    chlimage_1-120

Creación del componente de logotipo creating-the-logo-component

Cree un componente que muestre el logotipo de la empresa y proporcione un vínculo a la página principal del sitio. El componente contiene un cuadro de diálogo en modo de diseño para que los valores de las propiedades se almacenen en el diseño del sitio (https://experienceleague.adobe.com/etc/designs/mywebsite?lang=es):

  • Los valores de propiedad se aplican a todas las instancias del componente que se agregan a las páginas que utilizan el diseño.
  • Las propiedades se pueden configurar utilizando cualquier instancia del componente que se encuentre en una página que utilice el diseño.

El cuadro de diálogo del modo de diseño contiene propiedades para configurar la imagen y la ruta del vínculo. El componente logotipo se colocará en la parte superior izquierda de todas las páginas del sitio web.

Tendrá el siguiente aspecto:

chlimage_1-121

NOTE
Adobe Experience Manager proporciona un componente de logotipo con más funciones ( /libs/foundation/components/logo).

Creación del nodo de componente de logotipo creating-the-logo-component-node

Para crear el componente del logotipo, siga los pasos:

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

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

    • Etiqueta: logo.
    • Título: My Logo Component.
    • Descripción: This is My Logo Component.
  3. Haga clic en Siguiente hasta que llegue al panel final del cuadro de diálogo y, a continuación, haga clic en OK.

Creación del script de logotipo creating-the-logo-script

En esta sección se describe cómo crear la secuencia de comandos para mostrar la imagen del logotipo con un vínculo a la página principal.

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

  2. 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 a logo.jsp:

    code language-xml
    <%@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>
    
  3. Guarde los cambios.

Creación del cuadro de diálogo Diseño del logotipo creating-the-logo-design-dialog

Cree el cuadro de diálogo para configurar el componente del logotipo en el modo Diseño . Los nodos de diálogo del modo de diseño deben tener un nombre design_dialog.

  1. Cree el nodo de diálogo en el componente logotipo:

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

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

      • Etiqueta design_dialog
      • Título Logo (Design)
  2. Haga clic con el botón derecho en el nodo tab1 de la rama design_dialog y haga clic en Delete. Haga clic en Guardar todo.

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

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3
    Nombre Tipo Valor
    fileNameParameter Cadena ./imageName
    fileReferenceParameter Cadena ./imageReference
    name Cadena ./image
    título Cadena Imagen
    xtype Cadena html5smartimage

    chlimage_1-122

Creación del script de renderización del logotipo creating-the-logo-render-script

Cree la secuencia de comandos que recupere la imagen del logotipo y la escriba en la página.

  1. Haga clic con el botón derecho del ratón en el nodo de componente del logotipo y haga clic en Crear > Crear archivo para crear el archivo de script llamado img.GET.java.
  2. Abra el archivo , copie el siguiente código en el archivo y, a continuación, haga clic en Guardar todo:
package apps.mywebsite.components.logo;

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

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

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

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

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

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

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

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

        resp.flushBuffer();
    }
}

Adición del componente de logotipo al componente de página de contenido adding-the-logo-component-to-the-contentpage-component

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

    code language-xml
    <div>logo</div>
    
  2. Reemplace ese código con la siguiente línea de código:

    code language-xml
    <cq:include path="logo" resourceType="mywebsite/components/logo" />
    
  3. Guarde los cambios.

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

    chlimage_1-123

Configuración de la imagen de logotipo en una página setting-the-logo-image-in-a-page

En esta sección se describe cómo establecer una imagen como logotipo mediante el cuadro de diálogo de modo de diseño.

  1. Con la variable Productos abra una página en el explorador y haga clic en la Diseño en la parte inferior de la barra de tareas para entrar Diseño en el menú contextual.

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

  3. En el cuadro de diálogo, haga clic en en el panel de la Imagen , busque logo.png imagen extraída del mywebsite.zip y haga clic en OK.

    chlimage_1-124

  4. Haga clic en el triángulo de la barra de título de la barra de tareas para volver a Editar en el menú contextual.

    Chlimage_1-7

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

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

Inclusión del componente de ruta de exploración including-the-breadcrumb-component

En esta sección, se incluye el componente ruta de exploración (ruta), que es uno de los componentes de base.

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

    code language-java
    <div>trail</div>
    

    a:

    code language-xml
    <cq:include path="trail" resourceType="foundation/components/breadcrumb" />
    
  2. Guarde los cambios.

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

    chlimage_1-125

Inclusión del componente Título including-the-title-component

En esta sección, se incluye el componente de título, que es uno de los componentes de base.

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

    code language-xml
    <div>title</div>
    

    a:

    code language-xml
    <cq:include path="title" resourceType="foundation/components/title" />
    
  2. Guarde los cambios.

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

    chlimage_1-126

NOTE
Puede establecer un título diferente y el tipo o tamaño en Editar en el menú contextual.

Inclusión del componente de sistema de párrafos including-the-paragraph-system-component

El sistema de párrafos (parsys) es una parte importante de un sitio web, ya que gestiona una lista de párrafos. Permite a los autores agregar componentes de párrafo a la página y proporciona estructura.

Añada el componente parsys (uno de los componentes de base) al componente de la página de contenido.

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

    code language-xml
    <div>parsys</div>
    
  2. Reemplace esa línea de código con el siguiente código y, a continuación, guarde los cambios:

    code language-xml
    <cq:include path="par" resourceType="foundation/components/parsys" />
    
  3. En el explorador, actualice la variable Productos página. Ahora tiene el componente parsys, que se ve de la siguiente manera:

    chlimage_1-127

Creación del componente de imagen creating-the-image-component

Cree un componente que muestre una imagen en el sistema de párrafos. Para ahorrar tiempo, el componente de imagen se crea como una copia del componente del logotipo con algunos cambios de propiedad.

NOTE
Adobe Experience Manager proporciona un componente de imagen con más funciones ( /libs/foundation/components/image).

Creación del componente de imagen creating-the-image-component-1

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

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

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

  4. Seleccione el image y cambie los siguientes valores de propiedad:

    • jcr:title: Mi componente de imagen.
    • jcr:description: Este es mi componente de imagen.
  5. Agregue una propiedad a image con los siguientes valores de propiedad:

    • Nombre: componentGroup
    • Tipo: Cadena
    • Valor: MyWebsite
  6. Debajo de image nodo, cambie el nombre del design_dialog nodo a dialog.

  7. Cambiar nombre logo.jsp a image.jsp.

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

chlimage_1-128

Creación del script de imagen creating-the-image-script

En esta sección se describe cómo crear la secuencia de comandos de imagen.

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

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

    code language-xml
    <%@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); %>
    
  3. Guarde los cambios.

Creación del nodo Image cq:editConfig creating-the-image-cq-editconfig-node

La variable cq:editConfig el tipo de nodo permite configurar ciertos comportamientos de los componentes al editar sus propiedades.

En esta sección, se utiliza un nodo cq:editConfig para permitirle arrastrar recursos del Buscador de contenido a su componente de imagen.

  1. En CRXDE Lite, bajo el nodo /apps/mywebsite/components/image, cree un nuevo nodo de la siguiente manera:

    • Nombre: cq:editConfig.
    • Tipo: cq:EditConfig.
  2. En el nodo cq:editConfig, cree un nuevo nodo de la siguiente manera:

    • Nombre: cq:dropTargets.
    • Tipo: cq:DropTargetConfig
  3. Bajo el nodo cq:dropTargets, cree un nuevo nodo de la siguiente manera:

    • Nombre: imagen.
    • Tipo: nt:unstructured.
  4. En CRXDE, defina las propiedades como se indica a continuación:

Nombre
Tipo
Valor
aceptar
Cadena
image/(gif
grupos
Cadena
medios
propertyName
Cadena
./imageReference

chlimage_1-129

Adición del icono adding-the-icon

En esta sección, agregue el icono para que aparezca junto al componente de imagen cuando aparezca en la barra de tareas:

  1. En el CRXDE Lite, haga clic con el botón derecho en el archivo /libs/foundation/components/image/icon.png y seleccione Copiar.
  2. Haga clic con el botón derecho en el nodo /apps/mywebsite/components/image y haga clic en Pegar y haga clic en Guardar todo.

Uso del componente de imagen using-the-image-component

En esta sección, verá la Productos y añada el componente de imagen al sistema de párrafos.

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

  2. En la barra de tareas, haga clic en la Modo de diseño icono.

  3. Haga clic en el Editar para editar el cuadro de diálogo de diseño de par.

  4. En el cuadro de diálogo, una lista de Componentes permitidos se muestra; vaya a MyWebsite, seleccione Componente Mi imagen y haga clic en OK.

  5. Volver a Modo de edición.

  6. Haga doble clic en el marco parsys (en Arrastrar componentes o recursos aquí). La variable Insertar nuevo componente y Barra de tareas los selectores tienen el siguiente aspecto:

    Chlimage_1-8

Inclusión del componente de barra de herramientas including-the-toolbar-component

En esta sección, se incluye el componente de la barra de herramientas, que es uno de los componentes de base.

Tiene varias opciones, tanto en el modo de edición como en el de diseño.

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

    code language-java
    <div class="toolbar">toolbar</div>
    
  2. Reemplace ese código por el siguiente código y, a continuación, guarde los cambios.

    code language-java
    <cq:include path="toolbar" resourceType="foundation/components/toolbar"/>
    
  3. En el árbol de carpetas de la página AEM Sitios web, seleccione Websites/My Website/Englishy haga clic en Nuevo > Nueva página. Especifique los siguientes valores de propiedad y haga clic en Crear:

    • Título: Barra de herramientas
    • Select Plantilla de página de contenido de Mi sitio web
  4. En la lista de páginas, haga clic con el botón derecho en la variable Barra de herramientas página y haga clic en Propiedades. Select Ocultar en navegación y haga clic en OK.

    La variable Ocultar en navegación evita que la página aparezca en los componentes de navegación, como topnav y listchildren.

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

    • Contactos
    • Comentarios
    • Inicio de sesión
    • Búsqueda
  6. En el explorador, vuelva a cargar la variable Productos página. Tiene el siguiente aspecto:

    chlimage_1-130

Creación del componente de búsqueda creating-the-search-component

En esta sección, se crea el componente para buscar contenido en el sitio web. Este componente de búsqueda se puede colocar en el sistema de párrafos de cualquier página (por ejemplo, en una página de resultados de búsqueda especializada).

El cuadro de entrada de búsqueda tendrá el siguiente aspecto en la sección Inglés página:

chlimage_1-131

Creación del componente de búsqueda creating-the-search-component-1

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

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

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

      • Etiqueta: búsqueda
      • Título: Mi componente de búsqueda
      • Descripción: Este es mi componente de búsqueda
      • Grupo: MyWebsite
    2. Haga clic en Siguiente y haga clic en Siguiente de nuevo.

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

    4. Haga clic en Siguiente y haga clic en OK.

  3. Haga clic en Guardar todo.

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

    • /libs/foundation/components/search/dialog
    • `` /libs/foundation/components/search/i18n
    • /libs/foundation/components/search/icon.png
  5. Haga clic en Guardar todo.

Creación del script de búsqueda creating-the-search-script

En esta sección se describe cómo crear la secuencia de comandos de búsqueda:

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

  2. Copie el siguiente código a search.jsp:

    code language-java
    <%@ 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>
    
  3. Guarde los cambios.

Inclusión de un cuadro de búsqueda en el componente Contentpage including-a-search-box-in-the-contentpage-component

Para incluir un cuadro de entrada de búsqueda en la sección izquierda de la página de contenido, siga este procedimiento:

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

    code language-xml
    %><div class="left">
    
  2. Inserte el siguiente código before esa línea:

    code language-java
    %><%@ page import="com.day.text.Text"%><%
    %><% String docroot = currentDesign.getPath();
    String home = Text.getAbsoluteParent(currentPage.getPath(), 2);%><%
    
  3. Busque la línea de código siguiente:

    code language-xml
    <div>search</div>
    
  4. Reemplace ese código por el siguiente código y, a continuación, guarde los cambios.

    code language-java
    <div class="form_1">
         <form class="geo" action="<%= home %>/toolbar/search.html" id="form" >
              <p>
                   <input class="geo" type="text" name="q"><br>
                   <a href="<%= home %>/toolbar/search.html" class="link_1">advanced search</a>
              </p>
         </form>
    </div>
    
  5. En el explorador, vuelva a cargar la variable Productos página. El componente de búsqueda tiene el siguiente aspecto:

    chlimage_1-132

Inclusión del componente de búsqueda en la página de búsqueda including-the-search-component-in-the-search-page

En esta sección, agregue el componente de búsqueda al sistema de párrafos.

  1. En el navegador, abra la Buscar página.

  2. En la barra de tareas, haga clic en la Diseño icono de modo.

  3. En el bloque Diseño de par (debajo del título de búsqueda), haga clic en Editar.

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

  5. En la barra de tareas, haga clic en el triángulo para volver a Editar en el menú contextual.

  6. Arrastre el Mi búsqueda desde la barra de tareas hasta el marco parsys. Tiene el siguiente aspecto:

    chlimage_1-133

  7. Vaya a la Productos página. Busque clientes en el cuadro de entrada y pulse Entrar. Se le redirige a la función Buscar página. Cambie a Vista previa modo: la salida tiene un formato similar al siguiente:

    chlimage_1-134

Inclusión del componente Iparsys including-the-iparsys-component

En esta sección, se incluye el componente Sistema de párrafos de herencia (iparsys), que es uno de los componentes de base. Este componente permite crear una estructura de párrafos en una página principal y hacer que las páginas secundarias hereden los párrafos.

Para este componente, puede definir varios parámetros tanto en el modo de edición como en el de diseño.

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

    code language-java
    <div>iparsys</div>
    

    a:

    code language-java
    <cq:include path="rightpar" resourceType="foundation/components/iparsys" />
    
  2. Guarde los cambios.

  3. En el explorador, vuelva a cargar la variable Productos página. La página completa tiene el siguiente aspecto:

    Chlimage_1-9

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e