Article summary

Summary

Discusses how to develop an AEM HTML Template Language (HTL - formerly known as Sightly) component that uses the TagManager API to search for tags. This article covers the following concepts: 

  • how to use the WCMUsePojo class, which replaces the depricated WCMUse class
  • how to use a cq/gui/components/common/tagspicker granite data type

A special thank you to community members Ranta Kumar Kotla and Pratistha Mukherjee for testing this Community Article to ensure it works.

In addition, thank you to community member, Greg Wells, who brought to our attention that a discussion on searching for tags using the TagManager API was required. Thank you Greg. 

NOTE: This community article uses a Maven 10 Archetype command to create an AEM Sample app. Also, it is meant for use within Touch UI only.

HTL is the AEM template language that can be used to replace use of JSP when developing an AEM component. HTL helps you to separate your design from your application logic. For more information, see Introduction to the HTML Template Language.

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (beginner - intermediate)
Required Skills
JCR nodes, JavaScript, HTML
Tested On Adobe Experience Manager 6.1, 6.2

Note:

You can download an AEM package that contains the code 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 a HTL component that uses the TagManager API to search for AEM tags. 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/editor.html/content/htlTags/en.html (assuming you deploy on author).

Download

Note:

If you are following this article and not installing the packages and depending on whether you are using AEM 6.1 or 6.2, you will use different dependencies in your Maven POM file. Both POM files are shown in this article. Ensure that you use the correct version; otherwise, you will not be able to place the OSGi bundle into an Active State. 

Introduction

You can create a custom Adobe Experience Manager (AEM) HTL component that searches 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). Within the OSGi component, the AEM Tag Manager is used to search for the content tags, For information about the API, see TagManager API.For information about the API, see AEM TagManager.

Consider the following illustration of the HTL component created in this article that shows defined AEM tags. 

Overview
HTL component dispaying AEM Content Tags

As shown in the previous illustration, the HTL component displays the following information: 

  • Title - the title of the AEM Tag
  • Count - the number of times that tag is used within AEM
  • Path - the path where the tag is defined

 

Note:

You can view existing AEM tags at http://localhost:4502/tagging

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:

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>

Note:

The Adobe repository URL is now made secured. Change http://repo.adobe.com/nexus/content/groups/public/ to https://repo.adobe.com/nexus/content/groups/public/.

Create an AEM Maven 10 archetype project

You can create an archetype project by using the Maven archetype plugin. In this example, assume that the working directory is C:\AdobeCQ.

files
Maven Archetype 10 generated files

The following list describes the Archetype 10 project arguments:

  • groupId - Base Maven groupId
  • artifactId - Base Maven ArtifactId
  • version - the version of your project
  • package - Java Source Package
  • appsFolderName - /apps folder name
  • artifactName - Maven Project Name
  • componentGroupName - AEM component group name
  • contentFolderName - /content folder name
  • cssId - prefix used in generated css
  • packageGroup - Content Package Group name
  • siteName - AEM site name

To create an 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 -DarchetypeGroupId=com.adobe.granite.archetypes -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=10 -DarchetypeRepository=https://repo.adobe.com/nexus/content/groups/public/

3. When prompted, specify the following information:

  • groupId - htlTags
  • artifactId -htlTags
  • version - 1.0-SNAPSHOT
  • package - com.adobe.service
  • appsFolderName - htlTags
  • artifactName - htlTags
  • componentGroupName - htlTags
  • contentFolderName - htlTags
  • cssId - htlTags
  • packageGroup -htlTags
  • siteName - htlTags

4. WHen prompted, specify Y.

5. Once done, you will see a message like:

[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 01:42 min
[INFO] Finished at: 2016-04-25T14:34:19-04:00
[INFO] Final Memory: 16M/463M
[INFO] ------------------------------------------------------------------------

6. Change the working directory to htlTags and then enter the following 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 TagSightly10 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.

ProjectNew
Eclipse Import Project Dialog

The Eclipse project that you work in to build the OSGi bundle that uses HTL API is htlTags core. You do not have to work in the other projects under htlTags. 

Note:

Do not worry about the errors reported in Eclipse. It does not read the POM file where the APIs are resolved. You build the bundle with Maven. Eclipse is used to edit the Java files and the POM file. Also, delete all files in the project except for the  com.adobe.service.core package. Place the two Java files discussed in this article into this package and delete any default files, as shown in this illustration. 

Eclipse
Project files

GetTaggingTestTag class

The GetTaggingTestTag class is the main entry point for the HTL component and extends WCMUsePojo class.

This class implements the activate method that is invoked when the HTL component is used within an AEM webpage (this is built later in this development article).

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

ValueMap vm = getResource().getValueMap();

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

if (vm.containsKey("cq:tags"))

In this example, tags are passed to the Java code by using a Touch UI dialog and the cq/gui/components/common/tagspicker granite data type named cq:tags (this is created later in this development article). 

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 = (String[])vm.get("cq:tags", java.lang.String[].class);

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

 

 

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 these 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.

public static Integer getTrueTagCount(Tag tag, ResourceResolver resolver)
{
  int trueTagCount = 0;
  
  LinkedHashMap<String, String> map = new LinkedHashMap();
  

  map.put("tagid", tag.getTagID());
  map.put("tagid.property", "cq:tags");
  

  PredicateGroup predicates = PredicateGroup.create(map);
  QueryBuilder builder = (QueryBuilder)resolver.adaptTo(QueryBuilder.class);
  Query query = builder.createQuery(predicates, (Session)resolver.adaptTo(Session.class));
  query.setHitsPerPage(9223372036854775807L);
  SearchResult result = query.getResult();
  if (!result.getHits().isEmpty()) {
    trueTagCount = result.getHits().size();
  }
  return Integer.valueOf(trueTagCount);
}

The following Java code represents this class.

package com.adobe.service.core;

import com.adobe.cq.sightly.WCMUsePojo;
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.TagManager;

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

import javax.jcr.Session;

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

public class GetTaggingTestTag
extends WCMUsePojo
{
protected static Logger log = LoggerFactory.getLogger(GetTaggingTestTag.class);
List<TagCountBean> tagList = null;

public void activate()
{
  ValueMap vm = getResource().getValueMap();
  if (vm.containsKey("cq:tags"))
  {
    TagManager tagManager = (TagManager)getResourceResolver().adaptTo(TagManager.class);
    String[] tagIDs = (String[])vm.get("cq:tags", java.lang.String[].class);
    
  
    if (tagIDs.length > 0)
    {
      log.info("Total tags-" + tagIDs.length);
      this.tagList = new ArrayList();
      for (String tagID : tagIDs)
      {
        Tag resolvedTag = tagManager.resolve(tagID);
        if (resolvedTag != null)
        {
          TagCountBean tagCountBean = new TagCountBean(resolvedTag, getTrueTagCount(resolvedTag, getResourceResolver()).intValue());
          this.tagList.add(tagCountBean);
        }
      }
    }
  }
}

public static Integer getTrueTagCount(Tag tag, ResourceResolver resolver)
{
  int trueTagCount = 0;
  
  LinkedHashMap<String, String> map = new LinkedHashMap();
  

  map.put("tagid", tag.getTagID());
  map.put("tagid.property", "cq:tags");
  

  PredicateGroup predicates = PredicateGroup.create(map);
  QueryBuilder builder = (QueryBuilder)resolver.adaptTo(QueryBuilder.class);
  Query query = builder.createQuery(predicates, (Session)resolver.adaptTo(Session.class));
  query.setHitsPerPage(9223372036854775807L);
  SearchResult result = query.getResult();
  if (!result.getHits().isEmpty()) {
    trueTagCount = result.getHits().size();
  }
  return Integer.valueOf(trueTagCount);
}


//This is the methood that data-sly-list="${hello.tagCountBean}" hooks into 
public List<TagCountBean> getTagCountBean()
{
  return this.tagList;
}
}

Note:

The getTagCountBean method returns data to the HTL method. Notice it returns a List instance where each element is a TagCountBean instance. 

TagCountBean class

The following code represents the TagCountBean class that keeps track of tags. 

package com.adobe.service.core;

import com.day.cq.tagging.Tag;

public class TagCountBean
{
  private Tag tag;
  private int usageCount;
  
  public TagCountBean(Tag tag, int usageCount)
  {
    setTag(tag);
    setUsageCount(usageCount);
  }
  
  public Tag getTag()
  {
    return this.tag;
  }
  
  public void setTag(Tag tag)
  {
    this.tag = tag;
  }
  
  public int getUsageCount()
  {
    return this.usageCount;
  }
  
  public void setUsageCount(int usageCount)
  {
    this.usageCount = usageCount;
  }
}

Modify the Maven POM file

Modify the POM file based on your AEM version. 

AEM 6.2

Add the following POM dependency to the POM file located at C:\AdobeCQ\htlTags.

<dependency>
               <groupId>com.adobe.aem</groupId>
               <artifactId>uber-jar</artifactId>
               <version>6.2.0</version>
               <!-- for AEM6.1 use this version     : <version>6.1.0</version> -->
               <!-- for AEM6.1 SP1 use this version : <version>6.1.0-SP1-B0001</version> -->
               <!-- for AEM6.1 SP2 use this version : <version>6.1.0-SP2</version> -->
               <!-- for AEM6.2 use this version     : <version>6.2.0</version> -->
               <classifier>obfuscated-apis</classifier>
               <scope>provided</scope>
           </dependency>
            
           <dependency>
               <groupId>org.apache.geronimo.specs</groupId>
               <artifactId>geronimo-atinject_1.0_spec</artifactId>
               <version>1.0</version>
               <scope>provided</scope>
           </dependency>

AEM 6.1

Add the following POM dependency to the POM file located at C:\AdobeCQ\htlTags.

<dependency>
<groupId>com.adobe.aem</groupId>
<artifactId>uber-jar</artifactId>
<version>6.1.0</version>
<scope>provided</scope>
<classifier>obfuscated-apis</classifier>
</dependency>

You need to modify two POM files. The first one is the parent POM file shown in this illustration.

ParentPOM
Parent POM

AEM 6.1 POM

Add the dependency shown above to the Parent POM file. Next, modify the POM file located at C:\AdobeCQ\htlTags\core. The following code represents this POM file. 

<?xml version="1.0" encoding="UTF-8"?>
<!--
 |  Copyright 2015 Adobe Systems Incorporated
 |
 |  Licensed 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.
-->
<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/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>AEMTagSightly</groupId>
        <artifactId>TagSightly10</artifactId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <artifactId>TagSightly10.core</artifactId>
    <packaging>bundle</packaging>
    <name>AEMTagSightly - Core</name>
    <description>Core bundle for AEMTagSightly</description>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-scr-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-bundle-plugin</artifactId>
                <extensions>true</extensions>
                <configuration>
                    <instructions>
                        <!--
                        <Embed-Dependency>
                            artifactId1,
                            artifactId2;inline=true
                        </Embed-Dependency>
                        -->
                        <Sling-Model-Packages>
                            com.adobe.community.core
                        </Sling-Model-Packages>
                    </instructions>
                </configuration>
            </plugin>
        </plugins>
    </build>
    <profiles>
        <!-- Development profile: install only the bundle -->
        <profile>
            <id>autoInstallBundle</id>
            <activation>
                <activeByDefault>false</activeByDefault>
            </activation>
            <build>
                <plugins>
                    <plugin>
                        <groupId>org.apache.sling</groupId>
                        <artifactId>maven-sling-plugin</artifactId>
                        <configuration>
                            <!-- Note that this requires /apps/AEMTagSightly/install to exist!!          -->
                            <!--    This is typically the case when ui.apps is deployed first                -->
                            <!--    Otherwise, create /apps/AEMTagSightly/install manually (CRXDE|Lite)  -->
                            <slingUrlSuffix>/apps/AEMTagSightly/install/</slingUrlSuffix>
                            <failOnError>true</failOnError>
                        </configuration>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>
    <dependencies>
        <!-- OSGi Dependencies -->
        
         <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>uber-jar</artifactId>
            <classifier>obfuscated-apis</classifier>
        </dependency>
        <dependency>
            <groupId>org.apache.felix</groupId>
            <artifactId>org.apache.felix.scr</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.felix</groupId>
            <artifactId>org.apache.felix.scr.annotations</artifactId>
        </dependency>
        <dependency>
            <groupId>biz.aQute</groupId>
            <artifactId>bndlib</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>org.osgi.core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>org.osgi.compendium</artifactId>
        </dependency>
        <!-- Other Dependencies -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.jcr</groupId>
            <artifactId>jcr</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
        </dependency>
        <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>aem-api</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.sling</groupId>
            <artifactId>org.apache.sling.models.api</artifactId>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mockito</groupId>
            <artifactId>mockito-all</artifactId>
        </dependency>
        <dependency>
            <groupId>junit-addons</groupId>
            <artifactId>junit-addons</artifactId>
        </dependency>
    </dependencies>
</project>

AEM 6.2 POM

AEM 6.2 requires some different dependencies. Use this POM if you are using AEM 6.2. 

<?xml version="1.0" encoding="UTF-8"?>
<!--
 |  Copyright 2015 Adobe Systems Incorporated
 |
 |  Licensed 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.
-->
<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/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>htlTags62</groupId>
        <artifactId>htlTags62</artifactId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <artifactId>htlTags62.core</artifactId>
    <packaging>bundle</packaging>
    <name>htlTags62 - Core</name>
    <description>Core bundle for htlTags62</description>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-scr-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-bundle-plugin</artifactId>
                <extensions>true</extensions>
                <configuration>
                    <instructions>
                        <!--
                        <Embed-Dependency>
                            artifactId1,
                            artifactId2;inline=true
                        </Embed-Dependency>
                        -->
                        <Sling-Model-Packages>
                            com.adobe.service.core
                        </Sling-Model-Packages>
                    </instructions>
                </configuration>
            </plugin>
        </plugins>
    </build>
    <profiles>
        <!-- Development profile: install only the bundle -->
        <profile>
            <id>autoInstallBundle</id>
            <activation>
                <activeByDefault>false</activeByDefault>
            </activation>
            <build>
                <plugins>
                    <plugin>
                        <groupId>org.apache.sling</groupId>
                        <artifactId>maven-sling-plugin</artifactId>
                        <configuration>
                            <!-- Note that this requires /apps/htlTags62/install to exist!!          -->
                            <!--    This is typically the case when ui.apps is deployed first                -->
                            <!--    Otherwise, create /apps/htlTags62/install manually (CRXDE|Lite)  -->
                            <slingUrlSuffix>/apps/htlTags62/install/</slingUrlSuffix>
                            <failOnError>true</failOnError>
                        </configuration>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>
    <dependencies>
        <!-- OSGi Dependencies -->
            
        <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>uber-jar</artifactId>
            <classifier>obfuscated-apis</classifier>
        </dependency>
 
        <dependency>
            <groupId>org.apache.geronimo.specs</groupId>
            <artifactId>geronimo-atinject_1.0_spec</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.felix</groupId>
            <artifactId>org.apache.felix.scr</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.felix</groupId>
            <artifactId>org.apache.felix.scr.annotations</artifactId>
        </dependency>
        <dependency>
            <groupId>biz.aQute</groupId>
            <artifactId>bndlib</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>org.osgi.core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>org.osgi.compendium</artifactId>
        </dependency>
        <!-- Other Dependencies -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.jcr</groupId>
            <artifactId>jcr</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
        </dependency>
        <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>aem-api</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.sling</groupId>
            <artifactId>org.apache.sling.models.api</artifactId>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mockito</groupId>
            <artifactId>mockito-all</artifactId>
        </dependency>
        <dependency>
            <groupId>junit-addons</groupId>
            <artifactId>junit-addons</artifactId>
        </dependency>
    </dependencies>
</project>

Build the OSGi bundle using Maven

To build the OSGi bundle by using Maven, perform these steps:

  1. Open the command prompt and go to the C:\AdobeCQ\htlTags.
  2. Run the following maven command: mvn -PautoInstallPackage install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\htlTags\core\target. The file name of the OSGi component is htlTags.core-1.0-SNAPSHOT.jar.

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

Create the HTL Front End Component

The next step is to build the front-end component that gets data from the GetTaggingTestTag class by using HTL syntax. When you created the Maven Archetype 10 project, a default front end project was created, as shown in the following illustration.

Overview2
Default files created by Adobe Maven 10 Archetype project

Note:

For information about the default files created by the Maven 10 Archetype project, see this community article: Creating your first AEM 6.2 Project using Adobe Maven Archetype 10.

For the purpose of this article, the HTL code is written within a Maven Archetype 10 default component located here:

/apps/htlTags/components/content/helloworld

As a first step, modify the title property of this component to HTLTag, as shown in this illustration.

prop
Component's Title property

Add HTLcode

Replace the code in the /apps/htlTags/components/content/helloworld file with the following HTL code.

<p data-sly-test="${properties.text}">Text property: ${properties.text}</p>
Tags
<pre data-sly-use.hello="com.adobe.service.core.GetTaggingTestTag" data-sly-list="${hello.tagCountBean}">
Title: ${item.tag.title}
Count: ${item.usageCount}
Path: ${item.tag.path}
</pre>

In this code example, notice the line of code: 

data-sly-use.hello="com.adobe.community.core.GetTaggingTestTag"

This creates an instance of GetTaggingTestTag, the class that extends WCMUsePojo (created earlier in this article). This line of code:

data-sly-list="${hello.tagCountBean}"

invokes the method in the GetTaggingTestTag named getTagCountBean. This method returns a List collection where each element is a TagCountBean object. For each object in the collection, these lines of HTL code are executed which writes out AEM Tag information. 

 

Title: ${item.tag.title}
Count: ${item.usageCount}
Path: ${item.tag.path}

Modify the helloworld dialog

To add a dialog to the component that lets an author select existing AEM Tags, perform these tasks:

1. Click on the following node: /apps/htlTags/components/content/helloworld/cq:dialog. 

2. Delete all nodes under cq:dialog. 

3. Click on cq:dialog.  Then right click and select Create, Create Node. Enter the following values:

  • Name: content
  • Type: nt:unstructured

4. Add the following property to this node: 

  • sling:resourceType (String) - granite/ui/components/foundation/container

5. Click on the following node: /apps/htlTags/components/content/helloworld/cq:dialog/content.

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

  • Name: layout
  • Type: nt:unstructured

7. Add the following property to this node:

  •  sling:resourceType (String) - granite/ui/components/foundation/layouts/fixedcolumns

8. Click on the following node: /apps/htlTags/components/content/helloworld/cq:dialog/content.

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

  • Name: items
  • Type: nt:unstructured

10. Click on the following node: /apps/htlTags/components/content/helloworld/cq:dialog/content/items 

11. Right click and select Create, Create Node.

12. Enter the following values:

  • Name: column
  • Type: nt:unstructured

13.  Add the following property to this node: 

  • sling:resourceType (String) - granite/ui/components/foundation/container

14. Click on the following node: /apps/htlTags/components/content/helloworld/cq:dialog/content/items/column.

15. Right click and select Create, Create Node.

16. Enter the following values:

  • Name: items
  • Type: nt:unstructured

17. Click on the following node: /apps/htlTags/components/content/helloworld/cq:dialog/content/items/column/items.

18. Right click and select Create, Create Node.

19. Enter the following values:

  • Name: tags: 
  • Type: nt:unstructured

20. Add the following property to this node: 

  • sling:resourceType (String) - cq/gui/components/common/tagspicker
  • fieldLabel (String) -  Tags
  • cq:showOnCreate (Boolean) - true
  • cq-msm-lockable (String) - cq:tags
  • name (String) - ./cq:tags

 

Select Tags using the component dialog

To access the component, enter the following URL: 

http://localhost:4502/editor.html/content/htlTags/en.html

Edit the Touch UI component and then select the tag, as shown here:

 

TagsDialog
Selecting a tag using the cq/gui/components/common/tagspicker

After you select tags, click the check mark icon. Information about the selected tags is displayed in the AEM Web page. 

Overview
Tag information displayed by the HTL component

See also

Congratulations, you have just created an AEM sample application that uses a HTL component that uses the TagManager API. 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