Author Archive: sbhaskar

Summary: The first step of developing templates in AEM

This post provides a summary of what you leant in the previous posts.

Before going to the next step, creating components, let us first take a quick recap of all that we learned so far.

AEM users generally belong to one of the following roles:

  • Authors: create web pages. They use templates which provides the layout of the pages; they use components to add information to be displayed on the pages.
  • Developers: create templates and components based on the various requirements of the organization.

We then learned the following web consoles:

  • SiteAdmin: http://localhost:4502/siteadmin : Used by authors to create web pages.
  • CRXDELite: http://localhost:4502/crx/de : Used by developers to explore CRX repository (Oak repository).  Used to create template and components.
  • Package Manager: http://localhost:4502/crx/packmgr/ : Used by developers to share the codes they develop.

Following are the default folders we should be aware of:

  • content  : All pages authors create go here.
  • app : Developers create their company pages here.
  • etc/design : Developers store the design pages.

Inside the app folder, developers can create their company folder. Inside the company folder, the folder for components and templates are placed.

Create template inside the templates folder. A template has resourceType property which points to a components inside the components folder.  This components is called a page component, because it’s used to create a layout of the page. It has a resourceSuperType property which points to a page components inside libs/foundation/components/page. You inherit this page component, while overriding only the body.html. This is an important concept. I suggest you revisit my blog post on it.

We create the body.html in HTML format, because we want to use Sightly, which is much simpler than JSP. We pasted the HTML content; We added the data-sly-resource tag to include parsys component to a web page. The Parsys component helps to drag and drop components while authoring the web page. We placed the css and inside etc/design folder. We added the design using the page property.

Authors need to go to the Design mode and add the required components to drag and drop to the web pages.

We are ready to go to the next phase – Creating components. If you have not yet downloaded and installed the packages, please do so. See you soon.

AEM Developers: Applying a design to the AEM Sightly template

In this session, you will learn about adding a design to the template. You will use Sightly, because it’s HTML5 and very easy to use.

This is in continuation of my previous blog posts. As usual, I have provided the video and transcripts below. Video can be watched in the Full screen mode. The sample design and package are in my GitHub repository. Let me know what you think.

Let us take a sample design. Assume that following is what your designer came up with.

design

Now, we need to update the AEM template, so that authors will be able to create pages that look similar to this. You can see some sample texts in the design. The sample text is what authors add in their pages.

For creating any design, you should have a CSS file. Let us see the CSS file first. It’s there in the assets/css location.

First step is to get this CSS in CRX repository (Oak repository). In this case, we have only one file to upload. We can upload it using the CRXDELite itself. In real-time, you may have lots of files to upload to CRX repository. There are many ways to do it. We will see them later.

  1. Go to http://localhost:4502/miscadmin.
    This is a new web console for you. You generally use it for creating pages for designs.
  2. Now go to Designs.
  3. Create a page AEM Company.
  4. Go to CRXDE Lite.
    The page you created is available under the designs folder.
  5. Go to designs > aem-company.
  6. Create an empty file static.css.
    Note that the css name should be static.css.
  7. Expand the file node that you created.
  8. Double-click jcr:data property.
  9. Browse to the CSS location and select it.
  10. Click OK.
    Note that static.css is updated with the css that your designer prepared.
  11. Go to the template we created earlier.
  12. Open body.html.
  13. Update it with the html pages with the html page that your designer provided.
  14. Remove the CSS link. (Assigning the CSS to a page is done at a later stage.)

This is the beauty of Sightly. In earlier versions of AEM, you had to convert the design into JSP, which could be time consuming. Adobe also provides a Brackets extension – a tool for designers. This tool allows designers to work directly with AEM templates. We will explore it later.

  1. Now open the Site Admin.
  2. Under AEM Company, create a new page with name home.
  3. Open the page, the page appears with the sample texts.
    Ideally, that should be removed from the sample page. It’s for authors to fill.
    We have seen how to do it earlier. You need to provide the parsys component for author to add component.
  4. Let us do it in the template.
  5. Remove the sample texts by adding the parsys component.
    <div data-sly-resource="${'content' @ resourceType='wcm/foundation/components/parsys'}"></div>
  6. Remove the sample text for the side content using iparsys.
    <div data-sly-resource="${'side-content' @ resourceType='wcm/foundation/components/iparsys'}"></div>
  7. Note that I changed the name to side-content. This is a mistake that I made in the video.
    The iparsys will not appear propery if you don’t change the name.
  8. Now open the page.

Enabling components in the Components tab

In the last session, we have added a space in the template that allows us to drag and drop a component to the web page. One of the shortcomings in the template was that it didn’t
have any components in the Components tab. In this session, we will add components to the Components tab.

  1. Open the web page we created.
  2. Click the Page Information icon and select Classic UI.
    The same page appears with a different look and feel.
    It’s called Classic UI. Classic UI is specifically designed for viewing in Desktops.
    (The UI you were using is designed for Touch Optimized devices.)
  3. From the sidekick, click the Design tab.
  4. Click Edit from the Design of Content.
    edit-design-par
    You can see various categories of components.
    select-component-category
  5. Select a category or go inside the category and select specific components.
  6. Open the page again and go to the Components tab.
    You will see all the components listed.
  7. Drag and drop the component to the web page and start editing.

Happy editing.

In the next session, we will update the template with a design.

Adding the Parsys component to template

In this session, let us try to modify the template we created earlier. We will add a parsys component in the template to provide a space in the web page to drag and drop components.

Let us once again see how a page created using this template looks like.

  1. Log into to SiteAdmin. (http://localhost:4502/siteadmin)
  2. Double-click AEM Company page that you created. (If you have not created it, download the package that I provided in the previous session. And, then install it.)

The page appears with the text we entered in the template. There are three issues associated with this page:

  •  There is no place where you can drag and drop a component. (If you are not really able to make out that, I suggest you to visit my previous post. You could also open one of the pages from the sample websites to compare.)
  • The Component tab doesn’t display any components.
  • The template is not associated with any design. (Our page is really blank. It doesn’t have anything like header, footer, and so on.)

Let us solve these issues one-by-one. First, we will provide a place in the web page to add components.

  1. Go to CRXDE Lite. (http://localhost:4504/crx/de)
  2. Open the template’s rendering script. (/apps/aem-company/components/homepage/body.html)
  3. Add the following code:
    <div data-sly-resource=”${‘content’ @ resourceType=’wcm/foundation/components/parsys’}”></div>

This is a Sightly code. data-sly-resource is a tag to specify the component that you need to add to the page. It has a resourceType parameter that points to a parsys component. You would had noticed it points to a location where we saw a page component, which we inherited while creating a template. Note that this is the standard procedure to provide a location to add components in a template.

Now refresh the web page. Notice that now it provides you with a space where you can add components.

parsys

I have provided a new package in GitHub. (TemplateWithParsys.zip) Download and use it if you want to.

Summary: Use the parsys component to add space for addition or deletion of components in a web page. You don’t need to create a parsys component. Always reuse the component that exists.

Summary – Creating templates and using packages

In this session, let us summarize what we learned in the previous session: Create the  first template. We created a template in three steps:

  • Step 1: Created the company folder inside apps. Created a folder for components and templates.
  • Step 2: Created a template inside the templates folder. Provided allowed paths as /content(/.*)?. And, we provided resourseType as aem-company/components/homepage. This was a component that didn’t exist at that time.
    resourceType
  • Step 3: We created a homepage component inside the components folder. This is the component that has the rendering script which decides the layout of the page. We named it as homepage, so that we can identify it as a page component (a component that decides the layout of the page, not the component you drag and drop to a web page.) We specified resourceSuperType of this component as wcm/foundation/components/page. Our intention was to inherit the page component. This is a must to get various functionalities in the webpage that authors create. We renamed the default script of component as body.html, so that we override only body.html that existed in wcm/foundation/components/page. Rest of the scripts we inherited.
    resourceSuperType1

This is the standard process to create  a template. I have created a package (FirstTemplate.zip) and shared in my GutHub account. Feel free to download, install, and experiment with it. You need to log into PackageManager to install a package. Packages in AEM helps you to share codes across AEM instances.

  1. Download the package from GitHub. Use FirstTemplate.zip.
  2. Log into PackageManager as admin/admin. (http://localhost:4502/crx/packmgr/index.jsp)
  3. Select Upload Package.
  4. Locate the package you downloaded. Click OK.
  5. All we have done in the previous session will be replicated to your AEM instance.

Create the first AEM template

In the last session, we have explored templates using CRXDE Lite. If you have not yet gone through the last session, go through it.  In this session, we will create a sample template using CRXDE Lite. Let us first get into the shoes of authors to see where exactly authors use a template in their content creation workflow.

  1. Open SiteAdmin. http://localhost:4502/siteadmin
  2. Log in with admin/admin credentials.
  3. In the left pane, go to Geometrixx Demo Site > English.
  4. From the right pane, select New > New Page.
    You see the Title and Name text boxes. (Title appears in the web page and Name becomes the URL.

What you see underneath, namely Geometrixx Content Page, Geometrixx Home Page, Geometrixx Form, are templates. They define the layout of your page.
In that sense, choosing the right template is a fundamental part of content creation.

  1. Now log into CRXDE Lite.
  2. Go to the Apps folder. We have seen earlier that apps is the folder where we create templates and components.
  3. Inside apps, create a new folder.
  4. Right-click apps and select Create Folder.
  5. Type aem-company. (This is our sample company.)
  6. After creating the company, click Save All to save the company. (Whenever you create a node, folder, or property, you need to save explicitly in CRXDE Lite.)
  7. In the similar way, inside aem-company, create two more folders: components and templates.

Now log into CRXDE Lite and create the first template.

  1. Now, right-click templates and select Create Template.
  2. Enter the following details:
  • Label: homepage
  • Title: AEM Company Home Page
  • Description: AEM Company’s Home Page Template
  • Recourse Type: aem-company/components/homepage
    This is the sling:resourseType property. We have seen that, it points to the rendering script. Right now, we have pointed it to a component that doesn’t exit. We will create that script shortly.
  • Ranking: You could leave it for the time being. It represents the order in which templates should appear.
  1. Click Next and enter Allowed Paths as /content(/.*)?. Means the template will apear in the content folder where all pages exist.
  2. Click Next till you see the Finish button.
    (We will learn about these properties at a later stage.)

Now, let us create the rendering script. We create the rendering script as a part of the component. We have already seen that, a component displays a specific information in a specific format. In this case, the component that we are going create, provides the layout of the page. It’s not a component that you can drag and drop to a page. We will name the component as homepage, so that we can identify it as a page component – or a component provides the layout of a page.

  1. Right-click the components folder and select Create > Create Component.
  2. Enter the following details.
  • Label: homepage
  •  Title: AEM Company Home Page Component
  • Description: AEM Company’s Home Page Component
  • ResourceSuperType: wcm/foundation/components/pageThis property decides the component from where you want to inherit properties that decide your page’s behavior.
    You have seen that the pages authors create have a sidekick, assets tab, and so on. We have pointed this to a page component that exists.
    Group: AEM Company

Note that, homepage component is created. It also adds a default rendering script: homepage.jsp. I have mentioned earlier that we used to create components using JSPs before. That’s the reason for the JSP extension. In this session, we will create the template using Sightly, because it’s HTML and easy to use.

Just rename the homepage.jsp to body.html. This is a very important step. The SuperType property points to wcm/foundation/components/page. Though we have not explicitly mentioned, this component exists in the libs folder. Let us locate it. Navigate to libs > wcm > foundation > components > page.

By providing this as the SuperType, we are inheriting the scripts the component has. Go to the page.html which is the rendering script. This script includes two pages: head.html and body.html. By renaming the homepage component’s rendering script’s name to body.html, we are overwriting the body.html. At the same time, we will inherit head.html. (I have explained in the simplest possible way. Let us have a detailed discussion about it later.)

Open the aem-company’s body.html and add some text. Now, go to siteadmin, create a new page. You will see the template you created. Create a page – AEM Company. Open the page and you will see the text you entered. We will modify the template further in the coming sessions.

Introduction to AEM developers

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.

AEM Authors, 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.

Explore the 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.

Starting AEM

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

    Don’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.