Article summary

 

Summary

Discusses how to create an Adobe Experience Manager component that uses both HTML Template Language (HTL- formerly known as Sightly) and the QueryBuilder API. 

A special thank you to Praveen Dubey, a member of the AEM community for contributing towards this community article. 

This article uses an Adobe Maven Archetype project to build an OSGi bundle. If you are not familiar with an Adobe Maven Archetype project, it is recommended that you read the following article: Creating your first AEM Service using an Adobe Maven Archetype project.

Note: HTL is the AEM template language that can be used to replace use of JSP when developing an AEM component. HTL helps you to separate your design from your application logic. For more information, see Introduction to the HTML Template Language.

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
Java, Sling, HTML
AEM Version(s) AEM 6.x

Note:

You can download an AEM package that contains code and the OSGi bundle that are used in this article. Download the package and deploy using package manager. The purpose of this code is to show the community these concepts in action. That is, it's to illustrate how to use HTL and the AEM QueryBuilder API together to create a component that displays JCR data. This community code is for teaching purposes only and not meant to go into production as is.

You can view the application by using the following URL: http://localhost:4502/content/sample.html (assuming you deploy on author).

Download

Introduction

You can create an Adobe Experience Manager (AEM) 6 HTL component that can be used within the AEM Touch UI view. Furthermore, you can use HTL and the QueryBuilder API to develop the AEM component that displays AEM JCR data.

HTL is an AEM template language that can be used to replace the use of JSP when developing an AEM component. HTL helps you to separate your design from your application logic. In this use case, the HTL logic is located within an HTML file and displays the result set created by using the QueryBuilder API. The Java part of the HTL component uses the QueryBuilder API.

The HTL QueryBuilder component has a dialog that lets an author enter a search term, as shown in this illustration.

Dialog
A HTL dialog

When the author clicks OK, then the  search term that is entered into the dialog is used in the Query Builder search. The result set is then displayed in the HTL component, as shown in this illustration (in this example, the value is geometrixx). 

QueryBuilder22
HTL Component displays the result set from a QueryBuilder search

The following illustration shows the project files created in this development article.

ProjectFiles
Section Description
A JCR nodes that represent the component's dialog when used in the Touch UI view.
B The HTL component created in this development article.
C The page component.
D

The template used in this article. 

 

Note:

If you install the package shown at the start of this article, you do not need to perform these steps. You can read the article to understand the concepts and view the code in AEM as a result in installing the package. 

Create an AEM application folder structure 

Create an AEM application folder structure that contains templates, components, and pages by using CRXDE Lite.

CQAppSetup

The following describes each application folder:

  • application name: contains all of the resources that an application uses. The resources can be templates, pages, components, and so on.
  • components: contains components that your application uses. 
  • page: contains page components. A page component is a script such as a JSP file. 
  • global: contains global components that your application uses.
  • template: contains templates on which you base page components. 
  • src: contains source code that comprises an OSGi component (this development article does not create an OSGi bundle using this folder). 
  • install: contains a compiled OSGi bundles container.

 

To create an AEM application folder structure:

  1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite (if you are using AEM 5.6, click Tools from the left menu). 
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter myproject
  5. Repeat steps 1-4 for each folder specified in the previous illustration. 
  6. Click the Save All button.

Note:

In this example, you do not have to place a page folder under components. The page component is created later in this development article under /apps/myproject.

Note:

You have to click the Save All button when working in CRXDE Lite for the changes to be made.

Create a template 

You can create a template by using CRXDE Lite. A CQ template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
2. Select CRXDE Lite (if you are using AEM 5.6, click Tools from the left menu).
3. Right-click the template folder (within your application), select Create, Create
Template.
4. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter contentpage
  • Title: The title that is assigned to the template.
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter myproject/page/contentpage.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

5. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.
6. Click Next for Allowed Parents.
7. Select OK on Allowed Children.
 

Create a render component that uses the template

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as a CQ developer to create scripts that perform specific functionality. For more information about components, see Components.

The following illustration shows the file structure created in this section.

sling
AEM files under myproject/page

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
2. Select CRXDE Lite (if you are using AEM 5.6, click Tools from the left menu).
3. Right-click /apps/myproject, then select Create, Create Component.
4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter page.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Type: foundation/components/page (in AEM 6, you specify this value for page components. In previous versions of AEM, this was not required.)

5. Select Next for Advanced Component Settings and Allowed Parents.
6. Select OK on Allowed Children.
7. Under /apps/myproject/page, add the following files.

  • author.html
  • body.html
  • head.html
  • page.html
8. Right-click /apps/myproject/components, then select Create, Create Component.

