Article summary

Summary
Discusses how to integrate the JQuery framework into Adobe Experience Manager.
Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (beginner)
Required Skills
JQuery, CSS
Tested On Adobe CQ 5.5, Adobe CQ 5.6

Introduction

You can integrate the JQuery Framework into Adobe Experience Manager thereby enabling you to build components that take advantage of the JQuery framework. The JQuery framework is a popular JavaScript library that simplifies the creation of powerful components. For example, you can build components that contain visual effects, data grids that display information, user forms that capture information from end users, and so on. For more information about JQuery, see www.jquery.com.

The component that is created in this development article renders text and uses a JQuery fade effect. That is, the text becomes visible over a period of five seconds. The objective of this article is not to demonstrate how to create a complex JQeury component, but rather guide you through the process of creating an Experience Manager page and then how to make use of the JQuery framework.

Note:

Before following along with this development article, make sure that you install Experience Manager and have it running. Also, make sure that you have CRXDE, which is the development environment.

Create an Experience Manager application folder structure

You can create an Experience Manager application folder structure that contains templates, components, and pages. You can create this folder structure by using CRXDE Lite.

CQAppSetup

The following describes each application folder:

  • application name: contains application resources such as 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 that you can base page components on. 
  • src: contains source code that comprises an OSGi component (this development article does not use an OSGi component.
  • install: contains a compiled OSGi bundles container.

To create an Experience Manager application folder structure, 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 apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter jqueryapp.
  5. Repeat steps 1-4 for each folder specified in the previous illustration. 
  6. Click the Save All button.

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 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 mytemplate.
  • 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 all implementing pages. Enter jqueryapp/components/page/mytemplate.
  • 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 performs a specific function. For more information about components, see Components.

Note:

By default, a component has at least one default script whose file name reflects the component's name.

To create a render component, perform these tasks:

1. Right-click /apps/jqueryapp/components/page, then select Create, Create Component.

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

  • Label: The name of the component to create. Enter mytemplate.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the component (leave the remaining fields empty).

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

4. Select OK on Allowed Children.

5. Open the mytemplate.jps located at: /apps/jqueryapp/components/page/mytemplate/mytemplate.jsp.

6. Enter the following JSP code:

<html>
<head>
<title>Hello World !!!</title>
</head>
<body>
<h1>Hello JQuery !!!</h1>
<h2>This page contains a JQuery Fade Effect</h2>
</body>
</html>

Add the JQuery framework to the component

You can add the JQeury framework to your application’s class path so that JQuery functionality is available to your components. For example, once you add JQuery, you can modify the JSP code that you added to the mytemplate component.

Note:

Before you follow along with this section, make sure that you download the JQuery framework. For information, see www.jquery.com.

To add the JQeury framework to your component, you have to add a cq:ClientLibraryFolder node to your component. In this development article, once you add this node, you set a couple properties that allows the script to find the JQuery library. Then you will modify the JSP code in the mytemplate component to use JQuery functionality.

To add the JQuery framework, add a new node named clientlibs to your component (as discussed below). Add two properties to this node as shown in the following table.

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

The dependencies property informs Experience Manager to make sure that the JQuery libraries are included in the page. The categories property informs Experience Manager which clientlibs must be included with the JSP that is generated.

To add the JQuery framework to the component, perform these tasks:

  1. Right-click /apps/jqueryapp/components then select New, Node.
  2. Make sure 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 js folder where the JQeury JS file is located. Drag and drop the jquery-1.6.3.min.js (or the version you have) to the clientlibs node by using CRXDE.
  5. Add a TXT file to the clientlibs node named js.txt. The contents of the js.txt file is the file name of the javascript file to include with your component. In this development article, the JS file is jquery-1.6.3.min.js.

Modify the component to use JQuery application logic

Now you can use JQuery functionality in your component. To demonstrate how to use JQuery application logic in your component, this development environment modifies the mytemplate.jps located at: /apps/jqueryapp/components/page/mytemplate/mytemplate.jsp. Open this file and replace the code in the file with the following code.

<%@include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="jquerysamples" />
<html>
<head>
<title>Hello World !!!</title>


<script>
$(document).ready(function() {
    $('body').hide().fadeIn(5000);
});
</script>
</head>
<body>
<h1>Hello JQuery !!!</h1>
<h2>This page contains a JQuery Fade Effect</h2>
</body>
</html>

The code within the script tag is JQuery application logic and causes the HTML within the <body> tag to appear over five seconds. Notice the line at the top of the JSP:

<cq:includeClientLib categories="jquerysamples" />

The value of the categories attribute maps to the property that was added to the clientlibs node. This is how CQ locates the JQuery framework.

To modify the render mytemplate component, perform these tasks:

  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/jqueryapp/components/page/mytemplate/mytemplate.jsp.
  4. Replace the JSP code with the new code shown in this section.
  5. Click Save All.

Create a page that displays a JQuery effect

The final task is to create a web page that contains the JQuery effect. The web page is based on mytemplate (the template created earlier in this development article). The following illustration represents the component that is created in this development article that fades in over five seconds (the fade is the JQuery effect).

JqueryEffect

To create a page that displays a JQuery effect, perform these tasks:

  1. To view the welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select Websites.
  3. Right-click the template folder (within your application), select Create, Create Template.
  4. From the left hand pane, select Websites. 
  5. Select New, New Page.
  6. Specify the title of the page in the Title field. 
  7. Specify the name of the page in the Name field. 
  8. Select mytemplate 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 when creating the template, the template will not show up in the New Page dialog box. 
  9. Open the new page that you create by double-clicking it in the right pane. The new page opens in a web browser where you will see the results fade in over five seconds

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