Article summary

Summary

Discusses how to create a custom tag library used to search for AEM content tag information. In addition, discusses the following concepts:

  • how to build a Java collection and iterate over the collection in a JSP using a tag lib
  • how to use custom tags within an AEM component
  • how to use ValueMap to retrieve tag identifier values
  • how to use a PredicateGroup instance to perform AEM queries
  • how to map a custom tag library to link to Java classes in an OSGi bundle
  • how to use the tags xtype in a component dialog 

This article uses an Adobe Maven Archetype project to build an OSGi bundle. If you are not familiar with an Adobe Maven Archetype project, it is recommended that you read the following article: Creating your first AEM Service using an Adobe Maven Archetype project.

Thank you Greg Wells, an AEM community member whom submitted this AEM code for use within a Helpx article. It's great community members like Greg that help grow and assist the overall AEM community.

A special thank you to Ratna Kumar Kotla, a top AEM community member, for testing this community article to ensure it works. 

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
Java, Maven, HTML
Tested On Adobe Experience Manager 6
 

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 custom tag library that is used to search for AEM content tag information, including tag usage. This community code is for teaching purposes only and not meant to go into production as is.

You can view the application by using the following URL: http://localhost:4502/editor.html/content/SearchTag.html (assuming you deploy on author). 

Download

Note:

To read an AEM community article that builds the same component using Sightly, see Developing a Sightly Component that searches for AEM Content Tags

Introduction

You can create custom tag libraries for Adobe Experience Manager (AEM) and use them to search for AEM content tags. Tags are a quick and easy method of classifying content within your website. In technical terms, a tag is a piece of metadata assigned to a content node within AEM (usually a page). A custom tag library uses an OSGi component. Within the OSGi component, the AEM Tag Manager is used to search for the content tags, For information about the API, see TagManager API.

A custom tag library is implemented as an OSGi bundle that contains a Java class that extends TagSupport. For information, see Class TagSupport.

You also need to define a tag library descriptor (TLD) file and bundle that within the OSGi bundle. For information, see Tag Library Descriptors.

After you develop an AEM custom tag library, you can invoke its actions from an AEM component. For example, the component can display information about tag usage (for example, the number of times it is used). In this article, a Tags xtype is used to let the author select a tag from an AEM dialog, as shown in the following illustration.
 

DialogTags
An AEM dialog lets an author select an AEM tag

In this example, assume that the author selects the Landscape tag. Once select, an AEM component that uses a custom JSP tag library retrieves information about the tag. The information is displayed in the page, as shown in the following illustration. 

intro2
An AEM page displaying tag information

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 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 tagsearchapp
  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 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 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 tagSearchTemplate
  • 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 tagsearchapp/components/page/tagSearchTemplate.
  • 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 a CQ 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/customtag/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 tagSearchTemplate
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Type:foundation/components/page (in AEM 6, you specify this value for page components. In previous versions of AEM, this was not required.)

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

6. Select OK on Allowed Children.

7. Open the slingRTemplate.jsp located at: /apps/customtag/components/page/tagTemplate/tagTemplate.jsp.

8. Enter the following JSP code.

<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:includeClientLib css="taggingTest.screen.base"/>    
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
<h1>Here is where the component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Setup Maven in your development environment

You can use Maven to build an OSGi bundle that contains a Sling Servlet. 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:

It is recommended that you use Maven 3.0.3 or greater. 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/.

The following XML code represents a settings.xml file that you can use.

