Create a Fully-Featured Website (JSP) create-a-fully-featured-website-jsp

Install AEM.

Access CRXDE Lite (the development environment).

Set up the project structure in CRXDE Lite.

Create the template, component, and scripts used as the basis for creating content pages.

Create the root page for your website and then content pages.

Create the following components for use on your pages:

• Top Navigation
• List Children
• Logo
• Image
• Text-Image
• Search

Include various foundation components.

In the tree on the left side of CRXDE Lite, right-click the /apps folder and click Create > Create Folder. In the Create Folder dialog, type mywebsite as the folder name and click OK.

Right-click the /apps/mywebsite folder and click Create > Create Folder. In the Create Folder dialog, type components as the folder name and click OK.

Right-click the /apps/mywebsite folder and click Create > Create Folder. In the Create Folder dialog, type templates as the folder name and click OK.

The structure in the tree should now look something like this:

Click Save All.

On the AEM Welcome page, click Tools. (https://localhost:4502/libs/cq/core/content/welcome.html)

In the folder tree, select the Designs folder and then click New > New Page. Type mywebsite as the title and click Create.

If the mywebsite item does not appear in the table, refresh the tree or the table.

Using WebDAV access to the URL at https://localhost:4502, copy the sample static.css file and images folder from the downloaded mywebsite.zip file into the /etc/designs/mywebsite folder.

In the folder tree of CRXDE Lite, right-click /apps/mywebsite/templates and click Create > Create Template.

In the Create Template dialog, type the following values and then click Next:

• Label: contentpage
• Title: My Website Content Page Template
• Description: This is my Website Content Page Template
• Resource Type: mywebsite/components/contentpage

Use the default value for the Ranking property.

The resource type identifies the component that renders the page. In this case, all pages created using the contentpage template are rendered by the mywebsite/components/contentpage component.

To specify the paths of the pages that can use this template, click the plus button and type /content(/.*)? in the text box that appears. Then, click Next.

The value of the allowed path property is a regular expression. Pages that have a path that matches the expression can use the template. In this is case, the regular expression matches the path of the /content folder and all subpages.

When an author creates a page below /content, the contentpage template appears in a list of available templates to use.

Click Next in the Allowed Parents and Allowed Children panels and click OK. In CRXDE Lite, click Save All.

In CRXDE Lite, right-click /apps/mywebsite/components and click Create > Component.

In the Create Component dialog, type the following property values:

• Label: contentpage
• Title: My Website Content Page Component
• Description: This is My Website Content Page Component

The location of the new component is /apps/mywebsite/components/contentpage. This path corresponds with the resource type of the contentpage template (minus the initial /apps/ part of the path).

This correspondence connects the template to the component and is critical to the correct functioning of the website.

Click Next until the Allowed Children panel of the dialog appears, and then click OK. In CRXDE Lite, click Save All.

The structure now looks as follows:

In CRXDE Lite, open the file contentpage.jsp in /apps/mywebsite/components/contentpage. The file contains the following code by default:

<%--

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

Copy the following code and paste it in contentpage.jsp after the default code:

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

Click Save All to save your changes.

On the AEM Welcome page (https://localhost:4502/libs/cq/core/content/welcome.html), click Websites.

In the folder tree, select the Websites folder and then click New > New Page.

In the Create Page window, enter the following:

• Title: My Website
• Name: mywebsite
• Select the My Website Content Page Template

Click Create. In the folder tree, select the /Websites/My Website page and click New > New Page.

In the Create Page dialog, enter the following property values, and then click Create:

• Title: English
• Name: en
• Select the My Website Content Page Template

In the folder tree, select the /Websites/My Website/English page and click New> New Page.

In the Create Page dialog, enter the following property values, and then click Create:

• Title: Products
• Select the My Website Content Page Template

In the folder tree, select the /Websites/My Website/English page and click New > New Page.

In the Create Page dialog, enter the following property values, and then click Create:

• Title: Services
• Select the My Website Content Page Template

In the folder tree, select the /Websites/My Website/English page and click New > New Page.

In the Create Page dialog, enter the following property values, and then click Create:

• Title: Customers
• Select the My Website Content Page Template

Your structure looks as follows:

To link your pages to the mywebsite design, in CRXDE Lite, select the /content/mywebsite/en/jcr:content node. On the Properties tab, type the following values for a new property and then click Add:

• Name: cq:designPath
• Type: String
• Value: /etc/designs/mywebsite

In a new wb browser tab or window, open https://localhost:4502/content/mywebsite/en/products.html to see the Products page:

In CRXDE Lite, add a property to the /apps/mywebsite/components/contentpage node.

1. Select the /apps/mywebsite/components/contentpage node.

2. At the bottom of the Properties tab, type the following property values and then click Add:

   • Name: sling:resourceSuperType
   • Type: String
   • Value: foundation/components/page

3. Click Save All.

Open the contentpage.jsp file under /apps/mywebsite/components/contentpage and replace the existing code with the following code:

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

Save your changes.

In your browser, reload the Products page. It looks as follows:

Open the page source to see the JavaScript and HTML elements that the head.jsp and body.jsp scripts generated. The following script snippet opens Sidekick when you open the page:

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

In CRXDE Lite, create the file left.jsp under /apps/mywebsite/components/contentpage:

1. Right-click the node /apps/mywebsite/components/contentpage, then select **Create **then Create File.

2. In the window, type left.jsp as the Name and click OK.

Edit the file left.jsp to remove the existing content and replace with the following code:

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

Save the changes.

In CRXDE Lite, create the file center.jsp under /apps/mywebsite/components/contentpage:

1. Right-click the node /apps/mywebsite/components/contentpage, select Create, then Create File.

2. In the dialog box, type center.jsp as Name and click OK.

Edit the file center.jsp to remove the existing content and replace it with the following code:

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

Save the changes.

In CRXDE Lite, create the file right.jsp under /apps/mywebsite/components/contentpage:

1. Right-click the node /apps/mywebsite/components/contentpage, select Create, then Create File.

2. In the dialog box, type right.jsp as Name and click OK.

Edit the file right.jsp to remove the existing content and replace with the following code:

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

Save the changes.

In CRXDE Lite, create the file body.jsp under /apps/mywebsite/components/contentpage:

Edit the file body.jsp to remove the existing content and replace with the following code:

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

Save the changes.

In your browser, reload the Products page. It looks as follows:

In CRXDE Lite, right-click /apps/mywebsite/components, select Create, then Create Component.

In the Create Component window, enter the following:

• Label: topnav

• Title: My Top Navigation Component

• Description: This is My Top Navigation Component

Click Next until you come to the last window where you click OK. Save your changes.

In CRXDE Lite, open the file topnav.jsp under /apps/mywebsite/components/topnav.

Replace the code that is there by copying and pasting the following code:

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

In CRXDE Lite, open the body.jsp under /apps/mywebsite/components/contentpageand replace:

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

with:

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

Save the changes.

In your browser, reload the Products Page. The top navigation appears as follows:

In your browser, open the Products page.

On the Sidekick Page tab, click Page Properties.

On the Basic tab of the dialog, expand More Titles and Description, and for the Subtitle property, type what we do. Click OK.

Repeat the previous steps to add the subtitle about our services to the Services page.

Repeat the previous steps to add the subtitle the trust we earn to the Customers page.

Tip: In CRXDE Lite, select the /content/mywebsite/en/products/jcr:content node to see that the subtitle property is added.

Sling determines the path of the resource to be /content/mwebysite/en/products.png.

Sling matches this path with the /content/mywebsite/en/products node.

Sling determines the sling:resourceType of this node to be mywebsite/components/contentpage.

Sling finds the script in this component that best matches the URL selector ( navimage) and file name extension ( png).

In CRXDE Lite, open the topnav.jsp under /apps/mywebsite/components/topnav.Locate the content of the anchor element (line 14):

<%=child.getTitle() %>

Replace the anchor content with the following code:

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

Save the changes.

Right-click the /apps/mywebsite/components/contentpage node and click Create > Create File.

In the Create File window, as Name, type navimage.png.java.

The .java file name extension indicates to Sling that the Apache Sling Scripting Java™ Support should be used to compile the script and create a servlet.

Copy the following code into navimage.png.java.The code extends the AbstractImageServlet class:

• AbstractImageServlet creates an ImageContext object that stores the properties of the current resource.
• The parent page of the resource is extracted from the ImageContext object. The page title and subtitle are then obtained.
• ImageHelper is used to generate the image from the navimage_bg.jpg file of the site design, the page title, and the page subtitle.

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

Save the changes.

In your browser, reload the Products page. The top navigation now appears as follows:

In the folder tree of the Websites page, select the Websites/My Website/English/Products item and click New > New Page.

In the dialog, enter the following property values and then click Create:

• Title: Product 1.
• Name: product1.
• Select My Website Content Page Template

Create another page below Products using the following property values:

• Title: Product 2
• Name: product2
• Select My Website Content Page Template

In CRXDE Lite, set a description and a date for the Product 1 page:

1. Select the /content/mywebsite/en/products/product1/jcr:content node.

2. In the Properties tab, enter the following values:

   • Name: jcr:description
   • Type: String
   • Value: This is a description of the Product 1!.

3. Click Add.

4. In the Properties tab, create another property using the following values:

   • Name: date
   • Type: String
   • Value: 02/14/2008
   • Click Add.

5. Click Save All.

In CRXDE Lite, set a description and a date for the Product 2 page:

1. Select the /content/mywebsite/en/products/product2/jcr:content node.

2. In the Properties tab, enter the following values:

   • Name: jcr:description
   • Type: String
   • Value: This is a description of the Product 2!.

3. Click Add.

4. In the same text boxes, replace the previous values with the following values:

   • Name: date
   • Type: String
   • Value: 05/11/2012
   • Click Add.

5. Click Save All.

In CRXDE Lite, right-click /apps/mywebsite/components, select Create, then Create Component.

In the dialog, enter the following property values and then click Next:

• Label: listchildren.
• Title: My Listchildren Component.
• Description: This is My Listchildren Component.

Continue clicking Next until the Allowed Children panel appears, and then click OK.

In CRXDE Lite, open the file listchildren.jsp under /apps/mywebsite/components/listchildren.

Replace the default code with the following code:

<%@include file="/libs/foundation/global.jsp"%><%
%><%@ page import="java.util.Iterator,
         com.day.cq.wcm.api.PageFilter"%><%
     /* Create a Page object using the path of the current page */
      String listroot = properties.get("listroot", currentPage.getPath());
     Page rootPage = pageManager.getPage(listroot);
     /* iterate through the child pages and gather properties */
     if (rootPage != null) {
         Iterator<Page> children = rootPage.listChildren(new PageFilter(request));
         while (children.hasNext()) {
             Page child = children.next();
             String title = child.getTitle() == null ? child.getName() : child.getTitle();
             String date = child.getProperties().get("date","");
             %><div class="item">
             <a href="<%= child.getPath() %>.html"><b><%= title %></b></a>
             <span><%= date %></code><br>
             <%= child.getProperties().get("jcr:description","") %><br>
             </div><%
         }
     }
 %>

Save the changes.

Create the dialog node under the listchildren component:

1. In CRXDE Lite, right-click the /apps/mywebsite/components/listchildrennode and click Create > Create Dialog.

2. In the dialog, enter the following property values and click OK

   • Label: dialog

   • Title: Edit Component and click OK.

With the following properties:

Select the /apps/mywebsite/components/listchildren/dialog/items/items/tab1 node.

In the Properties tab, change the value of the title property to List Children

Select the tab1 node and click Create > Create Node, enter the following property values, and click OK:

• Name: items
• Type: cq:WidgetCollection

Create a node below the items node using the following property values:

• Name: listroot
• Type: cq:Widget

Add properties for the listroot node to configure it as a text field. Each row in the following table represents a property. When finished, click Save All.

In CRXDE Lite, open the file left.jsp under /apps/mywebsite/components/contentpage and locate the following code (line 4):

<div>newslist</div>

Replace that code with the following code:

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

Save the changes.

In your browser, reload the Products Page. The listchildren component appears as follows:

As Path of list root, enter: /content/mywebsite/en. Click OK. The listchildren component on your page now looks as follows:

In CRXDE Lite, right-click /apps/mywebsite/components, select Create, then Create Component.

In the Create Component dialog enter the following property values and then click Next:

• Label: logo.
• Title: My Logo Component.
• Description: This is My Logo Component.

Click Next until you reach the final panel of the dialog and then click OK.

In CRXDE Lite, open the file logo.jsp under /apps/mywebsite/components/logo.

The following code creates the link to the site home page and adds a reference to the logo image. Copy the code to 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>

Save the changes.

Create the dialog node under the logo component:

1. Right-click the /apps/mywebsite/components/logo node and click Create > Create Dialog.

2. Type the following property values and then click OK:

   • Label: design_dialog

   • Title: Logo (Design)

Right-click the tab1 node in the design_dialog branch and click Delete. Click Save All.

Under the design_dialog/items/itemsnode, create a node named img of type cq:Widget. Add the following properties and then click Save All:

In CRXDE Lite, open the left.jsp under /apps/mywebsite/components/contentpage file and locate the following line of code:

<div>logo</div>

Replace that code with the following line of code:

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

Save the changes.

In your browser, reload the Products page. The logo looks as follows, though currently it only shows the underlying link:

With the Products page open in your browser, click the Design button at the bottom of Sidekick to enter design mode.

In the Design of logo bar, click Edit to use the dialog to edit the settings for the logo component.

In the dialog, click in the panel of the Image tab, browse for the logo.png image that you extracted from the mywebsite.zip file, and click OK.

Click the triangle on the Sidekick title bar to return to Edit mode.

In CRXDE Lite, go to the following node to see the stored property values:

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

In CRXDE Lite, browse to /apps/mywebsite/components/contentpage, open the file center.jsp, and replace:

<div>trail</div>

with:

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

Save the changes.

In your browser, reload the Products 1 page. The trail component looks as follows:

In CRXDE Lite, browse to /apps/mywebsite/components/contentpage, open the file center.jsp, and replace:

<div>title</div>

with:

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

Save the changes.

In your browser, reload the Products page. The title component looks as follows:

Note: You can set a different Title and the Type/Size in edit mode.

In CRXDE Lite, browse to /apps/mywebsite/components/contentpage, open the file center.jsp, and locate the following line of code:

<div>parsys</div>

Replace that line of code with the following code, then save the changes:

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

In your browser, refresh the Products page. It now has the parsys component, which is seen as follows:

Right-click the /apps/mywebsite/components/logo node and click Copy.

Right-click the /apps/mywebsite/components node and click Paste.

Right-click the Copy of logo node, click Rename, delete the existing text and type image.

Select the image component node, and change the following property values:

• jcr:title: My Image Component.
• jcr:description: This is My Image Component.

Add a property to the image node with the following property values:

• Name: componentGroup
• Type: String
• Value: MyWebsite

Below the image node, rename the design_dialog node to dialog.

Rename logo.jsp to image.jsp.

Open img.GET.java and change the package to apps.mywebsite.components.image.

Open /apps/mywebsite/components/image/ image.jsp

Replace the existing code with the following code, then save the changes:

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

Save the changes.

In CRXDE Lite, under the node /apps/mywebsite/components/image, create a node as follows:

• Name: cq:editConfig.
• Type: cq:EditConfig.

Under the node cq:editConfig, create a node as follows:

• Name: cq:dropTargets.
• Type: cq:DropTargetConfig.

Under the node cq:dropTargets, create a node as follows:

• Name: image.
• Type: nt:unstructured.

In CRXDE set the properties as follows:

In your browser, reload the Products page.

In the Sidekick, click the design mode icon.

Click the Edit button to edit the design dialog of par.

In the dialog, a list of Allowed Components is shown; navigate to MyWebsite, select the My Image Component, and click OK.

Return to edit mode.

Double-click the parsys frame (on Drag components or assets here). The Insert New Component and Sidekick selectors look as follows:

In CRXDE Lite, navigate to /apps/mywebsite/components/contentpage, open the body.jsp file, and locate the following code:

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

Replace that code with the following code, and then save the changes.

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

In the folder tree of the AEM Websites page, select Websites/My Website/English, then click New > New Page. Specify the following property values and click Create:

• Title: Toolbar
• Select My Website Content Page Template

In the list of pages, right-click the Toolbar page and click Properties. Select Hide In Navigation, and click OK.

The Hide in Navigation option prevents the page from appearing in navigation components, such as topnav and listchildren.

Under Toolbar, create following pages:

• Contacts
• Feedback
• Login
• Search

In your browser, reload the Products page. It looks as follows:

In CRXDE Lite, right-click /apps/mywebsite/components, select Create, then Create Component.

Use the dialog to configure the component:

1. One first panel, specify the following property values:

   • Label: search
   • Title: My Search Component
   • Description: This is My Search Component
   • Group: MyWebsite

2. Click Next., then click Next again.

3. On the Allowed Parents panel, click the + button and type */parsys.

4. Click Next and then click OK.

Click Save All.

Copy the following nodes and paste them to the apps/mywebsite/components/search node:

• /libs/foundation/components/search/dialog

• `` /libs/foundation/components/search/i18n

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

Click Save All.

Open the /apps/mywebsite/components/search/search.jsp file.

Copy the following code to search.jsp:

<%@ page import="com.day.cq.wcm.foundation.Search,com.day.cq.tagging.TagManager" %>
<%@include file="/libs/foundation/global.jsp" %><%
%><cq:setContentBundle/><%
    Search search = new Search(slingRequest);

    String searchIn = (String) properties.get("searchIn");
    String requestSearchPath = request.getParameter("path");
    if (searchIn != null) {
        /* only allow the "path" request parameter to be used if it
         is within the searchIn path configured */
        if (requestSearchPath != null && requestSearchPath.startsWith(searchIn)) {
            search.setSearchIn(requestSearchPath);
        } else {
            search.setSearchIn(searchIn);
        }
    } else if (requestSearchPath != null) {
        search.setSearchIn(requestSearchPath);
    }

    pageContext.setAttribute("search", search);
    TagManager tm = resourceResolver.adaptTo(TagManager.class);
%><c:set var="trends" value="${search.trends}"/><%
%><center>
  <form action="${currentPage.path}.html">
    <input size="41" maxlength="2048" name="q" value="${fn:escapeXml(search.query)}"/>
    <input value="<fmt:message key="searchButtonText"/>" type="submit" />
  </form>
</center>
<br/>
<c:set var="result" value="${search.result}"/>
<c:choose>
  <c:when test="${empty result && empty search.query}">
  </c:when>
  <c:when test="${empty result.hits}">
    <c:if test="${result.spellcheck != null}">
      <p><fmt:message key="spellcheckText"/> <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${result.spellcheck}"/></c:url>"><b><c:out value="${result.spellcheck}"/></b></a></p>
    </c:if>
    <fmt:message key="noResultsText">
      <fmt:param value="${fn:escapeXml(search.query)}"/>
    </fmt:message>
  </c:when>
  <c:otherwise>
    <p class="searchmeta">Results ${result.startIndex + 1} - ${result.startIndex + fn:length(result.hits)} of ${result.totalMatches} for <b>${fn:escapeXml(search.query)}</b>. (${result.executionTime} seconds)</p>
   <br/>

  <div class="searchresults">
    <div class="results">
      <c:forEach var="hit" items="${result.hits}" varStatus="status">
        <div class="hit">
        <a href="${hit.URL}">${hit.title}</a>
        <div class="excerpt">${hit.excerpt}</div>
       <div class="hiturl"> ${hit.URL}<c:if test="${!empty hit.properties['cq:lastModified']}"> - <c:catch><fmt:formatDate value="${hit.properties['cq:lastModified'].time}" dateStyle="medium"/></c:catch></c:if> - <a href="${hit.similarURL}"><fmt:message key="similarPagesText"/></a>
        </div></div>
      </c:forEach>
    </div>
      <br/>

     <div class="searchRight">
          <c:if test="${fn:length(trends.queries) > 0}">
              <p><fmt:message key="searchTrendsText"/></p>
              <div class="searchTrends">
                  <c:forEach var="query" items="${trends.queries}">
                      <a href="<c:url value="${currentPage.path}.html"><c:param name="q" value="${query.query}"/></c:url>"><span style="font-size:${query.size}px"><c:out value="${query.query}"/></code></a>
                  </c:forEach>
              </div>
          </c:if>
          <c:if test="${result.facets.languages.containsHit}">
              <p>Languages</p>
              <c:forEach var="bucket" items="${result.facets.languages.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="label" value='<%= new java.util.Locale((String) pageContext.getAttribute("bucketValue")).getDisplayLanguage(request.getLocale()) %>'/>
                  <c:choose>
                      <c:when test="${param.language != null}">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="language"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="language" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.tags.containsHit}">
              <p>Tags</p>
              <c:forEach var="bucket" items="${result.facets.tags.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="tag" value="<%= tm.resolve((String) pageContext.getAttribute("bucketValue")) %>"/>
                  <c:if test="${tag != null}">
                      <c:set var="label" value="${tag.title}"/>
                      <c:choose>
                          <c:when test="<%= request.getParameter("tag") != null && java.util.Arrays.asList(request.getParameterValues("tag")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="tag" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                          <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="tag" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                      </c:choose><br/>
                  </c:if>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.mimeTypes.containsHit}">
              <jsp:useBean id="fileTypes" class="com.day.cq.wcm.foundation.FileTypes"/>
              <p>File types</p>
              <c:forEach var="bucket" items="${result.facets.mimeTypes.buckets}">
                  <c:set var="bucketValue" value="${bucket.value}"/>
                  <c:set var="label" value="${fileTypes[bucket.value]}"/>
                  <c:choose>
                      <c:when test="<%= request.getParameter("mimeType") != null && java.util.Arrays.asList(request.getParameterValues("mimeType")).contains(pageContext.getAttribute("bucketValue")) %>">${label} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:addParam name="mimeType" value="${bucket.value}"/></cq:requestURL>">${label} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>
          <c:if test="${result.facets.lastModified.containsHit}">
              <p>Last Modified</p>
              <c:forEach var="bucket" items="${result.facets.lastModified.buckets}">
                  <c:choose>
                      <c:when test="${param.from == bucket.from && param.to == bucket.to}">${bucket.value} (${bucket.count}) - <a href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/></cq:requestURL>">remove filter</a></c:when>
                      <c:otherwise><a title="filter results" href="<cq:requestURL><cq:removeParam name="from"/><cq:removeParam name="to"/><c:if test="${bucket.from != null}"><cq:addParam name="from" value="${bucket.from}"/></c:if><c:if test="${bucket.to != null}"><cq:addParam name="to" value="${bucket.to}"/></c:if></cq:requestURL>">${bucket.value} (${bucket.count})</a></c:otherwise>
                  </c:choose><br/>
              </c:forEach>
          </c:if>

      <c:if test="${fn:length(search.relatedQueries) > 0}">

       <br/><br/><div class="related">
        <fmt:message key="relatedSearchesText"/>
        <c:forEach var="rq" items="${search.relatedQueries}">
            <a href="${currentPage.path}.html?q=${rq}"><c:out value="${rq}"/></a>
        </c:forEach></div>
      </c:if>
      </div>

      <c:if test="${fn:length(result.resultPages) > 1}">
        <div class="pagination">
            <fmt:message key="resultPagesText"/>
        <c:if test="${result.previousPage != null}">
          <a href="${result.previousPage.URL}"><fmt:message key="previousText"/></a>
        </c:if>
        <c:forEach var="page" items="${result.resultPages}">
          <c:choose>
            <c:when test="${page.currentPage}">${page.index + 1}</c:when>
            <c:otherwise>
              <a href="${page.URL}">${page.index + 1}</a>
            </c:otherwise>
          </c:choose>
        </c:forEach>
        <c:if test="${result.nextPage != null}">
          <a href="${result.nextPage.URL}"><fmt:message key="nextText"/></a>
        </c:if>
        </div>
      </c:if>
      </div>

  </c:otherwise>
</c:choose>

Save the changes.

In CRXDE Lite, open the file left.jsp under /apps/mywebsite/components/contentpage and locate the following code (line 2):

%><div class="left">

Insert the following code before that line:

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

Locate the following line of code:

<div>search</div>

Replace that code with the following code, and then save the changes.

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

In your browser, reload the Products page. The search component looks as follows:

In your browser, open the Search page.

In the Sidekick, click the design mode icon.

In the Design of par block (below the Search title), click Edit.

In the dialog, scroll down to the My Websites group, select My Search Component, and click OK.

On Sidekick, click the triangle to return to edit mode.

Drag the My Search Component from the Sidekick into the parsys frame. It looks as follows:

Navigate to your Products page. Search for customers in the input box and press Enter. You are redirected to the Search page. Switch to preview mode: the output is in a similar format as the following:

In CRXDE Lite, navigate to /apps/mywebsite/components/contentpage, open the file right.jsp, and replace:

<div>iparsys</div>

with:

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

Save the changes.

In your browser, reload the** Products** page. The whole page looks as follows: