Article summary

Summary

Discusses how to create an Adobe Experience Manager (AEM) 6 application that queries data from the AEM JCR. This article creates an OSGi bundle that uses the JCR Query API to query and filter data. In addition, discusses how to invoke an OSGi bundle operation from the client web page.

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.

This article uses the Sling method named getServiceResourceResolver to obtain a Session instance. This method replaces the use of the getAdministrativeResourceResolver method, which is deprecated in AEM 6.

resolver = resolverFactory.getServiceResourceResolver(param);

For more information, see Service Authentication.

If you are using a previous version of AEM, see Querying Adobe Experience Manager Data using the JCR API.

NOTE: In AEM 6.1, users must be system users, which effectively means that their node in the JCR is of type rep:SystemUser. See System users

These users cannot be used to log in normally, only by background processes. The admin user is not a system user, so you cannot use the admin user in a service user mapping like this. You have to create a new system user and assign them the appropriate permissions.If you would like to read more of the background on this change, take a look at https://issues.apache.org/jira/browse/SLING-3854.

This article was tested on AEM 6.1 with a valid system user and it functions as described in the article. 

Note: To run this code on the AEM Publisher Instance, you must create the System user on the Publisher instance. 

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
Java, JQuery, JCR SQL, CSS
AEM Versions(s) Adobe Experience Manager 6.0,6.1 
Video https://youtu.be/aDgckdmD0fI

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 write an OSGi bundle that contains a custom service that uses the getServiceResourceResolver method. This community code is for teaching purposes only and not meant to go into production as is. You can view the sample community application by using the following URL:

http://localhost:4502/content/DataQUery.html (assuming you deploy on author). 

Aftering installing the package, it is still necessary to perform these tasks:

  • create an AEM system user (or system user for AEM 6.1) named data with the permissions
  • map the user with the Sling Mapper service 

You must perform these two tasks, as outlined in this document, prior to running this sample. 

Download

Introduction

You can create an Adobe Experience Manager (AEM) application that queries data located in the AEM Java Content Repository (JCR). To query data, you use a javax.jcr.query.Query instance that belongs to the JCR Query API. This API supports both searching and querying operations. For example, assume that your AEM application tracks your organization’s customers. You can query the JCR to obtain a customer result set in which a digital marketer is interested.

Customer

The following illustration shows customer data displayed within an AEM application.

datagrid

In this workflow, customer data is retrieved from the AEM JCR and displayed within a data grid control located in a client web page. The JCR Query API is used within an OSGi bundle that returns a result set based on user input. In this article, data is filtered based on three options:

  1. All customers (both active and past customers are displayed as shown in the previous illustration).
  2. Active customers (only active customers are displayed).
  3. Past customers (only past customers are displayed).

This development article guides you through creating an AEM 6.x application that queries data from the JCR and displays the data in client web page.

To simplify the way customer data is persisted, customer data is stored as nt:unstructured nodes under /content/customer.

Customers

Application logic that queries data from the JCR is implemented as an OSGi bundle that is built using Declarative Services (DS) and Maven. DS is used to inject a ResourceResolverFactory instance into the service. The OSGi bundle is a managed component, which means that the OSGi service container creates the ResourceResolverFactory instance.

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. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp
  2. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  3. Enter the folder name into the Create Folder dialog box. Enter jcrquery
  4. Repeat steps 1-4 for each folder specified in the previous illustration. 
    Click the Save All button.

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. An AEM 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. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp.
2. Right-click the template folder (within your application), select Create, Create
Template.
3. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter templateQuery. 
  • 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 jcrquery/components/page/templateQuery.
  • 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.

4. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?
5. Click Next for Allowed Parents.
6. 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.

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. Go to CRXDE lite at http://localhost:4502/crx/de/index.jsp.
2. Right-click /apps/jcrquery/components/page, then select
Create, Create Component.
3. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter templateQuery
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Type: foundation/components/page

4. Select Next for Advanced Component Settings and Allowed Parents.
5. Select OK on Allowed Children.
6. Open the templateQueryjsp located at: /apps/jcrquery/components/page/templateQuery/templateQuery.jsp.
7. Enter the following JSP code.

<html>
<head>
<title>Hello World !!!</title>
</head>
<body>
<h1>Hello JCR!!!</h1>
<h2>This page will query the AEM JCR</h2>
</body>
</html>

Create a dedicated AEM user account

Create a dedicated AEM user account that can access AEM JCR data located at content/customer. The user account must have both read and write privileges, as shown in the following illustration. 

user

Note:

The new user created should be assigned with read access rights at root (/). To create users in this example AEM app, you also need to give the new user JCR write access. 

 

Create a System user account for AEM 6.1

To successfully query or persist data in AEM 6.1, you need to create an AEM System user. 

1. Open http://localhost:4502/crx/explorer/index.jsp.

2. Login as admin.

3. Click User Administration.

4. Click Create System User named data (data is used in this article).

5. Set the UserId. 

6. Click Save

7.  Access the AEM user page at http://localhost:4502/useradmin. 

8.  Select the data user.

9. From the right-hand pane, select the Permissions tab. 

10. Expand the content tab and then select the customers row. 

