Scott's Digital Community

Programmatically Accessing Adobe CQ Content using the JCR API

2012-03-06T19:16:00.003-08:00

You can programmatically modify nodes and properties located within the Adobe CQ 5.5 repository, which is part of the Adobe Digital Marketing Suite. To access the CQ repository, you use the Java Content Repository (JCR) API. You can use the Java JCR API to perform create, replace, update, and delete (CRUD) operations on content located within the DAY CQ repository. For more information about the Java JCR API, see http://jackrabbit.apache.org/jcr-api.html.

This development article creates a Java class that modifies nodes and properties within Adobe CQ. The Java class connects to a local instance of Adobe CQ and creates nodes and stores data values to node properties. You can store data by manipulating node properties.

Creating a Repository instance

Although there are different ways to connect to a repository and establish a connection, this development article uses a static method that belongs to the org.apache.jackrabbit.commons.JcrUtils class. The name of the method is getRepository. This method takes a string parameter that represents the URL of the Adobe CQ server. For example http://localhost:4503/crx/server.

The getRepository method returns a Repository instance, as shown in the following code example.

//Create a connection to the Day CQ repository running on local host

Repository repository = JcrUtils.getRepository("http://localhost:4503/crx/server");

Creating a Session instance

The Repository instance represents the CRX repository. You use the Repository instance to establish a session with the repository. To create a session, invoke the Repository instance’s login method and pass a javax.jcr.SimpleCredentials object. The login method returns a javax.jcr.Session instance.

You create a SimpleCredentials object by using its constructor and passing the following string values:

The user name
The corresponding password

When passing the second parameter, call the String object’s toCharArray method. The following code shows how to call the login method that returns a javax.jcr.Session instance.

//Create a Session instance
javax.jcr.Session session = repository.login( new SimpleCredentials("admin", "admin".toCharArray()));

Creating a Node instance

You can use a Session instance to create a javax.jcr.Node instance. A Node instance enables you to perform node operations. For example, you can create a new node. To create a node that represents the root node, invoke the Session instance's getRootNode method, as shown in the following line of code.

//Create a Node

Node root = session.getRootNode();

Once you create a Node instance, you can perform tasks such as creating another node and adding a value to it. For example, the following code creates two nodes and adds a value to the second node.

// Store content

Node adobe = root.addNode("adobe");

Node day = adobe.addNode("day");

day.setProperty("message", "Adobe CQ is part of the Adobe Digital Marketing Suite!");

As shown in the previous code example, to store a data value to a node, invoke the Node object’s setProperty method. As the first parameter, specify a property name. In this example, notice that message is specified. This value indicates that you want to set the message property. The second parameter is a string value that represents a data value to store.

Retrieving Node Values

To retrieve a node and its value, invoke the Node instance’s getNode method and pass a string value that represents the fully-qualified path to the node. Consider the node structure created in the previous code example. To retrieve the day node, specify adobe/day, as shown in the following code:

// Retrieve content

Node node = root.getNode("adobe/day");

System.out.println(node.getPath());

System.out.println(node.getProperty("message").getString());

Adding the JCR JAR file

To use the JCR API, add the jackrabbit-standalone-2.4.0.jar file to your Java application’s class path. You can obtain this JAR file from the Java JCR API web page at http://jackrabbit.apache.org/jcr-api.html.

Quick Start: Creating nodes in the DAY CQ Repository

The following Java code example represents a Java class that is connects to the Adobe CQ server, creates a Session instance and adds new nodes. A node is assigned a data value and then the value of the node and its path is written out to the console.

* This Java Quick Start uses the jackrabbit-standalone-2.4.0.jar

* file. See the previous section for the location of this JAR file

import javax.jcr.Repository;

import javax.jcr.Session;

import javax.jcr.SimpleCredentials;

import javax.jcr.Node;

import org.apache.jackrabbit.commons.JcrUtils;

import org.apache.jackrabbit.core.TransientRepository;

public class GetRepository {

public static void main(String[] args) throws Exception {

//Create a connection to the Day 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()));

try {

//Create a node that represents the root node

Node root = session.getRootNode();

// Store content

Node adobe = root.addNode("adobe");

Node day = adobe.addNode("day");

day.setProperty("message", "DAY CQ is part of the Adobe Digital Marketing Suite!");

// Retrieve content

Node node = root.getNode("adobe/day");

System.out.println(node.getPath());

System.out.println(node.getProperty("message").getString());

// Save the session changes and log out

session.save();

session.logout();

}

catch(Exception e){

e.printStackTrace();

}

View the new nodes in CRXDE Lite

After you run the full code example and create the nodes, you can view the new nodes in the CRXDE Lite, as shown in the following illustration.

About the Author

I (Scott Macdonald) am a senior content and community lead at Adobe Systems with over 15 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If you would like to see more CQ or other Adobe Digital Marketing end to end walkthroughs like this, then leave a comment and let me know what content you would like to see.

Integrating the JQuery Framework into DAY CQ

2012-02-28T14:13:00.010-08:00

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:

Create a CQ 5.4 application that contains the page that displays the JQuery fade effect.
Create a template on which the component that uses JQuery is based.
Create a render component that uses the template.
Add the JQuery framework to the component.
Modify the component to use JQuery application logic.
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 .

The following describes each application folder:

Application name folder: contains application resources such as templates, pages, components, and so on.

components folder: contains components that your application uses.

page folder: contains page components. A page component is a script such as a JSP file.

global: contains global components that your application uses

template folder: contains templates that you can base page components on.

src folder: contains source code that comprises an OSGi component (this development article does not use an OSGi component.

install folder: contains a compiled OSGi bundles container

The following illustration shows the folder structure. Notice that the application name is JQueryApp.

To create a CQ application

To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
Select CRXDE Lite.
Right-click the apps folder (or the parent folder), select Create, Create Folder.
Enter the folder name into the Create Folder dialog box. Enter JQueryApp.
Repeat steps 1-4 for each folder specified in the previous illustration.
Click the Save All button.

Create a template

You can create a template by using CRXDE Lite. A CQ template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see http://dev.day.com/docs/en/cq/current/developing/templates.html.

To create a template

To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
Select CRXDE Lite.
Right-click the template folder (within your application), select Create, Create Template.
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.
Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.
Click Next for Allowed Parents.
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 http://dev.day.com/docs/en/cq/current/developing/components.html.

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

To create a render component

Right-click /apps/jqueryapp/components/page, then select Create, Create Component.
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).
Select Next for Advanced Component Settings and Allowed Parents.
Select OK on Allowed Children.
Open the mytemplate.jps located at: /apps/jqueryapp/components/page/mytemplate/mytemplate.jsp.
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 a the JQuery framework, you have to add a new node name clientlibs to your component (as discussed below). You have to 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 CQ to make sure that the JQuery libraries are included in the page. The categories property is very important and informs CQ which clientlibs must be included with the JSP that is generated.

To add the JQuery framework to the component

Right-click /apps/jqueryapp/components then select New, Node.
Make sure the node type is cq:ClientLibraryFolder and name the node clientlibs.
Right click on clientlibs and select Properties.Add the two properties specified in the previous table to the node.
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.
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 JQeury application logic in your component, this development environment modifies the mytemplate.jps located at: /apps/jqueryapp/components/page/mytemplate/mytemplate.jsp. Open thjs 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 bold code represents the new code. 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" />

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

Create a page that displays a JQuery effect
The final task that you perform in order to see a web page that contains the JQuery effect is to create a site that contains a page that 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 fade in over 5 seconds (the fade in is the JQuery effect).

To create a page that displays a JQuery effect

To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
Select Websites.
Right-click the template folder (within your application), select Create, Create Template.
From the left hand pane, select Websites.
Select New, New Page.
Specify the title of the page in the Title field.
Specify the name of the page in the Name field.
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.
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

About the Author

Create Mobile Applications for Data Services 4.6

2011-12-13T11:08:00.001-08:00

Now you can view and interact with your mission critical enterprise data in any location at any time! That is right, you can create mobile applications for Data Services 4.6. For example, you can create a mobile application for a tablet that lets you view and interact with your enterprise data. The following illustration shows the supported clients for Data Services 4.6.

You use the AIR client-side API to create the mobile application as well as Flash Builder 4.6. You use the Java API to create server-side classes that retrieve financial data from a content provider and sends messages to a server destination. When the mobile application detects new messages, the application is updated in real time with financial data.

For example, assume that the mobile application tracks multiple stocks. When the server retrieves updated data from the financial content provider, it creates an updated message and pushes the message to the destination. The mobile application detects the new message and displays changes to the stock price.

The following illustration shows the mobile application that is created. Notice that this application is able to track multiple stock prices. When the user clicks on a row in the grid control, more detailed information is displayed in the mobile application. For example, you can view the stock price during the past five years in an Area control.

To create this mobile application by using Data Services 4.6, then click on the following link to read the full article: Creating Mobile Applications using Data Services 4.6 Message service.

Thanks,
Scott Macdonald
Senior Content Lead at Adobe Systems

Your place to learn about using Adobe Digital Media Products

2011-11-29T18:07:00.000-08:00

Some exciting news that I wanted to share with you. Going forward, you will find all sorts of videos, articles, blog entries, and other content here at Scott's Digital Community that will help you with various Adobe products. I am going to focus on creative products like After Effects, Premier Pro, Photoshop as well as the new creative cloud. As well, I am going to explore new Adobe touch products. If you have any content that you would like to see - please leave a comment and I will see if we can create content around that.

Also, if you have questions about various Adobe products, please leave a comment and I will try my best to answer it or ask someone within Adobe and share the answer with you. That is, because I am a Senior community lead at Adobe - it is one of my jobs to make sure that you are successful.

I have recently been very busy with Creative Suite products like After Effects. I am gathering ideas for future content that will be posted on this blog. I know that there is a lot of demand for various how to content with products like After Effects (especially around cutting edge use cases like creating stunning compositions using particles and other effects).

As I find other third party articles that I find useful, I will add links from this blog. For example, check out the following video created in After Effects that uses a laser effect to burn the word "Adobe" into a Steel background:

This was created by using After Affects CS5. If you are interested in knowing how this is done, then see the following link:

http://www.youtube.com/watch?v=Wv25C34X2UI&feature=relmfu

This is a great After Effect tutorial and is the type of content that you will find here.

On another note - Data Services 4.6 is scheduled to be released soon. When it does, you will find a great article here that discusses how to create an AIR mobile application for Data Services. The AIR mobile application subscribes to a Message service destination that enables the mobile application to view real-time data that is sent to the destination by the server. I hope you like that article.

Thanks,
Scott Macdonald
Senior Content Lead at Adobe Systems

Displaying a Message Box in a Flash Builder 4.5 Mobile application

2011-10-25T16:55:00.000-07:00

I am working on a new development article that will be posted late Nov or early December 2011 that discusses how to create a message-based Tablet application using Data Services 4.6. This application will use the Message service and display stock data. The stock data will come from a real financial data provider such as Yahoo Finance as opposed to an XML file.

The great thing about creating a mobile application by using Flash Builder is that you can write once and then deploy to different Mobile devices including Android devices and iDevice devices, such as an iPad. That is correct -- you can create an application in Flash Builder and then deploy it to an iPad.

The tablet application will consist of three views as shown in the following diagram.

One of the objectives of Scott's Digital Community is to specify tips and tricks that I find useful as I develop applications by using Adobe technology. As I found, creating a pop up message (or Message Box) in a mobile application is not as straightforward as you may think. To begin, a mobile application does not support mx.controls.Alert. As a result, you have to create pop up messages by using another technique.

That other way is by using a fx:Component instance. You can think of a fx:Component as a class. You can create an instance of this class and then use the instance to display messages. The following code represent the fx:Component instance.

<fx:Declarations>
!-- This component represents a popup to show the user a message in a mobile application -->
<fx:Component className="AlertMsg">
<s:SkinnablePopUpContainer x="70" y="400">
<s:TitleWindow title="My Message" close="close()">
<s:VGroup horizontalAlign="center" paddingTop="8" paddingBottom="8" paddingLeft="8" paddingRight="8" gap="5" width="100%">
<s:Label text="{localVar}" />
<s:Button label="OK" click="close()"/>
</s:VGroup>
<fx:Script>
<![CDATA[
// Variable in the renderer scope.
[Bindable] public var localVar:String="";

public function setValue(val:String)
{
this.localVar=val;
}
]]>
</fx:Script>
</s:TitleWindow>
</s:SkinnablePopUpContainer>
</fx:Component>
</fx:Declarations>

Then you can declare an instance of AlertMsg and then call its SetValue method and pass a string that represents the message that you want to display in your pop up message. For example:

//THIS IS HOW YOU SET A POPUP MESSAGE IN A MOBILE APP
var msg:AlertMsg = new AlertMsg();
msg.setValue("Hi There") ;
msg.open(this, false);

I hope that you find this useful. Stay tuned for more useful information on Scott's Digital Community.

test Test

Welcome to the first Blog of Scott's Digital Community

2011-10-10T11:34:00.000-07:00

Hi and welcome to my Blog named Scott's Digital Community. My name is Scott Macdonald and I am a Senior Content Lead at Adobe. I have close to 15 years in the High Tech industry and 8 with Adobe. Among my responsibilities at Adobe are working with the community, writing technical documentation such as ActionScript, Java, .NET, HTML/XML, and so on, and other tasks such as helping out on the on-line forums, etc.

I love to get out and work directly with the community when I get the chance. I just got back from MAX 2011 and I really enjoyed working with those attending the labs and other sessions. I have attended the past 3 years at MAX and have meet a lot of interesting people working with various Adobe products. Speaking of interesting, this was taken at the MAX 2011 party.

Anyhow - my Blog is going to focus on how to use Adobe products to perform specific tasks. The format will range. That is, some topics will be shorter blog items, others will be technical articles, while others will be How To videos. The topics will range in subject matter as well. Some may be how to create a Mobile application for IOS or Android devices that receive data from back ends such as Data Services, while others may be how to programmatically extract data from a PDF form. Some may be tips that I find useful on how to use the CS products such Premire Pro (which is the software that I use to create videos).

If you are interested in a specific subject, email me at scottm@adobe.com and place Scott's Digital Community in the subject line.

For all of my videos that appear on this Blog, the following After Effects intro will be used.

Thanks,
Scott