Olet tarkastelemassa seuraavan version ohjesisältöä::
- 6.4
- 6.3
- 6.2
- Aiemmat versiot
This tutorial enables you to create a fully featured website with Adobe Experience Manager (AEM). The website will be based on a generic website and is targeted primarily at web developers. All development will take place within an author environment.
- 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
- Top Navigation
- Include various foundation components.

Download the final result
To follow along with the tutorial rather than performing the exercises, download website-1.0.zip. This file is an AEM content package that contains the results of this tutorial. Use Package Manager to install the package to your author instance.
NOTE: Installing this package will overwrite any resources on your authoring instance that you have created using this tutorial.
Lataa
To install an AEM instance for developing your website, follow the instructions for setting up a deployment environment with author and publish instances, or perform a generic installation. The generic installation involves downloading the AEM Quickstart JAR file, placing the license.properties file in the same directory as the JAR file, and double-clicking the JAR file.
After you have installed AEM, access the CRXDE Lite development environment by clicking the CRXDE Lite link on the Welcome page:

Huomautus:
The URL of CRXDE Lite for an AEM authoring instance that is installed locally using the default port is http://localhost:4502/crx/de/.
In this section, you create the design for your application using the Designer tool. The design provides CSS and image resources for your web site.
Huomautus:
Click the following link to download mywebsite.zip. The archive contains the static.css and image files for your design.
Lataa
-
On the AEM Welcome page, click Tools. (http://localhost:4502/libs/cq/core/content/welcome.html)
-
Using WebDAV access to the URL at http://localhost:4502, copy the sample static.css file and images folder from the downloaded mywebsite.zip file into the /etc/designs/mywebsite folder.
- The contentpage template that will be used to create content pages in the example website
- The contentpage component that will be used to render pages of content
- The contentpage script
Create a template to use as the basis of the web pages of your site.
A template defines the default content of a new page. Complex websites may use several templates for creating the different types of pages in the site. In this exercise, all pages are based on one simple template.
-
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.
Create the component that defines the content and renders the pages that use the contentpage template. The location of the component must correspond with the value of the Resource Type property of the contentpage template.
-
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.
-
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 */ %>
-
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://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>
In this section, you create the following pages which all use the contentpage template: My Website, English, Products, Services, and Customers.
-
On the AEM Welcome page (http://localhost:4502/libs/cq/core/content/welcome.html), click Websites.
-
In a new wb browser tab or window, open http://localhost:4502/content/mywebsite/en/products.html to see the Products page:
This section describes how to enhance the contentpage script using the AEM foundation component scripts and by writing your own scripts.

In this exercise, you configure your pagecontent component so that its supertype is the AEM Page component. Because components inherit the features of their supertype, your pagecontent inherits the scripts and properties of the Page component.
For example, in your component JSP code, you can reference the scripts that the supertype component provides as though they are included in your component.
-
-
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" "http://www.w3.org/TR/html4/strict.dtd"> <html> <cq:include script="head.jsp"/> <cq:include script="body.jsp"/> </html>
-
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 this section you create several scripts that each generate a part of the page body. You then create the body.jsp file in the pagecontent component to override the body.jsp of the AEM Page component. In your body.jsp file, you include your scripts that generate the different parts of the page body.
Tip: When a component includes a file that has the same name and relative location as a file in the component's supertype, it is called overlaying.
-
<%@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>
In this section, you create a component that displays links to all top level pages of the website as to ease navigation. This component content appears at the top of all pages that are created using the contentpage template.
In the first version of the top navigation component (topnav) the navigation items are text links only. In the second version you implement topnav with image navigation links.

-
<%@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><% } } %>
The Page component defines properties that enable you to provide subtitles for pages. Add subtitles that provide information about the page content.
Enhance the rendering script of the topnav component to use image links instead of hypertext for the navigation controls. The image includes the title and subtitle of the link target.
This exercise demonstrates Sling request processing. The topnav.jsp script is modified to call a script that dynamically generates images to use for the page navigation links. In this exercise, Sling parses the URL of image source files to determine the script to use to render the images.
For example, the source for the image link to the Products page could be http://localhost:4502/content/mywebsite/en/products.navimage.png. Sling parses this URL to determine the resource type and the script to use to render the resource:
- 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 this exercise, Sling matches these URLs to the /apps/mywebsite/components/contentpage/navimage.png.java script that you create.
-
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; } }
Create the listchildren component that generates a list of page links that include the title, description, and date of pages (for example, product pages). The links target the child pages of the current page, or of a root page that is specified in the component dialog.

Create two pages located below the Products page. For each page, which describe two specific products, you set a title, a description, and a date.
-
In CRXDE Lite, set a description and a date for the Product 1 page:
- Select the /content/mywebsite/en/products/product1/jcr:content node.
- In the Properties tab, enter the following values:
- Name: jcr:description
- Type: String
- Value: This is a description of the Product 1!.
- Click Add.
- In the Properties tab, create another property using the following values:
- Name: date
- Type: String
- Value: 02/14/2008
- Click Add.
- Click Save All.
-
In CRXDE Lite, set a description and a date for the Product 2 page:
- Select the /content/mywebsite/en/products/product2/jcr:content node.
- In the Properties tab, enter the following values:
- Name: jcr:description
- Type: String
- Value: This is a description of the Product 2!.
- Click Add.
- In the same text boxes, replace the previous values with the following values:
- Name: date
- Type: String
- Value: 05/11/2012
- Click Add.
- Click Save All.
-
<%@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><% } } %>
To see the full operation of this component you can view the Products page:
- when the parent page ("Path of list root") is not defined.
- when the parent page ("Path of list root") is defined.
Create a component that displays the company logo and provides a link to the home page of the site. The component contains a design-mode dialog so that property values are stored in the site design (/etc/designs/mywebsite):
- The property values apply to all instances of the component that are added to pages that use the design.
- The properties can be configured using any instance of the component that is on a page that uses the design.
Your design-mode dialog contains properties for setting the image and the link path. The logo component will be placed on the upper left side of all pages in the website.

Huomautus:
Adobe Experience Manager provides a more full-featured logo component (/libs/foundation/components/logo).
This section describes how to create the script to display the logo image with a link to the homepage.
-
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>
Create the dialog for configuring your logo component in Design mode. Design-mode dialog nodes must be named design_dialog.
-
Under the design_dialog/items/items node, create a new node named img of type cq:Widget. Add the following properties and then click Save All:
Name Type Value fileNameParameter String ./imageName fileReferenceParameter String ./imageReference name String ./image title String Image xtype String html5smartimage
Create the script that retrieves the logo image and writes it to the page.
- Right-clck the logo component node and click Create > Create File to create the script file named img.GET.java.
- Open the file, copy the following code into the file, and then click Save All:
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(); } }
In this section, you include the breadcrumb (trail) component, which is one of the foundation components.
The paragraph system (parsys) is a significant part of a website as it manages a list of paragraphs. It enables authors to add paragraph components to the page and provides structure.
Add the parsys component (one of the foundation components) to your contentpage component.
Create a component that displays an image in the paragraph system. To save time, the image component is created as a copy of the logo component with some property changes.
Huomautus:
Adobe Experience Manager provides a more full-featured image component (/libs/foundation/components/image).
- 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.

-
<%@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); %>
The cq:editConfig node type enables you to configure certain behaviors of components when editing their properties.
In this section, you use a cq:editConfig node to enable you to drag assets from Content Finder into your image component.
In CRXDE Lite, under the node /apps/mywebsite/components/image, create a new node as follows:
Name: cq:editConfig.
Type: cq:EditConfig.
Under the node cq:editConfig, create a new node as follows:
Name: cq:dropTargets.
Type: cq:DropTargetConfig.
Under the node cq:dropTargets, create a new node as follows:
Name: image.
Type: nt:unstructured.
- In CRXDE set the properties as follows:
Name | Type | Value |
---|---|---|
accept | String | image/(gif|jpeg|png) |
groups | String | media |
propertyName | String | ./imageReference |

In this section, you add the icon to appear beside the image component when it is listed in Sidekick:
In this section, you will view the Products page and add your image component to the paragraph system.
In this section, you create the component to search for content on the website. This search component can be placed in the paragraph system of any page (for example, on a specialized search result page).
Your search input box will look as follows on the English page:

-
Use the dialog to configure the component:
- One first panel, specify the following property values:
- Label: search
- Title: My Search Component
- Description: This is My Search Component
- Group: MyWebsite
- Click Next., then click Next again.
- On the Allowed Parents panel, click the + button and type */parsys.
- Click Next and then click OK.
- One first panel, specify the following property values:
-
<%@ 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>
-
<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 this section, you include the Inheritance Paragraph System (iparsys) component, which is one of the foundation components. This component enables you to create a structure of paragraphs on a parent page, and have child pages inherit the paragraphs.
For this component you can set several parameters in both edit mode and design mode.