Article summary

Summary

This development article walks you through an efficient path to create a new Experience Manager 6.3 project using Lazybones. This article covers the following tasks:

  • Create an Experience Manager project by using Lazybones.
  • Setup the project using the Eclipse plug-in.
  • How to use the Experience Manager Template Editor.
  • How to set policies for Templates and Components. 
  • How to create a Page based on the editable template in the Touch UI.  

A special thank you to Ranta 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, HTML, JavaScript
Version 6.3
Video Ask the AEM Community Experts

Prerequisites

To follow along with this article, you need the JDK version 1.8 and Eclipse NEON (Eclipse Java EE IDE for Web Developers) that you can download from here: https://www.eclipse.org/downloads/. Then download the installer.

Introduction

You can create an Adobe Experience Manager 6.3 project by using Lazybones, which is a templating language that you can use to setup an Experience Manager project. For more information, see Lazybones.

An overview of how an Experience Manager project is created

Setup Lazybones

Lazybones is installed using a two-step process. First, install sdkman, a Sofware Development Kit management system. Instructions for installing sdkman can be found at http://sdkman.io/install.html.

In a Terminal window, run these two commands:

  • curl -s "https://get.sdkman.io" | bash
  • source ~/.sdkman/bin/sdkman-init.sh

Once sdkman is installed, you can use it to install lazybones with the following command:

sdk install lazybones

And then open a new Terminal window.

Note:

Windows users can find a PowerShell version of sdkman at https://github.com/flofreud/posh-gvm. It might also be easier to download the Lazybones distribution, unzip it, and add it to your path. See https://github.com/pledbrook/lazybones#running-it.

Set up Eclipse to communicate with Experience Manager

Setup Eclipse Neon so you can interact with Experience Manager. 

Install the Eclipse Experience Manager plugin

Install the Experience Manager Eclipse Plugin by performing these tasks: 

1. With Eclipse open, select Install New Software from Help menu.

2. Click Add button.

3. In the Name field, enter AEM Developer Tools.

4. In the Location field, enter https://eclipse.adobe.com/aem/dev-tools/.

5. Click OK.

6. Check both the AEM and Sling checkboxes (or just push the Select All button).

7. Click the Next button.

8. On the Install Details dialog, click the Next button.

9. Accept the license terms and click the Finish button.

10. Restart Eclipse.
 

Configure Eclipse to communicate with Experience Manager

Perform these tasks: 

1. In Eclipse, click on the Servers view (Window, Show View, Servers).

Server view in Eclipse

2. Click the link to create a new server.

3. In the New Server dialog, make sure that Adobe Experience Manager is selected and click the Finish button.
 

Adobe Experience Manager in Eclipse

4. Once the Server is created, click on it.

5. Change the port number to 4502.

6. In the Install panel, select Install bundles via bundle upload. You will see the view as shown in this illustration. 

Setting up the server in Eclipse

7. Click File, Save.

8. Close the Adobe Experience Manager at Localhost tab.

9. Right click on the entry in the Servers view and select Start.
 

The Server view

10. Verify that the entry in the Servers view shows as Started.
 

Experience Manager Server is started

Create a Lazybones project

You can use Lazybones to create an Experience Manager project. Lazybones is a project creation tool that uses templates to create projects. Once created, you can import the project into Eclipse. 

To create an Experience Manager project by using Lazybones, perform these tasks:

1. Open another Terminal (on Windows, you can use a tool like Git Bash).

2. Navigate to the user root folder.

3. Enter the following command:

    lazybones create aem-multimodule-project my-project

4. Answer the questions with the default values  (enter return for all questions). 

5. Once the project is built successfully, you will see the following message. 

A successful message that the Lazybones project was created

Note:

For more information about creating the Lazybone project (including all the input values) for Experience Manager, see Create AEM Project Structure using Lazybones.

Import the Lazybones project into Eclipse

The next step is to import the project into Eclipse by performing the following tasks:  

1. Start Eclipse.

2. Open the File menu and select Import. In the Import type, select Existing Maven Projects (inside the Maven folder).

Maven option within Eclipse

3. Click the Next button. 

4. Click the Browse button and select the my-project folder (if you chose a different folder name when generating the project, select it instead).

The Lazybones project being imported into Eclipse

5. Click Finish. 

Once you successfully import the project into Eclipse, you can view the project, as shown in this illustration. 

Lazybones generated files

These projects serve different purposes:

  • example-project.ui.apps - contains configuration, server-side scripts, client-side scripts, and styling code (CSS). 
  • example-project.core - contains Java code which is deployed to AEM as an OSGi bundle.
  • my-project - acts as the container for the two other projects. 

 

Note:

Under the Sling source path, you may need to delete two error handler JSPs from Eclipse. 

Deploy the project to Experience Manager

