Introduction to AEM developers, and their templates and components

In this post, we will see the very basic responsibilities of developers. Developers create templates and components.

Let us first take a recap: a template defines the layout of a web page. Authors select a specific template before they create a page. A component allows authors to display a specific information in a certain format. For example, a bulleted list is a component. An image is a component. We have seen that you can drag and drop an image to an Image component and it will get displayed in the page.

Authors use SiteAdmin as a tool to create web pages. Similarly, there is a web console that developers use a lot – CRXDE Lite. In one of the previous posts, I have mentioned that the data in AEM is saved as Tar files. AEM uses Apache Oak for saving the data. These data is saved as nodes and properties. CRXDE Lite provides you with an interface where you can see these nodes and properties. It allows you to create and update the nodes and properties.

Let us start our exploration on CRXDE Lite: http://localhost:4502/crx/de
Log in as admin and admin as the credentials.

Let us first examine the web page that you created in the previous session. You created a web page – MyNewPage. In the left pane, move to the Content folder. Then navigate Geomtrixx > en.
You can see the web page you created there. Select the page and then select the jcr:content node. The properties associated with the node gets displayed in the right pane.
You can see a cq:template proptery which provides the location of the template you used. /apps/geometrixx/templates/contentpage
Scroll down to see the jcr:title property – the title of your page. Now select the par node. It represents a node inside which you can add other components. Inside this node, you will see the Text component you added.

In short, the pages an author creates goes to the Content folder. Normally, it’s created through SiteAdmin. Developers won’t play around with these pages.

Developers create templates and components. Where are they hidden? Go to the apps folder. This is the folder where you create templates and components associated with your project. Then go to Geometrixx. You will see various folders: components, config, install, src, and templates. We will learn more about components and templates in this session. Go inside the template folder. You will see all the templates associated Geometrixx site. These were the templates you saw while you were creating a new web page. Select the contentpage node – The template you used for creating a new page. Note that the jcr:primaryType property is cq:Template. It also got a Tile and Description properties. Now select jcr:content property. It has a sling:resourceType property. It points to geometrixx/components/contentpage.  It means that the node pointed, basically a script, provides the layout to render the content.

Let us see how this script looks like. Go to components and select contentpage. You will see a content.jsp. This is the script using which the basic layout is created. All of the existing templates are created using JSP. In AEM’s context, it’s called a templating language. In AEM 6.0 release, Adode introduced a new templating language called Sightly. Sightly is HTML 5 and is very easy to use.

Let us wind up this session here. In the next session, we will create a template using Sightly.
To give you a summary:

  • CRXDE Lite is developers web console: http://localhost:4502/crx/de
  • content is the folder where all author-generated pages exist.
  • apps is the folder where you create templates and componenets associated with your project.
  • cq:template is a property associated with all templates.
  • sling:resourceType property of a template points the script that is used to render the layout.
  • JSP is the templating language in which all templates are written.
  • AEM 6.0 provides a new templating language – Sightly.

Adobe Experience Manager authors, and thier templates, and components

In this section, you will see what exactly authors do with AEM. This session also gives an overview of templates and components. I thought it would be a good idea to record a video while I prepare the content. I used Adobe Presenter Video Creator. This is the first time I am using Adobe Presenter and it’s cool.

If you are keen, you would be able to watch the video in the Full Screen mode. I think my videos will improve as I progress in setting a stage for AEM learning.  :)

 

Now that you have installed AEM. Let us start exploring the default web interface that came up. Log in using admin and admin as user ID and password respectively. In the left panel, you will see the following:

  • Projects: All existing projects.
  • Sites: Sample sites that are reference implementations of your projects.
  • Apps: The apps related to your site.
  • Publication: All publications associated with your sites.
  • Forms: LiveCycle Forms.
  • Assets: Digital assets such as images, PDFs, docs, and so on.
  • Communities: Your communities.
  • Commerce: Catalogs, products, and so on. You can use this as a reference site if you need to implement a Commerce portal.
  • Tools: Various other consoles that you need for development.

In most of the projects using AEM, you will (eventually) develop a website. In most cases, you will have an existing website and you need to migrate to AEM. Let us first see one of the reference implementations in AEM. As I mentioned earlier, there are a couple of reference implementations in AEM. They are called sample sites. Click on Sites and you will see the following reference implementations:

  • Geometrixx Demo Site: It’s a typical website.
  • Geometrixx Mobile Site: This site is designed for mobile devices. The content used for Geometrixx Demo site is repurposed for this site.
  • Geomotrixx Outdoors site: It’s a commerce implementation.

Let us explore Geometrixx Demo Site.

  1. Double-click Geometrixx Demo Site.
    You will see different language codes. These codes represent the same website in those languages.
  2. Move the cursor over English and select Edit.
    The page is opened in a new browser window.

The page is in the Edit mode now. It means that you can update the page.

The pane you see in the left is the Asset pane. You can drag and drop your digital assets to your page.

The small pane you see is fondly called the side kick. What you see inside the sidekick are called components. You can drag and drop components to your page. For example, the Image component. Assume that you want to add an image to the page. First drag and drop the Image component to the page. Double-click the image component. It opens a dialog box, from the Assets pane, drag and drop an image.

The Activity that you performed now is an Author activity. Authors in your organization create or update content. Now let us try to create a new web page. To do that, let me take you to a different console – SiteAdmin.

  1. Type the URL: Http://localhost:4502/siteadmin
  2. Select Geometrixx Demo Site > English. This is the location where you want to create a page. Click New > New Page. Give it a name.
  3. Also, select a template. A template defines the basic layout of your web page.
  4. After creating the page, double-click it to open.
    Observe that the page is not really blank. It has provided you with a basic layout. On top, it has provided you with a site icon, search bar, and a navigation bar.

Similarly, at bottom it has given you a couple of links. On your right, you are provided with a small pod with some content. You would have noticed that, these are common to all the pages you create based on a template. Whatever, you saw in the page is content displayed in a specific manner. And, they are called components. Now you have the page. You need to fill the page with information. From the component pane, drag and drop a Text component to the page. Click to select and click to edit.

Type some content. You can continue filling the content by adding different components. For example, image, table, and so on. As I mentioned earlier, this is an Author’s job. And, you would have assumed by now – a developer creates the template and components that an author uses. Site Admin is a web interface Author uses. Similarly, there are some interfaces developer uses, which you will see in the next session.

I hope you are now able to differentiate two main roles in AEM.

To take a recap:

We saw a web interface that authors use frequently: Site Admin. That’s where an author create or update content.

Seeing is believing: Explore the AEM installation directory

Now, we have installed AEM and started it. Before we log into AEM, let us see what exactly it created in your system. Move to the installation directory – that’s the directory to where you copied the QuickStart jar file and the license file.

You will notice that it created a folder, crx-quickstart. Whenever you start AEM for the first time, it creates the QuickStart folder. It saves all the required data inside it. After you make changes, it saves the changes there. Since you have started AEM once, it retains the folder for subsequent restarts. You will notice that whenever you start AEM for the first time, it takes a little longer time to start, because it needs to create the QuickStart folder.

Move into the QuickStart folder. Let us not get into a lot of technical details for the time being.

directory-structure

Following are the two folders that I would like you to familiarize with:

  •  Logs: The logs files. There is an error.log file inside it. We will use error.log file frequently to see what went wrong with AEM if it misbehaves.
  • repository: Navigate inside it. Go inside segmentstore. You will see a lot of tar files.
    tar-files

AEM stores that data in this format. This is the default configuration. You can also save the data in MongoDB. We will see that later.  There are more folders and files. We will explore them in detail later.

Let us start Adobe Experience Manager

Let us see how you install and start AEM. You first need to get an AEM installation file, which is fondly called as the QuickStart file. Adobe doesn’t provide you a trail version of the same. One of the ways to get an installation file is to attend Adobe Training Services class room session. Adobe distributes the installation file in the class room trainings.

