Article summary

Summary

Discusses how to create a custom HTL Responsive Banner component. This article uses Bootstrap and Sling Models. 

An AEM author can set various options by using the component's dialog.

Also, thank you to Ratna Kumar Kotla for testing this article to ensure it works. 

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

Note:

You can download an AEM package that contains the code used in this article. Download the package and deploy using package manager. The purpose of this code is to show the community these concepts in action. That is, it's to illustrate how to write a HTL Responsive Banner component that lets an author set various options. This community code is for teaching purposes only and not meant to go into production as is.

You can view the sample community application by using the following URL: http://localhost:4502/editor.html/content/Banner64/en.html (assuming you deploy on author).

Download

Note:

The HTL component uses Sling Models. Also, this article for is Adobe Experiene Manager 6.4. If you are using AEM 6.3, see Creating an Experience Manager Responsive Banner Component

Introduction

As an Adobe Experience Manager 6.4 developer, you can create a custom Banner component. A Banner Component typically embeds an advertisement into a web page.  That is, it is used to attract traffic to a website by linking to the website of the advertiser. This development article walk you thought how to build a responsive Banner component that can be used in an AEM site. The component developed in this article uses HTL. For information, see HTML Template Language.

 

Banner
An Experience Manager Responsive Banner component

An author can set different values by using the component dialog, as shown in this illustration. 

Dialog
The Banner component dialog

The following list describes the dialog fields:

  • Background Style - specifies whether the background is an image or color
  • Image - if Background Image is specified in previous field, this field lets an author select an image. If Background color is selected in the previous field, then this field lets an author specify a HEX Color value. For example, #ff00aa. This is an example of modifying one field in the TOuch UI based on another field. For more information, see Dynamically changing an Adobe Experience Manager Touch UI Dialog
  • Banner Image - lets an author select an image that appears in the Banner (this is the image - not the background image). 
  • Image Position - specifies whether the image is on the right or left side of the banner. 
  • Heading Text - the text that appears in the heading. 
  • Heading Size- specifies whether the heading is a head 1, 2, or 3. 
  • Button Text - the text that appears in the button. 

The Banner component built in this article uses the Bootstrap library. For information, see Bootstrap.

Setup Maven in your development environment


	




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

You can download Maven 3 from the following URL:

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

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

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

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

%M3_HOME%\bin\mvn -version

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

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

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

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

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

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

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

Create an AEM Maven 13 archetype project

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

maven
Maven Archetype 13 generated files

To create an Experience Manager archetype project, perform these steps:

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

2. Run the following Maven command:

mvn org.apache.maven.plugins:maven-archetype-plugin:2.4:generate -DarchetypeGroupId=com.adobe.granite.archetypes -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=13 -DarchetypeCatalog=https://repo.adobe.com/nexus/content/groups/public/

3. When prompted, specify the following information:

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

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 Banner64 and then enter the following command.

mvn eclipse:eclipse

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

Add Java files to the Maven project using Eclipse

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

project
Eclipse Import Project Dialog

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

  • com.aem.banner.core.models - where you define the Sling Model class

Note:

Do not worry about the errors reported in Eclipse. It does not read the POM file where the APIs are resolved. You build the bundle with Maven. Eclipse is used to edit the Java files and the POM file.

Create the BannerList class, a Sling Model class where the dialog values are injected. These values are used in the HTL Banner component.

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

@Model(adaptables = Resource.class)

The next thing to notice is the data members that use the @Inject annotation. What is happening here is these values, that the AEM author enters into the AEM component dialog fields, are injected into the corresponding data member.

@Inject @Optional
public String bgstyle; // corresponds to the node in the dialog named bgstyle

@Inject @Optional
public String bgimage; // corresponds to the node in the dialog named bgimage

@Inject @Optional
public String bgcolor ;

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

@PostConstruct

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

The following Java code represents the BannerList class.

 

package com.aem.banner.core.models;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
  
import javax.annotation.PostConstruct;
import javax.inject.Inject;
  
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.Optional;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
  
  
@Model(adaptables = Resource.class)
public class BannerList {
  
    private final Logger LOG = LoggerFactory.getLogger(getClass());
  
    @Inject @Optional
    public String bgstyle; // corresponds to the node in the dialog named bgstyle
     
    @Inject @Optional
    public String bgimage; // corresponds to the node in the dialog named bgimage
     
    @Inject @Optional
    public String  bgcolor ;
     
        
    @Inject @Optional
    public String bannerimage; // corresponds to the node in the dialog named bannerimage
     
    @Inject @Optional
    public String position; // corresponds to the node in the dialog named position
     
     
    @Inject @Optional
    public String heading; // corresponds to the node in the dialog named heading
     
