Article summary

Summary

Discusses how to develop an AEM HTML Template Language (HTL - formerly known as Sightly) component that uses the WCMUsePojo class and invokes a third-party Restful web service. Also, discusses how to use the GSON Java library within AEM to parse the JSON reponse. 

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

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,JSON, Java, HTML
Version Adobe Experience Manager 6.1/ 6.2
Video https://youtu.be/R_Qc1Hx0NXo

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 invokes a third-party Restful web service. 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/restHTL/en.html (assuming you deploy on author).

Download

Note:

Ensure that you install the package that corresponds to your AEM version. 

Introduction

You can create an Adobe Experience Manager (AEM) HTML Template Language (HTL) component that displays data retrieved from a third-party Restful web service. For example, assume you want to display data based on the distance between two cities on your web site. In this situation, you can develop an AEM HTL component that displays data between two cities, as shown in this illustration.

Client
A HTL Component that updates its view based on Restful web service data

In this use case, the HTL component contains a class that extends WCMUsePojo. This HTL uses a Java class that extends com.adobe.cq.sightly.WCMUsePojo.

This class uses Java application logic to send a HTTP Request to a third-party Restful web service. The web service returns the following data in JSON format. The HTL component uses the Java library GSON to parse the JSON data and then displays the data in the client so it appears in the AEM web page.

{  
   "destination_addresses":[  
      "Dallas, TX, USA"
   ],
   "origin_addresses":[  
      "Ottawa, ON, Canada"
   ],
   "rows":[  
      {  
         "elements":[  
            {  
               "distance":{  
                  "text":"2,714 km",
                  "value":2713758
               },
               "duration":{  
                  "text":"1 day 1 hour",
                  "value":89044
               },
               "status":"OK"
            }
         ]
      }
   ],
   "status":"OK"
}

Note:

The Java class com.adobe.cq.sightly.WCMUse is deprecated.

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 Experience Manager 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 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 -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 - restHTL
  • artifactId - restHTL
  • version - 1.0-SNAPSHOT
  • package - com.community.rest
  • appsFolderName - restHTL
  • artifactName - restHTL
  • componentGroupName - restHTL
  • contentFolderName - restHTL
  • cssId - restHTL
  • packageGroup - restHTL
  • siteName - restHTL

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

project
Eclipse Project

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

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.community.rest.core package. Place the two Java files discussed in this article into this package. Delete all other Java files in the com.community.rest.core package. 

Add Java classes to the project

The next step is to add Java files to the com.community.rest.core package. The Java classes are named HeroRestComponent and HeroTextBean. The HeroTextBean is a Java bean that has class members to store data returned from the web service. In this article, it has these string class members:

  • private String fromcity ;
  • private String tocity ;
  • private String distance;
  • private String duration ;

For example, the distance data member stores the distance between the two cities that is returned by the Restful web service call. 

The HeroRestComponent class is the Java side of the HTL component and extends WCMUsePojo, which is an abstract class that implements the Use interface. A HTL component's Java class must implement this abstract class. For information, see WCMUsePojo.

HeroTextBean class

The HeroTextBean defines data members and contains getter and setter methods. The following Java code represents this class. 

package com.community.rest.core;


/* Stores data returned from the Restful web service */
public class HeroTextBean {
	
	
	private String fromcity ; 
	private String tocity ; 
	private String distance; 
	private String duration ; 
	
	
	
	public void setDuratione(String duration)
	{
		this.duration = duration ; 
	}
	
	public String getDuration()
	{
		return this.duration ; 
	}
	
	
	
	
	public void setDistance(String distance)
	{
		this.distance = distance ; 
	}
	
	public String getDistance()
	{
		return this.distance ; 
	}
	
	
	
	public void setToCity(String city)
	{
		this.tocity = city ; 
	}
	
	public String getToCity()
	{
		return this.tocity ; 
	}
	
	
	
	public void setFromCity(String city)
	{
		this.fromcity = city ; 
	}
	