<?xml version="1.0" encoding="UTF-8"?>

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<!--
 | This is the configuration file for Maven. It can be specified at two levels:
 |
 |  1. User Level. This settings.xml file provides configuration for a single user, 
 |                 and is normally provided in ${user.home}/.m2/settings.xml.
 |
 |                 NOTE: This location can be overridden with the CLI option:
 |
 |                 -s /path/to/user/settings.xml
 |
 |  2. Global Level. This settings.xml file provides configuration for all Maven
 |                 users on a machine (assuming they're all using the same Maven
 |                 installation). It's normally provided in 
 |                 ${maven.home}/conf/settings.xml.
 |
 |                 NOTE: This location can be overridden with the CLI option:
 |
 |                 -gs /path/to/global/settings.xml
 |
 | The sections in this sample file are intended to give you a running start at
 | getting the most out of your Maven installation. Where appropriate, the default
 | values (values used when the setting is not specified) are provided.
 |
 |-->
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0" 
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
  <!-- localRepository
   | The path to the local repository maven will use to store artifacts.
   |
   | Default: ~/.m2/repository
  <localRepository>/path/to/local/repo</localRepository>
  -->

  <!-- interactiveMode
   | This will determine whether maven prompts you when it needs input. If set to false,
   | maven will use a sensible default value, perhaps based on some other setting, for
   | the parameter in question.
   |
   | Default: true
  <interactiveMode>true</interactiveMode>
  -->

  <!-- offline
   | Determines whether maven should attempt to connect to the network when executing a build.
   | This will have an effect on artifact downloads, artifact deployment, and others.
   |
   | Default: false
  <offline>false</offline>
  -->

  <!-- pluginGroups
   | This is a list of additional group identifiers that will be searched when resolving plugins by their prefix, i.e.
   | when invoking a command line like "mvn prefix:goal". Maven will automatically add the group identifiers
   | "org.apache.maven.plugins" and "org.codehaus.mojo" if these are not already contained in the list.
   |-->
  <pluginGroups>
    <!-- pluginGroup
     | Specifies a further group identifier to use for plugin lookup.
    <pluginGroup>com.your.plugins</pluginGroup>
    -->
  </pluginGroups>

  <!-- proxies
   | This is a list of proxies which can be used on this machine to connect to the network.
   | Unless otherwise specified (by system property or command-line switch), the first proxy
   | specification in this list marked as active will be used.
   |-->
  <proxies>
    <!-- proxy
     | Specification for one proxy, to be used in connecting to the network.
     |
    <proxy>
      <id>optional</id>
      <active>true</active>
      <protocol>http</protocol>
      <username>proxyuser</username>
      <password>proxypass</password>
      <host>proxy.host.net</host>
      <port>80</port>
      <nonProxyHosts>local.net|some.host.com</nonProxyHosts>
    </proxy>
    -->
  </proxies>

  <!-- servers
   | This is a list of authentication profiles, keyed by the server-id used within the system.
   | Authentication profiles can be used whenever maven must make a connection to a remote server.
   |-->
  <servers>
    <!-- server
     | Specifies the authentication information to use when connecting to a particular server, identified by
     | a unique name within the system (referred to by the 'id' attribute below).
     | 
     | NOTE: You should either specify username/password OR privateKey/passphrase, since these pairings are 
     |       used together.
     |
    <server>
      <id>deploymentRepo</id>
      <username>repouser</username>
      <password>repopwd</password>
    </server>
    -->
    
    <!-- Another sample, using keys to authenticate.
    <server>
      <id>siteServer</id>
      <privateKey>/path/to/private/key</privateKey>
      <passphrase>optional; leave empty if not used.</passphrase>
    </server>
    -->
  </servers>

  <!-- mirrors
   | This is a list of mirrors to be used in downloading artifacts from remote repositories.
   | 
   | It works like this: a POM may declare a repository to use in resolving certain artifacts.
   | However, this repository may have problems with heavy traffic at times, so people have mirrored
   | it to several places.
   |
   | That repository definition will have a unique id, so we can create a mirror reference for that
   | repository, to be used as an alternate download site. The mirror site will be the preferred 
   | server for that repository.
   |-->
  <mirrors>
    <!-- mirror
     | Specifies a repository mirror site to use instead of a given repository. The repository that
     | this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
     | for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
     |
    <mirror>
      <id>mirrorId</id>
      <mirrorOf>repositoryId</mirrorOf>
      <name>Human Readable Name for this Mirror.</name>
      <url>http://my.repository.com/repo/path</url>
    </mirror>
     -->
  </mirrors>
  
  <!-- profiles
   | This is a list of profiles which can be activated in a variety of ways, and which can modify
   | the build process. Profiles provided in the settings.xml are intended to provide local machine-
   | specific paths and repository locations which allow the build to work in the local environment.
   |
   | For example, if you have an integration testing plugin - like cactus - that needs to know where
   | your Tomcat instance is installed, you can provide a variable here such that the variable is 
   | dereferenced during the build process to configure the cactus plugin.
   |
   | As noted above, profiles can be activated in a variety of ways. One way - the activeProfiles
   | section of this document (settings.xml) - will be discussed later. Another way essentially
   | relies on the detection of a system property, either matching a particular value for the property,
   | or merely testing its existence. Profiles can also be activated by JDK version prefix, where a 
   | value of '1.4' might activate a profile when the build is executed on a JDK version of '1.4.2_07'.
   | Finally, the list of active profiles can be specified directly from the command line.
   |
   | NOTE: For profiles defined in the settings.xml, you are restricted to specifying only artifact
   |       repositories, plugin repositories, and free-form properties to be used as configuration
   |       variables for plugins in the POM.
   |
   |-->
  <profiles>
    <!-- profile
     | Specifies a set of introductions to the build process, to be activated using one or more of the
     | mechanisms described above. For inheritance purposes, and to activate profiles via <activatedProfiles/>
     | or the command line, profiles have to have an ID that is unique.
     |
     | An encouraged best practice for profile identification is to use a consistent naming convention
     | for profiles, such as 'env-dev', 'env-test', 'env-production', 'user-jdcasey', 'user-brett', etc.
     | This will make it more intuitive to understand what the set of introduced profiles is attempting
     | to accomplish, particularly when you only have a list of profile id's for debug.
     |
     | This profile example uses the JDK version to trigger activation, and provides a JDK-specific repo.
    <profile>
      <id>jdk-1.4</id>

      <activation>
        <jdk>1.4</jdk>
      </activation>

      <repositories>
        <repository>
          <id>jdk14</id>
          <name>Repository for JDK 1.4 builds</name>
          <url>http://www.myhost.com/maven/jdk14</url>
          <layout>default</layout>
          <snapshotPolicy>always</snapshotPolicy>
        </repository>
      </repositories>
    </profile>
    -->

    <!--
     | Here is another profile, activated by the system property 'target-env' with a value of 'dev',
     | which provides a specific path to the Tomcat instance. To use this, your plugin configuration
     | might hypothetically look like:
     |
     | ...
     | <plugin>
     |   <groupId>org.myco.myplugins</groupId>
     |   <artifactId>myplugin</artifactId>
     |   
     |   <configuration>
     |     <tomcatLocation>${tomcatPath}</tomcatLocation>
     |   </configuration>
     | </plugin>
     | ...
     |
     | NOTE: If you just wanted to inject this configuration whenever someone set 'target-env' to
     |       anything, you could just leave off the <value/> inside the activation-property.
     |
    <profile>
      <id>env-dev</id>

      <activation>
        <property>
          <name>target-env</name>
          <value>dev</value>
        </property>
      </activation>

      <properties>
        <tomcatPath>/path/to/tomcat/instance</tomcatPath>
      </properties>
    </profile>
    -->
  