    @Inject @Optional
    public String fontsize; // corresponds to the node in the dialog named fontsize
     
     
    @Inject @Optional
    public String description; // corresponds to the node in the dialog named description
     
    @Inject @Optional
    public String buttontext; // corresponds to the node in the dialog named buttontext
     
    @Inject @Optional
    public String hreflink; // corresponds to the node in the dialog named hreflink
     
    private String m_bgstyle;
     
    private String m_bgimage  ; 
     
    private String m_bgcolor ; 
     
    private String m_bannerimage ="/content/dam/adobe_creative_suite_family_software_logo_vector_267503.jpg";
     
    private String m_position ="right";
     
    private String m_heading = "Heading 1" ;
     
    private String m_fontsize ="60" ;
     
    private String m_description="For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally." ;
     
    private String m_buttontext ="More Info";
     
    private String m_hreflink ="/content/myhyundai/us/en.html";
  
       
    @PostConstruct
    protected void init() {
                 
        if (bgstyle == null) // value not injected
            m_bgstyle = "color";
        else
            m_bgstyle = bgstyle; 
             
        LOG.info("m_bgstyle is  **** "+ m_bgstyle);
         
        if (bgimage == null) // value not injected
            m_bgimage = "/content/dam/cover.jpg";
        else
            m_bgimage = bgimage;
         
         
        LOG.info("m_bgimage is  **** "+ m_bgimage); 
         
                  
        if (bgcolor == null) // value not injected
            m_bgcolor = "#2657a5";
        else
            m_bgcolor = bgcolor;
         
        LOG.info("m_bgcolor is  **** "+ m_bgcolor); 
         
        m_bannerimage = bannerimage ; 
        m_position = position; 
        m_heading = heading; 
        m_fontsize= fontsize;
        m_description =description; 
        m_buttontext = buttontext;
        m_hreflink=hreflink;
    }
  
    public String getBgstyle() {
        return m_bgstyle;
    }
     
    public String getBackcolor() {
        return m_bgcolor;
    }
     
     
    public String getBackimage() {
        return m_bgimage;
    }
     
    public String getBannerimage() {
        return m_bannerimage;
    }
     
    public String getPosition() {
        return m_position ;
    }
     
        
    public String getHeading() {
        return m_heading;
    }
    
    public String getFontsize() {
        return m_fontsize;
    }
     
    public String getDescription() {
        return description;
    }
     
    public String getButtontext() {
        return m_buttontext;
    }
     
    public String getHreflink() {
        return m_hreflink;
    }
    
}

Modify the Maven POM file

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

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

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

parent
The Parent POM file

Add the dependency shown above to the Parent POM file. Next, modify the POM file located at C:\AdobeCQ\Banner64\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>Banner64</groupId>
        <artifactId>Banner64</artifactId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <artifactId>Banner64.core</artifactId>
    <packaging>bundle</packaging>
    <name>Banner64 - Core</name>
    <description>Core bundle for Banner64</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.banner.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\Banner64.
  2. Run the following maven command: mvn -PautoInstallPackage install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\Banner64\core\target. 

The file name of the OSGi component is Banner64.core-1.0-SNAPSHOT.jar. The command -PautoInstallPackage automatically deploys the OSGi bundle to AEM.

Create the Experience Manager Banner Component

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

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

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

3. Click Ok.

Change the file extention of  /apps/Banner64/components/content/bannerComponent/bannerComponent.jsp to .HTML. Next, add the following code to bannerComponent.html.

<div data-sly-use.banner="com.aem.banner.core.models.BannerList"></div>
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.css @ categories='bannerComponent'}"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 			<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container-fluid">
    <div data-sly-test="${banner.bgstyle=='color'}">
    	<div class="jumbotron" style="background-color:${banner.backcolor @ context='styleToken'}">
                 <sly data-sly-include="text-image.html" />
        </div>
    </div>
 
    <div data-sly-test="${banner.bgstyle=='image'}">
    	<div class="jumbotron" style="background-image:url('${banner.backimage @ context='styleString'}');">
                 <sly data-sly-include="text-image.html" />
        </div>
    </div>
</div>

Note:

Notice that the bootstrap library is included using this line of code: 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

In this example, notice:

<div data-sly-use.banner="com.community.banner.htl.core.models.BannerList"></div>

data-sly-use.banner references the Java Sling Model class com.community.banner.htl.core.models.BannerList.

In the previous code example, notice the use of these lines of code: 

 

<div class="container-fluid">
    <div data-sly-test="${banner.bgstyle=='color'}">
    	<div class="jumbotron" style="background-color:${banner.backcolor @ context='styleToken'}">
                 <sly data-sly-include="text-image.html" />
        </div>
    </div>
 
    <div data-sly-test="${banner.bgstyle=='image'}">
    	<div class="jumbotron" style="background-image:url('${banner.backimage @ context='styleString'}');">
                 <sly data-sly-include="text-image.html" />
        </div>
    </div>

These lines of code are similiar to a Java If statement. That is, the code is reading the value of the bgstyle dialog field. If the author selected Background color, then these lines of code are executed: 

<div class="jumbotron" style="background-color:${banner.bgcolor @ context='styleToken'}">
<sly data-sly-include="text-image.html" />
</div>

Likewise, if the author selected Background image, then these lines of code are used: 

<div class="jumbotron" style="background-image:url('${banner.bgimage @ context='styleString'}');">
<sly data-sly-include="text-image.html" />
</div>

Note:

For information about @ content, see the HTL Specification

Notice this line of code:

<sly data-sly-include="text-image.html" />

This references a file under /apps/Banner64/components/content/bannerComponent named text-image.html. Ensure that you create this file in this location and add the following code.

<div data-sly-use.banner="com.aem.banner.core.models.BannerList"></div>
   <div data-sly-test="${banner.position=='left'}">
  		<div class="row">
    		<div class="col-lg-6">
 				<div class="image-pos"><img src="${banner.bannerimage}" class="img-rounded"/></div>
    		</div>
    		<div class="col-lg-6">
				<div class="text-pos"><p><font size="${banner.fontsize}">${banner.heading}</font></p>
					<p>${banner.description}</p>
                    <input type="button" class="btn btn-info" value="${banner.buttontext}" onclick="location.href = '${banner.hreflink @ context='html'}';">
				</div>
			</div>
		</div>
   </div>


	<div data-sly-test="${banner.position=='right'}">
  		<div class="row">
    		<div class="col-lg-6">
				<div class="text-pos"><p><font size="${banner.fontsize}">${banner.heading}</font></p>
					<p>${banner.description}</p>
                    <input type="button" class="btn btn-info" value="${banner.buttontext}" onclick="location.href = '${banner.hreflink @ context='html'}';">
				</div>
    		</div>
    		<div class="col-lg-6">
					<div class="image-pos"><img src="${banner.bannerimage}" class="img-rounded"/></div>
			</div>
		</div>
	</div>

This code is responsible for placing the Banner image on the left or right side, which depends upon the value that an author selects in the component dialog. 

Build the Component dialog

Use CRXDE Lite to develop the Banner component dialog so it resembles the following illustration. 

DialogNodes
JCR Nodes that create a Touch UI dialog

Note:

If you install the package at the start of this article, then you do not need to create the dialog by following this procedure. 

Build the Touch UI dialog by performing these tasks:

1. Select /apps/Banner64/components/content/bannerComponent.

2. Right click and select Create, Create Node.

3. Enter the following values:

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

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

  • sling:resourceType (String) - cq/gui/components/authoring/dialog

5. Select /apps/Banner64/components/content/bannerComponent/cq:dialog.

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

  • Name: content
  • Type: nt:unstructured

7. Add the following properties to the content node.

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

8. Click on the following node: /apps/Banner64/components/content/bannerComponent/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) - ggranite/ui/components/foundation/layouts/fixedcolumns

11. Click on the following node: /apps/Banner64/components/content/bannerComponent/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/Banner64/components/content/bannerComponent/cq:dialog/content/items.

14. Right click and select Create, Create Node.

15. Enter the following values:

  • Name: column
  • Type: nt:unstructured

16. Add the following property to the currentissue node.

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

17. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column.

18. Right click and select Create, Create Node.

19. Enter the following values:

  • Name: items
  • Type: nt:unstructured

20. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items.

21. Right click and select Create, Create Node.

22. Enter the following values:

  • Name: fieldset
  • Type: nt:unstructured

23. Add the following propery to this node: 

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

24. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset.

25. Right click and select Create, Create Node.

  • Name: layout
  • Type: nt:unstructured

26. Add the following property to this node.

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


27. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset.

28. Right click and select Create, Create Node.

29. Enter the following values:

  • Name: items
    Type: nt:unstructured

30. Click on the following node:/apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items.

31. Right click and select Create, Create Node.

32. Enter the following values:

  • Name: column
  • Type: nt:unstructured

33. Add the following property to this node.

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


34. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items/column.

35. Right click and select Create, Create Node.

36. Enter the following values:

  • Name: items
  • Type: nt:unstructured

37. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items/column/items.

38. Right click and select Create, Create Node.

39. Enter the following values:

  • Name: background-details
  • Type: nt:unstructured

40. Add the following properties to this node.

  • class (String) - coral-Heading coral-Heading--2
  • level (Long) - 4
  • sling:resourceType (String) - granite/ui/components/foundation/heading
  • name (String) - Background Details

41. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items/column/items.

42. Right click and select Create, Create Node.

43. Enter the following values:

  • Name: background-style
  • Type: nt:unstructured

44. Add the following properties to this node.

  • cq-dialog-dropdown-showhide-target (String) - .text-image-hide-show
  • fieldDescription (String) - Select the background style of the banner
  • FieldLabel (String)  - Background Style
  • name (String) - ./bgstyle
  • sling:resourceType (String) - granite/ui/components/foundation/form/select
     

45. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items/column/items.

46. Right click and select Create, Create Node.

47. Enter the following values:

  • Name: bg-image
  • Type: nt:unstructured

48. Add the following properties to this node.

  • class (String) - hide text-image-hide-show
  • fieldDescription (String) - Enter Copyright Text
  • showhidetargetvalue (String) - image
  • name (String) - ./bgstyle
  • sling:resourceType (String) - granite/ui/components/foundation/container

49. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items/column/items.

50. Right click and select Create, Create Node.

51. Enter the following values:

  • Name: bg-color
  • Type: nt:unstructured

52. Add the following properties to this node.

  • class (String) - hide text-image-hide-show
  • fieldDescription (String) - Enter Copyright Text
  • showhidetargetvalue (String) - color
  • sling:resourceType (String) - granite/ui/components/foundation/container

53. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items/column/items.

54. Right click and select Create, Create Node.

55. Enter the following values:

  • Name: Banner-details
  • Type: nt:unstructured

56. Add the following properties to this node.

  • class (String) - coral-Heading coral-Heading--2
  • level (Long) - 2
  • sling:resourceType (String) - granite/ui/components/foundation/heading
  • text (String) - Banner Details

57. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items/column/items.

58. Right click and select Create, Create Node.

59. Enter the following values:

  • Name: banner-image
  • Type:  nt:unstructured

60. Add the following properties to this node.

  • fieldLabel (String) - Banner Image
  • name (String) - ./bannerimage
  • sling:resourceType (String) - granite/ui/components/foundation/form/pathbrowser

61. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items/column/items.

62. Right click and select Create, Create Node.

63. Enter the following values:

  • Name: ImageAlign
  • Type: nt:unstructured

64. Add the following properties to this node.

  • fieldLabel (String) - Image Position
  • fieldDescription (String)  - Enter Copyright Text
  • name (String) - ./position
  • sling:resourceType (String) - granite/ui/components/foundation/form/select

65. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items/column/items.

66. Right click and select Create, Create Node.

67. Enter the following values:

  • Name: Headingtext
  • Type: nt:unstructured

68. Add the following properties to this node.

  • emptyText (String) - place
  • fieldDescription (String) - Enter Copyright Text
  • fieldLabel (String) - Heading Text
  • name (String) - ./name
  • sling:resourceType (String) - granite/ui/components/foundation/form/textfield

69. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items/column/items.

70. Right click and select Create, Create Node.

71. Enter the following values:

  • Name: headingSize
  • Type: nt:unstructured

72. Add the following properties to this node.

  • fieldDescription (String) - Enter Copyright Text
  • fieldLabel (String) - Heading Size
  • name (String) -./fontsize
  • sling:resourceType (String) - granite/ui/components/foundation/form/select

 

73. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items/column/items.

74. Right click and select Create, Create Node.

75. Enter the following values:

  • Name: description
  • Type: nt:unstructured

76. Add the following properties to this node.

  • emptyText (String) - Description
  • fieldDescription (String) - Enter Copyright Text
  • fieldLabel (String) - Description Text
  • name (String) - ./description
  • sling:resourceType (String) - granite/ui/components/foundation/form/textarea

 

77. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items/column/items.

78. Right click and select Create, Create Node.

79. Enter the following values:

  • Name: buttonText
  • Type: nt:unstructured

80. Add the following properties to this node.

  • fieldLabel (String) - Button Text 
  • name (String) - ./buttontext
  • sling:resourceType (String) - granite/ui/components/foundation/form/textfield

81. Click on the following node: /apps/Banner64/components/content/bannerComponent/cq:dialog/content/items/column/items/fieldset/items/column/items.

82. Right click and select Create, Create Node.

83. Enter the following values:

  • Name: buttonpath
  • Type: nt:unstructured

84. Add the following properties to this node.

  • fieldLabel (String) - Path
  • name (String) - ./hreflink
  • sling:resourceType (String) - granite/ui/components/foundation/form/pathbrowser

View the Banner Component within an Experience Manager page

To access the component, enter the following URL:

http://localhost:4502/editor.html/content/Banner64/en.html (assuming your installed the package)

Drag the Banner component onto a new page and fill in the dialog values. 

pic11
The Banner component without the dialog values set

The following video shows the HTL component.

Responsive Banner

Responsive Banner
Responsive Banner

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