	public String getFromCity()
	{
		return this.fromcity ; 
	}
	

}

HeroRestComponent class

The HeroRestComponent is the Java server-side part of the AEM HTL component. This class extends the WCMUsePojo class. You override the activate method in this class.

Notice the method named getJSON. This method uses the Java HTTP API to invoke a third party Restful web service.  This method accepts two String parameters:

  • to city 
  • from city

The Restful web service returns data that describes the distance between the two cities and the time it would take to drive between the two cities. As specified earily in this article, the data is returned within JSON.

To parse the JSON data, the Java library GSON is used to parse the data. For information about this Java library, see https://github.com/google/gson.  

 

Note:

The two and from cities are passed to the Java class by using a HTL component dialog. This is discussed later in this development article. 

Web service data values are stored by calling the heroTextBean setter method. For example:

heroTextBean.setDistacne(distance);

This is how a web service is invoked, JSON values are parsed (using GSON) and stored in the heroTextBean instance.

The following Java code represents the HeroWSComponent Java class.

 

package com.community.rest.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 com.community.rest.core.HeroTextBean;
   
  
import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.List;
    
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.io.InputStreamReader;
   
   
  
import javax.jcr.Node;
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;
  
  
import org.apache.http.client.methods.HttpGet;  
import com.google.gson.Gson;
import com.google.gson.JsonParser;
import com.google.gson.stream.JsonReader;
import org.apache.http.HttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
 