<profile>

                <id>adobe-public</id>

                <activation>

                    <activeByDefault>true</activeByDefault>

                </activation>

                <repositories>

                  <repository>

                    <id>adobe</id>

                    <name>Nexus Proxy Repository</name>

                    <url>http://repo.adobe.com/nexus/content/groups/public/</url>

                    <layout>default</layout>

                  </repository>

                </repositories>

                <pluginRepositories>

                  <pluginRepository>

                    <id>adobe</id>

                    <name>Nexus Proxy Repository</name>

                    <url>http://repo.adobe.com/nexus/content/groups/public/</url>

                    <layout>default</layout>

                  </pluginRepository>

                </pluginRepositories>

            </profile>

</profiles>

  <!-- activeProfiles
   | List of profiles that are active for all builds.
   |
  <activeProfiles>
    <activeProfile>alwaysActiveProfile</activeProfile>
    <activeProfile>anotherAlwaysActiveProfile</activeProfile>
  </activeProfiles>
  -->
</settings>

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. 

plugin1

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=net.gdubz.taggingtest.tags.global -DartifactId=tagsearch -Dversion=1.0-SNAPSHOT -Dpackage=net.gdubz.taggingtest.tags.global -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\tagsearch. 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. 

project2

 

Note:

Delete the test package in the project

The next step is to add two Java files to the net.gdubz.taggingtest.tags.global package. The Java class that you create in this section extends the Java class named javax.servlet.jsp.tagext.TagSupport. This class is required to define a new tag library for AEM. You can override its methods such doStartTag. For information, see doStartTag.

Tag Library Descriptor file

To create a custom tag library, create a Tag Library Descriptor  (.tld) file that defines the markup of the new AEM tags. You also map the tags to the class defined in the OSGi bundle by using the tag-class element. In the following example, notice that the value is net.gdubz.taggingtest.tags.global.GetTaggingTestTag

Also notice the uri value http://www.gdubz.net/bundles/cq/tags/global. This value is also referenced in the front-end AEM component. Notice the name of the custom tag is defined using the short-name element. In this example, the name is TaggingTest Tag Library - Global and defines three required attributes: firstName, lastName, and contactNo. (These attributes are referenced from the JSP in the client component later in this development article.)

Define these two TLD files: 

  • taglib.tld
  • taglib-global.tld

The following code represents  the taglib.tld file. 

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<taglib xmlns="http://java.sun.com/xml/ns/javaee" version="2.1">
    <short-name>TaggingTest Tag Library</short-name>
    <description>Project - Common Functions for use in EL and Tag Files</description>
    <uri>http://www.gdubz.net/bundles/cq/tags</uri>
    <tlib-version>1.0</tlib-version>
</taglib>

The following represents the taglib-global.tld file. 

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

<taglib xmlns="http://java.sun.com/xml/ns/javaee" version="2.1">
    <short-name>TaggingTest Tag Library - Global</short-name>
    <description>Global Tags for the TaggingTest Project</description>
    <uri>http://www.gdubz.net/bundles/cq/tags/global</uri>
    <tlib-version>1.0</tlib-version>
    
    <tag>
		<name>getTaggingTest</name>
		<tag-class>net.gdubz.taggingtest.tags.global.GetTaggingTestTag</tag-class>
		<info>Get Tag Test Info</info>
	</tag>
</taglib>

Place these TLD files in the resources/META-INF  location in the Java project. 

projecttdl

Note:

Create a resources/META-INF folder under the src/main folder. 

CQBaseTag

Create a Java class named CQBaseTag that extends BodyTagSupport. This class has a method named setPageContext that sets data members such as a com.day.cq.wcm.api.designer.Design data member. Most of the data members belong to com.day.cq.wcm.api

The following Java code represents the CQBaseTag class. 

package net.gdubz.taggingtest.tags.global;

import com.day.cq.wcm.api.Page;
import com.day.cq.wcm.api.PageManager;
import com.day.cq.wcm.api.components.Component;
import com.day.cq.wcm.api.components.ComponentContext;
import com.day.cq.wcm.api.components.EditContext;
import com.day.cq.wcm.api.designer.Design;
import com.day.cq.wcm.api.designer.Designer;
import com.day.cq.wcm.api.designer.Style;
import javax.jcr.Node;
import javax.jcr.Session;
import javax.servlet.jsp.PageContext;
import javax.servlet.jsp.tagext.BodyTagSupport;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.resource.ValueMap;
import org.apache.sling.api.scripting.SlingBindings;
import org.apache.sling.api.scripting.SlingScriptHelper;
import org.slf4j.Logger;

