Article summary

Summary
Discusses the following points:
  • how to develop an AEM 6 Touch UI component using the AEM HTML template language component (formerly known as Sightly).
  • how to develop the Java server-side part of the component. 
  • how to develop the HTML client-side part of the component.  
  • how to develop the AEM 6 component's dialog using sling:resourceType properties, which is required for use in the Touch UI view.
  • how to build a dialog for the same component for use in the AEM classic view. 
  • how to use the component in both theTouch UI and classic views. 
A very special thank you to Dinakar Gundluri, a member of the AEM community, for contributing ideas used in this AEM development article.
 
THIS ARTICLE IS AN AEM 6.0 ARTICLE AND USES WCMUSE API. IN NEWER VERSIONS OF AEM, YOU SHOULD USE WCMUSEPOJO OR SLING MODELS. SEE:
 
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.0

Note:

You can download an AEM package that contains code and the OSGi bundle that are used in this article. Download the package and deploy using package manager. The purpose of this code is to show the community these concepts in action. That is, it's to illustrate how to write an AEM HTL component that can be used within the AEM Touch UI. 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/HTLPage.html (assuming you deploy on author).

 

Download

Note:

This is a getting started with AEM HTL components for AEM 6.0. If you are working with other AEM versions, then see these AEM community articles: 

Ask the AEM Community Experts Sessions on HTL (used to be known as Sightly)

Introduction

You can create an Adobe Experience Manager (AEM) 6 Touch UI component that can be used within the AEM Touch UI view. Furthermore, you can use the AEM HTML Template Langauge (HTL - formally known as Sightly) to develop the AEM component. 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.

The HTL component developed in this development article is located on the AEM Touch UI side rail. You can drag the component from the side rail onto an AEM page, as shown in this illustration.

SightlyOverview2

Note:

In the Touch UI environment, components are located on the side rail. In the AEM classic view, components are located in the AEM side kick. 

Once you drag the component onto the AEM page, you can access its Touch UI dialog to enter component values. For example, you can enter text that is displayed by the component, as shown in the following illustration. 

dialoga


After you enter the component's values (for example, text values), you click the checkmark icon and the values are entered onto the AEM page. 

ClientView1

The following illustration shows the project files created in this development article.

SightlyProject
Section Description
A The HTL component created in this development article.
B JCR nodes that represent the component's dialog when used in the Touch UI view. 
C JCR nodes that represent the component's dialog when used in the Classic UI view.
D

An HTML file that contains HTL component script. You can use HTL logic to interact Java classes defined within an OSGi bundle.

AEM automatically creates a JSP for a component. When creating a HTL component, you can delete the JSP (for example, herohtl.jsp) and use HTML (herohtl.html) as discussed in this article. 

E The page component that lets an author drag the component from the Touch UI side rail onto an AEM web page during design time.

This development article steps you through how to build an AEM 6 Touch UI component using HTL. The component that lets an AEM author drag the component from the side rail onto an AEM page and set text values. 

Note:

The HTL component developed in this development article uses Java server-side classes. However, it is not necessary to use Java server-side classes when using HTL. You can develop a Sigthly component that comprises of just a client-side code. You use Java classes when you need to create more advanced AEM HTL components that make use of Java functionality. 

Create an AEM application folder structure  

Create an AEM application folder structure that contains templates, components, and pages by using CRXDE Lite.  

CQAppSetup

 

The following describes each application folder:

  • application name: contains all of the resources that an application uses. The resources can be templates, pages, components, and so on.
  • components: contains components that your application uses.
  • page: contains page components. A page component is a script such as a JSP file.
  • global: contains global components that your application uses.
  • template: contains templates on which you base page components.
  • src: contains source code that comprises an OSGi component (this development article does not create an OSGi bundle using this folder).
  • install: contains a compiled OSGi bundles container.

To create an application folder structure:

  1. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp.
  2. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  3. Enter the folder name into the Create Folder dialog box. Enter htl.
  4. Repeat steps 1-4 for each folder specified in the previous illustration.
  5. Click the Save All button.

Note:

You have to click the Save All button when working in CRXDE Lite for the changes to be made.  

Create a template 

You can create a template by using CRXDE Lite. A CQ template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp.

2. Right-click the template folder (within your application), select Create, Create Template.

3. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter templateHTL.
  • Title: The title that is assigned to the template.
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter htl/components/page/templateHTL.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

4. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.

5. Click Next for Allowed Parents.

6. Select OK on Allowed Children.

Create the page component based on the template  

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as a CQ developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp.

2. Right-click /apps/htl/components/page, then select Create, Create Component.

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

  • Label: The name of the component to create. Enter templateHTL.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Type:foundation/components/page (in AEM 6, you specify this value for page components. In previous versions of AEM, this was not required.)

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

5. Select OK on Allowed Children.

6. Open the templateHTL.jsp located at: /apps/htl/components/page/templateHTL/templateHTL.jsp.

7. Enter the following HTML code.

 

<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
<h1>Here is where your Touch UI component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Create an AEM 6 Touch UI component

After you setup the AEM folder structure, create the AEM Touch UI component. Perform these tasks using CRXDE Lite:

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

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

  • Label: The name of the component to create. Enter herohtl
  • Title: The title that is assigned to the component. Enter herohtl.
  • Description: The description that is assigned to the template. Enter herohtl.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side rail or side kick where the component appears. Enter General. (The herohtl component is located under the General heading in the Touch UI side rail. Also appears in General in the classic view sidekick.)
  • Allowed parents: Enter */parsys.

3. Click Ok.

Add a dialog to the AEM Touch UI component  

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. 

Note:

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. You set both properties in the following sections. 

The following illustration shows the JCR nodes of the component created in this development article. 

sightydialog


As you can see in the previous illustration, there are two JCR branches that are related to the component's dialog:

  • /apps/htl/components/herohtl/cq:dialog
  • /apps/htl/components/herohtl/dialog
Both of these dialogs are required when developing an AEM component. The first branch defines the component's dialog used in the Touch UI environment. The second branch defines the component's dialog used in the AEM classic view. Therefore to use the component in both AEM views, you need to create both JCR node branches.  
 

Build the dialog for the Touch UI view

Perform these tasks:

1. Select /apps/htl/components/herohtl.

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.

 

Name Type Value Description
helppath String en/cq/current/wcm/
default_components.html#Carousel
Specifies the location of the help content. (see the help button on the top of the Touch UI dialog shown at the start of this article)
jcr:title
String
Hero Text
Specifies the title displayed in the dialog. (see the illustration at the start of this article)
sling:resourceType
String
cq/gui/components/authoring/dialog
Specifies the type of node. In this example, the type is a dialog.

5. Click on the following node: /apps/htl/components/herohtl/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.

Name Type Value Description
sling:resourceType String granite/ui/components/foundation/container Defines the type

8. Click on the following node: /apps/htl/components/herohtl/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.

Name Type Value Description
sling:resourceType String granite/ui/components/foundation/
layouts/tabs
Defines the type
type String nav defines tab functionality

11. Click on the following node: /apps/htl/components/herohtl/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/htl/components/herohtl/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).
Name Type Value Description
jcr:title String Hero Text Properties The value displayed on the tab of the Touch UI dialog (see the illustration at the start of this article)
sling:resourceType String granite/ui/components/
foundation/section
Defines the tab functionality

16. Click on the following node: /apps/htl/components/herohtl/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.

Name Type Value Description
sling:resourceType String granite/ui/components/foundation/
layouts/fixedcolumns
defines the type of sling resource

19. Click on the following node: /apps/htl/components/herohtl/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/htl/components/herohtl/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/htl/components/herohtl/cq:dialog/content/items/herotext/items/column.

24. Add the following property to the columns node. 

Name Type Value Description
sling:resourceType String granite/ui/components/foundation/container defines the type of sling resource

25. Click on the following node: /apps/htl/components/herohtl/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/htl/components/herohtl/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/htl/components/herohtl/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.)

Name Type Value Description
fieldLabel Value Heading Text Defines the label associated with the input control
name String ./jcr:Heading Defines the name of the control. You reference this value in the component's code.
sling:resourceType String granite/ui/components/
foundation/form/textfield
Defines the control as a text field. 

31. Click on the following node: /apps/htl/components/herohtl/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/htl/components/herohtl/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.)

Name Type Value Description
fieldLabel Value Description
Defines the label associated with the input control
name String ./jcr:description
Defines the name of the control. You reference this value in the component's code.
sling:resourceType String granite/ui/components/foundation
/form/textarea
Defines the control as a text area. 

Build the dialog for the AEM classic view

Build a dialog for the classic view by performing these tasks:

  1. Select /apps/htl/components/herohtl, right click and select Create, Create Dialog.
  2. In the Title field, enter herohtl.
  3. Click Ok.
  4. Delete all nodes under /apps/htl/components/herohtl/dialog/.

Create the dialog tab

Create the first tab in the dialog titled for the herohtl component. This dialog contains a text field control and a text area control (same controls that are located in the Touch UI dialog).     

ClassicDialog

To create the component's tab, perform these tasks:

1. Click on the following node: /apps/htl/components/herohtl/dialog.

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

  • Name: items
  • Type: cq:WidgetCollection

3. Select the /apps/htl/components/herohtl/dialog/items node.

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

  • Name: tab3
  • Type: cq:Widget

5. Click on the following node: /apps/htl/components/herohtl/dialog/items/tab3.

6. Add the following properties to the tab3 node.

Name Type Value Description
title String Text Details
The text that is displayed.
xtype String panel
Specifies the data type for this control. A panel holds other controls.

7. Click on the following node: /apps/htl/components/herohtl/dialog/items/tab3.

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

  • Name: items
  • Type: cq:WidgetCollections.

9. Click on the following node: /apps/htl/components/herohtl/dialog/items/tab3/items.

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

  • Name: headingText
  • Type: cq:Widget

11. Add the following properties to the headingText node.

Name Type Value Description
fieldLabel String Heading Text
The field label.
hideLabel Boolean true Specifies whether the label is hidden.
name String ./jcr:Heading
The name of the control.
xtype String textfield
Specifies the data type. A textfield lets a user enter text.

12. Click on the following node: /apps/htl/components/herohtl/dialog/items/tab3/items.

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

  • Name: description
  • Type: cq:Widget

14. Add the following properties to the description node.

Name Type Value Description
fieldLabel
String Description The field label.
name
String ./jcr:description
The name of the control.
xtype String textarea Defines a text area control.

Setup Maven

You can use Maven to build an OSGi bundle that uses the QueryBuilder API and is deployed to Experiene Manager. 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:

OS name: "windows 7", version: "6.1", arch: "amd64", family: "windows"
 

Note:

For more information about setting up Maven and the Home variable, see: Maven in 5 Minutes.

Next, copy the Maven configuration file named settings.xml from [install location]\apache-maven-3.0.4\conf\ to your user profile. For example, C:\Users\scottm\.m2\.

You have to configure your settings.xml file to use Adobe’s public repository. For information, see Adobe Public Maven Repository at http://repo.adobe.com/.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<profile>

                <id>adobe-public</id>

                <activation>

                    <activeByDefault>true</activeByDefault>

                </activation>

                <repositories>

                  <repository>

                    <id>adobe</id>

                    <name>Nexus Proxy Repository</name>

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

                    <layout>default</layout>

                  </repository>

                </repositories>

                <pluginRepositories>

                  <pluginRepository>

                    <id>adobe</id>

                    <name>Nexus Proxy Repository</name>

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

                    <layout>default</layout>

                  </pluginRepository>

                </pluginRepositories>

            </profile>

</profiles>

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

Create an Experience Manage 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. 

Maven

 

To create an AEM bundle archetype project, perform these steps:

1. Open the command prompt and go to your working directory (for example, C:\AdobeCQ).

2. Run the following Maven command:

mvn archetype:generate -DarchetypeRepository=https://repo.adobe.com/nexus/content/groups/public/ -DarchetypeGroupId=com.day.jcr.vault -DarchetypeArtifactId=multimodule-content-package-archetype -DarchetypeVersion=1.0.2 -DgroupId=com.mycompany.myproject.htl -DartifactId=htl -Dversion=1.0-SNAPSHOT -Dpackage=com.mycompany.myproject.htl -DappsFolderName=myproject -DartifactName="My Project" -DcqVersion="5.6.1" -DpackageGroup="My Company"

3. When prompted for additional information, specify Y.

4. Once done, you will see a message like:
[INFO] Finished at: Wed Mar 27 13:38:58 EDT 2013
[INFO] Final Memory: 10M/184M