From within the Eclipse development environment, you can deploy the project to Experience Manager. Before following this procedure, ensure that the Server is started in the Server view. 

To deploy the Lazybones generated project, perform these tasks: 

1. Select example-project in Eclipse Project Explorer.

The Lazybone project in Eclipse

2. Right click example-project and select Run As and then 2 Maven build

Running Maven build from within Eclipse

3. In the next dialog screen, configure Maven to build the project and deploy it to Experience Manager. Set the Goals field to install and then the profiles field to autoInstallPackage (One word), as shown below.

Configure Eclipse to deploy the Lazybone project to Experience Manager

4. Click Run. If everything occurs as expected, you will see the Eclipse log confirming that the build was succcessful, as shown in the following illustration. 

A log message confirming that the build was successful

Create an Experience Manager Template using the Template editor

The next step is to create an Experience Manager editable template by using the template editor. Perform these tasks: 

1. Make sure the correct nodes are under the JCR config path. 

2. Create an editable Template that is based on the Lazybones project.

3. Add structural components to the template.

4. Add a basic stylesheet to the template.

5. Use the layout tool in the Template Editor to define a 2-column layout.

Note:

To perform the tasks described in this section, you must successfully deploy the project to Experience Manager. 

Check the JCR Nodes under the Config path

Ensure that the node present at this location has child nodes that define the editable template: 

/conf/my-aem-project/settings/wcm/template-types

You do not want to see this node without child nodes, as shown here. 

The template-types node has no child nodes

If this node has no child nodes, then the editable template will not show up in the template view. Ensure that this node has child nodes, as shown in this illustration. 

The template-types has child nodes that define the editable template

Note:

To deploy this package, first you may have to un-install and delete this existing package: example-project.ui.apps-0.0.1-SNAPSHOT.zip.

If you see no child nodes under this node, then install the following package. This package will install the child nodes so you can proceed in this article. 

Download

Create an Editable Template

Create an Experience Manager editable template by using the Experience Manager Template Editor. A template created with the template editor acts as a container for the components. In addition, you can define the way the template looks by setting styles and also define which components are allowed to be used within the template (and those pages that are based on the template).  

To create an editable template by using the template editor, perform these tasks:

1. From the Start page, click the Tools icon (a hammer) and click on Templates.

2. Click on the My AEM Project folder to open it. (this represents the project that was created by using Lazybones).

The project created by using Lazybones

3. Click the Create button to create a template.

4. In the Create Template wizard, select the My AEM Project Empty Page template type and click the Next button.

The template that was created by the Lazybones project

5. Click Next. 

6. On the Template Details step, provide a title for your template and click the Create button. Once your template has been created, click the Open button to open the template. 

The following illustration shows the template that was created. In this example, the name of the template is FirstProject

A template created by using the Template Editor

Add Structural Components to the Page

You can define a layout in the new template. In this example, a two column layout is added to the template. The blank template has a single root Layout Container into which you can add additional Layout Container components. In this example, one for each of the columns. First, specify a policy for this container, which allows other Layout Container components to be added.

To start, mouse over the white area around the box labeled Drag components here. An orange
bounding box appears. Then click the mouse button to show the component toolbar (click where the arrow points to). Finally, click on the Policy icon, the first item in the toolbar (red square).
 

A policy associated with the template

When you click the Policy icon, this action opens the Layout Container Design dialog. Here you can specify the set of components which are allowed to be placed into the Layout Containers. For now, specify only Layout Containers can be added (for example, you are allowing for Layout Containers to be nested in other Layout Containers).

In the dialog, Enter a title for the policy in the Policy Title field (enter My Layout Container Policy). Then open the General category in the right panel and check the box next to Layout Container. Finally, click the check mark in the top-right corner.

 

Select the Layout Container for the policy

You will now be back in the Template Editor. Drag the Layout Container component from the left panel onto the box labeled Drag components here. Repeat this action for a second time. Once done, the template should look the image below.

Adding two layout container components to the template

Note:

If the Components panel is not displayed on the left side of the screen, you should click on the Toggle Side Panel icon in the top toolbar to open it.

Finally, you need to unlock the newly added containers so that an author can add components to them. Click on the first layout container to expose the toolbar and click on the lock icon. Repeat for the second layout container. When you are done, the template looks like the following illustration.

Unlock the container

Add a Basic Stylesheet to the Template

You can use Experience Manager's grid feature to set these two Layout Container components into a two column layout. In order to do this task, you must include a CSS stylesheet into the template which has the appropriate styles to support the grid system.

To start, open the Page Information drop-down menu from the top tool bar (the icon looks like three sliders) and select Page Design. This lets you specify the policy for the page (whereas before you had to specify for a particular component).

Page Design

As when we set up the policy for the Layout Component, provide a title for the policy (again any value will work, but an intuitive value like My Page Policy is a good idea). Click the Add button under Client-Side Libraries and enter my-aem-project.main in the text field. Finally, click the check mark in the top-right corner.

 

Set up a Two Column Layout

Define the two Layout Container components into a two-column layout. The grid used by this template has 12 columns. Specify 8 columns for the first container and 4 for the second.

Note:

In prior versions of Experience Manager, this was done through a separate mode, called Layout. While this mode still exists, this can now be done directly in the Structure mode.

To start, click on the first Layout Container component to select it. This action opens the component’s toolbar. Click the Layout button on the toolbar (the double-headed arrow).

Layout button

Drag the circular handle (which looks like a half Orange) on the right side of the screen four columns to the left, as shown in this illustration.

Adjust the layout container

Repeat for the second Layout Container, dragging from left to right by eight columns. 

 

Dragging from left to right

Note:

Make sure that you drag in the direction shown in the illustrations.

When you are done, the template should look like the image below (both are lined up).

Two container components on same line

Allow the Experience Manager components to be used in the template

Configure the template to let the Experience Manager components under the General category to be used in it. Perform these tasks:

  1. Allow the use of the Title component in the Root Layout Container to add a Title component to the top of the template.
  2. Allow the use of the Text and Image components into the child Layout Containers so that those  components can be added by an author.
  3. Set up the Image component to be the default component created when image assets are added to pages created from our template.
     

To start, switch back to the Template Editor. Click on the Root Layout Container and open the Design Dialog.

The Template created in this article

Click the Policy icon and scroll down the list of component groups until General is displayed. Click the caret to show the component list and select the Title component.

The Title component

Click the check at the top of the page to save the changes to the policy. The following sections describe how to set up a policy for the two other Layout Container in this template. 

Modify the Left Container

Start by clicking on the left Layout Container and click on the Policy icon (You can set a separate policy on each container component).

Setting the left container component

Specify a new name for the policy; for example, Content Layout Container Policy. Scroll down the list of component groups until General is displayed. Click the caret to show the component list and select the Text and Image components. Click the check at the top of the page to save the policy. Once done, the template looks like the following illustration. 

 

The left component container

Click on the left container to open the policy a second time. Select the Default Components tab on the right panel. Click the Add mapping button. In the Component drop down, select Image - General (it should be the only option). Specify the value image/.* for the Mime types field. Click the check at the top of the page to save the policy.

Modifying the policy

Note:

Make sure you select the proper policy value from the Select policy drop-down field.  

Modify the Right container

Click on the right Layout Container and click on the Policy icon, as shown in this illustration. 

The Right layout container

Click on the Select policy drop down list and select the policy you created earlier (for example, Content Layout Container Policy). Once done, the template looks like the following illustration. 

The template with both layout containers configured

Add the Title Component to the Template

Add the Title component to the top of the template. From the Components sidebar, drag the Title component above the First Layout Container, as shown in this illustration. 

Dragging the Title component onto the Template

Now your template looks like this illustration. 

The template with the applicable components

You can click on the Title component to set its value. For example, click on it and set MyTile.

Setting the Title component in the template

Enable the Template

Before an Experience Manager author can use the template to create pages, you must enable it. To perform this task. switch to the browser tab which contains the template list (leave the template
editor tab open). Mouse over the template and click on the check mark to select it. Click the Enable button, then check the Enable button that appears in the dialog. 

Enable the template

Create an Experience Manager Page that is based on the editable Template

Click on the AEM logo on the top left corner of the screen to open the global navigation. Click the compass icon to switch out of the Tools menu. Click on the Sites icon to open the Sites console in the Touch UI environment.
 

Sites entry point

Select the My AEM Project folder in the First column. Click the Create button and select Page.

Creating a page based on the template

Click on the template to select it. Click the Next button.
 

Creating a page

Specify a title for your page and click the Create button. In this example, the page is named First Page

Creating a page based on the editable template

Add Text to the Page

In the left panel, click on the second item to switch to the Components tab. Drag the Text component
into the page over the left Layout Container and release the mouse button.
 

Dragging the Text Core component

Note:

Notice that only the Text and Image component show up that corresponds to the components set in the Template's policy set previously in this article. 

When the Text component appears in the page, click on it to select it. Click on the Edit icon, as shown in this illustration.

Edit text in the page

Type some text and then click the check mark in the toolbar to save your changes.

Add Images to the Page

Drag two image components into the page; one of the left container and the other on the right container. Open the Image dialog that lets you select images. In the left panel, click on the top icon to switch back to the Assets tab. Drag an image into the dialog, as shown in this illustration. 

Dragging an image into the image component

Repeat this for the second image on the right.

This concludes this article. You have learned how to import a Lazybone project into Experience Manager, how to create an editable template, set template policies, and how to create a page based on the editable template.  

 

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