Article summary

Summary

This article shows use of Sling Models which can be adapted by using Request and Resource objects at the same time. This article also demonstrates how you can use a Request object (if required in special cases) inside the Sling Model along with Resource properties.

HTL is the Experience Manager 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 Navin Kaushal for submitting the code used in this article. Also to Ratna Kumar Kotla, for testing this to ensure it works.

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

Introduction

There are use cases where you may need to get a Request object inside a Sling Model or you want to adapt your Sling Model using a SlingHttpServletRequest object (where you don’t want to create a resource object). In this situation, you do not need to create two different Sling Models. In this development article, you learn how to write your Sling Model, make it adaptable by using either a SlingHttpServletRequest or Resource (or both the objects), and inject Resource properties at the same time.

mm
A default page created by Maven Archetype 13

Note:

The Maven Archetype 13 project uses Declartive Services annotations. For information, see OFFICIAL OSGI DECLARATIVE SERVICES ANNOTATIONS IN AEM

Setup Maven in your development environment

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

You can download Maven 3 from the following URL:

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

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

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

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

%M3_HOME%\bin\mvn -version

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

Default locale: en_US, platform encoding: Cp1252
OS name: "windows 7", version: "6.1", arch: "amd64", family: "windows"

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

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

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

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

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

Note:

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

Create an AEM Maven 13 archetype project

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

M10
Files generated by Maven 13 Archetype

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=13 -DarchetypeCatalog=https://repo.adobe.com/nexus/content/groups/public/

3. When prompted, specify the following information:

  • groupId - SlingAdapt
  • artifactId - SlingAdapt
  • version - 1.0-SNAPSHOT
  • package - com.aem
  • appsFolderName - SlingAdapt
  • artifactName - SlingAdapt
  • componentGroupName - SlingAdapt
  • contentFolderName - SlingAdapt
  • cssId - SlingAdapt
  • packageGroup - SlingAdapt
  • siteName - SlingAdapt

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

Project2
Eclipse Import Project Dialog

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.

AdaptationModel class

Create a class named AdaptionModel in the com.aem.core.models package. The AdaptationModel class makes Resource and SlingHTTPServletRequest adaptables using the @Model annotation. Notice this this class uses @SlingObject annotation to inject the request object.

@SlingObject

private SlingHttpServletRequest request;

The class retrieves the resource path by using this code: 

if (request != null) {

    this.message += "Request Path: "+request.getRequestPathInfo().getResourcePath()+"\n";

    }

This returns the path of the resource that is displayed in the component (which is shown later in this development article). 

The following Java code represents this class. 

package com.aem.core.models;

import javax.annotation.PostConstruct;
import javax.inject.Inject;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.Via;
import org.apache.sling.models.annotations.injectorspecific.SlingObject;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

@Model(adaptables = {SlingHttpServletRequest.class, Resource.class}, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class AdaptationModel { 

	Logger logger = LoggerFactory.getLogger(this.getClass());

	private String message;

	@SlingObject
	private SlingHttpServletRequest request;

	@Inject @Via("resource")
    private String firstName;

    @Inject  @Via("resource")
    private String lastName;
          
    @PostConstruct
    protected void init() {
    	
    	message = "Hello World\n";
     	 	
    	if (request != null) {
    		this.message += "Request Path: "+request.getRequestPathInfo().getResourcePath()+"\n";
    	}

        message += "First Name: "+ firstName +" \n";
        message += "Last Name: "+ lastName + "\n";
        
        logger.info("inside post construct");
    }

    public String getMessage() {
        return message;
    }

    public String getFirstName() {
    	return firstName;
    }
    
    public String getLastName() {
        return lastName;
    }
}

AdaptationServlet (Servlet)

The AdaptationServlet class creates a servlet and binds to a resourceType. This resourceType can be any component or other node which has property sling:resourceType. In this article, a custom component named firstcomponent is created to render the results.

The following Java code represents the AdaptationServlet class. A Sling Model is adapted in this servlet by using a SlingHttpServletRequest object (you can also usie a Resource object).

package com.aem.core.servlets;

import java.io.IOException;

import javax.servlet.Servlet;
import javax.servlet.ServletException;
import com.aem.core.models.AdaptationModel;

import org.osgi.service.component.annotations.Component;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
 
@Component(service=Servlet.class,
	property={
		"sling.servlet.methods=GET",
		"sling.servlet.resourceTypes="+ "/apps/SlingAdapt/components/content/firstcomponent"
	}
)

public class AdaptationServlet extends SlingAllMethodsServlet{
 
    private static final long serialVersionUID = 1L;
    Logger logger = LoggerFactory.getLogger(this.getClass());
   

    public void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response)throws ServletException,IOException{
        
        response.setContentType("text/html");

        try {
        	AdaptationModel slingReqModel = request.adaptTo(AdaptationModel.class);
        	//AdaptationModel slingReqModel = request.getResourceResolver().getResource(null).adaptTo(AdaptationModel.class);
            response.getWriter().write(slingReqModel.getMessage());
           	logger.info("Adaptattion DONE");
        } catch (Exception e) {
            logger.error("{} Exception! ", new Object[] {e.getMessage(), e});
        }
    }
}