5. Change the command prompt to the generated project. For example: C:\AdobeCQ\htl. Run the following Maven command:
mvn eclipse:eclipse

After you run this command, you can import the project into Eclipse as discussed in the next section.
 

Add Java files to the Maven project using Eclipse 

To make it easier to work with the Maven generated project, import it into the Eclipse development environment, as shown in the following illustration. 

Project

 

Note:

Delete all default files and packages. Only keep the files specified in this section. 

The next step is to add Java files to the com.mycompany.myproject.htl package. The Java classes are named HeroTextComponent and HeroTextBean. The HeroTextBean is a Java bean that has class members to match the fields specified in the component's dialog. In this example, it has these string class members:

  • headingText
  • description

The headingText class member handles the value that is entered into the headingText field specified in the component's dialog. Likewise, the description class member handles the description field.

The HeroTextComponent class is the Java side of the HTL component and extends com.adobe.cq.htl.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 WCMUse.

HeroTextBean class

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

package com.mycompany.myproject.htl;

/**
 * The Class HeroTextBean.
 */
public class HeroTextBean {
    
    /** The heading text. */
    private String headingText;
    
    /** The description. */
    private String description;
    /**
     * @return the headingText
     */
    public String getHeadingText() {
        return headingText;
    }
    /**
     * @param headingText the headingText to set
     */
    public void setHeadingText(String headingText) {
        this.headingText = headingText;
    }
    /**
     * @return the description
     */
    public String getDescription() {
        return description;
    }
    /**
     * @param description the description to set
     */
    public void setDescription(String description) {
        this.description = description;
    }

}

HeroTextComponent class

The HeroTextComponent 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.  The following Java code represents the activate method.

public void activate() throws Exception {


Node currentNode = getResource().adaptTo(Node.class);

heroTextBean = new HeroTextBean();

if(currentNode.hasProperty("jcr:Heading")){
heroTextBean.setHeadingText(currentNode.getProperty("./jcr:Heading").getString());
}
if(currentNode.hasProperty("jcr:description")){
heroTextBean.setDescription(currentNode.getProperty("./jcr:description").getString());
}

}

A Node instance is created by calling the getReource().adaptTo() method. This returns the node that corresponds to component's dialog. Notice that the following methods:

currentNode.getProperty("./jcr:Heading") ; 

currentNode.getProperty("./jcr:description");

This code retrieves the values that the user enters into the component's dialog. The values ./jcr:Heading and ./jcr:description corresponds to the property values that you set when defining the component's dialog. (These values are defined in the classic and touch-ui dialogs.) 

The following Java code represents the HeroTextComponent Java class.

package com.mycompany.myproject.htl;


import com.adobe.cq.sightly.WCMUse;
import javax.jcr.Node;

/**
 * The Class HeroTextComponent.
 */
public class HeroTextComponent extends WCMUse {

    /** The hero text bean. */
    private HeroTextBean heroTextBean = null;
    
    @Override
    public void activate() throws Exception {
        
    	
    	Node currentNode = getResource().adaptTo(Node.class);
       
    	heroTextBean = new HeroTextBean();
        
    	if(currentNode.hasProperty("jcr:Heading")){
            heroTextBean.setHeadingText(currentNode.getProperty("./jcr:Heading").getString());
        }
        if(currentNode.hasProperty("jcr:description")){
            heroTextBean.setDescription(currentNode.getProperty("./jcr:description").getString());
        }
        
    }
    
    
    
    public HeroTextBean getHeroTextBean() {
        return this.heroTextBean;
    }
}

Modify the Maven POM file

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

  • com.adobe.aem
  • org.apache.sling
  • org.osgi

Because the Sighty API is used, a Maven dependency on the repository that contains this API exists. Add the following <repositories> element to your POM file.

<repositories>
    <repository>
        <id>adobe</id>
        <name>Adobe Public Repository</name>
        <url>http://repo.adobe.com/nexus/content/groups/public/</url>
        <layout>default</layout>
    </repository>
    </repositories>
        <pluginRepositories>
        <pluginRepository>
        <id>adobe</id>
        <name>Adobe Public Repository</name>
        <url>http://repo.adobe.com/nexus/content/groups/public/</url>
        <layout>default</layout>
    </pluginRepository>