9. Enter the following information into the Create Component dialog box:
 
  • Label: The name of the component to create. Enter contentpage.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Type: myproject/page (in AEM 6, you specify this value for page components. In previous versions of AEM, this was not required.)

10. Select Next for Advanced Component Settings and Allowed Parents.
11. Select OK on Allowed Children.

author.html

The following represents the author.html file.

<!--/* Outputs the WCM initialization code.If WCM mode is disabled nothing is rendered */-->
<meta
	data-sly-use.wcmInit="/libs/wcm/foundation/components/page/initwcm.js"
	data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" 
	data-sly-test="${!wcmmode.disabled && wcmInit.isTouchAuthoring}" data-sly-call="${clientLib.all @ categories='cq.authoring.page'}" data-sly-unwrap></meta>
<meta data-sly-test="${!wcmmode.disabled && !wcmInit.isTouchAuthoring}" data-sly-call="${clientLib.all @ categories='cq.wcm.edit'}" data-sly-unwrap></meta>
<script data-sly-test="${!wcmmode.disabled && !wcmInit.isTouchAuthoring}" type="text/javascript">
    (function() {

        var cfg = ${wcmInit.undoConfig @ context='unsafe'};
        cfg.pagePath = "${currentPage.path @ context='uri'}";

        if (CQClientLibraryManager.channelCB() != "touch") {
            cfg.enabled = ${wcmmode.edit @ context="scriptString"};
            CQ.undo.UndoManager.initialize(cfg);
            CQ.Ext.onReady(function() {
                CQ.undo.UndoManager.detectCachedPage((new Date()).getTime());
            });
        }
    })();

    CQ.WCM.launchSidekick("${currentPage.path @ context='uri'}", {
        propsDialog: "${wcmInit.dialogPath @ context='uri'}",
        locked: ${currentPage.locked @ context="scriptString"},
        previewReload: "true"
    });
</script>

body.html

The following code represemts the body.html.

<div class="content" data-sly-include="content.html">
This will be removed.
</div>

head.html

The following code represents the head.html file.

<meta data-sly-test="${!wcmmode.disabled}" data-sly-include="author.html" data-sly-unwrap></meta>


<title> Simple Parser</title>

<!--/** needed for cloudservices like DTM  **/-->    
<meta data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" data-sly-unwrap/>   

page.html

The following code represents page.html. 

<html>
	<head data-sly-include="head.html">
		<script>
			All of the inner elements will be removed during rendering...
		</script>
	</head>
	<body data-sly-include="body.html">
	</body>
</html>

content.html

The following code represents code located at /apps/myproject/page/contentpage/content.html.

<div data-sly-resource="${ 'quote' @ resourceType='myproject/components/parser'}">
When using things like data-sly-resource, this content will be replaced by the output of the component.
</div>

Setup Maven in your development environment

You can use Maven to build an OSGi bundle that uses the JCR API and is deployed to Experience Manager. Maven manages required JAR files that a Java project needs in its class path. Instead of searching the Internet trying to find and download third-party JAR files to include in your project’s class path, Maven manages these dependencies for you.

You can download Maven 3 from the following URL:

http://maven.apache.org/download.html

After you download and extract Maven, create an environment variable named M3_HOME. Assign the Maven install location to this environment variable. For example:

C:\Programs\Apache\apache-maven-3.0.4

Set up a system environment variable to reference Maven. To test whether you properly setup Maven, enter the following Maven command into a command prompt:

%M3_HOME%\bin\mvn -version

This command provides Maven and Java install details and resembles the following message:

OS name: "windows 7", version: "6.1", arch: "amd64", family: "windows"

 

Note:

For more information about setting up Maven and the Home variable, see: Maven in 5 Minutes.

Next, copy the Maven configuration file named settings.xml from [install location]\apache-maven-3.0.4\conf\ to your user profile. For example, C:\Users\scottm\.m2\.

You have to configure your settings.xml file to use Adobe’s public repository. For information, see Adobe Public Maven Repository at http://repo.adobe.com/.

The following XML code represents a settings.xml file that you can use.