public class CQBaseTag
  extends BodyTagSupport
{
  protected Node currentNode = null;
  protected SlingScriptHelper sling = null;
  protected SlingHttpServletRequest slingRequest = null;
  protected Page currentPage = null;
  protected SlingHttpServletResponse slingResponse = null;
  protected SlingBindings bindings = null;
  protected Resource resource = null;
  protected ResourceResolver resourceResolver = null;
  protected Logger log = null;
  protected ComponentContext componentContext = null;
  protected EditContext editContext = null;
  protected ValueMap properties = null;
  protected PageManager pageManager = null;
  protected Page resourcePage = null;
  protected Component component = null;
  protected Designer designer = null;
  protected Design currentDesign = null;
  protected Design resourceDesign = null;
  protected Style currentStyle = null;
  protected Session session = null;
  
  public void setPageContext(PageContext pageContext)
  {
    super.setPageContext(pageContext);
    this.currentNode = ((Node)pageContext.findAttribute("currentNode"));
    this.sling = ((SlingScriptHelper)pageContext.findAttribute("sling"));
    this.slingRequest = ((SlingHttpServletRequest)pageContext.findAttribute("slingRequest"));
    this.slingResponse = ((SlingHttpServletResponse)pageContext.findAttribute("slingResponse"));
    this.resource = ((Resource)pageContext.findAttribute("resource"));
    this.resourceResolver = ((ResourceResolver)pageContext.findAttribute("resourceResolver"));
    this.log = ((Logger)pageContext.findAttribute("log"));
    this.bindings = ((SlingBindings)pageContext.findAttribute("bindings"));
    this.componentContext = ((ComponentContext)pageContext.findAttribute("componentContext"));
    this.editContext = ((EditContext)pageContext.findAttribute("editContext"));
    this.properties = ((ValueMap)pageContext.findAttribute("properties"));
    this.pageManager = ((PageManager)pageContext.findAttribute("pageManager"));
    this.currentPage = ((Page)pageContext.findAttribute("currentPage"));
    this.resourcePage = ((Page)pageContext.findAttribute("resourcePage"));
    this.component = ((Component)pageContext.findAttribute("component"));
    this.designer = ((Designer)pageContext.findAttribute("designer"));
    this.currentDesign = ((Design)pageContext.findAttribute("currentDesign"));
    this.resourceDesign = ((Design)pageContext.findAttribute("resourceDesign"));
    this.currentStyle = ((Style)pageContext.findAttribute("currentStyle"));
  }
}

GetTaggingTestTag

The GetTaggingTestTag class extends the CQBaseTag class. This class implements the doStartTag method that is invoked when the custom tag defined in an AEM custom component is used (this is built later in this development article).  

First, notice that an AEM value map is retrieved with this line of code: 

ValueMap vm = resource.getValueMap(); 

The code checks to determine if a Tag is in the collection using this code: 

(vm.containsKey(TagConstants.PN_TAGS)

A TagManager object is created by invoking resourceResolver object's adaptTo method. 

TagManager tagManager = resourceResolver.adaptTo(TagManager.class); 

A String array that contains the tag id values is created using this code: 

String[] tagIDs = vm.get(TagConstants.PN_TAGS, String[].class); 

Next, for each tag id value, a for loop is executed. 

 

 

for (String tagID : tagIDs) { 
    Tag resolvedTag = tagManager.resolve(tagID); 
    if (resolvedTag != null) { 
        TagCountBean tagCountBean = new TagCountBean(resolvedTag,         getTrueTagCount(resolvedTag, resourceResolver)); 
tagList.add(tagCountBean); 
} 
} 
if (!tagList.isEmpty()) 
    pageContext.setAttribute("tagList", tagList); 
}

The first task performed in the loop is a Tag object is created by invoking the TagManager object's resolve method and passing the TagId value. Then a TagCountBean object is created (a TagCountBean class is a custom Java bean that has setters and getters).

Notice that the constructor of the TagCountBean constructor accepts this parameter values: 

  • A Tag instance
  • An int value that represents the tag usage value

To retrieve the integer value that represents the tag usage value, the getTrueTagCount method is used. This method uses the TagManager API to retrieve the number of times a specific tag is used. This is achieved by using a PredicateGroup object. For information, see  PredicateGroup

LinkedHashMap<String, String> map = new LinkedHashMap<String, String>();

// we're using "tagid" here as opposed to just "property" because this
// will resolve merged tags as well ("cq:movedTo" and "cq:backlinks")
map.put("tagid", tag.getTagID());
map.put("tagid.property", TagConstants.PN_TAGS);

// run query
PredicateGroup predicates = PredicateGroup.create(map);

This PredicateGroup instance is used to search for the number of times the tag is used within AEM.

Query query = builder.createQuery(predicates, resolver.adaptTo(Session.class));
query.setHitsPerPage(Long.MAX_VALUE);
SearchResult result = query.getResult();

// parse results
if (!result.getHits().isEmpty()) {
// only concerned with number of results
trueTagCount = result.getHits().size();
}

return trueTagCount;

The following Java code represents the GetTaggingTestTag class. 