11. Click all the checkboxes that represent the permissions (click the top row in permissions for this example). 

12. Click the Save button located in the top menu bar (located above the Path heading).  

Creating an account for AEM 6

To create a dedicated user account, perform these tasks:

1. Access the AEM user page at http://localhost:4502/useradmin. 

2. Click the Edit buton, then select Create, Create User. 

3. Name the user data (to follow along with this article). Fill in the remaining fields. 

4. Click the Create button. 

5. Select the data user. 

6. From the right-hand pane, select the Permissions tab. 

7. Expand the content tab and then select the customers row. 

8. Click all the checkboxes that represent the permissions.

9. Click the Save button located in the top menu bar (located above the Path heading).  

 

Configure the AEM Sling Map Service

The next step is to configure the Apache Sling Service User Mapper service by adding a new entry. You specify the following value:

com.community.aem.slingjcr-bundle:datawrite=data

where:

  • com.community.aem.slingjcr-bundle – is the Bundle-SymbolicName value of the OSGi bundle this is developed in the upcoming sections of this article.
  • datawrite – the name of the sub service (you reference this value in a Java Map object)
  • data – the user account with data read/write privileges for content/customer. (In AEM 6.1, this must be a System User. See the link at this beginning of this article to learn how to create a System user.)

The following illustration shows an entry for this service. 

SlingMapping

To create an entry in the Apache Sling Mapper service, perform these tasks:

1. Go to the Apache Sling Mapper service at http://localhost:4502/system/console/configMgr. 

2. Click OSGI, Configurations. 

2. Scroll to an entry named Apache Sling Service User Mapper Service.

3. Enter the value com.community.aem.slingjcr-bundle:datawrite=data.

4. Click Save. 

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:

Default locale: en_US, platform encoding: Cp1252
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 archetype 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. 

Maven

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.aem -DartifactId=slingjcr -Dversion=1.0-SNAPSHOT -Dpackage=com.community.aem -DappsFolderName=myproject -DartifactName="My Project" -DcqVersion="5.6.1" -DpackageGroup="My Company"

3. When prompted for additional information, specify Y.

