Criar um site com recursos completos (JSP) create-a-fully-featured-website-jsp

Instalar AEM.

Acesse o CRXDE Lite (o ambiente de desenvolvimento).

Configure a estrutura do projeto no CRXDE Lite.

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

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

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

• Navegação superior
• Listar secundários
• Logotipo
• Imagem
• Imagem de texto
• Pesquisar

Inclua vários componentes fundamentais.

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

Clique com o botão direito do mouse no /apps/mywebsite e clique em Criar > Criar pasta. No Criar pasta diálogo, tipo components como o nome da pasta e clique em OK.

Clique com o botão direito do mouse no /apps/mywebsite e clique em Criar > Criar pasta. No Criar pasta diálogo, tipo templates como o nome da pasta e clique em OK.

A estrutura na árvore agora deve ser parecida com isto:

Clique em Salvar tudo.

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

Na árvore de pastas, selecione o Designs e clique em Novo > Nova página. Tipo mywebsite como título e clique em Criar.

Se o item do meu site não aparecer na tabela, atualize a árvore ou a tabela.

Usando o WebDAV acesse o URL em http://localhost:4502, copie a amostra static.css e images pasta do arquivo mysite.zip baixado na /etc/designs/mywebsite pasta.

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

Na caixa de diálogo Criar modelo, digite os seguintes valores e clique em Próximo:

• Rótulo: contentpage
• Título: Modelo de página de conteúdo do meu site
• Descrição: Este é meu modelo de página de conteúdo do site
• Tipo de recurso: mysite/components/contentpage

Use o valor padrão para a propriedade Classificação .

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

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 Próximo.

O valor da propriedade de caminho permitida é um expressão regular. As páginas que têm um caminho que corresponde à expressão podem usar o modelo . Nesse caso, a expressão regular corresponde ao caminho da variável /content e todas as subpáginas.

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

Clique em Próximo no Pais permitidos e Filhos permitidos painéis e clique em OK. No CRXDE Lite, clique em Salvar tudo.

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

No Criar componente digite os seguintes valores de propriedade:

• Rótulo: contentpage
• Título: Componente da página Conteúdo do meu site
• Descrição: Este é o Componente da Página Conteúdo do Meu Site

O local do novo componente é /apps/mywebsite/components/contentpage. Esse caminho corresponde ao tipo de recurso do modelo de página de conteúdo (menos o /apps/ parte do caminho).

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

Clique em Próximo até que o Filhos permitidos O painel da caixa de diálogo é exibido e, em seguida, clique em OK. No CRXDE Lite, clique em Salvar tudo.