import java.io.StringReader ;
import java.io.StringWriter;
 
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
 
   
public class HeroRestComponent
extends WCMUsePojo
{
   
     /** The hero text bean that stores values returned by the RestFul Web Service. */
    private HeroTextBean heroTextBean = null;
        
    /** Default log. */
    protected final Logger log = LoggerFactory.getLogger(this.getClass());
                    
     
    @Override
    public void activate() throws Exception {
            
            
            
        Node currentNode = getResource().adaptTo(Node.class);
           
        heroTextBean = new HeroTextBean();
          
          
        //Set variables - we need two cities to pass to the Restful web service
        String toCity = "Ottawa" ;
        String fromCity =  "Dallas" ;
 
          
             
        //Make a Restful Web Service Call 
        if(currentNode.hasProperty("jcr:tocity")){
            toCity = currentNode.getProperty("./jcr:tocity").getString();
        }
        if(currentNode.hasProperty("jcr:fromcity")){
            fromCity = currentNode.getProperty("./jcr:fromcity").getString();
        }
         
         
        log.info("**** TO CITY IS "+ toCity );
            
        //Get Restful Web Service Data
        StringReader ss = new StringReader(getJSON(toCity,fromCity))   ;
 
 
         
         
        //Read the response using GSON
        JsonReader reader = new JsonReader(new BufferedReader(ss));
        reader.setLenient(true);
 
        Response r = (new Gson().fromJson(reader, Response.class));
        
                      
        Distance dd =  r.getRows()[0].getElements()[0].getDistance();
        Duration du =  r.getRows()[0].getElements()[0].getDuration();
         
        //Set Bean to store the values
        heroTextBean.setToCity(toCity);
        heroTextBean.setFromCity(fromCity);
        heroTextBean.setDistance(dd.getText());
        heroTextBean.setDuratione(du.getText());
              
    }
        
        
        
    public HeroTextBean getHeroTextBean() {
        return this.heroTextBean;
    }
      
         
   //Invokes a third party Restful Web Service and returns the results in a JSON String
    private static String getJSON(String toCity, String fromCity)
    {
 
        try
        {
  
 
            DefaultHttpClient httpClient = new DefaultHttpClient();
 
            HttpGet getRequest = new HttpGet("http://maps.googleapis.com/maps/api/distancematrix/json?origins=" + toCity +"&destinations="+fromCity+"&sensor=false");
            getRequest.addHeader("accept", "application/json");
 
            HttpResponse response = httpClient.execute(getRequest);
 
            if (response.getStatusLine().getStatusCode() != 200) {
                throw new RuntimeException("Failed : HTTP error code : "
                        + response.getStatusLine().getStatusCode());
            }
 
            BufferedReader br = new BufferedReader(new InputStreamReader((response.getEntity().getContent())));
 
            String output;
            String myJSON="" ;
            while ((output = br.readLine()) != null) {
                //System.out.println(output);
                myJSON = myJSON + output;
            }
 
 
            httpClient.getConnectionManager().shutdown();
            return myJSON ;
        }
 
        catch (Exception e)
        {
            e.printStackTrace() ;
        }
 
        return null;
    }
 
      
    class Element{
        Duration duration;
        Distance distance;
        String status;
 
 
        public void setDuration(Duration val)
        {
            duration = val ;
        }
 
 
        public Duration getDuration()
        {
            return duration ;
        }
 
        public void setDistance(Distance val)
        {
            distance = val ;
        }
 
 
        public Distance getDistance()
        {
            return distance ;
        }
 
        public void setStatus(String val)
        {
            status = val ;
        }
 
        public String  getStatus()
                    {
            return status ;
        }
 
    }
 
 
 
 
    class Item {
        private Element[] elements;
 
 
        public void setElements(Element[] elements1)
        {
            elements=elements1;
        }
 
        public Element[] getElements()
        {
           return elements;
        }
 
    }
 
 
    class Response {
    
        private String status;
        private String[] destination_addresses;
        private String[] origin_addresses;
        private Item[] rows;
 
        public String getStatus() {
            return status;
        }
 
        public void setStatus(String status) {
            this.status = status;
        }
 
        public String[] getDestination_addresses() {
            return destination_addresses;
        }
 
        public void setDestination_addresses(String[] destination_addresses) {
            this.destination_addresses = destination_addresses;
        }
 
        public String[] getOrigin_addresses() {
            return origin_addresses;
        }
 
        public void setOrigin_addresses(String[] origin_addresses) {
            this.origin_addresses = origin_addresses;
        }
 
        public Item[] getRows() {
            return rows;
        }
 
        public void setRows(Item[] rows) {
            this.rows = rows;
        }
    }
 
    class Distance {
        private String text;
        private String value;
 
        public String getText() {
            return text;
        }
 
        public void setText(String text) {
            this.text = text;
        }
 
        public String getValue() {
            return value;
        }
 
        public void setValue(String value) {
            this.value = value;
        }
    }
 
    class Duration {
        private String text;
        private String value;
 
        public String getText() {
            return text;
        }
 
        public void setText(String text) {
            this.text = text;
        }
 
        public String getValue() {
            return value;
        }
 
        public void setValue(String value) {
            this.value = value;
        }
    }
 
    class Elements {
        Duration duration[];
        Distance distance[];
        String status;
    }
      
     
}

Add the Dependency Libraries to AEM

To successfully invoke the third-party Restful web service, you have to include additional client HTTP packages to AEM so that the service that invokes the Restful web service can be placed into an active state. By default, there may be missing packages, such as org.apache.http.client methods, that will prevent you from placing the OSGi bundle into an active state.

NOTE: The GSON library is exposed by existing AEM OGSi bunbd

Download these JAR files: httpclient-4.0.jar (or an older version) and httpcore-4.3.2.jar. Next, place these files into a CQ bundle fragment. To create an OSGi bundle fragment that contains client HTTP packages, perform these tasks:

1. Start Eclipse (The Indigo version works best). The steps below have been tested on Eclipse Java EE IDE for Web Developers version Indigo Service Release 1.

2. Select File, New, Other.

3. Under the Plug-in Development folder, choose Plug-in from Existing JAR Archives. Name your project httpBundle.

4. In the JAR selection dialog, click the Add external button, and browse to the HTTP JAR files that you downloaded.

5. Click Next.

6. In the Plug-in Project properties dialog, ensure that you check the checkbox for Analyze library contents and add dependencies.

7. Make sure that the Target Platform is the standard OSGi framework.

8. Ensure the checkboxes for Unzip the JAR archives into the project and Update references to the JAR files are both checked.

9. Click Next, and then Finish.

10. Click the Runtime tab.

11. Make sure that the Exported Packages list is populated.

12. Make sure these packages have been added under the Export-Package header in MANIFEST.MF. Remove the version information in the MANIFEST.MF file. Version numbers can cause conflicts when you upload the OSGi bundle to Experience Manager.

13. Also make sure that the Import-Package header in MANIFEST.MF is populated.
14. Save the project.

15. Build the OSGi bundle by right-clicking the project in the left pane, choose Export, Plug-in Development, Deployable plug-ins and fragments, and click Next.

16. Select a location for the export (C:\TEMP) and click Finish. (Ignore any error messages).

17. In C:\TEMP\plugins, you should now find the OSGi bundle.

18. Login to Apache Felix Web Console at http://server:port/system/console/bundles (default admin user = admin with password= admin).

19. Sort the bundle list by Id and note the Id of the last bundle.

20. Click the Install/Update button.

21. Check the Start Bundle checkbox.

22. Browse to the bundle JAR file you just built. (C:\TEMP\plugins).

23. Click Install.

24. Click the Refresh Packages button.

25. Check the bundle with the highest Id.

26. Your new bundle should now be listed with the status Active.

27. If the status is not Active, check the error.log for exceptions. If you get “org.osgi.framework.BundleException: Unresolved constraint” errors, check the MANIFEST.MF for strict version requirements which might follow: javax.xml.namespace; version=”3.1.0”

28. If the version requirement causes problems, remove it so that the entry looks like this: javax.xml.namespace.

29. If the entry is not required, remove it entirely.

30. Rebuild the bundle.

31. Delete the previous bundle and deploy the new one.

Modify the Maven POM file

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

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>

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

ParentPOM
Parent POM

AEM 6.2 POM

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

Note:

If you are building this component for AEM 6.1 - then simply remove the following dependency (this is required for AEM 6.2). 

<groupId>org.apache.geronimo.specs</groupId>
<artifactId>geronimo-atinject_1.0_spec</artifactId>
<version>1.0</version>
<scope>provided</scope>
</dependency>

<?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>restHTL</groupId>
        <artifactId>restHTL</artifactId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <artifactId>restHTL.core</artifactId>
    <packaging>bundle</packaging>
    <name>restHTL - Core</name>
    <description>Core bundle for restHTL</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.community.rest.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/restHTL/install to exist!!          -->
                            <!--    This is typically the case when ui.apps is deployed first                -->
                            <!--    Otherwise, create /apps/restHTL/install manually (CRXDE|Lite)  -->
                            <slingUrlSuffix>/apps/restHTL/install/</slingUrlSuffix>
                            <failOnError>true</failOnError>
                        </configuration>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>
    <dependencies>
        <!-- OSGi 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>com.google.code.gson</groupId>
        <artifactId>gson</artifactId>
        <version>2.8.0</version>
    </dependency>


        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.1.1</version>
        </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\restHTL.
  2. Run the following maven command: mvn -PautoInstallPackage install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\restHTL\core\target. The file name of the OSGi component is restHTL.core-1.0-SNAPSHOT.jar.

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

Create the HTL Front End Component

When you use the Maven Archetype 10 archetype to create an AEM project, a default front end project is created, as shown in the following illustration.

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

Add HTL code

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

/apps/restHTL/components/content/helloworld

 

Add the following code. 

<p>This AEM HTML Template Language component measures the distance between two cities:</p>
<div data-sly-use.heroTextObject="com.community.rest.core.HeroRestComponent" data-sly-test="${heroTextObject}">

		<h1>AEM HTL Restul example</h1>

	   <h3>From City: ${heroTextObject.heroTextBean.fromCity}</h3>
       <h3>To City: ${heroTextObject.heroTextBean.toCity}</h3>

      <h3>Distance: ${heroTextObject.heroTextBean.distance}</h3>
       <h3>Duration: ${heroTextObject.heroTextBean.duration}</h3>

       <p></p>    
</div>

In this example, notice data-sly-use.heroTextObject references the Java component: com.community.rest.core.HeroTextComponent.

The code:

data-sly-test="${heroTextObject}"

checks whether the heroTextObject is null. Next notice these lines of code:

<div data-sly-use.heroTextObject="com.community.rest.core.HeroRestComponent" data-sly-test="${heroTextObject}">

<h1>AEM HTL Restul example</h1>

         <h3>From City: ${heroTextObject.heroTextBean.FromCity}</h3>

       <h3>To City: ${heroTextObject.heroTextBean.ToCity}</h3>

      <h3>Distance: ${heroTextObject.heroTextBean.distance}</h3>

       <h3>Duration: ${heroTextObject.heroTextBean.duration}</h3>

      <p></p>    

</div>

This is how you interact with the Java server-side part of the component. In this example, you are writing out the value of the heroTextBean object's data member that store weather information. Notice that the heroTextBean.distance specifies the distance value returned by the web service. This is how an AEM HTL component can dynamically display data returned by a Restul web service. 

The following illustrations shows the component's dialog that lets an AEM Author specify the two cities required by the web service.

Dialog
Components dialog

Create the helloworld dialog

A dialog lets an author click on the component in the Touch UI (or Classic UI) view during design time and enter values that are used by the component. The component created in this development article lets the AEM author enter text values, which are then displayed in the AEM web page. (See the illustration shown at the beginning of this development article.)

A dialog that is built for the Touch UI is defined by using nodes of type un:structured. You define the type of control on the Touch UI dialog by setting the node's sling:resourceType property. For example, to define a text field on a Touch UI dialog, set the sling:resourceType property to granite/ui/components/foundation/form/textfield.

The following table lists the sling:resourceType values that are used to create the component in this development article.

Sling:resourceType Description
granite/ui/components/foundation/container Defines a container for the dialog
granite/ui/components/foundation/layouts/tabs Defines a tab that is used in the dialog
granite/ui/components/foundation/section Defines a section within a tab
granite/ui/components/foundation/layouts/fixedcolumns Defines fixed columns. 
granite/ui/components/foundation/form/textfield Defines a text field that lets authors enter data.
granite/ui/components/foundation/form/textarea Defines a text area field that lets author more data than a text field. 

When building a dialog for the Touch UI view, you define the type of control (for example, a text field) by setting the sling:resourceType property. In contrast, when building a dialog for the classic view, you define the type of control by setting its xtype property. 

DialogBranches2
JCR Dialog Branches

Create the Touch UI Dialog

Perform these tasks to create the AEM Touch UI dialog for the helloworld component:

1. Select /apps/restHTL/components/content/helloworld.

2. Right click and select Create, Create Node.

3. Enter the following values:

  • Name: cq:dialog
  • Type: nt:unstructured

4. Add the following properties to the cq:dialog node.

  • helppath (String) - en/cq/current/wcm/default_components.html#Carousel
  • jcr:title (String) - Hero Text
  • sling:resourceType (Stgring) - cq/gui/components/authoring/dialog

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

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

  • Name: content
  • Type: nt:unstructured

7. Add the following property to the content node.

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

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

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

  • Name: layout
  • Type: nt:unstructured

10. Add the following properties to the layout node.

  • sling:resourceType (String) - granite/ui/components/foundation/layouts/tabs
  • type (String) -nav

11. Click on the following node: /apps/restHTL/components/content/helloworld/cq:dialog/content.

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

  • Name: items
  • Type: nt:unstructured

13. Click on the following node: /apps/restHTL/components/content/helloworld/cq:dialog/content/items.

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

  • Name: herotext
  • Type: nt:unstructured

15. Add the following properties to the herotext node (this node represents the tab).

  • jcr:title (String) - Hero Text Properties
  • sling:resourceType (String) - granite/ui/components/foundation/section

