Criar um site com recursos completos (JSP)

Este tutorial permite que você crie um site em destaque com o Adobe Experience Manager (AEM). O site será baseado em um site genérico e será direcionado principalmente para desenvolvedores da Web. Todo o desenvolvimento ocorrerá em um ambiente de criação.

Este tutorial descreve como:

1. Instalar AEM.

2. Acesse o CRXDE Lite (o ambiente de desenvolvimento).

3. Configure a estrutura do projeto no CRXDE Lite.

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

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

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

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

7. Inclua vários componentes fundamentais.

Depois de executar todas as etapas, suas páginas terão a seguinte aparência:

Baixe o resultado final

Para acompanhar o tutorial em vez de realizar os exercícios, baixe o site-1.0.zip. Este arquivo é um pacote de conteúdo AEM que contém os resultados deste tutorial. Use Gerenciador de pacotes para instalar o pacote na instância do autor.

Pacote de conteúdo do site

Obter arquivo

Instalação do Adobe Experience Manager

Para instalar uma instância do AEM para desenvolver seu site, siga as instruções para configurar um ambiente de implantação com instâncias de criação e publicaçãoou executar uma instalação genérica. A instalação genérica envolve o download do arquivo AEM Quickstart JAR, colocar o arquivo license.properties no mesmo diretório do arquivo JAR e clicar duas vezes no arquivo JAR.

Depois de instalar o AEM, acesse o ambiente de desenvolvimento do CRXDE Lite clicando no link CRXDE Lite na página de boas-vindas:

Configuração da estrutura do projeto no CRXDE Lite

Use o CRXDE Lite para criar a estrutura de aplicativos do meu site no repositório:

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

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

3. 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:

   

4. Clique em Salvar tudo.

Configuração do design

Nesta seção, crie o design para seu aplicativo usando a ferramenta Designer. O design fornece recursos de CSS e imagem para seu site.

Exemplo de arquivo estático.css e imagens

Obter arquivo

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

   

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

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

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

   

Criação do modelo, componente e script da página de conteúdo

Nesta seção, você cria o seguinte:

• O modelo de página de conteúdo que será usado para criar páginas de conteúdo no site de exemplo
• O componente página de conteúdo que será usado para renderizar páginas de conteúdo
• O script da página de conteúdo

Criação do modelo de página de conteúdo

Crie um modelo para usar como base das páginas da Web do site.

Um modelo define o conteúdo padrão de uma nova página. Sites complexos podem usar vários modelos para criar os diferentes tipos de páginas no site. Neste exercício, todas as páginas são baseadas em um modelo simples.

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

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

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

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

   

Criação do componente Conteúdo da página

Crie o componente que define o conteúdo e renderiza as páginas que usam o modelo contentpage. O local do componente deve corresponder ao valor da propriedade Tipo de recurso do modelo de página de conteúdo.

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

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

3. 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:

   

Desenvolvimento do script de componente de página de conteúdo

Adicione o código ao script contentpage.jsp para definir o conteúdo da página.

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

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

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

Criação da página do site e das páginas de conteúdo

Nesta seção, crie as seguintes páginas que usam o modelo de página de conteúdo: Meu site, inglês, produtos, serviços e clientes.

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

   

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

3. No Criar página digite:

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

   

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

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

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

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

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

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

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

11. 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:

    

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

    

13. 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:

    

Aprimoramento do script de página de conteúdo

Esta seção descreve como aprimorar o script de página de conteúdo usando os scripts de componente de base AEM e escrevendo seus próprios scripts.

O Produtos será exibida da seguinte maneira:

Uso de scripts de página de base

Neste exercício, você configura seu componente de conteúdo de página para que seu supertipo seja o componente Página de AEM. Como os componentes herdam os recursos de seu supertipo, o conteúdo da página herda os scripts e as propriedades do componente Página.

Por exemplo, no código JSP do seu componente, é possível referenciar os scripts que o componente de supertipo fornece como se estivessem incluídos no seu componente.

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

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