Note:

In this code example, the adaptation is done in within the servlet and its a required servlet. It binds with the component using the resourceType.

For more information about creating an AEM servlet that binds to resources, see Binding Adobe Experience Manager Servlets to ResourceTypes.

Modify the Maven POM file

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

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

When you add new Java classes under core, you need to modify a POM file to successfully build the OSGi bundle. You modify the POM file located at C:\AdobeCQ\SlingAdapt\core.

The following code represents this POM file.

<?xml version="1.0" encoding="UTF-8"?>
<!--
 |  Copyright 2017 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>SlingAdapt</groupId>
        <artifactId>SlingAdapt</artifactId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <artifactId>SlingAdapt.core</artifactId>
    <packaging>bundle</packaging>
    <name>SlingAdapt - Core</name>
    <description>Core bundle for SlingAdapt</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>
                <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.aem.core
                        </Sling-Model-Packages>
                    </instructions>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <dependencies>
        <!-- OSGi Dependencies -->
         <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>uber-jar</artifactId>
            <classifier>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>
    </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\SlingAdapt.
  2. Run the following maven command: mvn -PautoInstallPackage install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\SlingAdapt\core\target. The file name of the OSGi component is SlingAdapt.core-1.0-SNAPSHOT.jar.

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

View the Active OSGi bundle

After you deploy the OSGi bundle by using the Maven command, you can see it in an active state in the Adobe Apache Felix Web Console.

OSGi
The OSGi bundle in an Active State

View your OSGi bundle by performing these steps:

  1. Login to Adobe 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.

Create the Experience Manager component

To create the Experience Manager component, perform these tasks using CRXDE Lite:

1. Right click on /apps/SlingAdapt/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 firstcomponent.
  • Title: The title that is assigned to the component. Enter firstcomponent.
  • Description: The description that is assigned to the component. Enter any value you want.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side rail where the component appears. Enter SlingAdapt

3. Click Ok.

4. Change the extension from .jsp to .html.

Build the Dialog using CRXDE lite

An Experience Manager component dialog is a structure of JCR nodes. The dialog nodes are typically placed under a component. In this article, you are going to build the dialog nodes at this JCR location:

/apps/SlingAdapt/components/content/firstcomponent

Dialog
JCR nodes that make up the dialog

Download

To build the dialog, perform these tasks:

1. Select /apps/Lab2018/components/content/firstcomponent.

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 (String) - cq/gui/components/authoring/dialog

5. Click on the following node: /apps/SlingAdapt/components/content/firstcomponent/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/coral/foundation/container

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

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

  • Name: layout
  • Type: nt:unstructured

10. Add the following properties to the layout node.

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

11. Click on the following node: /apps/SlingAdapt/components/content/firstcomponent/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/SlingAdapt/components/content/firstcomponent/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/SlingAdapt/components/content/firstcomponent/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/coral/foundation/fixedcolumns

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

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

  • Name: column
  • Type: nt:unstructured

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

24. Add the following property to the column node.

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

25. Click on the following node: /apps/SlingAdapt/components/content/firstcomponent/cq:dialog/content/items/herotext/items/columns.

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

  • Name: items
  • Type: nt:unstructured

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

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

  • Name: firstName
  • Type: nt:unstructured

29. Click on the following node: /apps/SlingAdapt/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items/firstName.

30. Add the following properties to the node.

  • fieldLabel (String) - First Name
  • name (String) - ./firstName
  • sling:resourceType (String) - granite/ui/components/coral/foundation/form/textfield

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

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

  • Name: lastName
  • Type: nt:unstructured

33. Click on the following node: /apps/SlingAdapt/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items/lastName.

34. Add the following property to the node.

  • name (String) -./lastName
  • sling:resourceType (String) - granite/ui/components/coral/foundation/form/textfield

 

Add HTL code to the firstcomponent

After you build the component and the component dialog, where you specify the Granite/Coral resource types, you are ready to add code to the component at this JCR location:

/apps/SlingAdapt/components/content/firstcomponent/firstcomponent.html

Add the following code to this component.

<div>
<p data-sly-test="${properties.text}">Text property: ${properties.text}</p>

<pre data-sly-use.slingModel="com.aem.core.models.AdaptationModel">
${slingModel.message}
</pre>

</div>

The first thing to notice about this code is:

<pre data-sly-use.slingModel="com.aem.core.models.AdaptationModel">

In this example, data-sly-use.slingModel references the Java Sling Model class named AdaptationModel. (This class is explained earlier in this article). This line of code:

${hello.message}

returns the value of the getMessage method in the class. 

Running the default web page

You can view the default web page by using the following URL:

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

Drag the firstcomponent onto the page and set in the first and last name fields in the dialog. 

Dialog2
The component dialog

The following ilustration shows the output of the component. 

Output
Output of the firstcomponent

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