package net.gdubz.taggingtest.tags.global;

import java.util.ArrayList; 
import java.util.LinkedHashMap; 
import java.util.List; 

import javax.jcr.Session; 
import javax.servlet.jsp.JspException; 

import org.apache.sling.api.resource.ResourceResolver; 
import org.apache.sling.api.resource.ValueMap; 
import org.slf4j.Logger; 
import org.slf4j.LoggerFactory; 

import com.day.cq.search.PredicateGroup; 
import com.day.cq.search.Query; 
import com.day.cq.search.QueryBuilder; 
import com.day.cq.search.result.SearchResult; 
import com.day.cq.tagging.Tag; 
import com.day.cq.tagging.TagConstants; 
import com.day.cq.tagging.TagManager; 

@SuppressWarnings("serial") 
public class GetTaggingTestTag extends CQBaseTag { 

        protected static Logger LOG = LoggerFactory.getLogger(GetTaggingTestTag.class); 

        @Override 
        public int doStartTag() throws JspException { 
                
                ValueMap vm = resource.getValueMap(); 
                if (vm.containsKey(TagConstants.PN_TAGS)) { 
                        TagManager tagManager = resourceResolver.adaptTo(TagManager.class); 
                        String[] tagIDs = vm.get(TagConstants.PN_TAGS, String[].class); 
                        if (tagIDs.length > 0) { 
                                
                                List<TagCountBean> tagList = new ArrayList<TagCountBean>(); 
                                
                                for (String tagID : tagIDs) { 
                                        Tag resolvedTag = tagManager.resolve(tagID); 
                                        if (resolvedTag != null) { 
                                                TagCountBean tagCountBean = new TagCountBean(resolvedTag, getTrueTagCount(resolvedTag, resourceResolver)); 
                                                tagList.add(tagCountBean); 
                                        } 
                                } 
                                if (!tagList.isEmpty()) 
                                        pageContext.setAttribute("tagList", tagList); 
                        } 
                } 
                
                return super.doStartTag(); 
        } 
        
        /** 
         * Queries the repository for all instances of a {@link Tag} 
         * @param tag - the {@link Tag} whose usage you want to count 
         * @param resolver - a {@link ResourceResolver} that can run queries 
         * @return the true usage count of a {@link Tag} 
         */ 
        public static int getTrueTagCount(Tag tag, ResourceResolver resolver) { 
                int trueTagCount = 0; 
                
                // need to maintain order of map insertion, so using a LinkedHashMap 
                LinkedHashMap<String, String> map = new LinkedHashMap<String, String>(); 
                // we're using "tagid" here as opposed to just "property" because this 
                // will resolve merged tags as well ("cq:movedTo" and "cq:backlinks") 
                map.put("tagid", tag.getTagID()); 
                map.put("tagid.property", TagConstants.PN_TAGS); 
                
                // run query 
                PredicateGroup predicates = PredicateGroup.create(map); 
                QueryBuilder builder = resolver.adaptTo(QueryBuilder.class); 
                Query query = builder.createQuery(predicates, resolver.adaptTo(Session.class)); 
                query.setHitsPerPage(Long.MAX_VALUE); 
                SearchResult result = query.getResult(); 
                
                // parse results 
                if (!result.getHits().isEmpty()) { 
                        // only concerned with number of results 
                        trueTagCount = result.getHits().size(); 
                } 
                
                return trueTagCount; 
        } 
        
        /** 
         * Holds a {@link Tag} and its usage count 
         */ 
        public class TagCountBean { 
                private Tag tag; 
                private int usageCount; 
                
                public TagCountBean(Tag tag, int usageCount) { 
                        super(); 
                        this.setTag(tag); 
                        this.setUsageCount(usageCount); 
                } 
                
                public Tag getTag() { 
                        return tag; 
                } 
                
                public void setTag(Tag tag) { 
                        this.tag = tag; 
                } 
                
                public int getUsageCount() { 
                        return usageCount; 
                } 
                
                public void setUsageCount(int usageCount) { 
                        this.usageCount = usageCount; 
                } 
        } 
} 

Modify the Maven POM file 

