Article summary

Summary

Discusses how to create an Adobe Experience Manager application that persists data in the JCR. This article uses an OSGi bundle that uses the JCR API to persist data.

A special thank you to community member Ranta Kumar Kotla for testing this Community Article to ensure it works.

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
Java, JQuery, JCR API, XML
Tested On Adobe Experience Manager CQ 5.5, CQ 5.6

Note:

This community article is for Adobe Experience Manager 5.x. If you are using Experience Manager 6.x, then see Querying Adobe Experience Manager 6 data using the Sling getServiceResourceResolver method.

Introduction

You can create an Adobe Experience Manager application that captures data from users and stores the data in the Java Content Repository (JCR). When storing data within the JCR, each record can be saved as a separate node. A node contains properties that store field values.

JavaJCR2

Assume that you want to create an Experience Manager application that tracks your customers.

Cust

When the end user fills in the AEM web form and clicks the Add Customer button, the submitted customer information is persisted in the JCR. The customer identifier value is returned and displayed in the Customer Id field. In this example, each submitted customer record is stored within a JCR node. The values, such as first name and last name, are stored as node properties, as shown in the following illustration.

crxde

This development article guides you through creating an Experience Manager web application that captures data and stores it in the Experience Manager JCR. Application logic that stores data in the JCR is implemented as an OSGi bundle that is built using Declarative Services (DS) and Maven. DS injects a SlingRepository instance into the service. The OSGi bundle is a managed component, which means that the OSGi service container creates the SlingRepository instance.

Note:

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

Create an Experience Manager application folder structure

Create an Experience Manager 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 application folder structure:

  1. To view the welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite.
  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 jcrpersist
  5. Repeat steps 1-4 for each folder specified in the previous illustration. 
  6. Click the Save All button. 

Note:

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

Create a template

You can create a template by using CRXDE Lite. A 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.

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 templateJCR. 
  • 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 jcrpersist/components/page/templateJCR.
  • 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 an Experience Manager 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. 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.

3. Right-click /apps/jcrpersist/components/page, 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 templateJCR
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.

5. Select Next for Advanced Component Settings and Allowed Parents.

6. Select OK on Allowed Children. 

7. Open the templateJCR.jsp located at: /apps/jcrpersist/components/page/templateJCR/templateJCR.jsp.

8. Enter the following JSP code.

<html>
<head>
<title>Hello World !!!</title>
</head>
<body>
<h1>Hello JCR!!!</h1>
<h2>This page will update the AEM JCR with customer data</h2>
</body>
</html>

Setup Maven in your development environment

You can use Maven to build an OSGi bundle that uses the JCR API and is deployed to AEM. 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:

Java home: C:\Programs\Java64-6\jre
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/.

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.adobe.cq -DartifactId=customer -Dversion=1.0-SNAPSHOT -Dpackage=com.adobe.cq -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] Total time: 14:46.131s
[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\customer. 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.

Eclipse

The next step is to add Java files to the com.adobe.cq 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.adobe.cq package:

  1. A Java interface named CustomerService.
  2. A Java class named CustomerServiceImp that implements the CustomerService interface.

CustomerService interface

The following code represents the CustomerService interface. This interface contains a method signature named injestCustData. The implementation logic for this method is located in the CustomerServiceImp class. This method uses the JCR API to store data in the AEM JCR.

 

package com.adobe.cq;

public interface CustomerService {
	
public int injestCustData(String firstName, String lastName, String phone, String desc);

}

Note:

The injestCustData method is invoked from the client web page. This is shown later in this development article.

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 SlingRepository instance is injected into the injestCustData method. This instance is required to perform JCR operations from within an OSGi bundle. To inject a SlingRepository instance, you use the @Reference annotation to define a class member, as shown in the following example.

@Reference
private SlingRepository repository;

To successfully use service injection, define another method in the CustomerServiceImpl class named bindRepository. This method binds a SlingRepository instance to the class member that uses the @Reference annotation.

public void bindRepository(SlingRepository repository) {
		this.repository = repository; 
		}

Within the injestCustData method, use the SlingRepository to create a Session object, as shown here.

//Stores customer data in the JCR
public int injestCustData(String firstName, String lastName, String phone, String desc)
{
  int num  = 0; 
  try { 
 	Session session = this.repository.loginAdministrative(null);

This is the main difference between using the JCR API from within an OSGi bundle as opposed to using the JCR API from an external Java application. If you are using the JCR API from an external Java application, you can create a Session object by using the following code.

//Create a connection to the CQ repository running on local host 
 Repository repository = JcrUtils.getRepository("http://localhost:4503/crx/server");
   
//Create a Session
javax.jcr.Session session = repository.login( new SimpleCredentials("admin", "admin".toCharArray()));

However, this code throws an exception if you use it from within a deployed OSGi bundle. To successfully use the JCR API from within a deployed OSGi bundle, you inject the SlingRepository as discussed in this article. For information about using the JCR API from an external Java application, see http://scottsdigitalcommunity.blogspot.ca/2012/03/programmatically-accessing-day-cq.html.

The following Java code represents the CustomerServiceImp class. For each customer record that is submitted, a new node is created at /content/customer.

package com.adobe.cq;

import java.util.Iterator;

import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;
import javax.jcr.RepositoryException;
import org.apache.felix.scr.annotations.Activate;
import org.apache.felix.scr.annotations.Reference;
import org.apache.jackrabbit.commons.JcrUtils;
import org.osgi.service.component.ComponentContext;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.apache.sling.jcr.api.SlingRepository;
import javax.jcr.RepositoryException;
import javax.jcr.Session;
import javax.jcr.Node; 
import org.apache.jackrabbit.commons.JcrUtils;
import java.util.Iterator;

//This is a component so it can provide or consume services
@Component
// This component provides the service defined through the interface
@Service

public class CustomerServiceImp implements CustomerService {

/** Default log. */
protected final Logger log = LoggerFactory.getLogger(this.getClass());
    
@Reference
private SlingRepository repository;
	
public void bindRepository(SlingRepository repository) {
    this.repository = repository; 
    }
	
//Stores customer data in the Adobe CQ JCR
public int injestCustData(String firstName, String lastName, String phone, String desc)
{
    int num  = 0; 
    try { 
	Session session = this.repository.loginAdministrative(null);
			 
        //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");
	   }
	   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); 
        
        //make sure name of node is unique
	custNode.setProperty("id", custId); 
	custNode.setProperty("firstName", firstName); 
	custNode.setProperty("lastName", lastName); 
	custNode.setProperty("phone", phone);  
	custNode.setProperty("desc", desc);
			   		 	 
	// Save the session changes and log out
	session.save(); 
	session.logout();
	return custId; 
	}

 catch(RepositoryException  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 in content/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)
	{
	log.error(e.getMessage());
	}
	return 0;
 }
}

Modify the Maven POM file

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

   <dependencies>
        <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>junit</groupId>
            <artifactId>junit</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>org.apache.sling</groupId>
        <artifactId>org.apache.sling.jcr.api</artifactId>
        <version>2.0.4</version>
      </dependency>
         
      <dependency>
         <groupId>javax.jcr</groupId>
         <artifactId>jcr</artifactId>
         <version>2.0</version>
      </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.adobe.cq.customer-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\customer folder.
  2. Run the following maven command: mvn clean install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\customer\bundle\target. The file name of the OSGi component is customer-bundle-1.jar.

Deploy the bundle to Experience Manager

Once you deploy the OSGi bundle, you are able to invoke the injestCustData 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.

FelixBundleService

Note:

To view the services, simply click the Services tab.

Deploy the new 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\customer\bundle\target).
  5. Click Install.
  6. Click the Refresh Packages button.
  7. Check the bundle with the highest Id.
  8. Click Active.
  9. Your new bundle should now be listed with the status Active.
  10. 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 a CSS file and a JQuery framework file to a cq:ClientLibraryFolder node to define the style of the client JSP. The JQuery framework file that is added is named jquery-1.6.3.min.js.

To add CSS files and the JQuery framework 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.

To add the JQuery framework, add a new node named clientlibs to your component (as discussed later). Add these two properties to this node.

Name Type Value
dependencies
String[] cq.jquery
categories
String[] jquerysamples

The dependencies property informs Experience Manager to include the CSS and JQuery libraries in the page. The categories property informs Experience Manager which clientlibs must be included.

After you create the Clientlibs folder, add a CSS file, and the JQuery library file, 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 name: site.css. Likewise, the js.txt file contains the JS file name: jquery-1.6.3.min.js.

Add the files to the ClientLibs folder

  1. Right-click /apps/sqlpersist/components then select New, Node.
  2. Make sure that the node type is cq:ClientLibraryFolder and name the node clientlibs.
  3. Right click on clientlibs and select Properties. Add the two properties specified in the previous table to the node.
  4. On your file system, navigate to the folder where the JQuery JS file is located. Drag and drop the jquery-1.6.3.min.js file to the clientlibs node by using CRXDE.
  5. On your file system, navigate where you placed the CSS file. Drag and drop the site.css files to the clientlibs folder by using CRXDE.
  6. Add a TXT file to the clientlibs folder named js.txt. The content of the js.txt file is the JQuery JS file name.
  7. Add a TXT file to the clientlibs node named css.txt. The content of the css.txt file is the CSS file name.

Modify the Client JSP to invoke the injestCustData method

To create the Experience Manager web client, create these two files:

  • 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 and submit customer information. The data is stored in the JCR.  

Create the persist.json.jsp

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

/apps/jcrpersist/components/page/templateJCR

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

com.adobe.cq.CustomerService cs = sling.getService(com.adobe.cq.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 injestCustData method exposed by the service. You pass the following values to this method:

  • A string value that specifies the customer's first name.
  • A string value that specifies the customer's last name.
  • A string value that specifies the customers address or phone number.
  • A string value that specifies a description.

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.adobe.cq.CustomerService cs = sling.getService(com.adobe.cq.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();
%>

In this code example, notice that a JSONWriter instance is created. This object is used to return data to the main JSP client after the call to the OSGi bundle is made. 

Modify the templateJCR.jsp

Modify the templateJCR.jsp file to call the persist.json.jsp when the submit button is clicked. In this example, a JQuery Ajax HTTP request is used and the four values are passed to the persist.json.jsp. This code shows the submit method that is called when the user fills in the data and clicks the submit button.

('#submit').click(function() {
    var failure = function(err) {
             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;
         
    $.ajax(url, {
        dataType: "text",
        success: function(rawData, status, xhr) {
            var data;
            try {
                data = $.parseJSON(rawData);
                  
                    
                //Set the customer id field
                $('#custId').val(data.pk); 
                 } catch(err) {
                failure(err);
            }
        },
        error: function(xhr, status, err) {
            failure(err);
        } 
    });

The following code represents the entire templateJCR JSP file.

<%@include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="jquerysamples" />
<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() {
      
    $('body').hide().fadeIn(5000);
      
$('#submit').click(function() {
    var failure = function(err) {
             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;
           
    $.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);
        } 
    });
  });
  
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <p class="logo">Adobe CQ Data Customer Persist 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>
</body>
</html>

Modify the templateJCR JSP file

  1. To view the welcome page, enter the URL: http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite.
  3. Double-click apps/jcrpersist/components/page/templateJCR/templateJCR.jsp.
  4. Replace the JSP code with the new code shown in this section.
  5. Click Save All.

Create a web page that displays the JCR client

The final task is to create a site that contains a page that is based on the templateJCR (the template created earlier in this development article). When the user enters data and submits it, the data is persisted in the CQ JCR. 

Cust2

Create an Experience Manager web page that displays the JCR client:

  1. Go to the welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select Websites.
  3. From the left hand pane, select Websites.
  4. Select New Page.
  5. Specify the title of the page in the Title field.
  6. Specify the name of the page in the Name field.
  7. Select templateJCR 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.
  8. 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.

Note:

When you submit data, you will be able to view the customer data in the following JCR path: content/customer. You can view the data by using CRXDE Lite. 

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