16. Click on the following node: /apps/restHTL/components/content/helloworld/cq:dialog/content/items/herotext.

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

  • Name: layout
  • Type: nt:unstructured

18. Add the following property to the layout node.

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

19. Click on the following node: /apps/restHTL/components/content/helloworld/cq:dialog/content/items/herotext.

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

  • Name: items
  • Type: nt:unstructured

21. Click on the following node: /apps/restHTL/components/content/helloworld/cq:dialog/content/items/herotext/items.

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

  • Name: columns
  • Type: nt:unstructured

23. Click on the following node: /apps/restHTL/components/content/helloworld/cq:dialog/content/items/herotext/items/column.

24. Add the following property to the columns node.

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

25. Click on the following node: /apps/restHTL/components/content/helloworld/cq:dialog/content/items/herotext/items/column.

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

  • Name: items
  • Type: nt:unstructured

27. Click on the following node: /apps/restHTL/components/content/helloworld/cq:dialog/content/items/herotext/items/column/items.

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

  • Name: headingText
  • Type: nt:unstructured

29. Click on the following node: /apps/restHTL/components/content/helloworld/cq:dialog/content/items/herotext/items/column/items/headingText.

30. Add the following properties to the headingText node (this node represents the Heading Text input control on the dialog. See the illustration at the start of this article.)

  • fieldLabel (String) - To City
  • name (String) - ./jcr:tocity
  • sling:resourceType (String) - granite/ui/components/foundation/form/textfield

31. Click on the following node: /apps/restHTL/components/content/helloworld/cq:dialog/content/items/herotext/items/column/items.

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

  • Name: description
  • Type: nt:unstructured

33. Click on the following node: /apps/restHTL/components/content/helloworld/cq:dialog/content/items/herotext/
items/column/items/description.

34. Add the following property to the description node (this node represents the Description input control on the dialog. See the illustration at the start of this article.)

  • fieldLabel (String) - From City
  • name (String) - ./jcr:fromcity
  • sling:resourceType (String) - granite/ui/components/foundation/form/textfield

 

Create the Classic Dialog

Perform these tasks to create the AEM Classic UI dialog for the helloworld component:

1. Select /apps/myHTL/components/content/helloworld, right click and select Create, Create Dialog.

2 . In the Title field, enter herohtl.

3. Click Ok.

4. Delete all nodes under /apps/restHTL/components/content/helloworld/dialog/.

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

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

  • Name: items
  • Type: cq:WidgetCollection

7. Select the /apps/restHTL/components/content/helloworld/dialog/items node.

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

  • Name: tab3
  • Type: cq:Widget

9. Click on the following node: apps/restHTL/components/content/helloworld/dialog/items/tab3.

10. Add the following properties to the tab3 node.

  • title (String) - Text Details
  • xtype (String) -  panel

11. Click on the following node: apps/restHTL/components/content/helloworld/dialog/items/tab3.

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

  • Name: items
  • Type: cq:WidgetCollections.

13. Click on the following node:  apps/restHTL/components/content/helloworld/dialog/items/tab3/items.

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

  • Name: headingText
  • Type: cq:Widget

15. Add the following properties to the headingText node.

  • fieldLabel (String) -  From City
  • hideLabel (Boolean) - true
  • name (String) - ./jcr:fromcity
  • xtype (String) - textfield

16. Click on the following node: apps/restHTL/components/content/helloworld/dialog/items/tab3/items.

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

  • Name: description
  • Type: cq:Widget

18. Add the following properties to the description node.

  • fieldLabel (String) - To City
  • name (String) - ./jcr:tocity
  • xtype (String) - textfield

View the output of the HTL component

To access the component, enter the following URL: 

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

The following illustration shows the HTL component.

 

Client2
The HTL component created in this article

See also

Congratulations, you have just created an AEM sample application that uses a HTL component that uses the WCMUsePojo API and invokes a third-party Restful web service. 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