Modify the POM files to successfully build the OSGi bundle. In the POM file located at C:\AdobeCQ\tagsearch\bundle, add the following dependencies.

  • org.apache.felix.scr
  • org.apache.felix.scr.annotations
  • org.apache.sling.scripting.jsp

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>net.gdubz.taggingtest.tags.global</groupId>
        <artifactId>tagsearch</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>tagsearch-bundle</artifactId>
    <packaging>bundle</packaging>
    <name>My Project Bundle</name>

    <dependencies>
         
       <dependency>
    <groupId>com.day.cq</groupId>
    <artifactId>cq-tagging</artifactId>
    <version>5.6.2</version>
    <scope>provided</scope>
</dependency>
         
         
        <dependency>
            <groupId>com.day.cq</groupId>
            <artifactId>cq-search</artifactId>
            <version>5.5.4</version>
            <scope>provided</scope>
        </dependency>
           
             
        <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.sling</groupId>
    <artifactId>org.apache.sling.api</artifactId>
    <version>2.7.0</version>
    <scope>provided</scope>
</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>
      
      <dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>servlet-api</artifactId>
    <version>2.5</version>
</dependency>

<dependency>
    <groupId>javax.servlet.jsp</groupId>
    <artifactId>jsp-api</artifactId>
    <version>2.0</version>
</dependency>

<dependency>
   <groupId>com.adobe.aem</groupId>
   <artifactId>uber-jar</artifactId>
   <version>6.1.0</version>
   <scope>provided</scope>
   <classifier>obfuscated-apis</classifier>
</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>net.gdubz.taggingtest.tags.global.tagsearch-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\tagsearch folder.
  2. Run the following maven command: mvn -PautoInstallPackage install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\tagsearch\bundle\target. The file name of the OSGi component is tagsearch-bundle-1.0-SNAPSHOT.jar.

Note:

The command -PautoInstallPackage automatically deploys the OSGi bundle to AEM.

Create a component that uses custom tag libraries

Create a custom component that uses a custom tag library to retrieve AEM tag information by performing these tasks using CRXDE Lite:

1. Right click on /apps/tagsearchapp/components and then select New, Component.

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

  • Label: The name of the component to create. Enter taggingTest.
  • Title: The title that is assigned to the component. Enter AEM Tag Test Component.
  • Description: The description that is assigned to the template. Enter Test component for tagging.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side kick where the component appears. Enter General. (The myxtype component is located under the General heading in the sidekick.)
  • Allowed parents: Enter */*parsys.

3. Click Ok.

Add a dialog to the component

A dialog lets an author click on the component during design time and enter values that are used by the component. The component created in this development article is a single tab that lets an author select an existing AEM tag. (See the illustration shown at the beginning of this development article.)

The following illustration shows the JCR nodes that represent the dialog created in this section.  

dialog
JCR Nodes that create the dialog

To add a dialog to the component, perform these tasks:

1. Select /apps/tagsearchapp/components/taggingTest, right click and select Create, Create Dialog.

2. In the Title field, enter taggingTest.

3. Click Ok.

4. Delete all nodes under /apps/tagsearchapp/components/taggingTest/dialog/.

5. Click on the following node: /apps/tagsearchapp/components/taggingTest/dialog.

6. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: cq:Widget

7. Add the following property to this node: 

  • xtype (String) - tab

8. Click on the following node: /apps/tagsearchapp/components/taggingTest/dialog/items.

9. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: cq:WidgetCollection

10. Click on the following node: /apps/tagsearchapp/components/taggingTest/dialog/items/items

11.  Right click and select Create, Create Node.

12. Enter the following values:

  • Name: default
  • Type: cq:Widget

13.  Add the following property to this node: 

  • xtype (String) - panel
  • title (String) -  Basic

14. Click on the following node: /apps/tagsearchapp/components/taggingTest/dialog/items/items/default.

15. Right click and select Create, Create Node.

16. Enter the following values:

  • Name: items
  • Type: cq:WidgetCollection

17. Click on the following node: /apps/tagsearchapp/components/taggingTest/dialog/items/items/default/items.

18. Right click and select Create, Create Node.

19. Enter the following values:

  • Name: tags: 
  • Type: cq:Widget

20. Add the following property to this node: 

  • xtype (String) - tags
  • title (String) -  Basic
  • allowBlank (Boolean) - true
  • cls (String) - cq-propsdialog-tags
  • Label (String) - Tags
  • name (String) - ./cq:tags

 

Note:

For information about the tags xtype, see Class CQ.tagging.TagInputField.

Add application logic to the component JSP file

The component's JSP file contains application logic that uses the custom tab library named ttGlobal. Notice this line of code: 

<ttGlobal:getTaggingTest />

This tag corresponds to the getTaggingTest defined in the TLD tag element: 

<name>getTaggingTest</name>
<tag-class>net.gdubz.taggingtest.tags.global.GetTaggingTestTag</tag-class>
<info>Get Tag Test Info</info>
</tag>

Notice how the name element is a sibling element of the tag-class element. In this example, the value of the tag-class element maps to the Java Class defined in the Java OSGi bundle that you created earlier in this developoment article. 

In addition notice this line of code:

<%@taglib prefix="ttGlobal" uri="http://www.gdubz.net/bundles/cq/tags/global"%>

Notice uri references http://www.gdubz.net/bundles/cq/tags/global. This maps to the uri value in the TLD file (that you defined earlier in this development article): 

<uri>http://www.gdubz.net/bundles/cq/tags/global</uri>

This is how a custom tag library used in a JSP maps to a Java class in an AEM OSGi bundle. It is important that you understand the relationship between the custom tag defined in the component JSP, the elements defined in the TLD file, and the Java classes defined in the AEM OSGi bundle.

The following JSP code represents the JSP at /apps/tagsearchapp/components/taggingTest/taggingTest.jsp

<%@include file="/libs/foundation/global.jsp" %>
<%@page session="false"
    contentType="text/html; charset=utf-8" %><%
%><%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %><%
%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%
%><%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><%
%><%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="ttGlobal" uri="http://www.gdubz.net/bundles/cq/tags/global" %>   

<ttGlobal:getTaggingTest />

<!-- #BEGIN taggingTest -->
<c:choose>
	<c:when test="${ empty tagList }">
		<p class="alert-warning">Please double-click to author this component.</p>
	</c:when>
	<c:otherwise>
		<header>
			<c:forEach var="item" items="${ tagList }">
				<p class="alert-warning">
					<strong>Count:</strong> ${ item.tag.count }<br />
					<strong>Description:</strong> ${ item.tag.description }<br />
					<strong>Name:</strong> ${ item.tag.name }<br />
					<strong>Namespace:</strong> ${ item.tag.namespace }<br />
					<strong>Parent:</strong> ${ item.tag.parent }<br />
					<strong>Path:</strong> ${ item.tag.path }<br />
					<strong>TagID:</strong> ${ item.tag.tagID }<br />
					<strong>Title:</strong> ${ item.tag.title }<br />
					<strong>Title Path:</strong> ${ item.tag.titlePath }<br />
				</p>
				<p class="alert-warning"><strong>True Count:</strong> ${ item.usageCount }</p>
			</c:forEach>
		</header>
	</c:otherwise>
</c:choose>
<!-- #END taggingTest -->

Note:

Notice that the @taglib Prefix="ttGlobal"  has a uri value taht references the uri value defined in the TLD file.

Create an AEM web page that uses the custom tag component

The final step is to create a page based on the tagSearchTemplate. Once you create this page, drag and drop the  AEM Tag Test Component custom component onto the page, as shown in the following illustration. 

DropComponent
The AEM Tag Test Component being dropped onto an AEM page

Once you drop the component onto the page, click on it to open the dialog and select an existing AEM tag (see the illustration shown at the start of the article). The component displays information about the tag, including its usage count (the number of times the tag is used in AEM pages). 

Create an AEM page that displays tags defined in the custom tag library.

  1. Go to the Websites page at http://localhost:4502/siteadmin#/content.
  2. Select New Page.
  3. Specify the title of the page in the Title field. Enter SearchTag.
  4. Specify the name of the page in the Name field.
  5. Select tagSearchTemplate 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.
  6. Open the page by clicking the myTags page.

Note:

Install the package at the start of this article for the CSS used in this component.

See also

Congratulations, you have just created an AEM custom tag library and used that library to create an AEM component to retrieve AEM content tag information. 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