Article summary

Summary

Discusses how to create a basic Adobe Experience Manager DAM image component that displays JPG files located within the Experience Manager DAM. The image component uses the AEM Query Builder API.

This component uses QueryBuilder API within a JSP. For information about using QueryBuilder API within an AEM 6.x HTL component, see Creating an AEM HTML Template Language movie component. 

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (beginner)
Required Skills
JavaScript, HTML
Tested On Experience Manager 5.5, 5.6, AEM 6.x

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 AEM Component that uses the QueryBuilder API to display DAM Assets. 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/damAssets.html (assuming you deploy on author). 

Download

Introduction

You can create an Adobe Experience Manager image component that displays images located in the Experience Manager Digital Asset Management (DAM) repository by using the Query Builder API. This API requires that you define search parameters, and an optional filter. After you execute the query, the results are stored in a result set. You can display the result set in an Experience Manager web page. For information, see Interface QueryBuilder.

The Experience Manager DAM is a digital asset management tool that is fully integrated with the Experience Manager platform and enables your enterprise to share and distribute digital assets. Users across an organization can manage, store, and access images, videos, documents, audio clips, and rich media such as Flash files for use on the web, in print, and for digital distribution. For more information, see Digital Asset Management.

The image component that is created in this development article uses the AEM Query Builder API within JSP application logic. That is, a JSP uses the Query Builder API to retrieve digital assets from the AEM DAM and then displays the images in the web page. In contrast, you can also create a server-side OSGi bundle that uses the Query Builder API to search the Experience Manager repository. See Creating OSGi bundles that use the Query Builder API.

The following illustration shows the simple JSP component that is created in this development article.

 

DAM

Create an AEM CQ application folder structure

Your first step is to create an application folder structure that contains templates, components, and pages by using CRXDE Lite.  

CQAppSetup

This list 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 (common may be a substitute for global).
  • templates: Contains templates that you can base page components on.
  • src: Contains source code that comprises an OSGi component (this example does not use an OSGi component).
  • install: Contains a compiled OSGi bundles container.

Create an application folder structure in CRXDE Lite by performing these tasks:

  1. Go to the CQ welcome page at http://[host name]:[port]; 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 damcomponent.
  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 CRXDE Lite for the changes to be made.  

Create a template for the Dam image component  

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 (if you are using AEM 5.6, click Tools from the left menu).

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 templateDam
  • 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 damcomponent/components/page/templateDam.
  • 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 is based on templateDam  

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 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 (if you are using AEM 5.6, click Tools from the left menu).

3. Right-click /apps/damcomponent/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 templateDam.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Type: foundation/components/page

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

6. Select OK on Allowed Children.

7. Open the templateGallery.jsp located at: /apps/damcomponent/components/page/templateDam/templateDam.jsp.

8. Enter the following JSP code.  

<%@include file="/libs/foundation/global.jsp"%>
<%@page session="false" %>
<%@page import="com.day.cq.tagging.*,com.day.cq.wcm.api.*"%>

<%@ page import="java.util.*,
    javax.jcr.*,
    org.apache.sling.api.resource.*,
    org.apache.sling.api.scripting.*,
    org.apache.sling.jcr.api.*,
    com.day.cq.search.*,
    com.day.cq.search.result.*"

 %>

<%@page import="com.day.cq.dam.api.Asset"%>

<% 
SlingRepository slingRep = sling.getService(SlingRepository.class); 
Session session = slingRep.loginAdministrative(null);
QueryBuilder qb ; 
Map<String, String> map = new HashMap<String,String>();
map.put("type", "dam.Asset");
map.put("property", "jcr:content/metadata/dc:format"); 
map.put("property.value", "image/jpeg");
qb=resource.getResourceResolver().adaptTo(QueryBuilder.class);
Query query = qb.createQuery(PredicateGroup.create(map), session);

SearchResult sr= query.getResult();
String assetPath=null; 

 // iterating over the results
  for (Hit hit : sr.getHits()) {
      String path = hit.getPath();
      Resource rs = resourceResolver.getResource(path);
      Asset asset = rs.adaptTo(Asset.class);     
     assetPath = asset.getPath(); 
%>
<img src = "<%= asset.getRendition("cq5dam.thumbnail.140.100.png").getPath()%>" ></img>
<%
}
%>

In this JSP example, notice that the following JSP code sets up the query:

Map<String, String> map = new HashMap<String,String>();
map.put("type", "dam.Asset");
map.put("property", "jcr:content/metadata/dc:format");
map.put("property.value", "image/jpeg");
qb=resource.getResourceResolver().adaptTo(QueryBuilder.class);
Query query = qb.createQuery(PredicateGroup.create(map), session);

All JPG files that are dam assets are queried. Notice that the query information is placed within a HashMap instance and the HashMap instance is passed to the QueryBuilder object's createQuery method. The results are simply written out to the web page:

SearchResult sr= query.getResult();
String assetPath=null;

// iterating over the results
for (Hit hit : sr.getHits()) {
String path = hit.getPath();
Resource rs = resourceResolver.getResource(path);
Asset asset = rs.adaptTo(Asset.class);
assetPath = asset.getPath();
%>
<img src = "<%= asset.getRendition("cq5dam.thumbnail.140.100.png").getPath()%>" ></img>
<%
}

Note:

If you are using AEM 6.1, then replace this code with the code below. 

AEM 6.1 code

If you are using AEM 6.1, then use this code. 

<%@include file="/libs/foundation/global.jsp"%>
<%@page session="false" %>
<%@page import="com.day.cq.tagging.*,com.day.cq.wcm.api.*"%>
 
<%@ page import="java.util.*,
    javax.jcr.*,
    org.apache.sling.api.resource.*,
    org.apache.sling.api.scripting.*,
    org.apache.sling.jcr.api.*,
    com.day.cq.search.*,
    com.day.cq.search.result.*"
 
 %>
 
<%@page import="com.day.cq.dam.api.Asset"%>
 
<% 
SlingRepository slingRep = sling.getService(SlingRepository.class); 
Session session = slingRep.loginAdministrative(null);
QueryBuilder qb ; 
Map<String, String> map = new HashMap<String,String>();
map.put("type", "dam:Asset");
map.put("property", "jcr:content/metadata/dc:format"); 
map.put("property.value", "image/jpeg");
qb=resource.getResourceResolver().adaptTo(QueryBuilder.class);
Query query = qb.createQuery(PredicateGroup.create(map), session);
 
SearchResult sr= query.getResult();
String assetPath=null; 
 
 // iterating over the results
  for (Hit hit : sr.getHits()) {
      String path = hit.getPath();
      Resource rs = resourceResolver.getResource(path);
      Asset asset = rs.adaptTo(Asset.class);     
     assetPath = asset.getPath(); 
%>
<img src="<%= assetPath %>" />
<%

}
%>

Create an AEM web page that displays the image component 

The final task is to create a site that contains a page that is based on the templateDam (the template created earlier in this development article). Create a CQ web page that displays the DAM image component:

  1. Go to the welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select Websites. (If you are using AEM 5.6, click Tools from the menu on the left.)
  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 templateDam 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.
    Open the new page that you created by double-clicking it in the right pane. The new page opens in a web browser.  

See also

Congratulations, you have just created an AEM  component that uses the QueryBuilder API to display DAM Assets. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

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