AEM installation file is a jar file. It will accompany with a license file – license.properties. The License file contains the license information that you need to run AEM. If you are using AEM in a production environment, that is for hosting your content in real-time, you need to pay the license fee and obtain the license.

AEM is licensed based on various modules it offers: Sites, Apps, Forms, Community, and Assets.

  • Sites: Allows you to create websites.
  • Apps: Allows you to create apps used for hand-held devices.
  • Forms: Allows you to manage LiveCycle Forms.
  • Assets: Allows you to manage digital assets, such as images, icons, pdfs, and so on.
  • Community: Don’t ask me what it is used for. :)

The license file that you obtained for training purpose allows you to use all these functionalities.

Let us install AEM. Wait a second. You need to have Java 6, specifically JRE 6, installed in your machine. Obtain JRE from the Oracle website at free of cost.

  1. Copy QuickStart jar file and license file to a folder named AEM.
  2. Rename the QuickStart jar file as follows: aem-author-4502
    (I don’t remember the original name of the QuickStart file.)
    When you install AEM, it takes some key variables from the file name itself. In this case, the first string aem represents AEM itself.Next one, author, represents that it’s an author instance. (I hope I am not adding a lot of jargons.) It means that you use it for authoring your content. This instance mostly used by people in your organization to add, edit, and delete content. People outside your organization doesn’t take care of these tasks. They simply view the content.The third part 4502 indicates that AEM will run on that port number. That means if some other process is already using that port, AEM quits. (Drobo uses that port by default.)
  3. Double-click the file you created. It will bring up a pop-up window as shown below.
    srat-aem
    Soon, it will change as follows. AEM is started.  (Now, don’t ask me how to stop AEM.)
    started-aemDon’t close this window. If you happen to close this window, you need to kill AEM from the Task Manager to stop it. Once AEM is up, your default browser opens up and shows you the login screen. Log in using admin as user name and admin as password. You will see the Project management page after a successful login.

    aem_welcome

     

    We will explore various pages in a short while – after we have a quick look at the folder where you copied the QuickStart file.

Why do you need Adobe Experience Manager?

iconAdobe Experience Manager (AEM) manages the user experience of your website (content) across various channels. In a globalized world, you need to manage content across multiple websites in various languages. Your content is consumed using various devices – hand-held devices, such as mobile phones and tablets, PCs, and so on. This results in a scenario that you have plenty of user experiences to manage. You need to provide optimal experience in both iPhones and Android phones. And, the same is applicable across thousands of other devices. AEM helps you to achieve this goal effectively and effortlessly.

AEM is one of the solutions in Adobe’s Marketing Cloud ecosystem. All solutions in Marketing Cloud complement each other and provide you with key solutions to effectively manage user experiences. The following diagram represents various solutions in Adobe Marketing Cloud: (Taken from Adobe’s website.)

marketing_cloud

Let me cite a few examples for how this ecosystem helps you to provide better user experience.

I am sure all of us would have visited online shopping sites many times. Which is the most commonly used feature in an online shopping site, such as Amazon? It definitely is the Search feature. You normally won’t traverse through menu options such as Men’s and then Boots,  …. and so on. You just search for the product you need. There can be thousands of users who do the same thing while you search for a product. For online shopping sites, the Search feature must be very efficient. Adobe Marketing Cloud provides you with a solution named Site Search. You can easily integrate Site Search with AEM. This capability indexes all your products and details, as Google indexes a website information. When a user searches for a product, the Site Search provides the search result and makes this operation extremely fast.

Similarly, tracking your users is very important to serve them better. You need to know the geographical areas they come from, the web pages they visit, and so on. AEM can be integrated with Adobe Analytics easily. This gives you a great reporting capability and statics about your user behavior.

Content personalization is another important aspect of your website. You should be able to customize your website based on your user profile. If your user is a male of a certain age group, provide the user with something he finds appealing. Change it accordingly if the user is a female of a certain age group. Adobe’s Marketing Cloud solution, Adobe Target, does it for you effortlessly.

Adobe Social (a capability in Marketing Cloud solution) helps you to integrate AEM with Social Media. Adobe Campaign allows you to manage digital campaign effortlessly. In short, AEM along with other Marketing Cloud solutions helps you to provide a great digital experience to your users. It indeed transforms your content into experiences that result in better customer reach, retention, and high ROI.

In the next post, you will see the underlying technologies on AEM.

Adobe Lightroom for Android

Adobe Lightroom for Android is available today.
For more details, see the official blog.

 

AEM Sightly Brackets Extension

You can install this extension on Brackets if you plan to use Sightly as the markup. The extension provides you with features such as syntax highlighting and code completion.

Brackets extension provides front-end developers an AEM templating tool with which they are familiar. The idea is to bring more front-end developers to AEM template designing. Use CRXDE Lite to create a basic structure of your project. Then create a package and download the package. Unzip the package and open it in Brackets. Make the changes; Brackets extension allows you to automatically sync with the Oak repository.

For more information, see Adobe’s documentation.

While creating templates for Touch-Optimized GUI

In AEM 6.0, most of the functionalities are accessible through Touch-Optimized UI. When you create a template using Sightly or JSP, before extending the page component, the Classic UI displays the content in a page created based on the template. Of course, the page is displayed without the sidekick and other functionalities.

 

This behavior, however, changes with Touch-Optimized UI. To appear page’s content in Touch-Optimized GUI, the page’s template should extend the page component using sling:ResourceSuperType . You can extend a Sightly or JSP page component to a template. It’s irrespective of the templating language (Sightly \ JSP).

Slightly, some Sightly

AEM 6.0 introduces Sightly – a new templating language. Sightly replaces JSP as the most preferred templating language for AEM. Sightly helps you to separate your design from your code. The intention is to bring more front-developers to AEM component development. By providing a demarcation between the design and the development departments, Adobe expects to reduce the go-to-market time for AEM development projects.

For more information on Sightly, visit Adobe documentation.

Sightly can used in three ways:

  • Pure HTML
  • HTML + server-side JavaScript
  • HTML + Java

In the following example, Sightly is used as pure HTML to display the name of a page:

Code in template

<h1>Page Title</h1>
<p>${currentPage.Title}</p>

The same example can be rewritten in Sighlty and JavaScript. This example doesn’t represent the best practice. However, it shows how to demarcate the logic using JavaScript:

Code in template

<div class="component-name" data-sly-use.component="component.js">
<h1>Page Title</h1>
${component.title}</div>
</div>

component.js

use(function() 
{
        return {
        title: currentPage.getTitle()
        };
});

The next example shows how the same logic is implemented using Sightly + Java combination:

Code in template

<div class="component-name" data-sly-use.component="Component">
<h1>Page Title</h1>
<p>${component.CurrentPageTitle}</p>
</div>

Component.java

package apps.your.directory.structure;
import com.adobe.cq.sightly.WCMUse;
import com.day.cq.wcm.api.Page;
public class Component extends WCMUse
{
private String CurrentPageTitle;

@Override
   public void activate() throws Exception 
   {
   final Page currentPage = getCurrentPage();
   CurrentPageTitle=currentPage.getTitle();
   }

   public String getCurrentPageTitle()
   {
   return CurrentPageTitle;
   }
}

Integrating Search&Promote with AEM

Search&Promote allows you to create an index of your site by crawling your site in a regular interval. It helps you to implement powerful search functionalities in your website. In AEM 5.6.1, there are some out-of-the-box Search&Promote components that make integration easy. Some of these components use hardcoded values that you may need to change in the component’s JSP page. You need to work with a Search&Promote consultant and understand the xml format, specifically the fieldnames, in which the results are provided.  Use the fieldnames in the JSP pages.

For example, if the fieldname for product description in the xml file is “desc,” rewrite the method in the Search Results component’s JSP page as:
r.get(“desc”)

Note: Search&Promote components are available at libs/cq/searchpromote/components.

Watch out AEM 6.0 release that is scheduled to be in May end. It has some cool integration workflows to avoid these workarounds.