<?xml version="1.0" encoding="UTF-8"?>

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<!--
 | This is the configuration file for Maven. It can be specified at two levels:
 |
 |  1. User Level. This settings.xml file provides configuration for a single user, 
 |                 and is normally provided in ${user.home}/.m2/settings.xml.
 |
 |                 NOTE: This location can be overridden with the CLI option:
 |
 |                 -s /path/to/user/settings.xml
 |
 |  2. Global Level. This settings.xml file provides configuration for all Maven
 |                 users on a machine (assuming they're all using the same Maven
 |                 installation). It's normally provided in 
 |                 ${maven.home}/conf/settings.xml.
 |
 |                 NOTE: This location can be overridden with the CLI option:
 |
 |                 -gs /path/to/global/settings.xml
 |
 | The sections in this sample file are intended to give you a running start at
 | getting the most out of your Maven installation. Where appropriate, the default
 | values (values used when the setting is not specified) are provided.
 |
 |-->
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0" 
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
  <!-- localRepository
   | The path to the local repository maven will use to store artifacts.
   |
   | Default: ~/.m2/repository
  <localRepository>/path/to/local/repo</localRepository>
  -->

  <!-- interactiveMode
   | This will determine whether maven prompts you when it needs input. If set to false,
   | maven will use a sensible default value, perhaps based on some other setting, for
   | the parameter in question.
   |
   | Default: true
  <interactiveMode>true</interactiveMode>
  -->

  <!-- offline
   | Determines whether maven should attempt to connect to the network when executing a build.
   | This will have an effect on artifact downloads, artifact deployment, and others.
   |
   | Default: false
  <offline>false</offline>
  -->

  <!-- pluginGroups
   | This is a list of additional group identifiers that will be searched when resolving plugins by their prefix, i.e.
   | when invoking a command line like "mvn prefix:goal". Maven will automatically add the group identifiers
   | "org.apache.maven.plugins" and "org.codehaus.mojo" if these are not already contained in the list.
   |-->
  <pluginGroups>
    <!-- pluginGroup
     | Specifies a further group identifier to use for plugin lookup.
    <pluginGroup>com.your.plugins</pluginGroup>
    -->
  </pluginGroups>

  <!-- proxies
   | This is a list of proxies which can be used on this machine to connect to the network.
   | Unless otherwise specified (by system property or command-line switch), the first proxy
   | specification in this list marked as active will be used.
   |-->
  <proxies>
    <!-- proxy
     | Specification for one proxy, to be used in connecting to the network.
     |
    <proxy>
      <id>optional</id>
      <active>true</active>
      <protocol>http</protocol>
      <username>proxyuser</username>
      <password>proxypass</password>
      <host>proxy.host.net</host>
      <port>80</port>
      <nonProxyHosts>local.net|some.host.com</nonProxyHosts>
    </proxy>
    -->
  </proxies>

  <!-- servers
   | This is a list of authentication profiles, keyed by the server-id used within the system.
   | Authentication profiles can be used whenever maven must make a connection to a remote server.
   |-->
  <servers>
    <!-- server
     | Specifies the authentication information to use when connecting to a particular server, identified by
     | a unique name within the system (referred to by the 'id' attribute below).
     | 
     | NOTE: You should either specify username/password OR privateKey/passphrase, since these pairings are 
     |       used together.
     |
    <server>
      <id>deploymentRepo</id>
      <username>repouser</username>
      <password>repopwd</password>
    </server>
    -->
    
    <!-- Another sample, using keys to authenticate.
    <server>
      <id>siteServer</id>
      <privateKey>/path/to/private/key</privateKey>
      <passphrase>optional; leave empty if not used.</passphrase>
    </server>
    -->
  </servers>

  <!-- mirrors
   | This is a list of mirrors to be used in downloading artifacts from remote repositories.
   | 
   | It works like this: a POM may declare a repository to use in resolving certain artifacts.
   | However, this repository may have problems with heavy traffic at times, so people have mirrored
   | it to several places.
   |
   | That repository definition will have a unique id, so we can create a mirror reference for that
   | repository, to be used as an alternate download site. The mirror site will be the preferred 
   | server for that repository.
   |-->
  <mirrors>
    <!-- mirror
     | Specifies a repository mirror site to use instead of a given repository. The repository that
     | this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
     | for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
     |
    <mirror>
      <id>mirrorId</id>
      <mirrorOf>repositoryId</mirrorOf>
      <name>Human Readable Name for this Mirror.</name>
      <url>http://my.repository.com/repo/path</url>
    </mirror>
     -->
  </mirrors>
  
  <!-- profiles
   | This is a list of profiles which can be activated in a variety of ways, and which can modify
   | the build process. Profiles provided in the settings.xml are intended to provide local machine-
   | specific paths and repository locations which allow the build to work in the local environment.
   |
   | For example, if you have an integration testing plugin - like cactus - that needs to know where
   | your Tomcat instance is installed, you can provide a variable here such that the variable is 
   | dereferenced during the build process to configure the cactus plugin.
   |
   | As noted above, profiles can be activated in a variety of ways. One way - the activeProfiles
   | section of this document (settings.xml) - will be discussed later. Another way essentially
   | relies on the detection of a system property, either matching a particular value for the property,
   | or merely testing its existence. Profiles can also be activated by JDK version prefix, where a 
   | value of '1.4' might activate a profile when the build is executed on a JDK version of '1.4.2_07'.
   | Finally, the list of active profiles can be specified directly from the command line.
   |
   | NOTE: For profiles defined in the settings.xml, you are restricted to specifying only artifact
   |       repositories, plugin repositories, and free-form properties to be used as configuration
   |       variables for plugins in the POM.
   |
   |-->
  <profiles>
    <!-- profile
     | Specifies a set of introductions to the build process, to be activated using one or more of the
     | mechanisms described above. For inheritance purposes, and to activate profiles via <activatedProfiles/>
     | or the command line, profiles have to have an ID that is unique.
     |
     | An encouraged best practice for profile identification is to use a consistent naming convention
     | for profiles, such as 'env-dev', 'env-test', 'env-production', 'user-jdcasey', 'user-brett', etc.
     | This will make it more intuitive to understand what the set of introduced profiles is attempting
     | to accomplish, particularly when you only have a list of profile id's for debug.
     |
     | This profile example uses the JDK version to trigger activation, and provides a JDK-specific repo.
    <profile>
      <id>jdk-1.4</id>

      <activation>
        <jdk>1.4</jdk>
      </activation>

      <repositories>
        <repository>
          <id>jdk14</id>
          <name>Repository for JDK 1.4 builds</name>
          <url>http://www.myhost.com/maven/jdk14</url>
          <layout>default</layout>
          <snapshotPolicy>always</snapshotPolicy>
        </repository>
      </repositories>
    </profile>
    -->

    <!--
     | Here is another profile, activated by the system property 'target-env' with a value of 'dev',
     | which provides a specific path to the Tomcat instance. To use this, your plugin configuration
     | might hypothetically look like:
     |
     | ...
     | <plugin>
     |   <groupId>org.myco.myplugins</groupId>
     |   <artifactId>myplugin</artifactId>
     |   
     |   <configuration>
     |     <tomcatLocation>${tomcatPath}</tomcatLocation>
     |   </configuration>
     | </plugin>
     | ...
     |
     | NOTE: If you just wanted to inject this configuration whenever someone set 'target-env' to
     |       anything, you could just leave off the <value/> inside the activation-property.
     |
    <profile>
      <id>env-dev</id>

      <activation>
        <property>
          <name>target-env</name>
          <value>dev</value>
        </property>
      </activation>

      <properties>
        <tomcatPath>/path/to/tomcat/instance</tomcatPath>
      </properties>
    </profile>
    -->
  

<profile>

                <id>adobe-public</id>

                <activation>

                    <activeByDefault>true</activeByDefault>

                </activation>

                <repositories>

                  <repository>

                    <id>adobe</id>

                    <name>Nexus Proxy Repository</name>

                    <url>http://repo.adobe.com/nexus/content/groups/public/</url>

                    <layout>default</layout>

                  </repository>

                </repositories>

                <pluginRepositories>

                  <pluginRepository>

                    <id>adobe</id>

                    <name>Nexus Proxy Repository</name>

                    <url>http://repo.adobe.com/nexus/content/groups/public/</url>

                    <layout>default</layout>

                  </pluginRepository>

                </pluginRepositories>

            </profile>

</profiles>

  <!-- activeProfiles
   | List of profiles that are active for all builds.
   |
  <activeProfiles>
    <activeProfile>alwaysActiveProfile</activeProfile>
    <activeProfile>anotherAlwaysActiveProfile</activeProfile>
  </activeProfiles>
  -->
</settings>

Create an Experience Manager project 

You can create an Experience Manager archetype project by using the Maven archetype plugin. In this example, assume that the working directory is C:\AdobeCQ.

plugin1

To create an Experience Manager archetype project, perform these steps:

1. Open the command prompt and go to your working directory (for example, C:\AdobeCQ).

2. Run the following Maven command:

mvn archetype:generate -DarchetypeRepository=https://repo.adobe.com/nexus/content/groups/public/ -DarchetypeGroupId=com.day.jcr.vault -DarchetypeArtifactId=multimodule-content-package-archetype -DarchetypeVersion=1.0.2 -DgroupId=com.community.querybuilder -DartifactId=sightlyQB -Dversion=1.0-SNAPSHOT -Dpackage=com.community.querybuilder -DappsFolderName=myproject -DartifactName="My Project" -DcqVersion="5.6.1" -DpackageGroup="My Company"

3. When prompted for additional information, specify Y.

4. Once done, you will see a message like:
[INFO] Finished at: Wed Mar 27 13:38:58 EDT 2013
[INFO] Final Memory: 10M/184M

5. Change the command prompt to the generated project. For example: C:\AdobeCQ\sightlyQB. Run the following Maven command:
mvn eclipse:eclipse

After you run this command, you can import the project into Eclipse as discussed in the next section.
 

Add Java files to the Maven project using Eclipse 

To make it easier to work with the Maven generated project, import it into the Eclipse development environment, as shown in the following illustration.

Project
Eclipse Project dialog

Note:

Delete all packages other than the com.community.querybuilder package. As well, keep the HelloService Java class. You will replace the Java code in this file. 

The next step is to add Java files to the com.community.querybuilder package. The Java classes are named:

  • HelloService - this class is the Java side of the HTL component and extends com.adobe.cq.sightly.WCMUse, which is an abstract class that implements the Use interface. For information, see WCMUse.
  • Foo - an interface that exposes a method named getAEMData. This method returns a List instance that contains data returned by the QueryBuilder API. 
  • FooImpl - the implementation class of Foo that contains application logic for getAEMData. This class uses the QueryBuilder API. 

 

Note:

 Make sure that these three Java files are the only files in this  project. 

HelloService class

The HelloService class extends the WCMUse class and is the entry point used by the HTML side of the HTL component. This method contains this annotated method that is invoked when the OSGi bundle is activated: 


{

logger.info("Inside activate");
service = getSlingScriptHelper().getService(com.community.querybuilder.Foo.class);


}

The getSlingScriptHelper().getService() method is how you create an object of the service from within a HTL Java class that extends WCMUse. The Foo service contains QueryBuilder API and uses Dependency Injection to create a QueryBuilder object.

If you attempted to create a Java object by using the new operation, dependency injection does not work:

Foo service = new Foo() ; //Does not work and Dependecny injection throws a Java Null pointer exception

In fact, getSlingScriptHelper().getService is similiar to JSP code that gets an AEM service:

sling.getService();

The HelloService class contains a method named getFiles() that returns a List instance. This List object contains a result set that is displayed in the HTL component (see the illustration shown at the beginning of this development article).

The following code represents the entire HelloService Java class. 

 

package com.community.querybuilder;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;



import org.apache.sling.api.resource.Resource;
import org.osgi.framework.FrameworkUtil;
import org.osgi.framework.ServiceReference;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.adobe.cq.sightly.WCMUse;


public class HelloService extends WCMUse
{
  Logger logger = LoggerFactory.getLogger(HelloService.class);
  protected String searchterm;  
  
  protected com.community.querybuilder.Foo service;
  private List<String> file;   

  
  @Override
  public void activate()
   
  {
	
	  this.searchterm = getProperties().get("search", "").toLowerCase();
	  
	  if(this.searchterm.compareTo("")==0)
		  this.searchterm="Geometrixx";
	  service = getSlingScriptHelper().getService(com.community.querybuilder.Foo.class);
	  
  }
  
  public List<String> getFiles()
  {
	    
	  
	  logger.info("The search term is " +this.searchterm);
	  this.file = new ArrayList();
	  this.file =service.getAEMData(this.searchterm);
	    return this.file;
  }
  
  
}




Foo interface

The Foo inteface defines the method that is exposed by the Service. The following Java code represents the Foo service. 

package com.community.querybuilder;

import java.util.List;

public interface Foo {
	
    public List getAEMData(String fulltextSearchTerm);

}

FooImpl class

The FooImpl class uses the following Apache Felix SCR annotations to create the OSGi component:

  • @Component- defines the class as a component
  • @Service - defines the service interface that is provided by the component
  • @Reference - injects a service into the component

In this development article, a QueryBuilder instance is injected into the getAEMData method. This instance is required to perform Query Builder operations from within an OSGi bundle. To inject a QueryBuilder instance, you use the @Reference annotation to define a class member, as shown in the following example.

private QueryBuilder builder

Within the getAEMData method, a ResourceResolverFactory instance is injected. This instance is required to create a Session instance that lets you create a Query instance. To inject a ResourceResolverFactory instance, you use the @Reference annotation to define a class member, as shown in the following example.

//Inject a Sling ResourceResolverFactory
@Reference
private ResourceResolverFactory resolverFactory;

@Reference
private QueryBuilder builder ;

@Override
public List getAEMData(){

List<String> hyperLinks = new ArrayList();

try
{
  logger.info("Getting Ready to create SESSION!!");

  //Invoke the adaptTo method to create a Session
   ResourceResolver resourceResolver = resolverFactory.getAdministrativeResourceResolver(null);
  session = resourceResolver.adaptTo(Session.class);

Note: This code:

ResourceResolver resourceResolver = resolverFactory.getAdministrativeResourceResolver(null);    

session = resourceResolver.adaptTo(Session.class);

is  brevity code and used in this example to keep it simple. To create a session in a production environment, it is recommended that you use a dedicated AEM user account and sling mapping. For details, see this article: Using the Java Query Object Model within Adobe Experience Manager.

The getAEMData method returns an List object that contains data that conforms to the QueryBuilder search. In this development article, the following QueryBuilder search is used.

// create query description as hash map (simplest way, same as form post)
Map<String, String> map = new HashMap<String, String>();

// create query description as hash map (simplest way, same as form post)
map.put("path", "/content");
map.put("type", "cq:Page");
map.put("group.p.or", "true"); // combine this group with OR
map.put("group.1_fulltext", fulltextSearchTerm);
map.put("group.1_fulltext.relPath", "jcr:content");
map.put("group.2_fulltext", fulltextSearchTerm);
map.put("group.2_fulltext.relPath", "jcr:content/@cq:tags");

// can be done in map or with Query methods
map.put("p.offset", "0"); // same as query.setStart(0) below
map.put("p.limit", "20"); // same as query.setHitsPerPage(20) below

//Create a Query instance
Query query = builder.createQuery(PredicateGroup.create(map), session);

Note: The search term (fulltextSearchTerm)  is passed to the service from the HTL dialog. 

The following Java code shows how to process the result set of the query. Notice that the results are placed into a List instance.  

query.setHitsPerPage(20);

SearchResult result = query.getResult();

logger.info("Did we get the result");

// paging metadata
int hitsPerPage = result.getHits().size(); // 20 (set above) or lower
long totalMatches = result.getTotalMatches();
long offset = result.getStartIndex();
long numberOfPages = totalMatches / 20;



// iterating over the results
for (Hit hit : result.getHits()) {
    String path = hit.getPath();
    //Create a result element
    hyperLinks.add(path);

}

The following Java code represents the FooImpl class.

package com.community.querybuilder;

import java.util.ArrayList;
import java.util.List;

import javax.jcr.Session;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Default;
import org.apache.sling.models.annotations.Model;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;


import org.apache.felix.scr.annotations.Reference;
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;


//Sling Imports
import org.apache.sling.api.resource.ResourceResolverFactory ; 
import org.apache.sling.api.resource.ResourceResolver; 
import org.apache.sling.api.resource.Resource; 
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;

//QUeryBuilder APIs
import com.day.cq.search.QueryBuilder; 
import com.day.cq.search.Query; 
import com.day.cq.search.PredicateGroup;
import com.day.cq.search.result.SearchResult;
import com.day.cq.search.result.Hit; 

@Component

@Service
public class FooImpl implements com.community.querybuilder.Foo {

	
	
		
		
		 Logger logger = LoggerFactory.getLogger(FooImpl.class);
		
		private Session session;
	    
		//Inject a Sling ResourceResolverFactory
		@Reference
		private ResourceResolverFactory resolverFactory;
		
		@Reference
		private QueryBuilder builder ; 
		
		@Override
		public List getAEMData(String fulltextSearchTerm){
			
			List<String> hyperLinks = new ArrayList();
			
			try
		    {
				
				
				
				logger.info("Getting Ready to create SESSION!!");
				
				//Invoke the adaptTo method to create a Session 
				ResourceResolver resourceResolver = resolverFactory.getAdministrativeResourceResolver(null);
			    session = resourceResolver.adaptTo(Session.class);
			    
			   
			    
	            
		        // create query description as hash map 
		        Map<String, String> map = new HashMap<String, String>();        
                        map.put("path", "/content");
		        map.put("type", "cq:Page");
		        map.put("group.p.or", "true"); // combine this group with OR
		        map.put("group.1_fulltext", fulltextSearchTerm);
		        map.put("group.1_fulltext.relPath", "jcr:content");
		        map.put("group.2_fulltext", fulltextSearchTerm);
		        map.put("group.2_fulltext.relPath", "jcr:content/@cq:tags");
		        // can be done in map or with Query methods
		        map.put("p.offset", "0"); // same as query.setStart(0) below
		        map.put("p.limit", "20"); // same as query.setHitsPerPage(20) below
		                          
		      Query query = builder.createQuery(PredicateGroup.create(map), session);
		        query.setStart(0);
		        query.setHitsPerPage(20);
		                    
		        SearchResult result = query.getResult();
		        
		        logger.info("Did we get the result");
		                        
		        // paging metadata
		        int hitsPerPage = result.getHits().size(); // 20 (set above) or lower
		        long totalMatches = result.getTotalMatches();
		        long offset = result.getStartIndex();
		        long numberOfPages = totalMatches / 20;
		                       
		     
		                       
		        // iterating over the results
		        for (Hit hit : result.getHits()) {
		               String path = hit.getPath();
		                //Create a result element
		               hyperLinks.add(path);
		                                         
		        }
		       
		        //close the session
		        session.logout();  
		        
		    
		    }
			catch(Exception e)
			{
				 this.logger.info("Something went wrong with session .. {}", e);
			}
		   return hyperLinks;
		}

	}

Modify the Maven POM file 

Modify the POM files to successfully build the OSGi bundle. In the POM file located at C:\AdobeCQ\sightlyQB\bundle, add the following dependencies.

  • org.apache.felix.scr
  • org.apache.felix.scr.annotations
  • org.apache.jackrabbit
  • org.apache.sling

The following XML represents this POM file. 

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd ">
    <modelVersion>4.0.0</modelVersion>
    <!-- ====================================================================== -->
    <!-- P A R E N T P R O J E C T D E S C R I P T I O N -->
    <!-- ====================================================================== -->
    <parent>
        <groupId>com.community.querybuilder</groupId>
        <artifactId>sightlyQB</artifactId>
        <version>1.0-SNAPSHOT</version>
    </parent>

    <!-- ====================================================================== -->
    <!-- P R O J E C T D E S C R I P T I O N -->
    <!-- ====================================================================== -->

    <artifactId>sightlyQB-bundle</artifactId>
    <packaging>bundle</packaging>
    <name>My Project Bundle</name>

   <dependencies>
                         
             
             <dependency>
				<groupId>javax.inject</groupId>
				<artifactId>javax.inject</artifactId>
				<version>1</version>
			</dependency>
             
             
             
             <dependency>
                <groupId>com.adobe.aem</groupId>
                <artifactId>aem-api</artifactId>
                <version>6.0.0.1</version>
                <scope>provided</scope>
            </dependency>
             
             
            <dependency>
                <groupId>org.apache.sling</groupId>
                <artifactId>org.apache.sling.jcr.jcr-wrapper</artifactId>
                <version>2.0.0</version>
                <scope>provided</scope>
            </dependency>
             
            <dependency>
                <groupId>org.osgi</groupId>
                <artifactId>org.osgi.core</artifactId>
                <version>4.2.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>org.osgi</groupId>
                <artifactId>org.osgi.compendium</artifactId>
                <version>4.2.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>org.apache.felix</groupId>
                <artifactId>org.apache.felix.scr.annotations</artifactId>
                <version>1.6.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>biz.aQute</groupId>
                <artifactId>bndlib</artifactId>
                <version>1.43.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>org.slf4j</groupId>
                <artifactId>slf4j-api</artifactId>
                <version>1.5.10</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>javax.servlet</groupId>
                <artifactId>servlet-api</artifactId>
                <version>2.5</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>javax.jcr</groupId>
                <artifactId>jcr</artifactId>
                <version>2.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>org.apache.sling</groupId>
                <artifactId>org.apache.sling.api</artifactId>
                <version>2.2.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>org.apache.sling</groupId>
                <artifactId>org.apache.sling.jcr.api</artifactId>
                <version>2.1.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>junit</groupId>
                <artifactId>junit</artifactId>
                <version>4.8.1</version>
                <scope>test</scope>
            </dependency>
        </dependencies>

    <!-- ====================================================================== -->
    <!-- B U I L D D E F I N I T I O N -->
    <!-- ====================================================================== -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-scr-plugin</artifactId>
                <executions>
                    <execution>
                        <id>generate-scr-descriptor</id>
                        <goals>
                            <goal>scr</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-bundle-plugin</artifactId>
                <extensions>true</extensions>
                <configuration>
                    <instructions>
                        <Bundle-SymbolicName>com.community.querybuilder.sightlyQB-bundle</Bundle-SymbolicName>
                    </instructions>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.sling</groupId>
                <artifactId>maven-sling-plugin</artifactId>
                <configuration>
                    <slingUrl>http://${crx.host}:${crx.port}/apps/myproject/install</slingUrl>
                    <usePut>true</usePut>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-javadoc-plugin</artifactId>
                 <configuration>
                    <excludePackageNames>
                        *.impl
                    </excludePackageNames>
                 </configuration>
            </plugin>
        </plugins>
    </build>
</project>

Build the OSGi bundle using Maven 

To build the OSGi component by using Maven, perform these steps:

  1. Open the command prompt and go to the C:\AdobeCQ\sightlyQB folder.
  2. Run the following maven command: mvn clean install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\sightlyQB\bundle\target. The file name of the OSGi component is sightlyQB-bundle-1.0-SNAPSHOT.jar.

Deploy the bundle to AEM 

Once you deploy the OSGi bundle, you are able to create a HTL component that interacts with it. After you deploy the OSGi bundle, you will be able to see it in the Apache Felix Web Conole.

OSGiBundle
Apache Felix Web Console Bundles view

Deploy the OSGi bundle to AEM by performing these steps:

  1. Login to Apache Felix Web Console at http://server:port/system/console/bundles (default admin user = admin with password= admin).
  2. Click the Bundles tab, sort the bundle list by Id, and note the Id of the last bundle.
  3. Click the Install/Update button.
  4. Browse to the bundle JAR file you just built using Maven. (C:\AdobeCQ\sightlyQB\bundle\target).
  5. Click Install.
  6. Click the Refresh Packages button.
  7. Check the bundle with the highest Id.
  8. Click Active. Your new bundle should now be listed with the status Active.
  9. If the status is not Active, check the CQ error.log for exceptions.

 

Create an AEM 6 HTL component

Perform these tasks using CRXDE Lite:

1. Right click on /apps/myproject/components and then select New, Component.

2. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter parser.
  • Title: The title that is assigned to the component. Enter parser.
  • Description: The description that is assigned to the template. Enter parser.
    Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side rail or side kick where the component appears. Enter General. (The herosightly component is located under the General heading in the Touch UI side rail. Also appears in General in the classic view sidekick.)
  • Allowed parents: Enter */*parsys.

3. Add the following properties to this node:

  • cq:isContainer (Boolean) - false
  • cq:noDecoration (Boolean) - false

4. Click Ok.

cq:noDecoration

Add a dialog to the HTL component

A dialog lets an author click on the component in the Touch UI (or Classic UI) view during design time and enter values that are used by the component. The component created in this development article lets the AEM author specify the URL to the HTML page to parse. 

DialogQB
Dialog for the HTL component

The following illustration shows the JCR nodes for this component. 

dialogJCR
JCR nodes that create the dialog

Build the dialog by performing these tasks:

1. Select /apps/myproject/components/parser.

2. Right click and select Create, Create Dialog.

3. Enter the following values:

  • Label: Sightly QueryBuilder Component
  • Title: Sightly QueryBuilder Component

4. Add the following properties to the cq:dialog node.

  • xtype (String) - panel

5. Delete all nodes under /apps/myproject/components/parser/dialog.

 6. Select /apps/myproject/components/parser/dialog.

7. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: cq:WidgetCollections.

8. Click on the following node: /apps/myproject/components/parser/dialog/items.
9. Right click and select Create, Create Node. Enter the following values:

  • Name: search
  • Type: cq:Widget

10. Add the following properties to the address node.

  • fieldLabel (String) - Search Term
  • name (String) - ./search
  • xtype (String) - textarea

Modify the parser.html file 

Add an HTML file, named parser.html, to the following JCR location:

/apps/myproject/components/parser/

You enter the client portion of the HTL component to this file. This code interacts with the HelloService class that was created earlier. 

Add the following HTML to this file.

<div data-sly-test="${wcmmode.edit && !properties.search}">
  	AEM Sightly/QueryBuilder Example
</div>   

AEM QueryBuilder Sightly Example: 
<div data-sly-test="${properties.search}" data-sly-use.v="com.community.querybuilder.HelloService">
<b>Here are the QueryBuilder results that corrresponds to ${properties.search}:</b>
    <ul data-sly-list="${v.files}"> 
        <li>${item}</li>
    </ul>   
</div>

Note:

You can delete the parser.jsp file from /apps/myproject/components/parser/.

Next notice these lines of HTL code:

<b>Here are the QueryBuilder results that corrresponds to ${properties.search}:</b>
<ul data-sly-list="${v.files}">
<li>${item}</li>
</ul>
</div>

 

Here, is an instance of HelloService class developed earlier in this article. The code

<li>${item}</li>
</ul>

is how you handle a collection. In this example, v.files maps to this getFiles method in the HelloService class. This method returns a List object. Each String element in the List object is displayed in the HTL component (the List object was populated with results by using the QueryBuilder API).

The code, ${properties.search}, represents the value that the author entered into the dialog. The ${properties.search} value is passed to the Java class and is used to populate the searchterm data member in the HelloService class.

this.searchterm = getProperties().get("search", "").toLowerCase();

THis is how values entered into a HTL dialog are passed to the backend Java class. 

Create an AEM web page based on the contentpage template 

The final task is to create a page that is based on the contentpage template (the template created earlier in this development article). When you open this web page, you can enter the search term into the dialog. The results are displayed in the page.

Create an AEM web page based on the contentpage template by performing these tasks:

  1. Go to the CQ  page at http://localhost:4502/siteadmin#/content.
  2. Select New Page.
  3. Specify the title of the page in the Title field.
  4. Specify the name of the page in the Name field.
  5. Select contentpage from the template list that appears. This value represents the template that is created in this development article. If you do not see it, then repeat the steps in this development article. For example, if you made a typing mistake when entering in path information, the template will not show up in the New Page dialog box.
  6. Open the new page that you created by double-clicking it in the right pane. The new page opens in a web browser.  

See also

Congratulations, you have just created a HTL component that uses the QueryBuilder API to display AEM JCR data. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy