Article summary

Summary

Discusses how to create a custom HTL Grid Layout component. An AEM author can set various options, such as the number of columns, by using the component's dialog. This article shows use of Sling Models with HTL components. 

HTL is the AEM template language that can be used to replace use of JSP when developing an AEM component. HTL helps you to separate your design from your application logic. For more information, see Introduction to the HTML Template Language.

Thank you Veena Vikraman for contributing code used in this community article. 

Thank you Ratna Kumar Kotla, and Prince Shivhare, top AEM community members, for testing this article to ensure it works.

Digital Marketing Solution(s) Adobe Experience Manager 6.3
Audience Developer
Required Skills Java, CSS, Sling Models 
Version 6.3

Install the Responsive Grid package

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 Grid layout component that lets an author set various options, such as the width of the columns. 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/grid-aem/en.html (assuming you deploy on author).

Download

Note:

The Grid layout component uses Bootstrap within AEM. For more information about creating Responsive components by using this library, see this session of Ask the AEM Community Experts: Building responsive layouts using Bootstrap and Angular JS

Introduction

You can develop a custom Adobe Experience Manager (AEM) Touch UI grid component to address your business requirements. An AEM grid control component lets an AEM author split the content in the main panel of the web-page into multiple columns. Using a component dialog, an author defines the number of columns required and then create, delete, or move content within each of the columns.

client
A custom Experience Manager Grid component

Using a custom grid control, an AEM author can specify different width options by using a dialog, as shown in the following illustration.

dialog
A dialog that belongs to the Grid component

This grid component uses Bootstrap. See http://getbootstrap.com/.

This grid component illustrates how to use HTL and Sling Models. That is, this component uses Java logic that uses Sling Models. For example, this article shows you how to inject component dialog values into a Java data member using the @Inject annotation. 

Note:

For more information about Sling Models, see Apache Sling - Sling Models

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 11 archetype project

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

3. When prompted, specify the following information:

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

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

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

After you import the project into Eclipse, create these Java files. 

  • TwoColumnVariant - a Java class that uses a Sling Model that is responsible for a two column grid component. 
  • ColumnControl - a Java class that uses a Sling Model that is responsible for a multi column grid control 
  • Columns - a Java class that represents columns for the two Column Component. Contains information like colSpan value for both the column in desktop and tablet view. 

Place these Java classes in the com.community.grid.core.models package.

TwoColumnVariant class

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

@Model(adaptables = Resource.class)

The next thing to notice is the data member named desktopColumns. This uses the @Inject annotation. What is happening here is the value that the AEM author enters into the AEM component dialog field named ./desktopColumns is injected into this data member. 

@Inject @Optional
public String desktopColumns;

This also appies to the data member named tabletColumns. This data members are used in the Java logic to constuct the layout that is made possible by the Bootstrap library. 

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 an ArrayList is being constructed. Each element in the collection object is a Column object. This ArrayList is used in the frond end of the HTL component. 

The following Java code represents the TwoColumnVariant class. 

 

package com.community.grid.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 TwoColumnVariant {

	private final Logger LOG = LoggerFactory.getLogger(getClass());

	@Inject @Optional
	public String desktopColumns;

	@Inject @Optional
	public String tabletColumns;

	private List<Columns> col;

	@PostConstruct
	protected void init() {
		LOG.info("Column Control  **** INIT ***");
		col = new ArrayList<Columns>();
		
		if(desktopColumns != null || tabletColumns != null){
			String[] desktopColVals = desktopColumns.split(",");
			String[] tabletColVals = tabletColumns.split(",");
			int[] mdVal = setVals(desktopColVals);
			int[] smVal = setVals(tabletColVals);
			
				Columns item = new Columns();
				Map<String, String> clssAttr1 = new HashMap<String, String>();
				Map<String, String> clssAttr2 = new HashMap<String, String>();
				if (desktopColumns.equals(tabletColumns)) {
					clssAttr1.put("class", "contentdiv col-sm-" + smVal[0]);
					clssAttr2.put("class", "asidediv col-sm-" + smVal[1]);
				} else {
					clssAttr1.put("class", "contentdiv col-sm-" + smVal[0] + " col-md-" + mdVal[0]);
					clssAttr2.put("class", "asidediv col-sm-" + smVal[1] + " col-md-" + mdVal[1]);
				}
				item.setClssAttr1(clssAttr1);
				item.setClssAttr2(clssAttr2);
				col.add(item);
			
		}
		

		setCol(col);
	}

	private int[] setVals(String[] colVals) {
		int[] desktopCols = new int[2];
		int i = 0;
		for(String s : colVals){
		desktopCols[i] = Integer.parseInt(s);
		i++;
		}
		return desktopCols;
	}

	public List<Columns> getCol() {
		return col;
	}

	public void setCol(List<Columns> col) {
		this.col = col;
	}

}

ColumnControl class

The ColumnControl class is similiar to the TwoColumnVariant class. It is using an ArrayList to setup styles for the Grid component using the dialog as input. It has the same data members as the TwoColumnVariant class, where its values are injected from the component dialog. 

The following Java code represents the ColumnControl class.

package com.community.grid.core.models;

import java.util.ArrayList;
import java.util.List;

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

	private final Logger LOG = LoggerFactory.getLogger(getClass());

	
	//inject dialoig values
	@Inject @Optional
	public String desktopColumns;

	
	//inject dialoig values
	@Inject @Optional
	public String tabletColumns;

	private List<Columns> col;

	@PostConstruct
	protected void init() {
		LOG.info("Column Control  **** INIT ***");
		col = new ArrayList<Columns>();
		
		if(desktopColumns != null || tabletColumns != null){
			int deskTopCols = Integer.parseInt(desktopColumns);
			int tabCols = Integer.parseInt(tabletColumns);
			LOG.error("Column Control **** Deswktop cols ***" + deskTopCols);
			LOG.error("Column Control **Tablet Cols **** ***" + tabCols);
			int mdVal = 12 / deskTopCols;
			int smVal = 12 / tabCols;
			LOG.error("FooterGlobal **** smval ***" + smVal);
			for (int i = 0; i < deskTopCols; i++) {
				Columns item = new Columns();
				item.setCount(i);
				item.setDeskVal(mdVal);
				item.setTabVal(smVal);
				LOG.error("Column Control **" + item.toString());
				col.add(item);
			}
		}
		setCol(col);
	}

	public List<Columns> getCol() {
		return col;
	}

	public void setCol(List<Columns> col) {
		this.col = col;
	}

}

Column class

The Column class is a POJO class that stored values used in the Bootstrap Grid component. The following class represents this class.

package com.community.grid.core.models;

import java.util.Map;

/**
 * Columns a generic bean class for twoColumn Component,
 * Contains information like colSpan value for both the column in desktop and tablet view.
 * 
 * @author Cognizant
 *
 */
public class Columns {
	private int count;
	private int val;
	private int deskVal;
	private int tabVal;
	private Map<String, String> clssAttr1;
	private Map<String, String> clssAttr2;
	
	/**
	 * Get the colSpan value in Desktop view
	 * 
	 * @return <int>deskVal
	 */  
	public int getDeskVal() {
		return deskVal;
	}
	/**
	 * Constructor will set the colSpan value in Desktop view
	 * @param deskVal
	 */
	public void setDeskVal(int deskVal) {
		this.deskVal = deskVal;
	}
	
	/**
	 * Get the colSpan value in tablet view
	 * 
	 * @return <int>tabVal
	 */  
	public int getTabVal() {
		return tabVal;
	}
	/**
	 * Constructor will set the colSpan value in tablet view
	 * @param tabVal
	 */
	public void setTabVal(int tabVal) {
		this.tabVal = tabVal;
	}
	/**
	 * Get the count of column
	 * 
	 * @return <int>count
	 */  
	public int getCount() {
		return count;
	}
	/**
	 * Constructor will set the count of column.
	 * @param count
	 */
	public void setCount(int count) {
		this.count = count;
	}
	/**
	 * Get the colSpan value 
	 * 
	 * @return <int>val
	 */  
	public int getVal() {
		return val;
	}
	/**
	 * Constructor will set colSpan value 
	 * @param val
	 */
	public void setVal(int val) {
		this.val = val;
	}
	/**
	 * Get the colSpan value of firstcolumn
	 * 
	 * @return <Map>clssAttr1
	 */  
	public Map<String, String> getClssAttr1() {
		return clssAttr1;
	}
	/**
	 * Constructor will set  the colSpan value of firstcolumn
	 * @param clssAttr1
	 */
	public void setClssAttr1(Map<String, String> clssAttr1) {
		this.clssAttr1 = clssAttr1;
	}
	/**
	 * Get the colSpan value of secondcolumn
	 * 
	 * @return <Map>clssAttr2
	 */  
	public Map<String, String> getClssAttr2() {
		return clssAttr2;
	}
	/**
	 * Constructor will set  the colSpan value of secondcolumn
	 * @param clssAttr2
	 */
	public void setClssAttr2(Map<String, String> clssAttr2) {
		this.clssAttr2 = clssAttr2;
	}

}

Modify the Maven POM file

Add the following POM dependency to the POM file located at C:\AdobeCQ\grid-aem.

<dependency>
               <groupId>com.adobe.aem</groupId>
               <artifactId>uber-jar</artifactId>
               <version>6.3.0</version>
               <!-- for AEM6.1 use this version     : <version>6.1.0</version> -->
               <!-- for AEM6.1 SP1 use this version : <version>6.1.0-SP1-B0001</version> -->
               <!-- for AEM6.1 SP2 use this version : <version>6.1.0-SP2</version> -->
               <!-- for AEM6.2 use this version     : <version>6.2.0</version> -->
               <classifier>obfuscated-apis</classifier>
               <scope>provided</scope>
           </dependency>
             
           <dependency>
               <groupId>org.apache.geronimo.specs</groupId>
               <artifactId>geronimo-atinject_1.0_spec</artifactId>
               <version>1.0</version>
               <scope>provided</scope>
           </dependency>

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\grid-aem\core.

The following code represents this POM file.

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

    <dependencies>
        <!-- OSGi Dependencies -->
        <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>uber-jar</artifactId>
            <classifier>obfuscated-apis</classifier>
        </dependency>
   
        <dependency>
            <groupId>org.apache.geronimo.specs</groupId>
            <artifactId>geronimo-atinject_1.0_spec</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>osgi.core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>osgi.cmpn</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>osgi.annotation</artifactId>
        </dependency>
        <!-- Other Dependencies -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.jcr</groupId>
            <artifactId>jcr</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
        </dependency>
        <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>uber-jar</artifactId>
            <classifier>apis</classifier>
        </dependency>
        <dependency>
            <groupId>org.apache.sling</groupId>
            <artifactId>org.apache.sling.models.api</artifactId>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mockito</groupId>
            <artifactId>mockito-core</artifactId>
        </dependency>
        <dependency>
            <groupId>junit-addons</groupId>
            <artifactId>junit-addons</artifactId>
        </dependency>
    </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\grid-aem.
  2. Run the following maven command: mvn -PautoInstallPackage install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\grid-aem\core\target. The file name of the OSGi component is grid-aem.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.

 

felix
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 front end HTL grid components

Create two frond end components that represent the two grid components. 

crxde
Two components under /apps/grid-aem/components

The following list describes these files:

  • A - the multi-column component. 
  • B -the two column component where you can set the width of each column.

  The following illustration shows these components. 

grids
The two grid components created in this article

To create a HTL grid component, perform these tasks using CRXDE Lite:

1. Right click on /apps/grid-aem/components/content and then select Create,Folder. Name the folder layout. 

2. Right click on the Folder and then Create, Create Component

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

  • Label: The name of the component to create. Enter twovariantscolumn.
  • Title: The title that is assigned to the component. Enter twovariantscolumn.
    Description: The description that is assigned to the template. Enter two column component.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side rail or side kick where the component appears. Enter grid-aem. (This component is located under the grid-aem heading in the Touch UI side rail.)

4. Click Ok.

Note:

Repeat the same procedure and name the component colctrlcomp.

Develop the twovariantscolumn component

The twovariantscolumn component is a HTL component that uses the Bootstrap library for CSS styling and the Java Sling Model that you created eariler in this development article. The following HTL code represents this component. 

Note:

If you install the package at the start of this article, you do not have to manually create this component.However, it's important that you understand the concepts. 

<div data-sly-use.colControl="com.community.grid.core.models.TwoColumnVariant" data-sly-unwrap></div>


<div data-sly-test="${wcmmode.edit}" class="cq-placeholder cq-marker-start" data-emptytext="Start of Two Column Variants">
        <!--Start of ${colControl.col} Columns-->
    </div>

<div class="row">
	<div data-sly-list="${colControl.col}" data-sly-unwrap>

		<div data-sly-attribute="${item.clssAttr1}">
			<div data-sly-resource="${@ path='par_0', resourceType='foundation/components/parsys'}" data-sly-unwrap></div>
		</div>
		<div data-sly-attribute="${item.clssAttr2}">
			<div data-sly-resource="${@ path='par_1', resourceType='foundation/components/parsys'}" data-sly-unwrap></div>
		</div>
	</div>
</div>

<div data-sly-test="${wcmmode.edit}" class="cq-placeholder cq-marker-end" data-emptytext="End of Columns">
        <!--End of Columns-->
    </div>

The first thing to notice about this code is:

<div data-sly-use.colControl="com.community.grid.core.models.TwoColumnVariant" data-sly-unwrap></div>

In this example, data-sly-use.colControl references the Java class named TwoColumnVariant. (This class was developed earlier in this article). The TwoColumnVariant uses Sling Models.

These lines of code:

<div data-sly-list="${colControl.col}" data-sly-unwrap>

<div data-sly-attribute="${item.clssAttr1}">
<div data-sly-resource="${@ path='par_0', resourceType='foundation/components/parsys'}" data-sly-unwrap></div>
</div>
<div data-sly-attribute="${item.clssAttr2}">
<div data-sly-resource="${@ path='par_1', resourceType='foundation/components/parsys'}" data-sly-unwrap></div>
</div>
</div>

is how you handle a list in HTL. Notice this line of code: 

div data-sly-list="${colControl.col}" data-sly-unwrap>

this refereces the method in the TwoColumnVariant class named getCol(). This method returns a List object where each element is a Column object that defines the style that corresponds to the Bootstrap CSS style. 

The line of code:

${item.clssAttr1}

maps to the Column object's clssAttr1 data member that is a MAP that defines the Bootstrap CSS style. Likewise, ${item.clssAttr2} maps to the Column object's  clssAttr2 data member. 

Develop the colctrlcomp component

The colctrlcomp component is a multi-column grid component. An AEM author defines the number of columns in the components dialog. The following HTL code represents this component. 

<div
	data-sly-use.colControl="com.community.grid.core.models.ColumnControl"
	data-sly-unwrap></div>


<div data-sly-test="${wcmmode.edit}" class="cq-placeholder cq-marker-start" data-emptytext="Start of ${colControl.col.size} Columns">
        <!--Start of ${colControl.col} Columns-->
    </div>
<div class="row">
	<div data-sly-list="${colControl.col}" data-sly-unwrap>
		<sly data-sly-test.par="${'{0}{1}' @format=['par_',item.count]}" />
		<sly data-sly-test.desktop="${'{0}{1}' @format=['col-md-',item.deskVal]}" />
		<sly data-sly-test.tablet="${'{0}{1}' @format=['col-sm-',item.tabVal]}" />
            <div class="${desktop} ${tablet}">
			<div data-sly-resource="${@ path=par, resourceType='wcm/foundation/components/parsys'}" data-sly-unwrap></div>
		</div>
	</div>
</div>
<div data-sly-test="${wcmmode.edit}" class="cq-placeholder cq-marker-end" data-emptytext="End of Columns">
        <!--End of Columns-->
    </div>

The line of code: 

<div
data-sly-use.colControl="com.community.grid.core.models.ColumnControl"
data-sly-unwrap></div>
 

maps to the Java class named ColumnControl that uses Sling Models and you created earlier in this development article. The rest of the code works similiar to how twovariantscolumn works. 

 

Component dialogs

Both grid components have a dialog defined under the component node. The following illustration shows the dialog defined at /apps/grid-aem/components/content/layouts/twovariantscolumn.

dialognodes1
JCR nodes that define a dialog for the twovariantscolumn component

Likewise, the following illustration shows the JCR nodes for the colctrlcomp component. 

dialognodes2
JCR nodes for the colctrlcomp component

Note:

For information about using CRXDE lite to create a TOcuh UI component dialog, see this article Creating an Adobe Experience Manager 6.3 HTL component that uses the WCMUsePojo API

head.html file

In the headlibs.html file located here: 

/apps/grid-aem/components/structure/page/partials/headlibs.html

notice a refernece to the bootstrap clientlibs. 

<!--/* Include the site client libraries (loading only the CSS in the header, JS will be loaded in the footer) */-->
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.css @ categories='bootstrapsample.site'}" data-sly-unwrap/>
 

 

This line of code references the clientlib located here: 

/etc/designs/grid-aem/clientlib-site

This clientlibs contains CSS files from the Bootstrap library that defines the responsive layout for the grid component. These files were downloaded from the Bootstrap site using the URL at the beginning of this article. 

The following illustration shows the clientlib folder that contains the Bootstrap files.

bootstrapclientlib
An AEM Clientlibs that contains Bootstrap files

Footlibs file

In the headlibs.html file located here:

 /apps/grid-aem/components/structure/page/partials/footlibs.html

notice a refernece to the bootstrap clientlibs. 

<!--/* Include the site client libraries (loading only the JS in the footer, CSS was loaded in the header) */-->
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='bootstrapsample.site'}" data-sly-unwrap/>

<!--/* Include Adobe Dynamic Tag Management libraries for the footer */-->
<sly data-sly-resource="${@ resourceType='cq/cloudserviceconfigs/components/servicecomponents'}" data-sly-unwrap/>

Under /apps/AEM63App/components/structure, there are additional components. Notice the page component, as shown here.

page
Default files for the Page component

The page component is a HTL component that references the other files (under the partials folder) by using the sly data-sly-include statement.

<html lang="en">
    <head>
        <sly data-sly-include="partials/head.html" data-sly-unwrap/>
        <sly data-sly-include="partials/headlibs.html" data-sly-unwrap/>
    </head>
    <body class="page ${currentPage.template.name}">
        <sly data-sly-include="partials/main.html" data-sly-unwrap/>
        <sly data-sly-include="partials/footlibs.html" data-sly-unwrap/>
    </body>
</html>

For example, notice that the footlibs.html file is at the bottom. This represents the page's footer and also includes a reference to the clientlibs. The following code shows this file.

<!--/* Include the site client libraries (loading only the JS in the footer, CSS was loaded in the header) */-->
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='AEM62CSS.all'}" data-sly-unwrap/>
 
<!--/* Include Adobe Dynamic Tag Management libraries for the footer */-->
<sly data-sly-resource="${@ resourceType='cq/cloudserviceconfigs/components/servicecomponents'}" data-sly-unwrap/>

Running the default web page

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

http://localhost:4502/editor.html/content/grid-aem/en.html

Notice that this page displays a page with two grid components. Within each grid cell, you can drag and drop a component, as shown in the following illustration. 

client1
A component being dropped into a grid cell

The following illustration shows the AEM web page where an image component is set in the left side of the grid and a text component is set in the right cell. 

client2
Two AEM components set in the Grid component

View the Registered Sling Model

You can view the Sling Model to make sure it is successfully registered here: /system/console/adapters. The following illustration shows the Sling Model successfully registered. 

slingmodel
The Sling Model is successfully registered

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