3. Salve as alterações.

4. 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
                });
   

Usar seus próprios scripts

Nesta seção, você cria vários scripts que geram uma parte do corpo da página. Em seguida, crie o arquivo body.jsp no componente pagecontent para substituir o body.jsp do componente Página AEM. No arquivo body.jsp, você inclui os scripts que geram as diferentes partes do corpo da página.

Dica: Quando um componente inclui um arquivo que tem o mesmo nome e o mesmo local relativo de um arquivo no supertipo do componente, ele é chamado sobreposição.

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

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

3. Salve as alterações.

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

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

6. Salve as alterações.

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

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

9. Salve as alterações.

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

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

12. Salve as alterações.

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

    

Criação do componente Navegação superior

Nesta seção, você cria um componente que exibe links para todas as páginas de nível superior do site para facilitar a navegação. Esse conteúdo de componente é exibido na parte superior de todas as páginas criadas usando o modelo de página de conteúdo.

Na primeira versão do componente de navegação superior (topnav) os itens de navegação são apenas links de texto. Na segunda versão, você implementa a navegação superior com links de navegação de imagem.

Sua navegação superior terá a seguinte aparência:

Criação do componente Navegação superior

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

2. No Criar componente digite:

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

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

Criação do script de navegação superior com links textuais

Adicione o script de renderização ao topnav para gerar links de texto para páginas filhas:

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

2. 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><%
           }
       }
   %>
   

Inclusão da navegação superior no componente Página de conteúdo

Para incluir o topnav no seu componente contentpage:

1. 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" />
   

2. Salve as alterações.

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

   

Aprimoramento de páginas com legendas

O Página O componente define propriedades que permitem fornecer legendas para páginas. Adicione legendas que fornecem informações sobre o conteúdo da página.

1. No seu navegador, abra o Produtos página.

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

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

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

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

Aprimorar a navegação superior usando links de imagem

Aprimore o script de renderização do componente de navegação superior para usar links de imagem em vez de hipertexto para os controles de navegação. A imagem inclui o título e o subtítulo do direcionamento do link.

Este exercício demonstra Processamento de solicitação Sling. O script topnav.jsp é modificado para chamar um script que gera dinamicamente imagens para serem usadas nos links de navegação da página. Neste exercício, o Sling analisa o URL dos arquivos de origem da imagem para determinar o script a ser usado para renderizar as imagens.

Por exemplo, a origem do link da imagem para a página Produtos pode ser http://localhost:4502/content/mywebsite/en/products.navimage.png. O Sling analisa esse URL para determinar o tipo de recurso e o script a ser usado para renderizar o recurso:

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

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

3. O Sling determina o sling:resourceType deste nó a ser mywebsite/components/contentpage.

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

Neste exercício, o Sling corresponde esses URLs ao script /apps/mywebsite/components/contentpage/navimage.png.java que você cria.

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

   <%=child.getTitle() %>
   

2. Substitua o conteúdo da âncora pelo seguinte código:

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

3. Salve as alterações.

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

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

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

7. Salve as alterações.

8. No seu navegador, recarregue o Produtos página. A navegação superior agora aparece da seguinte maneira:

   

Criação do componente Filhos da lista

Crie o componente listchildren que gera uma lista de links de página que incluem o título, a descrição e a data das páginas (por exemplo, páginas de produto). Os links direcionam as páginas filhas da página atual ou de uma página raiz especificada na caixa de diálogo do componente.

Criação de páginas de produtos

Crie duas páginas localizadas abaixo da variável Produtos página. Para cada página, que descreve dois produtos específicos, você define um título, uma descrição e uma data.

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

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

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

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

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

Criação do componente Filhos da lista

Para criar o componente listchildren:

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

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

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

Criando o script de lista de filhos

Desenvolva o script para o componente listchildren.

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

2. 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><%
            }
        }
    %>
   

3. Salve as alterações.

Caixa de diálogo Filhos da lista

Crie a caixa de diálogo usada para configurar as propriedades do componente listchildren.

1. 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:

   

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

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

   

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

   • Nome: items
   • Tipo: cq:WidgetCollection

   

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

   • Nome: listroot
   • Tipo: cq:Widget

   

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

   Nome	Tipo	Valor
   fieldLabel	String	Caminho da raiz da lista
   name	String	./listroot
   xtype	String	campo de texto

   

Inclusão de filhos da lista no componente Página de conteúdo

Para incluir o componente listchildren no seu componente página de conteúdo, proceda da seguinte maneira:

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

   <div>newslist</div>
   

2. Substitua esse código pelo seguinte código:

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

3. Salve as alterações.

Exibindo filhos da lista em uma página

Para ver a operação completa deste componente, é possível visualizar a página Produtos :

• quando a página pai ("Caminho da raiz da lista") não estiver definida.
• quando a página pai ("Caminho da raiz da lista") é definida.

1. No seu navegador, recarregue o Produtos página. O componente listchildren aparece da seguinte maneira:

   

2. 

3. 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:

   

Criação do componente de logotipo

Crie um componente que exiba o logotipo da empresa e forneça um link para a página inicial do site. O componente contém uma caixa de diálogo do modo de design para que os valores de propriedade sejam armazenados no design do site (/etc/designs/mywebsite?lang=pt-BR):

• Os valores da propriedade se aplicam a todas as instâncias do componente que são adicionadas a páginas que usam o design.
• As propriedades podem ser configuradas usando qualquer instância do componente que esteja em uma página que use o design.

A caixa de diálogo do modo de design contém propriedades para definir a imagem e o caminho do link. O componente de logotipo será colocado no lado superior esquerdo de todas as páginas do site.

Ele terá a seguinte aparência:

Criação do nó do componente de logotipo

Para criar o componente de logotipo, siga as etapas:

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

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

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

Criação do script do logotipo

Esta seção descreve como criar o script para exibir a imagem do logotipo com um link para a página inicial.

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

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

3. Salve as alterações.

Criação da caixa de diálogo Design do logotipo

Crie a caixa de diálogo para configurar o componente do logotipo no modo Design . Os nós de diálogo do modo de design devem ser nomeados design_dialog.

1. 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)

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

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

   Nome	Tipo	Valor
   fileNameParameter	String	./imageName
   fileReferenceParameter	String	./imageReference
   name	String	./imagem
   título	String	Imagem
   xtype	String	html5smartimage

   

Criação do script de renderização do logotipo

Crie o script que recupera a imagem do logotipo e a grava na página.

1. Clique com o botão direito do mouse no nó do componente de logotipo e clique em Criar > Criar arquivo para criar o arquivo de script com o nome img.GET.java.
2. Abra o arquivo, copie o seguinte código no arquivo e clique em Salvar tudo:

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

Adicionar o componente de logotipo ao componente de página de conteúdo

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

   <div>logo</div>
   

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

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

3. Salve as alterações.

4. No seu navegador, recarregue o Produtos página. O logotipo aparece da seguinte maneira, embora atualmente mostre apenas o link subjacente:

   

Configuração da imagem do logotipo em uma página

Esta seção descreve como definir uma imagem como logotipo usando a caixa de diálogo Modo de design.

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

   

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

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

   

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

   

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

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

Inclusão do componente de navegação estrutural

Nesta seção, você inclui o componente navegação estrutural (trilha), que é um dos componentes fundamentais.

1. 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" />
   

2. Salve as alterações.

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

   

Inclusão do componente de título

Nesta seção, você inclui o componente de título, que é um dos componentes fundamentais.

1. 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" />
   

2. Salve as alterações.

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

   

Inclusão do componente Sistema de parágrafo

O sistema de parágrafo (parsys) é uma parte significativa de um site, pois gerencia uma lista de parágrafos. Ela permite que os autores adicionem componentes de parágrafo à página e fornece estrutura.

