Criar um site completo (JSP) create-a-fully-featured-website-jsp

Instale o AEM.

CRXDE Lite de acesso (o ambiente de desenvolvimento).

Configure a estrutura do projeto no CRXDE Lite.

Crie o modelo, o componente e os scripts usados como base para a criação de páginas de conteúdo.

Crie a página raiz para o seu site e, em seguida, as páginas de conteúdo.

Crie os seguintes componentes para usar em suas páginas:

• Navegação superior
• Listar secundários
• Logotipo
• Imagem
• Texto-imagem
• Pesquisar

Incluir vários componentes de base.

Na árvore no lado esquerdo do CRXDE Lite, clique com o botão direito do mouse na pasta /apps e clique em Criar > Criar Pasta. Na caixa de diálogo Criar Pasta, digite mywebsite como o nome da pasta e clique em OK.

Clique com o botão direito do mouse na pasta /apps/mywebsite e clique em Criar > Criar Pasta. Na caixa de diálogo Criar Pasta, digite components como o nome da pasta e clique em OK.

Clique com o botão direito do mouse na pasta /apps/mywebsite e clique em Criar > Criar Pasta. Na caixa de diálogo Criar Pasta, digite templates como o nome da pasta e clique em OK.

A estrutura da árvore agora deve ser semelhante a esta:

Clique em Salvar tudo.

Na página de boas-vindas do AEM, clique em Ferramentas. (https://localhost:4502/libs/cq/core/content/welcome.html)

Na árvore de pastas, selecione a pasta Designs e clique em Nova > Nova Página. Digite mywebsite como título e clique em Criar.

Se o item mywebsite não aparecer na tabela, atualize a árvore ou a tabela.

Usando o acesso WebDAV à URL em https://localhost:4502, copie o arquivo de amostra static.css e a pasta images do arquivo mywebsite.zip baixado na pasta /etc/designs/mywebsite.

Na árvore de pastas do CRXDE Lite, clique com o botão direito do mouse em /apps/mywebsite/templates e clique em Criar > Criar modelo.

Na caixa de diálogo Criar Modelo, digite os seguintes valores e clique em Avançar:

• Rótulo: contentpage
• Título: Modelo da Página de Conteúdo do Meu Site
• Descrição: este é meu Modelo de Página de Conteúdo de Site
• Tipo de Recurso: mywebsite/components/contentpage

Use o valor padrão para a propriedade Ranking.

O tipo de recurso identifica o componente que renderiza a página. Nesse caso, todas as páginas criadas usando o modelo contentpage são renderizadas pelo componente mywebsite/components/contentpage.

Para especificar os caminhos das páginas que podem usar esse modelo, clique no botão de adição e digite /content(/.*)? na caixa de texto exibida. Em seguida, clique em Avançar.

O valor da propriedade de caminho permitida é uma expressão regular . As páginas com um caminho correspondente à expressão podem usar o modelo. Nesse caso, a expressão regular corresponde ao caminho da pasta /conteúdo e de todas as subpáginas.

Quando um autor cria uma página abaixo de /content, o modelo contentpage aparece em uma lista de modelos disponíveis para uso.

Clique em Avançar nos painéis Pais permitidos e Filhos permitidos e clique em OK. No CRXDE Lite, clique em Salvar tudo.

No CRXDE Lite, clique com o botão direito do mouse em /apps/mywebsite/components e clique em Criar > Componente.

Na caixa de diálogo Criar Componente, digite os seguintes valores de propriedade:

• Rótulo: contentpage
• Título: Componente da Página de Conteúdo do Meu Site
• Descrição: este é o Componente da Página de Conteúdo do Meu Site

O local do novo componente é /apps/mywebsite/components/contentpage. Esse caminho corresponde ao tipo de recurso do modelo contentpage (menos a parte /apps/ inicial do caminho).

Essa correspondência conecta o modelo ao componente e é essencial para o funcionamento correto do site.

Clique em Avançar até que o painel Filhos permitidos da caixa de diálogo seja exibido e clique em OK. No CRXDE Lite, clique em Salvar tudo.

A estrutura agora se parece com o seguinte:

No CRXDE Lite, abra o arquivo contentpage.jsp em /apps/mywebsite/components/contentpage. O arquivo contém o seguinte código por padrão:

<%--

  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 o código a seguir e cole-o em contentpage.jsp após o código padrão:

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

Clique em Salvar tudo para salvar as alterações.

Na página de Boas-vindas do AEM (https://localhost:4502/libs/cq/core/content/welcome.html), clique em Sites.

Na árvore de pastas, selecione a pasta Sites e clique em Nova > Nova Página.

Na janela Criar página, digite o seguinte:

• Título: My Website
• Nome: mywebsite
• Selecione o My Website Content Page Template

Clique em Criar. Na árvore de pastas, selecione a página /Sites/Meu Site e clique em Nova > Nova Página.

Na caixa de diálogo Criar página, digite os seguintes valores de propriedade e clique em Criar:

• Título: inglês
• Nome: en
• Selecionar o Modelo da Página de Conteúdo do Meu Site

Na árvore de pastas, selecione a página /Sites/Meu Site/Inglês e clique em Nova> Nova Página.

Na caixa de diálogo Criar página, insira os seguintes valores de propriedade e clique em Criar:

• Título: Produtos
• Selecionar o Modelo da Página de Conteúdo do Meu Site

Na árvore de pastas, selecione a página /Sites/Meu Site/Inglês e clique em Nova > Nova Página.

Na caixa de diálogo Criar página, insira os seguintes valores de propriedade e clique em Criar:

• Título: Serviços
• Selecionar o Modelo da Página de Conteúdo do Meu Site

Na árvore de pastas, selecione a página /Sites/Meu Site/Inglês e clique em Nova > Nova Página.

Na caixa de diálogo Criar página, insira os seguintes valores de propriedade e clique em Criar:

• Título: Clientes
• Selecionar o Modelo da Página de Conteúdo do Meu Site

Sua estrutura tem a seguinte aparência:

Para vincular suas páginas ao design do mywebsite, no CRXDE Lite, selecione o nó /content/mywebsite/en/jcr:content. Na guia Propriedades, digite os seguintes valores para uma nova propriedade e clique em Adicionar:

• Nome: cq:designPath
• Tipo: String
• Valor: /etc/designs/mywebsite

Em uma nova guia ou janela do navegador da Web, abra https://localhost:4502/content/mywebsite/en/products.html para ver a página Produtos:

No CRXDE Lite, adicione uma propriedade ao nó /apps/mywebsite/components/contentpage.

1. Selecione o nó /apps/mywebsite/components/contentpage.

2. Na parte inferior da guia Propriedades, digite os seguintes valores de propriedade e clique em Adicionar:

   • Nome: sling:resourceSuperType
   • Tipo: Cadeia de Caracteres
   • Valor: foundation/components/page

3. Clique em Salvar tudo.

Abra o arquivo contentpage.jsp em /apps/mywebsite/components/contentpage e substitua o código existente pelo seguinte 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>

Salve as alterações.

No navegador, recarregue a página Produtos. Ela tem a seguinte aparência:

Abra a fonte de página para ver os elementos JavaScript e HTML gerados pelos scripts head.jsp e body.jsp. O trecho de script a seguir abre o Sidekick quando você abre a página:

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

No CRXDE Lite, crie o arquivo left.jsp em /apps/mywebsite/components/contentpage:

1. Clique com o botão direito do mouse no nó /apps/mywebsite/components/contentpage e selecione Criar ​ depois Criar arquivo.

2. Na janela, digite left.jsp como o Nome e clique em OK.

Edite o arquivo left.jsp para remover o conteúdo existente e substituir pelo seguinte código:

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

Salve as alterações.

No CRXDE Lite, crie o arquivo center.jsp em /apps/mywebsite/components/contentpage:

1. Clique com o botão direito do mouse no nó /apps/mywebsite/components/contentpage, selecione Criar e Criar arquivo.

2. Na caixa de diálogo, digite center.jsp como Nome e clique em OK.

Edite o arquivo center.jsp para remover o conteúdo existente e substituí-lo pelo seguinte código:

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

Salve as alterações.

No CRXDE Lite, crie o arquivo right.jsp em /apps/mywebsite/components/contentpage:

1. Clique com o botão direito do mouse no nó /apps/mywebsite/components/contentpage, selecione Criar e Criar arquivo.

2. Na caixa de diálogo, digite right.jsp como Nome e clique em OK.

Edite o arquivo right.jsp para remover o conteúdo existente e substituir pelo seguinte código:

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

Salve as alterações.

No CRXDE Lite, crie o arquivo body.jsp em /apps/mywebsite/components/contentpage:

Edite o arquivo body.jsp para remover o conteúdo existente e substituir pelo seguinte 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>

Salve as alterações.

No navegador, recarregue a página Produtos. Ela tem a seguinte aparência:

No CRXDE Lite, clique com o botão direito do mouse em /apps/mywebsite/components, selecione Criar e Criar Componente.

Na janela Criar Componente, digite o seguinte:

• Rótulo: topnav

• Título: My Top Navigation Component

• Descrição: This is My Top Navigation Component

Clique em Avançar até chegar à última janela onde você clique em OK. Salve as alterações.

No CRXDE Lite, abra o arquivo topnav.jsp em /apps/mywebsite/components/topnav.

Substitua o código que está lá copiando e colando o seguinte código:

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

No CRXDE Lite, abra body.jsp em /apps/mywebsite/components/contentpage e substitua:

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

com:

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

Salve as alterações.

No navegador, recarregue a página Produtos. A navegação superior é exibida da seguinte maneira:

No navegador, abra a página Produtos.

Na guia Sidekick Página, clique em Propriedades da página.

Na guia Básico da caixa de diálogo, expanda Mais Títulos e Descrição e, para a propriedade Subtítulo, digite o que fazemos. Clique em OK.

Repita as etapas anteriores para adicionar o subtítulo sobre nossos serviços à página Serviços.

Repita as etapas anteriores para adicionar o subtítulo a confiança que recebemos à página Clientes.

Dica: No CRXDE Lite, selecione o nó /content/mywebsite/en/products/jcr:content para ver se a propriedade de subtítulo foi adicionada.

O Sling determina o caminho do recurso a ser /content/mwebysite/en/products.png.

O Sling corresponde este caminho com o nó /content/mywebsite/en/products.

O Sling determina que sling:resourceType deste nó seja mywebsite/components/contentpage.

O Sling encontra o script neste componente que melhor corresponde ao seletor de URL ( navimage) e à extensão de nome de arquivo ( png).

No CRXDE Lite, abra o topnav.jsp em /apps/mywebsite/components/topnav.Localize o conteúdo do elemento âncora (linha 14):

<%=child.getTitle() %>

Substitua o conteúdo de âncora pelo seguinte código:

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

Salve as alterações.

Clique com o botão direito do mouse no nó /apps/mywebsite/components/contentpage e clique em Criar > Criar arquivo.

Na janela Criar Arquivo, como Nome, digite navimage.png.java.

A extensão de nome de arquivo .java indica ao Sling que o suporte ao Apache Sling Scripting Java™ deve ser usado para compilar o script e criar um servlet.

Copie o código a seguir em navimage.png.java.O código estende a classe AbstractImageServlet:

• AbstractImageServlet cria um objeto ImageContext que armazena as propriedades do recurso atual.
• A página principal do recurso é extraída do objeto ImageContext. O título da página e o subtítulo são obtidos.
• O ImageHelper é usado para gerar a imagem do arquivo navimage_bg.jpg do design do site, do título da página e do subtítulo da 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;
     }
 }

Salve as alterações.

No navegador, recarregue a página Produtos. A navegação superior agora é exibida da seguinte maneira:

Na árvore de pastas da página Sites, selecione o item Sites/Meu site/Inglês/Produtos e clique em Novo > Nova página.

Na caixa de diálogo, insira os seguintes valores de propriedade e clique em Criar:

• Título: Produto 1.
• Nome: product1.
• Selecionar Modelo de Página de Conteúdo do Meu Site

Crie outra página abaixo de Produtos usando os seguintes valores de propriedade:

• Título: Produto 2
• Nome: product2
• Selecionar Modelo de Página de Conteúdo do Meu Site

No CRXDE Lite, defina uma descrição e uma data para a página Produto 1:

1. Selecione o nó /content/mywebsite/en/products/product1/jcr:content.

2. Na guia Propriedades, insira os seguintes valores:

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

3. Clique em Adicionar.

4. Na guia Propriedades, crie outra propriedade usando os seguintes valores:

   • Nome: data
   • Tipo: String
   • Valor: 14/02/2008
   • Clique em Adicionar.

5. Clique em Salvar tudo.

No CRXDE Lite, defina uma descrição e uma data para a página Produto 2:

1. Selecione o nó /content/mywebsite/en/products/product2/jcr:content.

2. Na guia Propriedades, insira os seguintes valores:

   • Nome: jcr:descrição
   • Tipo: String
   • Valor: esta é uma descrição do Produto 2!.

3. Clique em Adicionar.

4. Nas mesmas caixas de texto, substitua os valores anteriores pelos seguintes valores:

   • Nome: data
   • Tipo: String
   • Valor: 11/05/2012
   • Clique em Adicionar.

5. Clique em Salvar tudo.

No CRXDE Lite, clique com o botão direito do mouse em /apps/mywebsite/components, selecione Criar e Criar Componente.

Na caixa de diálogo, insira os seguintes valores de propriedade e clique em Próximo:

• Label: listchildren.
• Título: Componente Minhas listas e filhos.
• Descrição: Este é o Componente Minhas listas e filhos.

Continue a clicar em Avançar até que o painel Filhos permitidos seja exibido e, em seguida, clique em OK.

No CRXDE Lite, abra o arquivo listchildren.jsp em /apps/mywebsite/components/listchildren.

Substitua o código padrão pelo seguinte 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><%
         }
     }
 %>

Salve as alterações.

Crie o nó da caixa de diálogo sob o componente listchildren:

1. No CRXDE Lite, clique com o botão direito do mouse no nó /apps/mywebsite/components/listchildrene clique em Criar > Criar caixa de diálogo.

2. Na caixa de diálogo, insira os seguintes valores de propriedade e clique em OK

   • Rótulo: dialog

   • Título: Edit Component e clique em OK.

Com as seguintes propriedades:

Selecione o nó /apps/mywebsite/components/listchildren/dialog/items/items/tab1.

Na guia Propriedades, altere o valor da propriedade title para List Children

Selecione o nó tab1, clique em Criar > Criar nó, insira os seguintes valores de propriedade e clique em OK:

• Nome: itens
• Tipo: cq:WidgetCollection

Crie um nó abaixo do nó items usando os seguintes valores de propriedade:

• Nome: listroot
• Tipo: cq:Widget

Adicione propriedades para o nó listroot para configurá-lo como um campo de texto. Cada linha na tabela a seguir representa uma propriedade. Quando terminar, clique em Salvar tudo.

No CRXDE Lite, abra o arquivo left.jsp em /apps/mywebsite/components/contentpage e localize o seguinte código (linha 4):

<div>newslist</div>

Substitua esse código pelo seguinte código:

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

Salve as alterações.

No navegador, recarregue a página Produtos. O componente listchildren é exibido da seguinte maneira:

Como Caminho da raiz da lista, insira: /content/mywebsite/en. Clique em OK. O componente listchildren na sua página agora tem a seguinte aparência:

No CRXDE Lite, clique com o botão direito do mouse em /apps/mywebsite/components, selecione Criar e depois Criar componente.

Na caixa de diálogo Criar componente, insira os seguintes valores de propriedade e clique em Próximo:

• Etiqueta: logo.
• Título: My Logo Component.
• Descrição: This is My Logo Component.

Clique em Avançar até chegar ao painel final da caixa de diálogo e, em seguida, clique em OK.

No CRXDE Lite, abra o arquivo logo.jsp em /apps/mywebsite/components/logo.

O código a seguir cria o link para a página inicial do site e adiciona uma referência à imagem do logotipo. Copiar o código para 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>

Salve as alterações.

Crie o nó da caixa de diálogo sob o componente de logotipo:

1. Clique com o botão direito do mouse no nó /apps/mywebsite/components/logo e clique em Criar > Criar caixa de diálogo.

2. Digite os seguintes valores de propriedade e clique em OK:

   • Rótulo: design_dialog

   • Título: Logo (Design)

Clique com o botão direito do mouse no nó tab1 na ramificação design_dialog e clique em Excluir. Clique em Salvar tudo.

No nó design_dialog/items/items, crie um nó chamado img do tipo cq:Widget. Adicione as seguintes propriedades e clique em Salvar tudo:

No CRXDE Lite, abra left.jsp em /apps/mywebsite/components/contentpage file e localize a seguinte linha de código:

<div>logo</div>

Substitua esse código pela seguinte linha de código:

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

Salve as alterações.

No navegador, recarregue a página Produtos. O logotipo tem a seguinte aparência, embora atualmente mostre apenas o link subjacente:

Com a página Produtos aberta no navegador, clique no botão Design na parte inferior do Sidekick para entrar no modo de design.

Na barra Design do logotipo, clique em Editar para usar a caixa de diálogo para editar as configurações do componente de logotipo.

Na caixa de diálogo, clique no painel da guia Imagem, procure a imagem logo.png extraída do arquivo mywebsite.zip e clique em OK.

Clique no triângulo na barra de título do Sidekick para retornar ao modo de Edição.

No CRXDE Lite, vá para o seguinte nó para ver os valores de propriedade armazenados:

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

No CRXDE Lite, navegue até /apps/mywebsite/components/contentpage, abra o arquivo center.jsp e substitua:

<div>trail</div>

com:

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

Salve as alterações.

No navegador, recarregue a página Produtos 1. O componente de trilha tem a seguinte aparência:

No CRXDE Lite, navegue até /apps/mywebsite/components/contentpage, abra o arquivo center.jsp e substitua:

<div>title</div>

com:

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

Salve as alterações.

No navegador, recarregue a página Produtos. O componente de título tem a seguinte aparência:

Observação: você pode definir um Título diferente e o Tipo/Tamanho no modo de edição.

No CRXDE Lite, navegue até /apps/mywebsite/components/contentpage, abra o arquivo center.jsp e localize a seguinte linha de código:

<div>parsys</div>

Substitua essa linha de código pelo seguinte código e salve as alterações:

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

No navegador, atualize a página Produtos. Agora ele tem o componente parsys, que é visto da seguinte maneira:

Clique com o botão direito no nó /apps/mywebsite/components/logo e clique em Copiar.

Clique com o botão direito do mouse no nó /apps/mywebsite/components e clique em Colar.

Clique com o botão direito no nó Copy of logo, clique em Renomear, exclua o texto existente e digite image.

Selecione o nó do componente image e altere os seguintes valores de propriedade:

• jcr:title: Meu Componente de Imagem.
• jcr:description: Este é Meu Componente de Imagem.

Adicione uma propriedade ao nó image com os seguintes valores de propriedade:

• Nome: componentGroup
• Tipo: String
• Valor: MyWebsite

Abaixo do nó image, renomeie o nó design_dialog como dialog.

Renomear logo.jsp para image.jsp.

Abra img.GET.java e altere o pacote para apps.mywebsite.components.image.

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

Substitua o código existente pelo seguinte código e salve as alterações:

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

Salve as alterações.

No CRXDE Lite, no nó /apps/mywebsite/components/image, crie um nó da seguinte maneira:

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

No nó cq:editConfig, crie um nó da seguinte maneira:

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

No nó cq:dropTargets, crie um nó da seguinte maneira:

• Nome: imagem.
• Tipo: nt:não estruturado.

No CRXDE, defina as propriedades da seguinte maneira:

No navegador, recarregue a página Produtos.

No Sidekick, clique no ícone modo de design.

Clique no botão Editar para editar a caixa de diálogo de design do par.

Na caixa de diálogo, uma lista de Componentes Permitidos é exibida; navegue até MeuSite, selecione o Meu Componente de Imagem e clique em OK.

Retornar ao modo de edição .

Clique duas vezes no quadro parsys (em Arraste componentes ou ativos aqui). Os seletores Inserir novo componente e Sidekick têm a seguinte aparência:

No CRXDE Lite, navegue até /apps/mywebsite/components/contentpage, abra o arquivo body.jsp e localize o seguinte código:

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

Substitua esse código pelo código a seguir e salve as alterações.

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

Na árvore de pastas da página Sites do AEM, selecione Sites/Meu site/Inglês e clique em Novo > Nova página. Especifique os seguintes valores de propriedade e clique em Criar:

• Título: Barra de ferramentas
• Selecionar Modelo de Página de Conteúdo do Meu Site

Na lista de páginas, clique com o botão direito do mouse na página Barra de ferramentas e clique em Propriedades. Selecione Ocultar na navegação e clique em OK.

A opção Ocultar na navegação impede que a página apareça em componentes de navegação, como navegação superior e listchildren.

Na Barra de ferramentas, crie as seguintes páginas:

• Contatos
• Feedback
• Logon
• Pesquisar

No navegador, recarregue a página Produtos. Ela tem a seguinte aparência:

No CRXDE Lite, clique com o botão direito do mouse em /apps/mywebsite/components, selecione Criar e Criar Componente.

Use a caixa de diálogo para configurar o componente:

1. Em um primeiro painel, especifique os seguintes valores de propriedade:

   • Rótulo: pesquisa
   • Título: Meu componente de pesquisa
   • Descrição: Este é meu componente de pesquisa
   • Grupo: MeuSite

2. Clique em Avançar e, em seguida, clique em Avançar novamente.

3. No painel Pais permitidos, clique no botão + e digite */parsys.

4. Clique em Avançar e em OK.

Clique em Salvar tudo.

Copie os nós a seguir e cole-os no nó apps/mywebsite/components/search:

• /libs/foundation/components/search/dialog

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

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

Clique em Salvar tudo.

Abra o arquivo /apps/mywebsite/components/search/search.jsp.

Copiar o código a seguir para 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>

Salve as alterações.

No CRXDE Lite, abra o arquivo left.jsp em /apps/mywebsite/components/contentpage e localize o seguinte código (linha 2):

%><div class="left">

Insira o seguinte código antes dessa linha:

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

Localize a seguinte linha de código:

<div>search</div>

Substitua esse código pelo código a seguir e salve as alterações.

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

No navegador, recarregue a página Produtos. O componente de pesquisa tem a seguinte aparência:

No navegador, abra a página Pesquisar.

No Sidekick, clique no ícone do modo de design.

No bloco Design de par (abaixo do título Pesquisar), clique em Editar.

Na caixa de diálogo, role até o grupo Meus Sites, selecione Meu Componente de Pesquisa e clique em OK.

No Sidekick, clique no triângulo para retornar ao modo de edição.

Arraste o Meu componente de pesquisa do Sidekick para o quadro parsys. Ela tem a seguinte aparência:

Navegue até a página Produtos. Procure por clientes na caixa de entrada e pressione Enter. Você é redirecionado para a página Pesquisar. Alternar para modo de visualização: a saída está em um formato semelhante ao seguinte:

No CRXDE Lite, navegue até /apps/mywebsite/components/contentpage, abra o arquivo right.jsp e substitua:

<div>iparsys</div>

com:

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

Salve as alterações.

No navegador, recarregue a página ​ Produtos ​. A página inteira se parece com o seguinte: