Integrating the JQuery Framework into DAY CQ

- Scott McDonald

You can integrate the JQuery Framework into DAY CQ (5.4) 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 effect, but rather guide you through the process of creating a CQ page and then how to make use of the JQuery framework.

NOTE: Before following along with this development article, make sure that you install DAY CQ 5.4 and have it running. Also, make sure that you have CRXDE, which is the development environment.

To create a DAY CQ page that uses the JQuery framework, perform the following tasks:

  1. Create a CQ 5.4 application that contains the page that displays the JQuery fade effect. 
  2. Create a template on which the component that uses JQuery is based.
  3. Create a render component that uses the template.
  4. Add the JQuery framework to the component.
  5. Modify the component to use JQuery application logic.
  6. Create a site that contains a page that displays the component that contains a JQuery effect.

Create a CQ 5.4 application

You can create a DAY CQ application that contains templates, components, and pages. Before you create application assets such as templates, components, and pages, you create an application, which is essentially a specific folder structure. You can create this folder by using CRXDE Lite.

The following illustration shows a typical application folder structure  .

...
--------------
Read the full post at this URL.

Comments are closed.


Copyright © 2012 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)