Article summary

Summary

Discusses how to develop an AEM HTML Template Language (HTL - formerly known as Sightly) component that persists data into a relational database by using a DataSourcePool. 

This Experience Manager 6.3 development article shows use of the following AEM technologies:

  • Building a HTL component that can submit data to a backend service.
  • Using Sling Models with an HTL component to inject component dialog values.
  • How to inject a DataSourcePool into an AEM 6.3 AEM Servlet.
  • How to use the org.osgi.service.component.annotations.Component package to write an AEM Servlet.

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.

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

Digital Marketing Solution(s) Adobe Experience Manager 6.3
Audience Developer
Required Skills Java, HTML, JavaScript
Version 6.3

Prerequisites

To follow along with this Experience Manager development article, you need to build the Experience Manager Toy Site located here: Creating your First Adobe Experience Manager 6.3 website.

As an alternative, you can install the following package.

Download

Finished Solution

The following package contains the complete solution that is created as a result of following this article.

Download

Note:

If you install the finished solution, you still have to configure the DataSourcePool as described in this article. Also, you have to setup a MySQL instance and setup a Customer table which is also dicussed in this article. 

Introduction

You can create an Adobe Experience Manager custom component that functions as Sign Up Mailing List  component. A Sign Up Mailing List component lets your web site visitors sign up to a mailing list that typically includes emailing out newsletters. In this article, the Sign Up Mailing List component is added to the Experience Manager Toy Store site, as shown in this illustration.

client2
A Sign up Mail component

When the user fills in the fields located in the web page and clicks the Submit button, the data is persisted in a relational database.

client
The Mail Sign Up component persisting data into a relational database

The following represents the Customer table that belongs to a MySQL database named CQ.

  • idcustomer - An integer that specifies the customer identifier value (the PK).
  • name A string value that specifies the customer’s first name. 
  • email - A string value that specifies the customer’s last name. 

The following illustration shows this table. For information about setting up a MySQL database, see www.mysql.com.

mysql
A MySQL database that a HTL component persists data to

This development article discusses how to inject a DataSourcePool service into an AEM servlet to which an HTL component submits data. By injecting a DataSourcePool, your service/servlet can connect to a relational database such as MySQL.

This development article steps you through how to build an AEM 6.3 HTL component by using an AEM Maven Archetype 11 project. 

Note:

This article assumes that you have installed the Toy Store package shown at the start of this article. To learn how to build the AEM Toy Store site, see Creating your First Adobe Experience Manager 6.3 website.

Configure the DataSourcePool connection properties

Add a configuration for the JDBC Connections Pool service that uses the JDBC driver to create data source objects. The AEM Servlet created in this development article uses this service to connect to the MySQL database. 

datasourceconfig
DataSourcePool Configuration values

To configure a DataSourcePool, peform these tasks:

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

2. Click the Configuration tab..

3. Click the + icon that appearts in the  Day Commons JDBC Configuration Pool row.

4. Enter the following values:

  • JBDC Driver class - the driver class to use to connect to the database. To connect to MySQL, enter com.mysql.jdbc.Driver.
  • JDBC connection URI - the URI to the database. In this example, enter jdbc:mysql://localhost:3306/cq. (assuming the database scheme name is cq)
  • Username - the user name to use to connect to MySQL. 
  • Password - the corresponding password.
  • Datasource name - the datasource name. This is the value that you reference in the Java logic located in the OSGi bundle. In this example, enter Customer

5. Click Save.

Note:

Make sure that you specify these values exactly as is. If you make a mistake, an error occurs. 

Setup Maven in your development environment

You can use Maven to build an OSGi bundle. 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 11 archetype project

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

M10
Maven Archetype 11 generated files

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 org.apache.maven.plugins:maven-archetype-plugin:2.4:generate -DarchetypeGroupId=com.adobe.granite.archetypes -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=11 -DarchetypeCatalog=https://repo.adobe.com/nexus/content/groups/public/

3. When prompted, specify the following information:

  • groupId - mailList63
  • artifactId - mailList63
  • version - 1.0-SNAPSHOT
  • package - com.community.htl.maillist
  • appsFolderName - mailList63
  • artifactName - mailList63
  • componentGroupName - mailList63
  • contentFolderName - mailList63
  • cssId - mailList63
  • packageGroup -mailList63
  • siteName - mailList63

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

projectm
Eclipse Import Project Dialog

The packages under mailList63.core in which you work to build this component are as follows:

  • com.community.htl.maillist.core.models - where you define the Sling Model class 
  • com.community.htl.maillist.core.servlets - where you define the AEM Servlet that uses a DataSourcePool

 

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.

Create the following two Java files: 

  • MailList - a Sling Model class where the dialog values are injected. These values are used in the HTL component as the heading and text values visible to users. 
  • SimpleServlet - an AEM Servlet where the HTL component posts data to. In this article, the name and the email address are posted. These two values are persisted into a MySQL database by using a DataSourcePool instance.

MailList class

The MailList class uses Sling Models annotation. Notice that the class uses this annotation:

@Model(adaptables = Resource.class)

The next thing to notice is the data members named text and heading. These data members both use the @Inject annotation. What is happening here is the values, that the AEM author enters into the AEM component dialog field named ./text and ./heading, are injected into the corresponding data member.

@Inject @Optional
public String text; 


@Inject @Optional
public String heading;

Notice that this class has a method named init that uses this annotation.

@PostConstruct

This is the method that is invoked when an author clicks the checkmark in the component dialog. All that is happening in this method is non-annotated data members are set. Then these data members are returned by the getter methods. For example, the text data member is returned by the getText method. 

The following Java code represents the MailList class.

package com.community.htl.maillist.core.models;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import javax.annotation.PostConstruct;
import javax.inject.Inject;
 
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.Optional;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
 
 
@Model(adaptables = Resource.class)
public class MailList {
 
    private final Logger LOG = LoggerFactory.getLogger(getClass());
 
    @Inject @Optional
    public String text; // corresponds to the node in the dialog named text
    
    
    @Inject @Optional
    public String heading; // corresponds to the node in the dialog named heading
    
    private String myText ; 
    
    private String myHeading ; 
 
      
    @PostConstruct
    protected void init() {
        LOG.info("Dialog Text is  **** "+ text);
        myText = text; 
        myHeading = heading ; 
    }
 
    public String getText() {
        return myText;
    }
    
    
    public String getHeading() {
        return myHeading;
    }
   
   
}

SimpleServlet class

The SimpleServlet class uses the following annotation (located in the org.osgi.service.component.annotations package) to create the OSGi component:

  • @Component - used to create an AEM Servlet
  • @Reference - injects a DataSource service into the component


For information about these annotations, see Using OSGi annotations.

 

Note:

The @SlingServlet annotation is not used in this article. This annotation is defined in the org.apache.felix.scr.annotations package.

In this development article, a DataSourcePool instance is injected into the getConnection method. This method uses a DataSourcePool to return a Connection instance to the database. To inject a DataSourcePool instance, you use the @Reference annotation to define a class member, as shown in the following example.

@Reference
   private DataSourcePool source;
 
 
 //Returns a connection using the configured DataSourcePool 
 private Connection getConnection()
 {
 DataSource dataSource = null;
Connection con = null;
try
{
    //Inject the DataSourcePool right here! 
   dataSource = (DataSource) source.getDataSource("Customer");
   con = dataSource.getConnection();
    return con;
                
      }
catch (Exception e)
{
    e.printStackTrace(); 
    }
return null; 
  }

The SimpleServlet class contains a method named injestCustData that uses SQL to persist the data inot a MySQL table named customer. The following code represents this method. 

public int injestCustData(String name, String email) {
      Connection c = null;
       
      int rowCount= 0; 
      try {
                      
            // Create a Connection object
            c =  getConnection();
         
             ResultSet rs = null;
             Statement s = c.createStatement();
             Statement scount = c.createStatement();
               
             //Use prepared statements to protected against SQL injection attacks
             PreparedStatement pstmt = null;
             PreparedStatement ps = null; 
                         
             int pk =  getPK();      
             
             logger.info("****** THe PK IS is "+pk); 
             
             String insert = "INSERT INTO customer(idcustomer, name,email) VALUES(?, ?, ?);";
             ps = c.prepareStatement(insert);
             
             ps.setInt(1,pk); 
             ps.setString(2, name);
             ps.setString(3, email);
             ps.execute();
             return 0;
      }
      catch (Exception e) {
        e.printStackTrace();
       }
      finally {
        try
        {
          c.close();
        }
        
          catch (SQLException e) {
            e.printStackTrace();
          }
  }
      return -1; 
}

The following Java code represents the SimpleServlet class.

package com.community.htl.maillist.core.servlets;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.servlets.HttpConstants;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.apache.sling.api.servlets.SlingSafeMethodsServlet;
import org.apache.sling.api.resource.ValueMap;
import org.osgi.framework.Constants;
import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.annotations.Reference;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import javax.servlet.Servlet;
import javax.servlet.ServletException;
import java.io.IOException;

//Add the DataSourcePool package
import com.day.commons.datasource.poolservice.DataSourcePool; 

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;


import java.sql.SQLException;
import javax.sql.DataSource;

/**
 * Servlet that writes some sample content into the response. It is mounted for
 * all resources of a specific Sling resource type. The
 * {@link SlingSafeMethodsServlet} shall be used for HTTP methods that are
 * idempotent. For write operations use the {@link SlingAllMethodsServlet}.
 */
@Component(service=Servlet.class,
        property={
                Constants.SERVICE_DESCRIPTION + "=Simple Demo Servlet",
                "sling.servlet.methods=" + HttpConstants.METHOD_POST,
                "sling.servlet.paths="+ "/bin/myDataSourcePoolServlet"
           })
public class SimpleServlet extends SlingAllMethodsServlet {

    private static final long serialVersionUid = 1L;
    
    private final Logger logger = LoggerFactory.getLogger(getClass());
    
    @Reference
    private DataSourcePool source;

    @Override
    protected void doPost(final SlingHttpServletRequest req,
            final SlingHttpServletResponse resp) throws ServletException, IOException {
       
        try
        {
           //Get the submitted data from the Email Signup component  
            String firstName = req.getParameter("firstName");
            String email = req.getParameter("email");
        
        //Persist the Data into MySQL
         int yy =    injestCustData(firstName, email) ; 
        
         
         logger.info("****** THe YY value is "+yy); 
         
            
        resp.setContentType("text/plain");
        resp.getWriter().write(email);
    
        }
        catch (Exception e)
        {
        	e.printStackTrace(); 
        }
                
        }
 
         
  
//Returns a connection using the configured DataSourcePool 
  private Connection getConnection()
  {
           DataSource dataSource = null;
           Connection con = null;
           try
           {
               //Inject the DataSourcePool right here! 
               dataSource = (DataSource) source.getDataSource("Customer");
               con = dataSource.getConnection();
               return con;
               
             }
           catch (Exception e)
           {
               e.printStackTrace(); 
           }
               return null; 
  }
   
  public int injestCustData(String name, String email) {
      Connection c = null;
       
      int rowCount= 0; 
      try {
                      
            // Create a Connection object
            c =  getConnection();
         
             ResultSet rs = null;
             Statement s = c.createStatement();
             Statement scount = c.createStatement();
               
             //Use prepared statements to protected against SQL injection attacks
             PreparedStatement pstmt = null;
             PreparedStatement ps = null; 
                         
             int pk =  getPK();      
             
             logger.info("****** THe PK IS is "+pk); 
             
             String insert = "INSERT INTO customer(idcustomer, name,email) VALUES(?, ?, ?);";
             ps = c.prepareStatement(insert);
             
             ps.setInt(1,pk); 
             ps.setString(2, name);
             ps.setString(3, email);
             ps.execute();
             return 0;
      }
      catch (Exception e) {
        e.printStackTrace();
       }
      finally {
        try
        {
          c.close();
        }
        
          catch (SQLException e) {
            e.printStackTrace();
          }
  }
      return -1; 
}

    private int getPK()
    {
    	
    	//generate an example PK
    	java.util.Random r = new java.util.Random();
    	int Low = 10;
    	int High = 40000;
    	int Result = r.nextInt(High-Low) + Low;
    	
    	return Result; 
    }
  
}

An important aspect to notice is the change on how an AEM Servlet is created. There is no longer @Service or @SlingServlet annotations in the org.osgi.service.component.annotations package.

In Maven Archetype 10 project, you defined a servlet like this:

@SlingServlet(paths="/bin/mySearchServlet", methods = "POST", metatype=true)
public class HandleClaim extends org.apache.sling.api.servlets.SlingAllMethodsServlet {
private static final long serialVersionUID = 2598426539166789515L;

However, in a Maven Archetype 11 project., you define an AEM Servlet like this (there is no @SlingServlet annotation):


@Component(service=Servlet.class,
property={
Constants.SERVICE_DESCRIPTION + "=Simple Demo Servlet",
"sling.servlet.methods=" + HttpConstants.METHOD_POST,
"sling.servlet.paths="+ "/bin/myDataSourcePoolServlet"
})

 

 

Modify the Maven POM file

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

<dependency>
               <groupId>com.adobe.aem</groupId>
               <artifactId>uber-jar</artifactId>
               <version>6.3.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.

MPP
Parent POM

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

<?xml version="1.0" encoding="UTF-8"?>
<!--
 |  Copyright 2015 Adobe Systems Incorporated
 |
 |  Licensed under the Apache License, Version 2.0 (the "License");
 |  you may not use this file except in compliance with the License.
 |  You may obtain a copy of the License at
 |
 |      http://www.apache.org/licenses/LICENSE-2.0
 |
 |  Unless required by applicable law or agreed to in writing, software
 |  distributed under the License is distributed on an "AS IS" BASIS,
 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 |  See the License for the specific language governing permissions and
 |  limitations under the License.
-->
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>mailList63</groupId>
        <artifactId>mailList63</artifactId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <artifactId>mailList63.core</artifactId>
    <packaging>bundle</packaging>
    <name>mailList63 - Core</name>
    <description>Core bundle for mailList63</description>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.sling</groupId>
                <artifactId>maven-sling-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-bundle-plugin</artifactId>
                <extensions>true</extensions>
                <executions>
                    <execution>
                        <id>bundle-manifest</id>
                        <phase>process-classes</phase>
                        <goals>
                            <goal>manifest</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <instructions>
                        <!-- Import any version of javax.inject, to allow running on multiple versions of AEM -->
                        <Import-Package>javax.inject;version=0.0.0,*</Import-Package>
                        <Sling-Model-Packages>
                            com.community.htl.maillist.core
                        </Sling-Model-Packages>
                    </instructions>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <dependencies>
        <!-- OSGi Dependencies -->
        <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>uber-jar</artifactId>
            <classifier>obfuscated-apis</classifier>
        </dependency>
    
        <dependency>
            <groupId>org.apache.geronimo.specs</groupId>
            <artifactId>geronimo-atinject_1.0_spec</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>osgi.core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>osgi.cmpn</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>osgi.annotation</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>uber-jar</artifactId>
            <classifier>apis</classifier>
        </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-core</artifactId>
        </dependency>
        <dependency>
            <groupId>junit-addons</groupId>
            <artifactId>junit-addons</artifactId>
        </dependency>
        <dependency> 
        <groupId>com.day.commons</groupId> 
        <artifactId>day.commons.datasource.poolservice</artifactId> 
        <version>1.0.10</version>
         <scope>provided</scope> 
         </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\mailList63.
  2. Run the following maven command: mvn -PautoInstallPackage install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\mailList63\core\target. The file name of the OSGi component is mailList63.core-1.0-SNAPSHOT.jar.

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

Add the MySQL driver file to Experience Manager

You have to deploy an OSGi bundle to Experience Manager that contains the database driver file. In this development article, the name of the database driver file is mysql-connector-java-5.1.22-bin. To create an OSGi bundle that contains this database driver file, perform these tasks:

1. Start Eclipse (Indigo). 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 jdbcBundle.

4. In the JAR selection dialog, click the Add external button, and browse to the database driver file.

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

13. Also make sure that the Import-Package header in MANIFEST.MF is also 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 the 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.

Create the HTL Front End Component

Create a new component named mailList for the Toy Store project. The location of the component is:

/apps/summit_toys/components/content/mailList

 

component
The MailList component

Create the HTL component

Perform these tasks using CRXDE Lite:

1. Right click on /apps/summit_toys/components/content 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 mailList
  • Title: The title that is assigned to the component. Enter mailList.
  • Description: The description that is assigned to the template. Enter mailList.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side rail or side kick where the component appears. Enter Summit Toys

3. Click Ok.

 

Change the file extension from JSP to HTML and then add the following code to /apps/summit_toys/components/content/mailList/mailList.html.

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='htlajax'}" data-sly-unwrap/>

<div data-sly-use.mail="com.community.htl.maillist.core.models.MailList"></div>
<div>
    <h6 class="heading font-x3 btmspace-50">${mail.heading}</h6>
        <p>${mail.text}</p>

		<form>	
            <fieldset>
            <legend>Newsletter:</legend>
            <input class="btmspace-15" type="text" id="first" value="" placeholder="Name">
            <input class="btmspace-15" type="text" id="email" value="" placeholder="Email address">
            <input type="button" value="Submit"  name="submit" id="submit" value="Submit">
          </fieldset>
        </form>

    </div>

In this example, notice data-sly-use.mail references the Java component: com.community.htl.maillist.core.models.MailList.

The code:

<h6 class="heading font-x3 btmspace-50">${mail.heading}</h6>
<p>${mail.text}</p>

writes out the value of the data members named myText and myHeading in the MailList object. 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 MailList object's myHeading and myText in HTML h6 and p tags. 

In this example, notice:

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='htlajax'}" data-sly-unwrap/>

references a AEM ClientLibs folder named htlajax. This ClientLibs contains script that performs the AJAX operation and posts data that a user enters into the web page. THis is how you perform AJAX operations from an HTL component.

Create the ClientLibs folder

In order to perform an AJEX operation to work with a HTL component, you need to create a ClientLibs folder. Add a cq:ClientLibraryFolder node to the Helloworld component located at:

/apps/summit_toys/components

In this folder, add the following two files:

  • js.txt - references the script.js file
  • script.js - contains JavaScript logic that you want to use as part of your HTL component

The following code represents the script.js file

$(document).ready(function(){

     $('body').hide().fadeIn(1000);
    $('#submit').click(function() {



	  //read the values
        var myName = $('#first').val(); 
        var myemail = $('#email').val(); 



        //alert(myemail) ; 



	//Perform an AJAX operation
        $.ajax({
type: 'POST', 
url:'/bin/myDataSourcePoolServlet',
data:'firstName='+ myName+'&email='+ myemail,
success: function(msg){
    alert(msg); //display the data returned by the servlet
}
});




});
});

This code posts values a user enters into the first and email fields to the Servlet that uses a DataSourcePool to persist the values into MySQL.  

Assign the value htlajax to the categories property of the clientlibs node. In addition, assign the value cq.jquery to the dependencies property. This property is required to use AEM JQuery library that lets you use JQuery in the script.

crxde
Properties that belong to the ClientLibs folder

Create the component 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.

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

Create the Touch UI Dialog

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

1. Select summit_toys/components/content/mailList.

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: summit_toys/components/content/mailList/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/summit_toys/components/content/mailList/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/summit_toys/components/content/mailList/cq:dialog/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/summit_toys/components/content/mailList/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/summit_toys/components/content/mailList/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/summit_toys/components/content/mailList/cq:dialog/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/summit_toys/components/content/mailList/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/myHTL63components/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/summit_toys/components/content/mailList/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/summit_toys/components/content/mailList/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/summit_toys/components/content/mailList/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) - Heading Text
  • name (String) -./heading
  • sling:resourceType (String) - granite/ui/components/foundation/form/textfield

31. Click on the following node: /apps/summit_toys/components/content/mailList/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/summit_toys/components/content/mailList/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) - text
  • name (String) -./text
  • sling:resourceType (String) - granite/ui/components/foundation/form/textfield

Modify content.html

Modify the content.html file located here to include a parsys component: 

/apps/summit_toys/components/structure/homepage/content.html

By adding a parsys component, you can drop the MailList component onto the Toy Store site. Replace the code in that file with the following code. 

<div class="wrapper row6">
  <main class="hoc clear"> 
    <div data-sly-resource="${'hero' @ resourceType='summit_toys/components/content/hero'}"></div>
  </main>
</div>
<div class="wrapper row3">
  <div class="hoc container clear"> 
    <!-- ################################################################################################ -->
    <div class="group">
      <section class="one_half first">
        <h6 class="heading font-x3 btmspace-50">Upcoming Events</h6>
        <ul class="nospace">
          <li class="btmspace-30">
            <article>
              <h4 class="nospace"><a href="#">Tortor eleifend donec nibh odio fringilla non aliquet ut sollicitudin sit amet</a></h4>
              <time class="font-xs" datetime="2045-04-06">Friday, 6<sup>th</sup> April 2045</time>
            </article>
          </li>
          <li class="btmspace-30">
            <article>
              <h4 class="nospace"><a href="#">Nisi duis fermentum hendrerit purus in efficitur nulla justo erat eleifend</a></h4>
              <time class="font-xs" datetime="2045-04-05">Thursday, 5<sup>th</sup> April 2045</time>
            </article>
          </li>
          <li>
            <article>
              <h4 class="nospace"><a href="#">Vitae laoreet sodales lorem in sapien quam pulvinar a orci pharetra tempor</a></h4>
              <time class="font-xs" datetime="2045-04-04">Wednesday, 4<sup>th</sup> April 2045</time>
            </article>
          </li>
        </ul>
      </section>
       <section class="one_half">

		<sly data-sly-resource="${'content-par' @ resourceType='wcm/foundation/components/parsys'}"/>

      </section>
    </div>
    <!-- ################################################################################################ -->
    <div class="clear"></div>
  </div>
</div>

Add the MailList component to the ToyStore site

To access the component, enter the following URL:

http://localhost:4502/editor.html/content/summit-toys/en.html

The following illustration shows the HTL component.

dad
Drag the MailList component onto the ToyStore site

Click on the component and fill in the dialog with heading and text values.

dialog
The Mail List component dialog

Notice that the values you entered into the dialog appear in the component. Next, when you enter values into the fields on the rendered component and click the Submit button, these values are submitted to the Servlet and persisted into MySQL. 

Note:

Be sure to set the values in the component dialog. 

See also

Join the AEM community at: Adobe Experience Manager Community

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