</pluginRepositories>
 

Once you add this repository element to your POM file, you can add the following dependency to your POM file. 

<groupId>com.adobe.aem</groupId>
<artifactId>aem-api</artifactId>
<version>6.0.0.1</version>
<scope>provided</scope>
</dependency>

This dependency lets you use the AEM HTL API in your Java code. 

The following XML represents the POM file to build the OSGi bundle that contains the server-side part of the HTL component.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd ">
    <modelVersion>4.0.0</modelVersion>
    <!-- ====================================================================== -->
    <!-- P A R E N T P R O J E C T D E S C R I P T I O N -->
    <!-- ====================================================================== -->
    <parent>
        <groupId>com.mycompany.myproject.htl</groupId>
        <artifactId>htl</artifactId>
        <version>1.0-SNAPSHOT</version>
    </parent>

    <!-- ====================================================================== -->
    <!-- P R O J E C T D E S C R I P T I O N -->
    <!-- ====================================================================== -->

    <artifactId>htl-bundle</artifactId>
    <packaging>bundle</packaging>
    <name>My Project Bundle</name>

   <dependencies>
                         
             <dependency>
                <groupId>com.adobe.aem</groupId>
                <artifactId>aem-api</artifactId>
                <version>6.0.0.1</version>
                <scope>provided</scope>
            </dependency>
             
             
            <dependency>
                <groupId>org.apache.sling</groupId>
                <artifactId>org.apache.sling.jcr.jcr-wrapper</artifactId>
                <version>2.0.0</version>
                <scope>provided</scope>
            </dependency>
             
            <dependency>
                <groupId>org.osgi</groupId>
                <artifactId>org.osgi.core</artifactId>
                <version>4.2.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>org.osgi</groupId>
                <artifactId>org.osgi.compendium</artifactId>
                <version>4.2.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>org.apache.felix</groupId>
                <artifactId>org.apache.felix.scr.annotations</artifactId>
                <version>1.6.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>biz.aQute</groupId>
                <artifactId>bndlib</artifactId>
                <version>1.43.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>org.slf4j</groupId>
                <artifactId>slf4j-api</artifactId>
                <version>1.5.10</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>javax.servlet</groupId>
                <artifactId>servlet-api</artifactId>
                <version>2.5</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>javax.jcr</groupId>
                <artifactId>jcr</artifactId>
                <version>2.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>org.apache.sling</groupId>
                <artifactId>org.apache.sling.api</artifactId>
                <version>2.2.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>org.apache.sling</groupId>
                <artifactId>org.apache.sling.jcr.api</artifactId>
                <version>2.1.0</version>
                <scope>provided</scope>
            </dependency>
            <dependency>
                <groupId>junit</groupId>
                <artifactId>junit</artifactId>
                <version>4.8.1</version>
                <scope>test</scope>
            </dependency>
        </dependencies>
    <!-- ====================================================================== -->
    <!-- B U I L D D E F I N I T I O N -->
    <!-- ====================================================================== -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-scr-plugin</artifactId>
                <executions>
                    <execution>
                        <id>generate-scr-descriptor</id>
                        <goals>
                            <goal>scr</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-bundle-plugin</artifactId>
                <extensions>true</extensions>
                <configuration>
                    <instructions>
                        <Bundle-SymbolicName>com.mycompany.myproject.sightly.sightly-bundle</Bundle-SymbolicName>
                    </instructions>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.sling</groupId>
                <artifactId>maven-sling-plugin</artifactId>
                <configuration>
                    <slingUrl>http://${crx.host}:${crx.port}/apps/myproject/install</slingUrl>
                    <usePut>true</usePut>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-javadoc-plugin</artifactId>
                 <configuration>
                    <excludePackageNames>
                        *.impl
                    </excludePackageNames>
                 </configuration>
            </plugin>
        </plugins>
    </build>
</project>

Build the OSGi bundle using Maven

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

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

 

Deploy the bundle to AEM

Once you deploy the OSGi bundle, you are able to interact with the server-side part of the Sightly component (this is shown later in this development article). After you deploy the OSGi bundle, you will be able to see it in the Apache Felix Web Conole.

OSGiConsole