A estrutura agora tem a seguinte aparência:

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 (http://localhost:4502/libs/cq/core/content/welcome.html), clique em Sites.

Na árvore de pastas, selecione o Sites e clique em Novo > Nova página.

No Criar página digite:

• Título: My Website
• Nome: mywebsite
• Selecione o Modelo de página de conteúdo do meu site

Clique em Criar. Na árvore de pastas, selecione o /Websites/My Website e clique em Novo > Nova página.

No Criar página , insira os seguintes valores de propriedade e clique em Criar:

• Título: Inglês
• Nome: en
• Selecione o Modelo de página de conteúdo do meu site

Na árvore de pastas, selecione o /Websites/My Website/English e clique em Novo > Nova página.

No Criar página , insira os seguintes valores de propriedade e clique em Criar:

• Título: Produtos
• Selecione o Modelo de página de conteúdo do meu site

Na árvore de pastas, selecione o /Websites/My Website/English e clique em Novo > Nova página.

No Criar página , insira os seguintes valores de propriedade e clique em Criar:

• Título: Serviços
• Selecione o Modelo de página de conteúdo do meu site

Na árvore de pastas, selecione o /Websites/My Website/English e clique em Novo > Nova página.

No Criar página , insira os seguintes valores de propriedade e clique em Criar:

• Título: Clientes
• Selecione o Modelo de página de conteúdo do meu site

Sua estrutura tem a seguinte aparência:

Para vincular suas páginas ao design do mysite, no CRXDE Lite, selecione a variável /content/mywebsite/en/jcr:content nó . No 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 http://localhost:4502/content/mywebsite/en/products.html para ver a página Produtos:

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

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

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

   • Nome: sling:resourceSuperType
   • Tipo: String
   • Valor: foundation/components/page

3. Clique em Salvar tudo.

Abra o contentpage.jsp arquivo 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 seu navegador, recarregue o Produtos página. Tem a seguinte aparência:

Abra a fonte da página para ver os elementos javascript e HTML que os scripts head.jsp e body.jsp geraram. O seguinte trecho de script 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 under /apps/mywebsite/components/contentpage:

1. Clique com o botão direito do mouse no nó /apps/mywebsite/components/contentpage, em seguida selecione Criar then Criar arquivo.
2. Na janela , digite left.jsp como ​ Nome e clique em OK.

Editar 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 under /apps/mywebsite/components/contentpage:

1. Clique com o botão direito do mouse no nó /apps/mywebsite/components/contentpage, selecione Criar, em seguida Criar arquivo.
2. Na caixa de diálogo, digite center.jsp as Nome e clique em OK.

Editar 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 under /apps/mywebsite/components/contentpage:

1. Clique com o botão direito do mouse no nó /apps/mywebsite/components/contentpage, selecione Criar, em seguida Criar arquivo.
2. Na caixa de diálogo, digite right.jsp as Nome e clique em OK.

Editar 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 under /apps/mywebsite/components/contentpage:

Editar 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 seu navegador, recarregue o Produtos página. Tem a seguinte aparência:

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

No Criar componente digite:

• Rótulo: topnav
• Título: My Top Navigation Component
• Descrição: This is My Top Navigation Component

Clique em Próximo até chegar à última janela em que você clicou OK. Salve as alterações.

No CRXDE Lite, abra o arquivo topnav.jsp under /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 o body.jsp under /apps/mywebsite/components/contentpagee substituir:

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

com:

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

Salve as alterações.

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

No seu navegador, abra o Produtos página.

No Sidekick Página clique em Propriedades da página.

No Básico da caixa de diálogo, expandir Mais títulos e descrição e para o Legenda propriedade, tipo what we do. Clique em OK.

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

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

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

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

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

O Sling determina o sling:resourceType deste nó a ser 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 under /apps/mywebsite/components/topnav.Localize o conteúdo do elemento de âncora (linha 14):

<%=child.getTitle() %>

Substitua o conteúdo da â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 /apps/mywebsite/components/contentpage e clique em Criar > Criar arquivo.

No Criar arquivo janela, como Nome, tipo navimage.png.java.

A extensão de nome de arquivo .java indica ao Sling que o suporte Java a scripts do Apache 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 e o subtítulo da página são obtidos.
• ImageHelper é usada para gerar a imagem do arquivo navimage_bg.jpg do design do site, o título da página e o 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 seu navegador, recarregue o Produtos página. A navegação superior agora aparece da seguinte maneira:

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

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

• Título: Produto 1.
• Nome: produto1.
• 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: produto2
• 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 do Produto 1:

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

2. No Propriedades , insira os seguintes valores:

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

3. Clique em Adicionar.

4. No 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 /content/mywebsite/en/products/product2/jcr:content nó .

2. No Propriedades , insira os seguintes valores:

   • Nome: jcr:description
   • 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 /apps/mywebsite/components, selecione Criar, em seguida Criar componente.

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

• Rótulo: listem crianças.
• Título: Componente Minhas Listchildren.
• Descrição: Este é o Componente Minhas Listchildren .

Continue clicando em Próximo até que o Filhos permitidos for exibido e clique em OK.

No CRXDE Lite, abra o arquivo listchildren.jsp under /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 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><%
         }
     }
 %>