Adicione o componente parsys (um dos componentes fundamentais) ao seu componente contentpage.

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

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

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

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

   

Criação do componente de imagem

Crie um componente que exibe uma imagem no sistema de parágrafo. Para economizar tempo, o componente de imagem é criado como uma cópia do componente de logotipo com algumas alterações de propriedade.

Criação do componente de imagem

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

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

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

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

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

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

6. Abaixo do image , renomeie o design_dialog nó para dialog.

7. Renomear logo.jsp para image.jsp.

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

Criação do script de imagem

Esta seção descreve como criar o script de imagem.

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

2. 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); %>
   

3. Salve as alterações.

Criação do nó Image cq:editConfig

O cq:editConfig O tipo de nó permite configurar determinados comportamentos dos componentes ao editar suas propriedades.

Nesta seção, você usa um nó cq:editConfig para permitir que você arraste ativos do Localizador de conteúdo para seu componente de imagem.

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

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

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

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

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

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

4. No CRXDE, defina as propriedades da seguinte maneira:

Adição do ícone

Nesta seção, você adiciona o ícone a ser exibido ao lado do componente de imagem quando ele estiver listado no Sidekick:

1. No CRXDE Lite, clique com o botão direito do mouse no arquivo /libs/foundation/components/image/icon.png e selecione Copiar.
2. Clique com o botão direito do mouse no nó /apps/mywebsite/components/image e clique em Colar, depois clique em Salvar tudo.

Uso do componente de imagem

Nesta seção, você visualizará o Produtos e adicione seu componente de imagem ao sistema de parágrafo.

1. No seu navegador, recarregue o Produtos página.

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

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

4. Na caixa de diálogo, uma lista de Componentes permitidos é mostrada; navegue até MeuSite, selecione o Meu componente de imagem e clique em OK.

5. Retornar para Modo de Edição.

6. 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:

   

Inclusão do componente Barra de ferramentas

Nesta seção, você inclui o componente da barra de ferramentas, que é um dos componentes fundamentais.

Há várias opções, no modo de edição e também no modo de design.

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

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

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

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

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

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

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

   • Contatos
   • Feedback
   • Logon
   • Pesquisar

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

   

Criação do componente de pesquisa

Nesta seção, você cria o componente para procurar conteúdo no site. Esse componente de pesquisa pode ser colocado no sistema de parágrafo de qualquer página (por exemplo, em uma página de resultados de pesquisa especializada).

Sua caixa de entrada de pesquisa terá a seguinte aparência Inglês página:

Criação do componente de pesquisa

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

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

3. Clique em Salvar tudo.

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

5. Clique em Salvar tudo.

Criação do script de pesquisa

Esta seção descreve como criar o script de pesquisa:

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

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

3. Salve as alterações.

Inclusão de uma caixa de pesquisa no componente Página de conteúdo

Para incluir uma caixa de entrada de pesquisa na seção esquerda da página de conteúdo, proceda da seguinte maneira:

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

   %><div class="left">
   

2. 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);%><%
   

3. Localize a seguinte linha de código:

   <div>search</div>
   

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

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

   

Inclusão do componente de pesquisa na página de pesquisa

Nesta seção, você adiciona o componente de pesquisa ao sistema de parágrafo.

1. No seu navegador, abra o Pesquisar página.

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

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

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

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

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

   

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

   

Inclusão do componente Iparsys

Nesta seção, você inclui o componente Sistema de parágrafo de herança (iparsys), que é um dos componentes fundamentais. Esse componente permite que você crie uma estrutura de parágrafos em uma página principal e faça com que páginas filhas herdem os parágrafos.

Para esse componente, você pode definir vários parâmetros no modo de edição e no modo de design.

1. 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" />
   

2. Salve as alterações.

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

   

Recursos do Business.Adobe.com

Content Insights Customer Communications Mobile Forms Version History Dynamic Media Digital Signage