Deploy the OSGi bundle to AEM by performing these steps:

  1. Login to Apache Felix Web Console at http://server:port/system/console/bundles (default admin user = admin with password= admin).
  2. Click the Bundles tab, sort the bundle list by Id, and note the Id of the last bundle.
  3. Click the Install/Update button.
  4. Browse to the bundle JAR file you just built using Maven. (C:\AdobeCQ\htl\bundle\target).
  5. Click Install.
  6. Click the Refresh Packages button.
  7. Check the bundle with the highest Id.
  8. Click Active. Your new bundle should now be listed with the status Active.
    If the status is not Active, check the CQ error.log for exceptions.

Add JavaScript code to the clientlib JS files

Add an HTML file, named herosightly.html, to the following JCR location:

/apps/sightly/components/herosightly

You enter the client portion of the Sightly component to this file. Add the following HTML to this file.

<p>This is your AEM HTML Template Language component:</p>
<div data-sly-use.heroTextObject="com.mycompany.myproject.htl.HeroTextComponent" data-sly-test="${heroTextObject}">
       <h1>${heroTextObject.heroTextBean.headingText}</h1>
       <p>${heroTextObject.heroTextBean.description}</p>    
</div>

In this example, notice data-sly-use.heroTextObject references the Java component: com.mycompany.myproject.sightly.HeroTextComponent.  

The code data-sly-test="${heroTextObject}"
checks whether the heroTextObject is null. Next notice these lines of code:

<h1>${heroTextObject.heroTextBean.headingText}</h1>
<p>${heroTextObject.heroTextBean.description}</p>
 

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 headingText class member in an HTML h1 tag. You defined the headingText data member when you created the Java code. This is the value that the user entered into the component's headingtext dialog field. 

Next the value of the heroTextBean object's description class member in an HTML p tag. This is the value that the user entered into the component's description field. 

 

Notice how the client part of the Sightly component is defined using HTML. This replaces the use of JSP. You can delete the JSP file so your project resembles the following illustration. 

sightlyproject2

Create the herosightly.html file:

  1. To view CRXDE lite, enter the URL: http://localhost:4502/crx/de/index.jsp#/apps/sightly.
  2. Add an HTML page named herosightly.html to the following JCR location: /apps/sightly/components/herosightly.
  3. Delete herosightly.jsp. 
  4. Add the HTML code shown in this section.
  5. Click Save All.
     

Create an AEM web page that uses the Touch UI component 

The final task is to create a site in the AEM Touch UI view that contains a page that is based on  templateSightly (the template created earlier in this development article). This AEM page lets you select the herosightly component that you just created from the AEM Touch UI side rail, as shown in the following illustration.

SightlyOverview2

Likewise, you can also use the herosighly component in the AEM classic view. In this situation, you drag the component from the CQ sidekick, as shown in the following illustration. 

 

classic

To create an AEM web page that uses the Touch UI component, perform these tasks:

  1. Go to the AEM welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select Sites.
  3. Select the + Icon in the web page. This create a new AEM page. 
  4. Select Create Page.
  5. Select templateSightly from the list of templates that appear. 
  6. Select Next.
  7. Specify the name of the page in the Title field.
  8. Select Create Page and open the new page. 
  9. Drag the herosightly compnent from the AEM side rail into the page. Double click on the component. Enter values into the dialog. Once done, the values are displayed in the AEM web page.

Note:

If the AEM side panel is empty, populate the AEM side kick as described later in this section, when the AEM side kick is populated, the side rail is also populated with components. 

View the AEM page in Classic UI view and populate the AEM side kick

You can also view the page in AEM Classic UI view. To do so, select Classic View from the wheel icon in the AEM Page near the top, as shown in this illustration. 

ClassicView2

You will see the CQ sidekick and the herosightly component under the General category. You can drag and drop the herosightly component onto the CQ page.

If the CQ sidekick is empty, you can populate it by clicking the Design button located at the bottom of the sidekick. Next click the Edit button that appears and select General from the list of categories that appear as shown here.

General

To view the sidekick with the General category, click the down arrow icon that appears on the sidekick. Drag the herosightly component on the AEM web page. Double click on the component and you see the dialog that you created in this development article. 

See also

Congratulations, you have just created an AEM 6 Touch UI component using the AEM HTML template language. 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