Salve as alterações.

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

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

2. Na caixa de diálogo, digite 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 /apps/mywebsite/components/listchildren/dialog/items/items/tab1 nó .

No Propriedades , altere o valor da variável título propriedade para List Children

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

• Nome: items
• 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 under /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 seu navegador, recarregue o Produtos página. O componente listchildren aparece 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, em seguida Criar componente.

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

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

Clique em Avançar até acessar o painel final da caixa de diálogo e clique em OK.

No CRXDE Lite, abra o arquivo logo.jsp under /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. Copie 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ó de diálogo sob o componente de logotipo:

1. Clique com o botão direito do mouse no /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.

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

No CRXDE Lite, abra o left.jsp under /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 seu navegador, recarregue o Produtos página. O logotipo aparece da seguinte maneira, embora atualmente mostre apenas o link subjacente:

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

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 em no painel do Imagem navegue até a guia logo.png imagem que você extraiu do mywebsite.zip e clique em OK.

Clique no triângulo na barra de título do Sidekick para retornar ao Editar modo.

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

<div>trail</div>

com:

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

Salve as alterações.

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

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

<div>title</div>

com:

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

Salve as alterações.

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

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 seu navegador, atualize o Produtos página. Agora ele tem o componente parsys, o que é visto da seguinte maneira:

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

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

Clique com o botão direito do mouse no Copy of logo nó , clique em Renomear, exclua o texto e o tipo existentes image.

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

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

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

• Nome: componentGroup
• Tipo: String
• Valor: MeuSite

Abaixo do image , renomeie o design_dialog nó para 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 novo nó da seguinte maneira:

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

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

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

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

• Nome: imagem.
• Tipo: nt:unstructured.

No CRXDE, defina as propriedades da seguinte maneira:

No seu navegador, recarregue o Produtos página.

No Sidekick, clique no botão Modo de design ícone .

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 é mostrada; navegue até MeuSite, selecione o Meu componente de imagem e clique em OK.

Retornar para Modo de Edição.

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

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

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

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

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

Na árvore de pastas da página Sites AEM, selecione Websites/My Website/English, depois 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 no Barra de ferramentas e clique em Propriedades. Selecionar Ocultar na navegação e clique em OK.

O Ocultar na navegação impede que a página seja exibida em componentes de navegação, como topnav e listchildren.

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

• Contatos
• Feedback
• Logon
• Pesquisar

No seu navegador, recarregue o Produtos página. Tem a seguinte aparência:

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

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

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

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

2. Clique em Próximo, depois clique em Próximo novamente.

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

4. Clique em Próximo e, em seguida, clique em OK.

Clique em Salvar tudo.

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

• /libs/foundation/components/search/dialog
• `` /libs/foundation/components/search/i18n
• /libs/foundation/components/search/icon.png

Clique em Salvar tudo.

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

Copie 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}"/></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>

Salve as alterações.

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

%><div class="left">

Insira o seguinte código before essa 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 seguinte código 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 seu navegador, recarregue o Produtos página. O componente de pesquisa tem a seguinte aparência:

No seu navegador, abra o Pesquisar página.

No Sidekick, clique no botão Design ícone de modo .

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

Na caixa de diálogo, role para baixo até a Meus sites , selecione Meu componente de pesquisa e clique em OK.

No Sidekick, clique no triângulo para retornar ao Editar modo.

Arraste o Minha Pesquisa componente do Sidekick para o quadro parsys. Tem a seguinte aparência:

Navegue até seu Produtos página. Procure clientes na caixa de entrada e pressione Enter. Você é redirecionado para a função Pesquisar página. Mudar para Visualizar modo: 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 substituir:

<div>iparsys</div>

com:

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

Salve as alterações.

No seu navegador, recarregue o Produtos página. A página inteira tem a seguinte aparência: