Article summary

Summary

Discusses how to create a custom AEM component that uses JSON returned by a sling servlet to populate drop-down fields located in the component's dialog. 

A special thank you to Praveen Dubey a member of the AEM community for contributing AEM code that is used in this article. 

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

Note:

You can download an AEM package that contains code and the OSGi bundle that are used in this article. Download the package and deploy using package manager. The purpose of this code is to show the community these concepts in action. That is, it's to illustrate how to write an AEM component that uses JSON returned by a Sling Servlet to populate dialog fields. This community code is for teaching purposes only and not meant to go into production as is.

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

Download

Introduction

You can invoke an Adobe Experience Manager (AEM) Sling Servlet to populate fields that appear in AEM component dialog. That is, instead of hard-coding values in JavaScript, you can populate a dialog drop-down using a Servlet's return value (for example, JSON data), as shown in the following illustration. 

Drop-down

In this example, the movie titles that appear in the drop-down control are returned by an AEM Sling Servlet. This article walks you through how to create an AEM component that uses Sling Servlets to populate fields that appear in component dialogs. By hooking into a Sling Servlet, you can dynamically populate dialog fields. For example, you can code the Servlet to call an external web service, and populate a dialog field with the data returned by the external service.

Note:

If you deploy the package that is shown at the start of this artilce, you can skip these steps and read the article to understand the concepts. 

Create an Experience Manager application folder structure 

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

CQAppSetup

The following describes each application folder:

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

To create an application folder structure:

  1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite.
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter servlet_component
  5. Repeat steps 1-4 for each folder specified in the previous illustration. 
  6. Click the Save All button.

 

Note:

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

Create a template 

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

To create a template, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
2. Select CRXDE Lite.
3. Right-click the template folder (within your application), select Create, Create
Template.
4. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter templateSlingComponent
  • 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 /apps/servlet_component/components/page/templateSlingComponent.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

5. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.
6. Click Next for Allowed Parents.
7. Select OK on Allowed Children.
 

Create a render component that uses the template

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

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

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click /apps/customJSPtag/components/page, then select
Create, Create Component.

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

  • Label: The name of the component to create. Enter templateSlingComponent
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Type:foundation/components/page. 

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

6. Select OK on Allowed Children.

7. Open the templateSlingComponent.jsp located at: /apps/servlet_component/components/page/templateSlingComponent/templateSlingComponent.jsp.

8. Enter the following JSP code.

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

Setup Maven in your development environment

You can use Maven to build an OSGi bundle that contains an AEM service. Maven manages required JAR files that a Java project needs in its class path. Instead of searching the Internet trying to find and download third-party JAR files to include in your project’s class path, Maven manages these dependencies for you.

You can download Maven 3 from the following URL:

http://maven.apache.org/download.html

After you download and extract Maven, create an environment variable named M3_HOME. Assign the Maven install location to this environment variable. For example:

C:\Programs\Apache\apache-maven-3.0.4

Set up a system environment variable to reference Maven. To test whether you properly setup Maven, enter the following Maven command into a command prompt:

%M3_HOME%\bin\mvn -version

This command provides Maven and Java install details and resembles the following message:

Java home: C:\Programs\Java64-6\jre
Default locale: en_US, platform encoding: Cp1252
OS name: "windows 7", version: "6.1", arch: "amd64", family: "windows"

Note:

It is recommended that you use Maven 3.0.3 or greater. For more information about setting up Maven and the Home variable, see: Maven in 5 Minutes.

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

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

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

<?xml version="1.0" encoding="UTF-8"?>
 
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at
 
    http://www.apache.org/licenses/LICENSE-2.0
 
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->
 
<!--
 | This is the configuration file for Maven. It can be specified at two levels:
 |
 |  1. User Level. This settings.xml file provides configuration for a single user, 
 |                 and is normally provided in ${user.home}/.m2/settings.xml.
 |
 |                 NOTE: This location can be overridden with the CLI option:
 |
 |                 -s /path/to/user/settings.xml
 |
 |  2. Global Level. This settings.xml file provides configuration for all Maven
 |                 users on a machine (assuming they're all using the same Maven
 |                 installation). It's normally provided in 
 |                 ${maven.home}/conf/settings.xml.
 |
 |                 NOTE: This location can be overridden with the CLI option:
 |
 |                 -gs /path/to/global/settings.xml
 |
 | The sections in this sample file are intended to give you a running start at
 | getting the most out of your Maven installation. Where appropriate, the default
 | values (values used when the setting is not specified) are provided.
 |
 |-->
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0 http://maven.apache.org/xsd/settings-1.0.0.xsd">
  <!-- localRepository
   | The path to the local repository maven will use to store artifacts.
   |
   | Default: ~/.m2/repository
  <localRepository>/path/to/local/repo</localRepository>
  -->
 
  <!-- interactiveMode
   | This will determine whether maven prompts you when it needs input. If set to false,
   | maven will use a sensible default value, perhaps based on some other setting, for
   | the parameter in question.
   |
   | Default: true
  <interactiveMode>true</interactiveMode>
  -->
 
  <!-- offline
   | Determines whether maven should attempt to connect to the network when executing a build.
   | This will have an effect on artifact downloads, artifact deployment, and others.
   |
   | Default: false
  <offline>false</offline>
  -->
 
  <!-- pluginGroups
   | This is a list of additional group identifiers that will be searched when resolving plugins by their prefix, i.e.
   | when invoking a command line like "mvn prefix:goal". Maven will automatically add the group identifiers
   | "org.apache.maven.plugins" and "org.codehaus.mojo" if these are not already contained in the list.
   |-->
  <pluginGroups>
    <!-- pluginGroup
     | Specifies a further group identifier to use for plugin lookup.
    <pluginGroup>com.your.plugins</pluginGroup>
    -->
  </pluginGroups>
 
  <!-- proxies
   | This is a list of proxies which can be used on this machine to connect to the network.
   | Unless otherwise specified (by system property or command-line switch), the first proxy
   | specification in this list marked as active will be used.
   |-->
  <proxies>
    <!-- proxy
     | Specification for one proxy, to be used in connecting to the network.
     |
    <proxy>
      <id>optional</id>
      <active>true</active>
      <protocol>http</protocol>
      <username>proxyuser</username>
      <password>proxypass</password>
      <host>proxy.host.net</host>
      <port>80</port>
      <nonProxyHosts>local.net|some.host.com</nonProxyHosts>
    </proxy>
    -->
  </proxies>
 
  <!-- servers
   | This is a list of authentication profiles, keyed by the server-id used within the system.
   | Authentication profiles can be used whenever maven must make a connection to a remote server.
   |-->
  <servers>
    <!-- server
     | Specifies the authentication information to use when connecting to a particular server, identified by
     | a unique name within the system (referred to by the 'id' attribute below).
     | 
     | NOTE: You should either specify username/password OR privateKey/passphrase, since these pairings are 
     |       used together.
     |
    <server>
      <id>deploymentRepo</id>
      <username>repouser</username>
      <password>repopwd</password>
    </server>
    -->
     
    <!-- Another sample, using keys to authenticate.
    <server>
      <id>siteServer</id>
      <privateKey>/path/to/private/key</privateKey>
      <passphrase>optional; leave empty if not used.</passphrase>
    </server>
    -->
  </servers>
 
  <!-- mirrors
   | This is a list of mirrors to be used in downloading artifacts from remote repositories.
   | 
   | It works like this: a POM may declare a repository to use in resolving certain artifacts.
   | However, this repository may have problems with heavy traffic at times, so people have mirrored
   | it to several places.
   |
   | That repository definition will have a unique id, so we can create a mirror reference for that
   | repository, to be used as an alternate download site. The mirror site will be the preferred 
   | server for that repository.
   |-->
  <mirrors>
    <!-- mirror
     | Specifies a repository mirror site to use instead of a given repository. The repository that
     | this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
     | for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
     |
    <mirror>
      <id>mirrorId</id>
      <mirrorOf>repositoryId</mirrorOf>
      <name>Human Readable Name for this Mirror.</name>
      <url>http://my.repository.com/repo/path</url>
    </mirror>
     -->
  </mirrors>
   
  <!-- profiles
   | This is a list of profiles which can be activated in a variety of ways, and which can modify
   | the build process. Profiles provided in the settings.xml are intended to provide local machine-
   | specific paths and repository locations which allow the build to work in the local environment.
   |
   | For example, if you have an integration testing plugin - like cactus - that needs to know where
   | your Tomcat instance is installed, you can provide a variable here such that the variable is 
   | dereferenced during the build process to configure the cactus plugin.
   |
   | As noted above, profiles can be activated in a variety of ways. One way - the activeProfiles
   | section of this document (settings.xml) - will be discussed later. Another way essentially
   | relies on the detection of a system property, either matching a particular value for the property,
   | or merely testing its existence. Profiles can also be activated by JDK version prefix, where a 
   | value of '1.4' might activate a profile when the build is executed on a JDK version of '1.4.2_07'.
   | Finally, the list of active profiles can be specified directly from the command line.
   |
   | NOTE: For profiles defined in the settings.xml, you are restricted to specifying only artifact
   |       repositories, plugin repositories, and free-form properties to be used as configuration
   |       variables for plugins in the POM.
   |
   |-->
  <profiles>
    <!-- profile
     | Specifies a set of introductions to the build process, to be activated using one or more of the
     | mechanisms described above. For inheritance purposes, and to activate profiles via <activatedProfiles/>
     | or the command line, profiles have to have an ID that is unique.
     |
     | An encouraged best practice for profile identification is to use a consistent naming convention
     | for profiles, such as 'env-dev', 'env-test', 'env-production', 'user-jdcasey', 'user-brett', etc.
     | This will make it more intuitive to understand what the set of introduced profiles is attempting
     | to accomplish, particularly when you only have a list of profile id's for debug.
     |
     | This profile example uses the JDK version to trigger activation, and provides a JDK-specific repo.
    <profile>
      <id>jdk-1.4</id>
 
      <activation>
        <jdk>1.4</jdk>
      </activation>
 
      <repositories>
        <repository>
          <id>jdk14</id>
          <name>Repository for JDK 1.4 builds</name>
          <url>http://www.myhost.com/maven/jdk14</url>
          <layout>default</layout>
          <snapshotPolicy>always</snapshotPolicy>
        </repository>
      </repositories>
    </profile>
    -->
 
    <!--
     | Here is another profile, activated by the system property 'target-env' with a value of 'dev',
     | which provides a specific path to the Tomcat instance. To use this, your plugin configuration
     | might hypothetically look like:
     |
     | ...
     | <plugin>
     |   <groupId>org.myco.myplugins</groupId>
     |   <artifactId>myplugin</artifactId>
     |   
     |   <configuration>
     |     <tomcatLocation>${tomcatPath}</tomcatLocation>
     |   </configuration>
     | </plugin>
     | ...
     |
     | NOTE: If you just wanted to inject this configuration whenever someone set 'target-env' to
     |       anything, you could just leave off the <value/> inside the activation-property.
     |
    <profile>
      <id>env-dev</id>
 
      <activation>
        <property>
          <name>target-env</name>
          <value>dev</value>
        </property>
      </activation>
 
      <properties>
        <tomcatPath>/path/to/tomcat/instance</tomcatPath>
      </properties>
    </profile>
    -->
   
 
<profile>
 
                <id>adobe-public</id>
 
                <activation>
 
                    <activeByDefault>true</activeByDefault>
 
                </activation>
 
                <repositories>
 
                  <repository>
 
                    <id>adobe</id>
 
                    <name>Nexus Proxy Repository</name>
 
                    <url>http://repo.adobe.com/nexus/content/groups/public/</url>
 
                    <layout>default</layout>
 
                  </repository>
 
                </repositories>
 
                <pluginRepositories>
 
                  <pluginRepository>
 
                    <id>adobe</id>
 
                    <name>Nexus Proxy Repository</name>
 
                    <url>http://repo.adobe.com/nexus/content/groups/public/</url>
 
                    <layout>default</layout>
 
                  </pluginRepository>
 
                </pluginRepositories>
 
            </profile>
 
</profiles>
 
  <!-- activeProfiles
   | List of profiles that are active for all builds.
   |
  <activeProfiles>
    <activeProfile>alwaysActiveProfile</activeProfile>
    <activeProfile>anotherAlwaysActiveProfile</activeProfile>
  </activeProfiles>
  -->
</settings>

Create the Sling Servlet that populates the Movie drop-down control

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 Experience Manager archetype project, perform these steps:

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

2. Run the following Maven command:

mvn archetype:generate -DarchetypeRepository=https://repo.adobe.com/nexus/content/groups/public/ -DarchetypeGroupId=com.day.jcr.vault -DarchetypeArtifactId=multimodule-content-package-archetype -DarchetypeVersion=1.0.2 -DgroupId=com.aem.community.sample -DartifactId=Movie -Dversion=1.0-SNAPSHOT -Dpackage=com.aem.community.sample -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\Movie. 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 Movie project

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

MovieProject

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.

Delete the Movie-content project from the Eclipse IDE. Work in the Movie-bundle project and make sure that you work in the com.aem.community.sample package.

The next step is to add a Java file, named MovieList, to the com.aem.community.sample package. The Java class that you create in this section extends the Sling class named org.apache.sling.api.servlets.SlingAllMethodsServlet. This class supports the doGet method that returns data to a dialog field as JSON. For information about this class, see Class SlingAllMethodsServlet.

The following code shows the goGet method that returns data.

@Override
	protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) {
		try {
			JSONObject eachOption;
			JSONArray optionsArray = new JSONArray();
			String[] movies = { "Terminator", "Kicking & Screaming","Harold and Maude", 
					"Ratatouille", "10 Things I Hate About You", "American Beauty", 
					"The Dark Knight", "The Wolf of Wall Street","Mean Girls", 
					"Inception", "Life Is Beautiful", "No Country for Old Men" };
			String[] returnData = new String[movies.length];
			
			for (int i = 0; i < movies.length; i++) {
				eachOption = new JSONObject();
				returnData[i] = movies[i];
				eachOption.put("text", returnData[i]);
				eachOption.put("value", returnData[i]);
				optionsArray.put(eachOption);
			}

			JSONObject finalJsonResponse = new JSONObject();
			//Adding this finalJsonResponse object to showcase optionsRoot property functionality
			finalJsonResponse.put("root", optionsArray);

			response.getWriter().println(finalJsonResponse.toString());
		} catch (JSONException e) {
			LOGGER.error("Json Exception occured while adding data to JSON Object : ", e);
		} catch (IOException e) {
			LOGGER.error("IOException occured while getting Print Writer from SlingServletResponse : ", e);
		}
	}

The following Java code represents the MovieList servlet. 

package com.aem.community.sample;

import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;
import org.apache.felix.scr.annotations.sling.SlingServlet;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.servlets.SlingSafeMethodsServlet;
import org.apache.sling.commons.json.JSONArray;
import org.apache.sling.commons.json.JSONException;
import org.apache.sling.commons.json.JSONObject;
import org.apache.sling.commons.json.io.JSONWriter;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;

@Service(MovieList.class)
@SlingServlet(paths = {"/bin/moviename"}, generateComponent = false)
@Component(label = "Dropdown Movie data provider", description = "This servlet provides list of movie names in drop down",
enabled = true, immediate = true, metatype = false)
public class MovieList extends SlingSafeMethodsServlet {

	private static final Logger LOGGER = LoggerFactory.getLogger(MovieList.class);

	@Override
	protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) {
		try {
			JSONObject eachOption;
			JSONArray optionsArray = new JSONArray();
			String[] movies = { "Terminator", "Kicking & Screaming","Harold and Maude", 
					"Ratatouille", "10 Things I Hate About You", "American Beauty", 
					"The Dark Knight", "The Wolf of Wall Street","Mean Girls", 
					"Inception", "Life Is Beautiful", "No Country for Old Men" };
			String[] returnData = new String[movies.length];
			
			for (int i = 0; i < movies.length; i++) {
				eachOption = new JSONObject();
				returnData[i] = movies[i];
				eachOption.put("text", returnData[i]);
				eachOption.put("value", returnData[i]);
				optionsArray.put(eachOption);
			}

			JSONObject finalJsonResponse = new JSONObject();
			//Adding this finalJsonResponse object to showcase optionsRoot property functionality
			finalJsonResponse.put("root", optionsArray);

			response.getWriter().println(finalJsonResponse.toString());
		} catch (JSONException e) {
			LOGGER.error("Json Exception occured while adding data to JSON Object : ", e);
		} catch (IOException e) {
			LOGGER.error("IOException occured while getting Print Writer from SlingServletResponse : ", e);
		}
	}
}

Modify the Maven POM file for the Movie project

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

<?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.aem.community.sample</groupId>
        <artifactId>Movie</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>Movie-bundle</artifactId>
    <packaging>bundle</packaging>
    <name>My Project Bundle</name>

   <dependencies>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>org.osgi.compendium</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>org.osgi.core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.felix</groupId>
            <artifactId>org.apache.felix.scr.annotations</artifactId>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
           
        <dependency>
         <groupId>org.apache.felix</groupId>
    
         <artifactId>org.osgi.core</artifactId>
    
         <version>1.4.0</version>
      </dependency>
        
    <dependency>
        <groupId>org.apache.sling</groupId>
        <artifactId>org.apache.sling.commons.osgi</artifactId>
        <version>2.2.0</version>
    </dependency>
               
         
           
    <dependency>
    <groupId>org.apache.jackrabbit</groupId>
    <artifactId>jackrabbit-core</artifactId>
    <version>2.4.3</version>
    </dependency>
        
    <dependency>
    <groupId>org.apache.jackrabbit</groupId>
    <artifactId>jackrabbit-jcr-commons</artifactId>
    <version>2.4.3</version>
    </dependency>
    
    <dependency>
        <groupId>org.apache.sling</groupId>
        <artifactId>org.apache.sling.jcr.api</artifactId>
        <version>2.0.4</version>
      </dependency>
 
       <dependency>
        <groupId>org.apache.sling</groupId>
        <artifactId>org.apache.sling.api</artifactId>
        <version>2.0.2-incubator</version>
      </dependency>    
          
      <dependency>
         <groupId>javax.jcr</groupId>
         <artifactId>jcr</artifactId>
         <version>2.0</version>
      </dependency>
      
      <dependency>
	<groupId>org.apache.sling</groupId>
	<artifactId>org.apache.sling.commons.json</artifactId>
	<version>2.0.6</version>
</dependency>
      
 
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>servlet-api</artifactId>
    <version>2.5</version>
</dependency>
             
    <dependency>
            <groupId>com.googlecode.json-simple</groupId>
            <artifactId>json-simple</artifactId>
            <version>1.1</version>
        </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.aem.community.sample.Movie-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>

Create the Sling Servlet that populates the Launch Code drop-down control

To create an archetype project for the second servlet, 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.aem.community.sample -DartifactId=LaunchCode -Dversion=1.0-SNAPSHOT -Dpackage=com.aem.community.sample -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] Final Memory: 10M/184M

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 LaunchCode project

The next step is to add a Java file, named LaunchCode, to the com.aem.community.sample package. The Java class that you create in this section extends the Sling class named org.apache.sling.api.servlets.SlingAllMethodsServlet. This class supports the doGet method that returns data to a dialog field as JSON. For information about this class, see Class SlingAllMethodsServlet.

The following code shows the LaunchCode Java file.

package com.aem.community.sample;

import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;
import org.apache.felix.scr.annotations.sling.SlingServlet;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.servlets.SlingSafeMethodsServlet;
import org.apache.sling.commons.json.JSONArray;
import org.apache.sling.commons.json.JSONException;
import org.apache.sling.commons.json.JSONObject;
import org.apache.sling.commons.json.io.JSONWriter;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;

@Service(LaunchCode.class)
@SlingServlet(paths = {"/bin/launchcode"}, generateComponent = false)
@Component(label = "Dropdown Movie data provider", description = "This servlet provides launch code names in drop down",
enabled = true, immediate = true, metatype = false)
public class LaunchCode extends SlingSafeMethodsServlet {

	private static final Logger LOGGER = LoggerFactory.getLogger(LaunchCode.class);

	@Override
	protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) {
		try {
			JSONObject eachOption;
			JSONArray optionsArray = new JSONArray();
			String[] code = { "101BC", "XC456","AE81S", 
					"FGT123", "RT555", "DF010", 
					"SD345", "VG564","PO909" };
			String[] returnData = new String[code.length];
			
			for (int i = 0; i < code.length; i++) {
				eachOption = new JSONObject();
				returnData[i] = code[i];
				eachOption.put("text", returnData[i]);
				eachOption.put("value", returnData[i]);
				optionsArray.put(eachOption);
			}

			JSONObject finalJsonResponse = new JSONObject();
			//Adding this finalJsonResponse object to showcase optionsRoot property functionality
			finalJsonResponse.put("root", optionsArray);

			response.getWriter().println(finalJsonResponse.toString());
		} catch (JSONException e) {
			LOGGER.error("Json Exception occured while adding data to JSON Object : ", e);
		} catch (IOException e) {
			LOGGER.error("IOException occured while getting Print Writer from SlingServletResponse : ", e);
		}
	}
}

Modify the POM file for the LaunchCode project

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

<?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.aem.community.sample</groupId>
        <artifactId>LaunchCode</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>LaunchCode-bundle</artifactId>
    <packaging>bundle</packaging>
    <name>My Project Bundle</name>

   <dependencies>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>org.osgi.compendium</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>org.osgi.core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.felix</groupId>
            <artifactId>org.apache.felix.scr.annotations</artifactId>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
            
        <dependency>
         <groupId>org.apache.felix</groupId>
     
         <artifactId>org.osgi.core</artifactId>
     
         <version>1.4.0</version>
      </dependency>
         
    <dependency>
        <groupId>org.apache.sling</groupId>
        <artifactId>org.apache.sling.commons.osgi</artifactId>
        <version>2.2.0</version>
    </dependency>
                
          
            
    <dependency>
    <groupId>org.apache.jackrabbit</groupId>
    <artifactId>jackrabbit-core</artifactId>
    <version>2.4.3</version>
    </dependency>
         
    <dependency>
    <groupId>org.apache.jackrabbit</groupId>
    <artifactId>jackrabbit-jcr-commons</artifactId>
    <version>2.4.3</version>
    </dependency>
     
    <dependency>
        <groupId>org.apache.sling</groupId>
        <artifactId>org.apache.sling.jcr.api</artifactId>
        <version>2.0.4</version>
      </dependency>
  
       <dependency>
        <groupId>org.apache.sling</groupId>
        <artifactId>org.apache.sling.api</artifactId>
        <version>2.0.2-incubator</version>
      </dependency>    
           
      <dependency>
         <groupId>javax.jcr</groupId>
         <artifactId>jcr</artifactId>
         <version>2.0</version>
      </dependency>
       
      <dependency>
    <groupId>org.apache.sling</groupId>
    <artifactId>org.apache.sling.commons.json</artifactId>
    <version>2.0.6</version>
</dependency>
       
  
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>servlet-api</artifactId>
    <version>2.5</version>
</dependency>
              
    <dependency>
            <groupId>com.googlecode.json-simple</groupId>
            <artifactId>json-simple</artifactId>
            <version>1.1</version>
        </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.aem.community.sample.LaunchCode-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\Movie folder.
  2. Run the following maven command: mvn clean install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\Movie\bundle\target. The file name of the OSGi component is Movie-bundle-1.0-SNAPSHOT.jar.
  4. Repeat these steps for the LaunchCode project. 

Deploy the bundle to Adobe Experience Manager

Deploy the OSGi bundle to Adobe Experience Manager 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\Movie\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.
  9. Repeat these steps for the LaunchCode OSGi bundle. 

Note:

Make sure that both the Movie bundle and the LaunchCode bundle are in an Active state.

Create the component that uses servlet data in its dialog

After you setup the AEM folder structure and deploy the two OSGi bundles, create the AEM component that uses the JSON return data to populate its dialog fields.

Perform these tasks using CRXDE Lite:

1. Right click on /apps/servlet_component/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 movie-launch.
  • Title: The title that is assigned to the component. Enter movie-launch.
  • Description: The description that is assigned to the template. Enter movie-launch.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side rail or side kick where the component appears. Enter Adobe. (The developers component is located under the Adobe heading in the Touch UI side rail. Also appears in Adobe in the classic view sidekick.)
  • Allowed parents: Enter */*parsys.

3. Click Ok.

Add a dialog to the AEM 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.)

The component created in this article uses JSON returned by the two servlets to populate drop-down controls, as shown in the following illustration. 

Dialog2

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

dialog

To create the dialog, perform these tasks:

1.  Select /apps/servlet_component/components and select Create, Create Dialog.

2.  In the Title field, enter movie-launch.

3. Click Ok.

4.  Delete all nodes under /apps/servlet_component/components/movie-launch/dialog.

Create the Banner tab

Create the first tab in the dialog named Banner. This dialog contains a html5smartimage field that lets an author drag an image from the Content Finder.

BannerTab

1. Click on the following node: /apps/servlet_component/components/movie-launch/dialog.
2. Right click and select Create, Create Node
3. Enter the following values:
  • Name: items
  • Type: cq:Widget
4. Add the following property:
  • xtype (String) - tabpanel

5. Select the /apps/servlet_component/components/movie-launch/dialog/items node.

6. Right click and select Create, Create Node.

7. Enter the following values:

  • Name: items
  • Type: cq:WidgetCollection

8. Select the Select the /apps/servlet_component/components/movie-launch/dialog/items/items node.

9. Right click and select Create, Create Node.
10. Enter the following values:
  • Name: image
  • Type: cq:Widget
11. Add the following properties:
  • allowBlank (String) - false (False to validate that the value length > 0 )
  • allowUpload (String) - false (Flag if uploading a file is allowed (defaults to true))
  • ddGroups (String[]) - media (Groups involved in drag & drop (no default specified)) 
  • fileNameParameter (Sting) - ./fileName (Name of the form field used for posting the file name)
  • fileReferenceParameter (String) - ./fileReference (Name of the form field used for posting the file reference)
  • name (String) - ./file (name of the field)
  • title (String) - Banner (title that appears on the tab)
  • xtype (String) - html5smartimage (defines the data type of this field. See Class CQ.html5.form.SmartImage )

Create the Banner Properties tab

The following illustration shows the Banners Properties tab. 

BannerProp

Create the Banner Properties tab by performing these tasks:
 
1. Click on the following node: /apps/servlet_component/components/movie-launch/dialog/items/items/image.

2. Right click and select Create, Create Node.

3. Enter the following values:

  • Name: advanced
  • Type: cq:Panel

4. Add the following properties:

  • title (String) - Banner Properties (defines the value shown in the tab)
  • xtype (String) - panel

5. Select the Select the /apps/servlet_component/components/movie-launch/dialog/items/items/advanced.

6. Right click and select Create, Create Node.
 
7. Enter the following values:
  • Name: items
  • Type: cq:WidgetCollection

8. Select the /apps/servlet_component/components/movie-launch/dialog/items/items/advanced/items node.

9. Right click and select Create, Create Node.
 
10. Enter the following values:
  • Name: title
  • Type: cq:Widget

11. Add the following properties:

  • fieldLabel (String) - Banner Title
  • name (String) - ./title
  • xtype (String) - textfield

12 . Select the /apps/servlet_component/components/movie-launch/dialog/items/items/advanced/items node.

13. Right click and select Create, Create Node.

14. Enter the following values:

  • Name: alt
  • Type: cq:Widget

15. Add the following properties:

  • fieldLabel (String) - Alt Text
  • name (String) - ./alt
  • xtype (String) - textfield

16 . Select the /apps/servlet_component/components/movie-launch/dialog/items/items/advanced/items node.

17. Right click and select Create, Create Node.

18. Enter the following values:

  • Name: linkURL
  • Type: cq:Widget

19. Add the following properties:

  • fieldLabel (String) - Banner Link
  • name (String) - ./linkurl
  • rootPath (String) - /content
  • xtype (String) - pathfield

20 . Select the /apps/servlet_component/components/movie-launch/dialog/items/items/advanced/items node.

21. Right click and select Create, Create Node.

22. Enter the following values:

  • Name: target
  • Type: cq:Widget

23. Add the following properties:

  • defaultValue (String) - _self
  • fieldDescription (String) - Select target for the Banner url
  • fieldLabel (String) - Target
  • name (String) - ./target
  • type (String) - select
  • xtype (String) - selection

24. Select /apps/servlet_component/components/movie-launch/dialog/items/items/advanced/items/target.

25. Right click and select Create, Create Node.

26. Enter the following values:

  • Name: options
  • Type: cq:WidgetCollection

27. Select /apps/servlet_component/components/movie-launch/dialog/items/items/advanced/items/target/options.

28. Right click and select Create, Create Node.

29. Enter the following values:

  • Name: samewindow
  • Type: cq:Widget

30. Add the following properties:

  • text (String) - Same window
  • value (String) - _self

31. Select /apps/servlet_component/components/movie-launch/dialog/items/items/advanced/items/target/options.

32. Right click and select Create, Create Node.

33. Enter the following values:

  • Name: newwindow
  • Type: cq:Widget

34. Add the following properties:

  • text (String) - New window
  • value (String) - _blank

Create the Movie Details tab

Create the Movie Details tab. This tab contains dialog fields that are populated by the two sling servlets that you created earlier in this development article. 

MovieBanner

Create the Movie Details tab by peforming these tasks:

 1. Click on the following node: /apps/servlet_component/components/movie-launch/dialog/items/items/image.

2. Right click and select Create, Create Node.

3. Enter the following values:

  • Name: Movie Details
  • Type: cq:Panel

4. Add the following properties:

  • title (String) - Movie Details (defines the value shown in the tab)

5. Click on the following node: /apps/servlet_component/components/movie-launch/dialog/items/items/Movie Details

6. Right click and select Create, Create Node.

7. Enter the following values:

  • Name: items
  • Type: cq:WidgetCollection

8. Click on the following node:/apps/servlet_component/components/movie-launch/dialog/items/items/Movie Details/items.

9. Right click and select Create, Create Node.

10. Enter the following values:

  • Name: name
  • Type: cq:Widget

11. Add the following properties to the name node. 

  • allowBlank (String) - false
  • fieldLabel (String) - Movie Name
  • name (String) - ./name
  • options (Sting) - /bin/moviename.json (This is the value that maps to the Movie sling servlet)
  • optionsRoot (String) - root
  • type (String) - select
  • xtype (String) -type

12. Click on the following node:/apps/servlet_component/components/movie-launch/dialog/items/items/Movie Details/items.

13. Right click and select Create, Create Node.

14. Enter the following values:

  • Name: summary
  • Type: cq:Widget

15. Add the following properties to the name node. 

  • fieldLabel (String) - Movie Summary
  • name (String) - ./summary
  • xtype (String) - textarea

16. Click on the following node:/apps/servlet_component/components/movie-launch/dialog/items/items/Movie Details/items.

17. Right click and select Create, Create Node.

18. Enter the following values:

  • Name: time
  • Type: cq:Widget

19. Add the following properties to the name node. 

  • allowBlank (String0) - false
  • fieldLabel (String) - Launch Time
  • name (String) - ./time
  • xtype (String) - datepicker

20. Click on the following node:/apps/servlet_component/components/movie-launch/dialog/items/items/Movie Details/items.

21. Right click and select Create, Create Node.

22. Enter the following values:

  • Name: code
  • Type: cq:Widget

23. Add the following properties to the node. 

  • allowBlank (String) - false
  • fieldDescription (String) - Select code will be sent to all invited people and might be asked at enterance
  • fieldLabel (String) -  Launch Code
  • name (String) - ./code 
  • options (Sting) - /bin/launchcode.json (This is the value that maps to the LaunchCode sling servlet)
  • optionsRoot (String) - root
  • type (String) - select
  • xtype (String) -type

24. Click on the following node:/apps/servlet_component/components/movie-launch/dialog/items/items/Movie Details/items.

25. Right click and select Create, Create Node.

26. Enter the following values:

  • Name: description
  • Type: cq:Widget

27. Add the following properties to the node. 

  • fieldLabel (String) -  Launch Description
  • name (String) - ./description
  • xtype (String) - textarea

28. Click on the following node:/apps/servlet_component/components/movie-launch/dialog/items/items/Movie Details/items.

29. Right click and select Create, Create Node.

30. Enter the following values:

  • Name: people
  • Type: cq:Widget

31. Add the following properties to the node. 

  • defaultvalue (String) -  1 - 10
  • fieldDescription (String) - No. of people who will be attending launch ceremony
  • fieldLabel (String) - No. of People
  • name (String) - ./people
  • xtype (String) - selection

32. Click on /apps/servlet_component/components/movie-launch/dialog/items/items/Movie Details/items/people.

33. Right click and select Create, Create Node.

34. Enter the following values:

  • Name: options
  • Type: cq:WidgetCollection

35. Click on /apps/servlet_component/components/movie-launch/dialog/items/items/Movie Details/items/people/options.

36. Right click and select Create, Create Node.

37. Enter the following values:

  • Name: 10
  • Type: cq:Widget

38. Add the following properties to this node:

  • text (String) - 1 - 10
  • value (String) - 1 - 10

39. Click on /apps/servlet_component/components/movie-launch/dialog/items/items/Movie Details/items/people/options.

40. Right click and select Create, Create Node.

41. Enter the following values:

  • Name: 10
  • Type: cq:Widget

42. Add the following properties to this node:

  • text (String) - 10 - 50
  • value (String) - 10 - 50

43. Click on /apps/servlet_component/components/movie-launch/dialog/items/items/Movie Details/items/people/options.

44. Right click and select Create, Create Node.

45. Enter the following values:

  • Name: 100
  • Type: cq:Widget

46. Add the following properties to this node:

  • text (String) -  50 - 100
  • value (String) - 50 - 100

47. Click on /apps/servlet_component/components/movie-launch/dialog/items/items/Movie Details/items/people/options.

48. Right click and select Create, Create Node.

49. Enter the following values:

  • Name: 500
  • Type: cq:Widget

50. Add the following properties to this node:

  • text (String) -  100-500
  • value (String) - 100-500

51. Click on /apps/servlet_component/components/movie-launch/dialog/items/items/Movie Details/items/people/options.

52. Right click and select Create, Create Node.

53. Enter the following values:

  • Name: 1000
  • Type: cq:Widget

54. Add the following properties to this node:

  • text (String) -  500-1000
  • value (String) - 500-1000

movie-launch JSP

The movie-launch.jsp is the main JSP file for the component and is located at: 

/apps/servlet_component/components/movie-launch/movie-launch.jsp

This application logic located in the movie-launch.jsp contains JSTL tags and reads the values entered into the controls fields located in the component's dialog. 

This line of code displays the value that an author selected from the Movie drop-down field.

<c:set var="movieName" value="${properties.name}" />

Note that the Movie drop-down values were populated by the sling servlet. In this article, you saw how a value is returned by a sling servlet, displayed in the dialog drop-down control, and finally displayed in the web page. 

The following code represents the entire movie-launch.jsp file.

<style>
.demoText {
	line-height: 22px;
	-webkit-border-radius: 7;
	-moz-border-radius: 7;
	border-radius: 7px;
	font-family: Arial;
	color: #080808;
	font-size: 20px;
	background: #e7eef0;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
}

.demoText:hover {
	text-decoration: none;
}

.demoLabel {
	margin-bottom: 7px;
}

#section {
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 2px solid grey;
}

#banner {
	margin-bottom: 10px;
}

.demoLabel {
	background: #22d8f0;
	background-image: -webkit-linear-gradient(top, #22d8f0, #1ad0f0);
	background-image: -moz-linear-gradient(top, #22d8f0, #1ad0f0);
	background-image: -ms-linear-gradient(top, #22d8f0, #1ad0f0);
	background-image: -o-linear-gradient(top, #22d8f0, #1ad0f0);
	background-image: linear-gradient(to bottom, #22d8f0, #1ad0f0);
	-webkit-border-radius: 6;
	-moz-border-radius: 6;
	border-radius: 6px;
	font-family: Arial;
	color: #ffffff;
	width: 100px;
	font-size: 20px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
}

.demoLabel:hover {
	text-decoration: none;
}
</style>

<jsp:directive.include file="/libs/foundation/global.jsp" />

<c:set var="movieBanner" value="${properties.fileReference}" />
<c:set var="movieName" value="${properties.name}" />
<c:set var="movieSummary" value="${properties.summary}" />
<c:set var="inviteSummary" value="${properties.description}" />
<c:set var="launchTime" value="${properties.time}" />
<c:set var="launchCode" value="${properties.code}" />
<c:set var="noOfPeple" value="${properties.people}" />
<c:if test="${empty movieBanner}">
	<c:out value="Right Click or Double Click to Edit" />
</c:if>
<c:if test="${not empty movieBanner}">
	<c:set var="bannerTitle" value="${properties.title}" />
	<c:set var="bannerAltText" value="${properties.alt}" />
	<c:set var="bannerLink" value="${properties.linkurl}" />
	<c:set var="bannerTarget" value="${properties.target}" />

	<div id="wrapper">
		<div id="banner">
			<c:choose>
				<c:when
					test="${(fn:startsWith(bannerLink, '/content/dam/')) || (fn:contains(bannerLink, '.'))}">
					<a href="${bannerLink}" target="${bannerTarget}"><img
						src="${movieBanner}" alt="${bannerAltText}" title="${bannerTitle}" /></a>
				</c:when>
				<c:otherwise>
					<a href="${bannerLink}.html" target="${bannerTarget}"><img
						src="${movieBanner}" alt="${bannerAltText}" title="${bannerTitle}" /></a>
				</c:otherwise>
			</c:choose>
		</div>
		<div id="summary">
			<div id="section">
				<div class="demoLabel">Movie</div>
				<div class="demoText">${movieName}</div>
			</div>
			<div id="section">
				<div class="demoLabel">Summary</div>
				<div class="demoText">${movieSummary}</div>
			</div>
		</div>
		<div id="details">
			<c:if test="${not empty launchTime}">
				<div id="section">
					<div class="demoLabel">Time</div>
					<div class="demoText">${launchTime}</div>
				</div>
			</c:if>
			<c:if test="${not empty launchCode}">
				<div id="section">
					<div class="demoLabel">Code</div>
					<div class="demoText">${launchCode}</div>
				</div>
			</c:if>
			<c:if test="${not empty inviteSummary}">
				<div id="section">
					<div class="demoLabel">Description</div>
					<div class="demoText">${inviteSummary}</div>
				</div>
			</c:if>
			<div id="section">
				<div class="demoLabel">Gathering</div>
				<div class="demoText">${noOfPeple} people
					will be attending the launch ceremony of ${movieName}
					<c:if test="${not empty launchTime}">
                        on ${launchTime}
                    </c:if>
				</div>
			</div>
		</div>
	</div>
</c:if>

Create a web page that uses the movie-launch component

The final task is to create an AEM page that uses the movie component, that is shown in the followng illustration. 

 

component

Create an AEM page that displays the component.

  1. Go to the Websites page at http://localhost:4502/siteadmin#/content.
  2. Select New Page.
  3. Specify the title of the page in the Title field. Enter ComponentExample.
  4. Specify the name of the page in the Name field.
  5. Select templateSlingComponent from the template list that appears. This value represents the template that is created in this development article. If you do not see it, then repeat the steps in this development article. For example, if you made a typing mistake when entering in path information, the template will not show up in the New Page dialog box.
  6. Open the page by clicking the ComponentExample page.
  7. The movie-launch component will be under the Adobe heading in the sidekick. Drag this component onto the AEM page. 
  8. Open the movie-launch component dialog and enter values into the dialog fields.

Populate the AEM side kick

If the 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 Adobe from the list of categories. To view the sidekick with the Adobe category, click the down arrow icon that appears on the sidekick. Drag the Movie-Launch component on the AEM web page. Double click on the component and you see the dialog that you created in this development article.  

The following illustration, shows the Adobe category where the component is located. 

sidekick

See also

Congratulations, you have just created an AEM component uses a sling servlet to populate dialog fields. 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