[[INFO] Total time: 14:46.131s
[INFO] Finished at: Wed Mar 27 13:38:58 EDT 2013
[INFO] Final Memory: 10M/184M

4. Change the working directory to slingjcr and 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

Note:

Delete all files and packages created by the Maven project. Keep the com.community.aem package. Add the three Java files to this package as specified in this article. 

The next step is to add Java files to the com.community.aem package. The Java files that you create in this section use the Java JCR API. For information, see http://www.day.com/maven/jsr170/javadocs/jcr-2.0/overview-summary.html.

Add the following Java files to the com.community.aem package:

  • A Java class named Customer that stores customer information.
  • A Java interface named CustomerService.
  • A Java class named CustomerServiceImp that implements the CustomerService interface.

Customer class

The following code represents the Customer class that is used to store customer information. This class contains getter and setter methods that modify class members.

package com.community.aem;


//This bean holds customer information
public class Customer {
	
	//Define private class members
	private String custId ;
	private String first; 
	private String last; 
	private String address;
	private String description; 
	
	
	public void setCustId(String id)
	{
		this.custId = id; 
	}
	
	public String getCustId()
	{
		return this.custId;
	}
	
	public void setCustFirst(String first)
	{
		this.first = first; 
	}
	
	public String getCustFirst()
	{
		return this.first;
	}
	
	public void setCustLast(String last)
	{
		this.last = last; 
	}
	
	public String getCustLast()
	{
		return this.last;
	}
	
	public void setCustAddress(String address)
	{
		this.address = address; 
	}
	
	public String getCustAddress()
	{
		return this.address;
	}
	
	public void setCustDescription(String description)
	{
		this.description = description; 
	}
	
	public String getCustDescription()
	{
		return this.description;
	}

}

CustomerService interface

The following code represents the CustomerService interface. This interface contains two method signatures named injestCustData and getCustomerData. The implementation logic for these methods is located in the CustomerServiceImp class. The getCustomerData method uses the JCR API to query customer data from the AEM JCR.

The following Java code represents the CustomerService interface. 

package com.community.aem;

import org.w3c.dom.Document;

public interface CustomerService {
	
	//Stores customer data in the Adobe CQ JCR
	public int injestCustData(String firstName, String lastName, String phone, String desc); 
	
	/*
	 * Retrieves customer data from the AEM JCR and returns all customer 
	 * data within an XML schema
	 *The filter argument specifies one of the following values:
	 *	 
	 *Customer - retrieves all customer data
	 *Active Customer- retrieves current customers from the JCR
	 *Past Customer - retrieves old customers no longer current customers 
	 */
	public String getCustomerData(String filter); 
	
}

CustomerServiceImp class

The CustomerServiceImp 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 ResourceResolverFactory instance is injected into the getCustomerData method. This instance is required to create a Session instance that lets you query the AEM JCR. 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;

Within the getCustomerData method, you reference the entry that you specified in the Apache Sling Mapper service. You use this to create a Session object, as shown here.

//This is a component so it can provide or consume services
@Component
  
@Service
public class CustomerServiceImpl implements CustomerService {
  
  
/** Default log. */
protected final Logger log = LoggerFactory.getLogger(this.getClass());
      
private Session session;
          
//Inject a Sling ResourceResolverFactory
@Reference
private ResourceResolverFactory resolverFactory;
      
 
 
//Queries the AEM JCR for customer data and returns
//the data within an XML schema   
public String getCustomerData(String filter) {
 
Customer cust = null;
 
List<Customer> custList = new ArrayList<Customer>();
Map<String, Object> param = new HashMap<String, Object>();
param.put(ResourceResolverFactory.SUBSERVICE, "datawrite");
ResourceResolver resolver = null;

try {
           
    //Invoke the adaptTo method to create a Session used to create a QueryManager
	resolver = resolverFactory.getServiceResourceResolver(param);
    session = resolver.adaptTo(Session.class);

Note:

When you open a JCR session, there is a reference to the JCR repository object. Every session will consume some memory unless the logout() method is called explicitly. If you do not call this call and create lots of sessions, you risk an out-of-memory exception by your JVM, which terminates the CQ instance. A single leaked session isn’t a problem, but if you have hundreds or thousands of leaked sessions, it might turn into a problem. For more information, see CQ development patterns – Sling ResourceResolver and JCR sessions.

The getCustomerData method returns an XML schema that contains customer data within a string. The JCR Query API is used to query the AEM JCR based on user input. In this example, the Description property of each Customer node stores either of these values:

  • Active Customer
  • Past Customer

Therefore the JCR query is setup to query all customer nodes, only active customer nodes, or only past customer nodes. This is achieved by querying the Description propery of all nt:unstructured nodes and seaching for the string value Customer (for all customer nodes), Active (only active customers), or Past (only past customers). 

//Set the query
// Obtain the query manager for the session ...
javax.jcr.query.QueryManager queryManager = session.getWorkspace().getQueryManager();
        
//Setup the query based on user input      
String sqlStatement="";
       
//Setup the query to get all customer records
if (filter.equals("All Customers"))
   sqlStatement = "SELECT * FROM [nt:unstructured] WHERE CONTAINS(desc, 'Customer')";
else if(filter.equals("Active Customer"))
    sqlStatement = "SELECT * FROM [nt:unstructured] WHERE CONTAINS(desc, 'Active')";
else if(filter.equals("Past Customer"))
    sqlStatement = "SELECT * FROM [nt:unstructured] WHERE CONTAINS(desc, 'Past')";
       	
javax.jcr.query.Query query = queryManager.createQuery(sqlStatement,"JCR-SQL2");

//Execute the query and get the results ...
javax.jcr.query.QueryResult result = query.execute();

In this example, JCR-SQL2 is used to query the AEM JCR. For information, see  http://www.day.com/specs/jcr/2.0/6_Query.html.

The following Java code represents the CustomerServiceImp class. For each customer node that is retrieved from the AEM JCR, a new Customer object is created and stored in an ArrayList. Data from each Customer object is retrieved from the ArrayList and stored in an XML schema by calling the toXML method. The XML schema is converted to a string that is used as the return value for getCustomerData

package com.community.aem;
 
import org.w3c.dom.Document;
import org.w3c.dom.Element;
   
   
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
   
import java.io.StringWriter;
import java.util.Iterator;
import java.util.List;
import java.util.ArrayList;
   
import javax.jcr.Repository; 
import javax.jcr.SimpleCredentials; 
import javax.jcr.Node; 
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import java.util.HashMap; 
import java.util.Map; 
    
import org.apache.jackrabbit.commons.JcrUtils;
   
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
   
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;
import javax.jcr.RepositoryException;
import org.apache.felix.scr.annotations.Reference;
import org.apache.jackrabbit.commons.JcrUtils;
   
import javax.jcr.Session;
import javax.jcr.Node; 
  
  
//Sling Imports
import org.apache.sling.api.resource.ResourceResolverFactory;
import org.apache.sling.api.resource.ResourceResolver; 
import org.apache.sling.api.resource.Resource; 
   
   
//This is a component so it can provide or consume services
@Component
   
@Service
public class CustomerServiceImpl implements CustomerService {
   
   
/** Default log. */
protected final Logger log = LoggerFactory.getLogger(this.getClass());
       
private Session session;
           
//Inject a Sling ResourceResolverFactory
@Reference
private ResourceResolverFactory resolverFactory;
       
  
  
//Queries the AEM JCR for customer data and returns
//the data within an XML schema   
public String getCustomerData(String filter) {
  
Customer cust = null;
  
List<Customer> custList = new ArrayList<Customer>();
Map<String, Object> param = new HashMap<String, Object>();
param.put(ResourceResolverFactory.SUBSERVICE, "datawrite");
ResourceResolver resolver = null;
 
try {
            
    //Invoke the adaptTo method to create a Session used to create a QueryManager
    resolver = resolverFactory.getServiceResourceResolver(param);
    session = resolver.adaptTo(Session.class);
     
      
    //Obtain the query manager for the session ...
    javax.jcr.query.QueryManager queryManager = session.getWorkspace().getQueryManager();
       
//Setup the quesry based on user input     
String sqlStatement="";
      
//Setup the query to get all customer records
if (filter.equals("All Customers"))
  sqlStatement = "SELECT * FROM [nt:unstructured] WHERE CONTAINS(desc, 'Customer')";
else if(filter.equals("Active Customer"))
sqlStatement = "SELECT * FROM [nt:unstructured] WHERE CONTAINS(desc, 'Active')";
else if(filter.equals("Past Customer"))
    sqlStatement = "SELECT * FROM [nt:unstructured] WHERE CONTAINS(desc, 'Past')";
          
javax.jcr.query.Query query = queryManager.createQuery(sqlStatement,"JCR-SQL2");
  
//Execute the query and get the results ...
javax.jcr.query.QueryResult result = query.execute();
  
//Iterate over the nodes in the results ...
javax.jcr.NodeIterator nodeIter = result.getNodes();
  
while ( nodeIter.hasNext() ) {
  
  //For each node-- create a customer instance
cust = new Customer();
          
 javax.jcr.Node node = nodeIter.nextNode();
            
 //Set all Customer object fields
 cust.setCustFirst(node.getProperty("firstName").getString());
 cust.setCustLast(node.getProperty("lastName").getString());
 cust.setCustAddress(node.getProperty("address").getString());
 cust.setCustDescription(node.getProperty("desc").getString());
            
  //Push Customer to the list
  custList.add(cust);
  }
          
// Log out
 session.logout();    
return convertToString(toXml(custList));               
              
}
catch(Exception e)
{
 e.printStackTrace();
}
return null;
}
  
  
  
  
//Stores customer data in the Adobe CQ JCR
public int injestCustData(String firstName, String lastName, String address, String desc)
{       
   
int num  = 0;
List<Customer> custList = new ArrayList<Customer>();
Map<String, Object> param = new HashMap<String, Object>();
param.put(ResourceResolverFactory.SUBSERVICE, "datawrite");
ResourceResolver resolver = null;
 
try {
            
    //Invoke the adaptTo method to create a Session used to create a QueryManager
    resolver = resolverFactory.getServiceResourceResolver(param);
    session = resolver.adaptTo(Session.class);
                
  //Create a node that represents the root node
  Node root = session.getRootNode();
                      
  //Get the content node in the JCR
  Node content = root.getNode("content");
                       
 //Determine if the content/customer node exists
 Node customerRoot = null;
 int custRec = doesCustExist(content);
                                             
 //-1 means that content/customer does not exist
 if (custRec == -1)
     //content/customer does not exist -- create it
    customerRoot = content.addNode("customer","nt:unstructured");
 else
   //content/customer does exist -- retrieve it
   customerRoot = content.getNode("customer");
                                  
   int custId = custRec+1; //assign a new id to the customer node
                       
   //Store content from the client JSP in the JCR
   Node custNode = customerRoot.addNode("customer"+firstName+lastName+custId,"nt:unstructured");
                
  //make sure name of node is unique
  custNode.setProperty("id", custId);
  custNode.setProperty("firstName", firstName);
  custNode.setProperty("lastName", lastName);
  custNode.setProperty("address", address); 
  custNode.setProperty("desc", desc);
                                     
  // Save the session changes and log out
  session.save();
  session.logout();
  return custId;
}
        
 catch(Exception  e){
     log.error("RepositoryException: " + e);
  }
return 0 ;
 }
       
   
/*
 * Determines if the content/customer node exists
 * This method returns these values:
 * -1 - if customer does not exist
 * 0 - if content/customer node exists; however, contains no children
 * number - the number of children that the content/customer node contains
*/
private int doesCustExist(Node content)
{
try
{
  int index = 0 ;
  int childRecs = 0 ;
       
java.lang.Iterable<Node> custNode = JcrUtils.getChildNodes(content, "customer");
Iterator it = custNode.iterator();
                
 //only going to be 1 content/customer node if it exists
if (it.hasNext())
 {
 //Count the number of child nodes to customer
 Node customerRoot = content.getNode("customer");
 Iterable itCust = JcrUtils.getChildNodes(customerRoot);
 Iterator childNodeIt = itCust.iterator();
               
//Count the number of customer child nodes
while (childNodeIt.hasNext())
{
 childRecs++;
 childNodeIt.next();
}
 return childRecs;
  }
else
return -1; //content/customer does not exist
}
catch(Exception e)
{
    e.printStackTrace();
}
return 0;
 }
   
   
  
       
       
//Convert Customer data retrieved from the AEM JCR
//into an XML schema to pass back to client
private Document toXml(List<Customer> custList) {
try
{
    DocumentBuilderFactory factory =     DocumentBuilderFactory.newInstance();
    DocumentBuilder builder = factory.newDocumentBuilder();
    Document doc = builder.newDocument();
                   
    //Start building the XML to pass back to the AEM client
    Element root = doc.createElement( "Customers" );
    doc.appendChild( root );
                
    //Get the elements from the collection
    int custCount = custList.size();
      
    //Iterate through the collection to build up the DOM           
     for ( int index=0; index < custCount; index++) {
   
         //Get the Customer object from the collection
         Customer myCust = (Customer)custList.get(index);
                        
         Element Customer = doc.createElement( "Customer" );
         root.appendChild( Customer );
                         
         //Add rest of data as child elements to customer
         //Set First Name
         Element first = doc.createElement( "First" );
         first.appendChild( doc.createTextNode(myCust.getCustFirst() ) );
         Customer.appendChild( first );
                                                            
         //Set Last Name
         Element last = doc.createElement( "Last" );
         last.appendChild( doc.createTextNode(myCust.getCustLast() ) );
         Customer.appendChild( last );
                      
         //Set Description
         Element desc = doc.createElement( "Description" );
         desc.appendChild( doc.createTextNode(myCust.getCustDescription() ) );
         Customer.appendChild( desc );
                     
         //Set Address
         Element address = doc.createElement( "Address" );
         address.appendChild( doc.createTextNode(myCust.getCustAddress()) );
         Customer.appendChild( address );
      }
              
return doc;
}
catch(Exception e)
{
    e.printStackTrace();
    }
return null;
}
   
   
private String convertToString(Document xml)
{
try {
   Transformer transformer = TransformerFactory.newInstance().newTransformer();
  StreamResult result = new StreamResult(new StringWriter());
  DOMSource source = new DOMSource(xml);
  transformer.transform(source, result);
  return result.getWriter().toString();
} catch(Exception ex) {
      ex.printStackTrace();
}
  return null;
 }
  
 }

Modify the Maven POM file

Modify the POM files to successfully build the OSGi bundle. In the POM file located at C:\AdobeCQ\slingjcr\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.aem</groupId>
        <artifactId>slingjcr</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>slingjcr-bundle</artifactId>
    <packaging>bundle</packaging>
    <name>My Project Bundle</name>

    <dependencies>
        
         
       
      <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.api</artifactId>
    <version>2.8.0</version>
</dependency>
 
        
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>org.osgi.compendium</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>org.osgi.core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.felix</groupId>
            <artifactId>org.apache.felix.scr.annotations</artifactId>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
        </dependency>
          
           
        <dependency>
         <groupId>org.apache.felix</groupId>
    
         <artifactId>org.osgi.core</artifactId>
    
         <version>1.4.0</version>
      </dependency>
          
         
           
    <dependency>
    <groupId>org.apache.jackrabbit</groupId>
    <artifactId>jackrabbit-core</artifactId>
    <version>2.4.3</version>
    </dependency>
        
    <dependency>
    <groupId>org.apache.jackrabbit</groupId>
    <artifactId>jackrabbit-jcr-commons</artifactId>
    <version>2.4.3</version>
    </dependency>
   <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
            
    
          
      <dependency>
         <groupId>javax.jcr</groupId>
         <artifactId>jcr</artifactId>
         <version>2.0</version>
      </dependency>
        
       <dependency>
            <groupId>com.day.cq.wcm</groupId>
            <artifactId>cq-wcm-api</artifactId>
            <version>5.5.0</version>
            <scope>provided</scope>
        </dependency>
          
        <dependency>
            <groupId>com.day.cq</groupId>
            <artifactId>cq-commons</artifactId>
            <version>5.5.0</version>
            <scope>provided</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.aem.slingjcr-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\slingjcr folder.
  2. Run the following maven command: mvn clean install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\slingjcr\bundle\target. The file name of the OSGi component is slingjcr-bundle-1.0-SNAPSHOT.jar.

Deploy the bundle to Experience Manager

Once you deploy the OSGi bundle, you are able to invoke the getCustomerData method defined in the CustomerServiceImpl class (this is shown later in this development article). After you deploy the OSGi bundle, you will be able to see it in the Apache Felix Web Conole.

OSGi

You will also be able to view the service defined in the OSGi bundle by using the Service tab in the Apache Felix Web Console.

Services

Note:

To view the services, simply click the Services tab.

Deploy the OSGi bundle by performing these steps:

  1. Login to the 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\slingjcr\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.
    If the status is not Active, check the CQ error.log for exceptions.

Note:

The name of the service defined within the OSGi bundle is com.adobe.cq.CustomerService.

Add CSS and JQuery files to a CQ:ClientLibraryFolder node 

You add CSS files and JQuery framework files to a cq:ClientLibraryFolder node to define the style of the client JSP. The JQuery framework file that is added is named jquery.js.

In addition to the JQuery framework file, a data grid plugin is used in this sample AEM application named DataTables. This plugin is used to display the customer data that is returned by the Customer service in a tabular format.

Download the DataTables plugin from the following URL:

http://www.datatables.net/

Download and extract the DataTables archive file. The client AEM application uses these files from the DataTables archive file:

  • demo_table.css
  • jquery.dataTables.js
  • jquery.dataTables.min.js

To add CSS files and JQuery framework files to your component, add a cq:ClientLibraryFolder node to your component. After you create the node, set properties that allow the JSP script to find the CSS files and the JQuery library files.

After you create the Clientlibs folder, add two CSS files, and the JQuery library files, and two map text files.

Site css file

The site.css file defines the display style for the client JSP file that lets the user enter and submit data. The following code represents the site.css file.

/* reset */
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
html , body{
 line-height: 1;
 background-color: #334873;
 background-image: url(../_images/bg-page2.png);
}
   
ol, ul {
 list-style: none;
}
   
   
table {
 border-collapse: collapse;
 border-spacing: 0;
}
/* end reset*/
   
   
   
h1, h2, h3 {
 font-family: 'ColaborateRegular', Arial, sans-serif; 
}
   
   
strong {
 font-family: 'ColaborateMediumRegular', Arial, sans-serif; 
}
   
em {
 font-family: 'ColaborateThinRegular', Arial, sans-serif; 
}
   
.content {
 max-width: 760px;
 margin: 20px 0 0 100px;
}
   
.clear:after { 
content: "."; display: block; height: 0; clear: both; visibility: hidden; 
}
   
.clear {
 min-height: 1px;
}
   
* html .clear {
 height: 1px;
}
   
.header {
 position: relative;
 border-top: solid 6px white;
 padding: 10px 0 10px 0;
 margin-bottom: 20px;
}
   
   
.main {
 xxposition: relative;
 padding-bottom: 1em;
 border-bottom: solid 1px rgba(255,255,255,.5);
 xxoverflow:hidden;
 xxmin-height: 300px;
}
   
.main h1 {
 font-size: 32px;
 color: white;
 text-shadow: 1px 1px 1px rgba(0,0,0,.75);
 border-bottom: solid 1px rgba(255,255,255,.5);
 margin-bottom: 0.75em;
}
   
   
p , li, legend , form{
 font-size: 18px;
 color: white;
 font-family: 'ColaborateLightRegular', Arial, sans-serif;
 line-height: 125%;
 margin-bottom: 10px;
}
   
fieldset {
 padding: 10px;
 border: 1px solid white;
 margin: 25px 0; 
}
   
.nav {
 margin: 10px 0 0 100px; 
}
   
.nav li {
 display: inline-block; 
}
   
.nav a:hover, .example:hover{
 background-color: rgba(255,255,255,.85);
 color: rgb(0,0,0);
}
   
h3 {
 font-size: 18px;
 color: rgb(227,198,133);;
}
   
.results h2 {
 color: rgba(255,255,255,1);
}
.results div {
 padding-bottom: 10px;
}
.results div code {
 float: right;
 width: 60%;
}
   
input {
 font-size: 20px;
}
.form .wide {
 font-size: 18px;
 width: 100%;
}
.resultSection {
 float: right;
 width: 45%;
 margin-left: 20px;
}
#regexTester {
 margin-right: 55%;
}
.sideBySide li {
 float: left;
 overflow: hidden;
 width: 220px;
}
.clickable {
 cursor:pointer;
 margin-bottom: 5px;
}
   
.clickable:hover {
background-color:#FFC;
}
   
   
.col1 {
 float: left;
 width: 75%; 
}
.col2 {
 float: right;
 width: 20%; 
}
   
.col2 ul {
 margin-left: 20px;
 list-style: square;
}
.col2 li {
 font-size: 90%; 
}
   
   
#selectorList {
 overflow: hidden; 
}
#selector {
 width: 275px;
}
   
   
form#signup .label {
 width: 200px; 
}

Text files

You have to add two text files to the clientlibs folder. These text files map to the JS file and the CSS file. The names of the text files are: css.txt and js.txt. The css.txt file contains the CSS file names: site.css and demo_table.css. Make sure that your js.txt lists the files in this order so that they load properly.

jquery.js

jquery.data.Tables.js

jquery.dataTables.min.js

Add the files to the ClientLibs folder

  1. Right-click /apps/jcrquery/components then select New, Node.
  2. Make sure that the node type is cq:ClientLibraryFolder and name the node tree.
  3. Right click on clientlibs and select Properties. Add a categories property of type String[]. Assign the value lam to this property.
  4. On your file system, navigate to the folder where the JQuery JS files are located. Upload these files to AEM.
  5. On your file system, navigate where you placed the CSS file. Upload this file to AEM.
  6. Add a TXT file to the clientlibs folder named js.txt. Add the content specified in this section.
  7. Add a TXT file to the clientlibs node named css.txt. Add the content specified in this section.

Note:

You can write a Java client application to upload files to AEM. Once developed, this provides an easy and fast way to upload files. See the following article for more information: Creating Java Swing applications that posts files to AEM ClientLibs folders

You can write a Java client application to upload files to AEM. Once developed, this provides an easy and fast way to upload files. See the following article for more information: Creating Java Swing applications that posts files to AEM ClientLibs folders.

Modify the Client JSP to invoke the getCustomerData method

To create the AEM client that queries data from the JCR, create these files:

  • query.json.jsp: contains application logic that calls the OSGi bundle's getCustomerData method.
  • persist.json.jsp: contains application logic that calls the OSGi bundle’s injestCustData method. 
  • templateJCR.jsp: contains application logic that defines the JSP that lets a user enter customer data and query existing data. 

Create the query.json.jsp

Add a new JSP file named query.json.jsp to the following CQ path:

/apps/jcrquery/components/page/templateQuery

In query.json.jsp, you create a CustomerService instance by using the sling.getService method, as shown in the following example:

com.community.aem.CustomerService cs = sling.getService(com.community.aem.CustomerService.class);

You pass the fully qualified name of the service to sling.getService method. Because the OSGi bundle is a managed component that injects a SlingRepository into the service, you must use the sling.getService method to create a CustomerService object. If you attempt to create a CustomerService using the new operation, the OSGi bundle is not considered a managed component and will not successfully inject a SlingRepository instance. A Java null pointer exception is thrown.

After you create a CustomerService object by using sling.getService, you can invoke the getCustomerData method exposed by the service. You pass a string value to this method that specifies whether to query all customers, past customers, or active customers.

The following code represents the query.json.jsp file.  

<%@include file="/libs/foundation/global.jsp"%>
<%@ page import="org.apache.sling.commons.json.io.*,org.w3c.dom.*" %><%
String filter = request.getParameter("filter");
 
com.community.aem.CustomerService cs = sling.getService(com.community.aem.CustomerService.class);
 
String XML = cs.getCustomerData(filter) ; 
  
//Send the data back to the client 
JSONWriter writer = new JSONWriter(response.getWriter());
writer.object();
writer.key("xml");
writer.value(XML);
 
writer.endObject();
%>

In this code example, notice that a JSONWriter instance is created. This object returns XML that contains customer information to the main JSP client after the call to the OSGi bundle is made. The client JSP parses the XML and displays the customer data in a grid control. 

Create the persist.json.jsp

Add a new JSP file named persist.json.jsp to the following CQ path:

/apps/jcrquery/components/page/templateQuery

The following code represents the persist.json.jsp file.

<%@include file="/libs/foundation/global.jsp"%>
<%@ page import="org.apache.sling.commons.json.io.*,com.adobe.cq.*" %><%
String first = request.getParameter("first");
String last = request.getParameter("last");
String phone = request.getParameter("phone");
String desc = request.getParameter("desc");
 
com.community.aem.CustomerService cs = sling.getService(com.community.aem.CustomerService.class);
 
int myPK = cs.injestCustData(first, last, phone, desc) ; 
  
//Send the data back to the client 
JSONWriter writer = new JSONWriter(response.getWriter());
writer.object();
writer.key("pk");
writer.value(myPK);
 
writer.endObject();
%>

Modify the templateQuery.jsp

Modify the templateQuery.jsp file to call both the query.json.jsp and the persist.json.jsp. In this example, a JQuery Ajax HTTP request is used and the corresponding values are passed. This code shows the submit method that is called when the user queries customer data. 

//Get customer data -- called when 
//the submit button is clicked
//this method populates the 
//data grid with data retrieved from the 
//Adobe CQ JCR
$('#submitget').click(function() {
    var failure = function(err) {
         alert("Unable to retrive data "+err);
     };
          
//Get the user-defined values to persist in the database
var filter=   $('#custQuery').val() ; 
       
var url = location.pathname.replace(".html", "/_jcr_content.query.json") + "?filter="+ filter;
       
$.ajax(url, {
        dataType: "text",
        success: function(rawData, status, xhr) {
            var data;
            try {
                data = $.parseJSON(rawData);
                 
                //Set the fields in the forum
                var myXML = data.xml;

                var loopIndex = 0; 

                //Reference the data grid, clear it, and add new records
                //queried from the Adobe CQ JCR
                 var oTable = $('#example').dataTable();
                 oTable.fnClearTable(true);

                 //Loop through this function for each Customer element
                 //in the returned XML
                 $(myXML).find('Customer').each(function(){
                        
                    var $field = $(this);
                    var firstName = $field.find('First').text();
                    
                    var lastName = $field.find('Last').text();
                    var Description = $field.find('Description').text();
                    var Address = $field.find('Address').text();	 

                    //Set the new data 
                    oTable.fnAddData( [
                        firstName,
                        lastName,
                        Address,
                        Description,]
                    );
                });
    
            } catch(err) {
                failure(err);
            }
        },
        error: function(xhr, status, err) {
            failure(err);
        } 
    });

Notice that for each Customer element in the returned XML, values are retrieved and added to a row in the data grid. 

The following code represents the entire TemplateQuery.jsp file. 

<%@include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="lam" />
<html>
<head>
<meta charset="UTF-8">
<title>Adobe CQ Persist Page</title>
<style>
#signup .indent label.error {
  margin-left: 0;
}
#signup label.error {
  font-size: 0.8em;
  color: #F00;
  font-weight: bold;
  display: block;
  margin-left: 215px;
}
#signup  input.error, #signup select.error  {
  background: #FFA9B8;
  border: 1px solid red;
}
</style>
<script>
$(document).ready(function() {
     
       var aDataSet = [
                       ['','','',''],
                       ['','','','']
                   ];
               



      $('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
      $('#example').dataTable( {
          "aaData": aDataSet,
          "aoColumns": [
              { "sTitle": "First Name" },
              { "sTitle": "Last Name" },
              { "sTitle": "Address", "sClass": "center" },
              { "sTitle": "Description", "sClass": "center" }
          ]
      } );


    $('body').hide().fadeIn(5000);
     
$('#submit').click(function() {
    var failure = function(err) {
      //  $(".main").unmask();
        alert("Unable to retrive data "+err);
         
    };
     
     
    //Get the user-defined values to persist in the database
    var myFirst= $('#first').val() ; 
    var myLast= $('#last').val() ; 
    var myDescription= $('#description').val() ; 
    var myAddress= $('#address').val() ; 
     
    var url = location.pathname.replace(".html", "/_jcr_content.persist.json") + "?first="+ myFirst +"&last="+myLast +"&desc="+myDescription +"&phone="+myAddress;
     
    //$(".main").mask("Saving Data...");
 
    $.ajax(url, {
        dataType: "text",
        success: function(rawData, status, xhr) {
            var data;
            try {
                data = $.parseJSON(rawData);
                 
                         
                //Set the fields in the forum
                $('#custId').val(data.pk); 
            
            } catch(err) {
                failure(err);
            }
        },
        error: function(xhr, status, err) {
            failure(err);
        } 
    });
  });


//Get customer data -- called when the submitget button is clicked
//this method populates the data grid with data retrieved from the //Adobe CQ JCR
$('#submitget').click(function() {
    var failure = function(err) {
          alert("Unable to retrive data "+err);
      };
      
    //Get the query filter value from drop down control
    var filter=   $('#custQuery').val() ; 
       
    var url = location.pathname.replace(".html", "/_jcr_content.query.json") + "?filter="+ filter;
       
    $.ajax(url, {
        dataType: "text",
        success: function(rawData, status, xhr) {
            var data;
            try {
                data = $.parseJSON(rawData);
                 
                            
                //Set the fields in the forum
                var myXML = data.xml;

                var loopIndex = 0; 

                //Reference the data grid, clear it, and add new records
                //queried from the Adobe CQ JCR
                 var oTable = $('#example').dataTable();
                 oTable.fnClearTable(true);


                 //Loop through this function for each Customer element
                 //in the returned XML
                 $(myXML).find('Customer').each(function(){
                        
                    var $field = $(this);
                    var firstName = $field.find('First').text();
                    
                    var lastName = $field.find('Last').text();
                    var Description = $field.find('Description').text();
                    var Address = $field.find('Address').text();     

                    //Set the new data 
                    oTable.fnAddData( [
                        firstName,
                        lastName,
                        Address,
                        Description,]
                    );
           
                    });
           
            } catch(err) {
                failure(err);
            }
        },
        error: function(xhr, status, err) {
            failure(err);
        } 
    });
  });
 
}); // end ready
</script>

</head>
<body>
<div class="wrapper">
    <div class="header">
        <p class="logo">Adobe CQ JCR Customer Persist/Query Application</p>
    </div>
    <div class="content">
    <div class="main">
    <h1>CQ Data Persist Example</h1>
     
    <form name="signup" id="signup">
     <table>
    <tr>
    <td>
    <label for="first">First Name:</label>
    </td>
     <td>
    <input type="first" id="first" name="first" value="" />
    </td>
    </tr>
    <tr>
    <td>
    <label for="last">Last Name:</label>
    </td>
     <td>
    <input type="last" id="last" name="last" value="" />
    </td>
    </tr>
     <tr>
    <td>
    <label for="address">Address:</label>
    </td>
     <td>
    <input type="address" id="address" name="address" value="" />
    </td>
    </tr>
     <tr>
    <td>
   <label for="description">Description:</label>
    </td>
    <td>
    <select id="description"  >
            <option>Active Customer</option>
            <option>Past Customer</option>  
        </select>
    </td>
    </tr>
     <tr>
    <td>
    <label for="custId">Customer Id:</label>
    </td>
     <td>
    <input type="custId" id="custId" name="custId" value="" readonly="readonly"/>
    </td>
    </tr>
    
</table>
            <div>
                <input type="button" value="Add Customer!"  name="submit" id="submit" value="Submit">
            </div>
        </form>
        </div>
    </div>
    
    <div id="container">
     <form name="custdata" id="custdata">
   
    <h1>Query Customer Data from the AEM JCR</h1>
   <div>
     <select id="custQuery"  >
            <option>All Customers</option>
            <option>Active Customer</option>
            <option>Past Customer</option>    
        </select>
    </div>
    <div id="dynamic"></div>
    <div class="spacer"></div>

   <div>
      <input type="button" value="Get Customers!"  name="submitget" id="submitget" value="Submit">
    </div>
   </form>
     
</div>
</body>
</html>

Modify the templateQuery file

  1. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp
  2. Double-click apps/jcrquery/components/page/templateQuery/templateQuery.jsp.
  3. Replace the JSP code with the new code shown in this section.
  4. Click Save All.

Create an AEM web page that queries the JCR

The final task is to create a site that contains a page that is based on the templateQuery (the template created earlier in this development article). When the user selects the customer data to retrieve from the drop down and clicks the Get Customer button, customer data is displayed in the data grid control.

In addition, this client application lets users add new customer data to the AEM JCR.

Client

Create a AEM web page that queries and persists data from the AEM JCR:

  1. Go to the Websites 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 templateQuery 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. You should see a page similar to the previous illustration.
  7. To interact with the application in the Touch UI view, ensure that you place in the page in Preview mode. 

Note:

Although the focus of this article was how to create an AEM application that queries data from the AEM JCR, persisting data is part of the client application and the OSGi bundle. For information about persisting data, see Persisting CQ data in the Java Content Repository

See also

Congratulations, you have just created an AEM 6 application that queries JCR data by using an Adobe Maven Archetype project. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications by using an Adobe Maven Archetype project.

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