| 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:
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 |
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.
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.
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.
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.
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.
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.
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.
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.
Note:
For more information about creating the Lazybone project (including all the input values) for Experience Manager, see Create AEM Project Structure using Lazybones.
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).
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).
Once you successfully import the project into Eclipse, you can view the project, as shown in this illustration.
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.
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.
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.
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.
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.
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.
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.
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
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.
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 created later in this article. 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).
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.
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.
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).
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, specify a title for the policy in the Policy Title field (in this example, My Layout Container Policy is used). 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.
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.
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.
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).
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.
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).
Drag the circular handle on the right side of the screen four columns to the left, as shown in this illustration.
Adobe Experience Manager core components are new components built with HTL and include the following components:
Page authoring components:
- Page component
- Breadcrumb component
- Title component
- Text component
- Image component
- List component
- Sharing component
Form components:
- Form container
- Form text field
- Form options field
- Form hidden field
- Form button
In this section, you can work with the core Text component and make it available within your project. To start, switch to Eclipse. In the Project Explorer view, open the example-project.ui.apps project and open up the folders src/main/content/jcr_root, then apps, then my-aem-project and finally components.
Note:
If you get a message box stating that node types cannot be verified, click the Continue (do not ask again) button.
In the New Node dialog box, provide text as the node name and cq:Component as the node type. Click the OK button.
In the bottom pane, switch to the Properties view. Click on the JCR Properties tab. Click on the
newly created text node to display the properties in the Properties view.
Right-click inside the Properties view and select Insert from the context menu. Double-click in the newly created row and set the Name to componentGroup and the Value to My Project.
Repeat this two more times with the following values.
- jcr:title (String) - Text
- sling:resourceSuperType (String) - core/wcm/components/text/v1/text
You can verify if this component was successfullyt created by viewing the project in CRXDE lite. This component should show up as shown in this illustration.
Note:
If you experience issues setting properties for the Core components in Eclipse, then you can set the properties directly in CRXDE lite at this path: /apps/my-aem-project/components/content.
Repeat the same process for the title component. Name the node title with the node type of
cq:Component and specify these properties:
- componentGroup (String) - My Project
- jcr:title (String) - Title
- sling:resourceSuperType (String) - core/wcm/components/title/v1/title
Repeat the same process for the image component. Name the node image with the node type of
cq:Component and specify these properties:
- componentGroup (String) - My Project
- jcr:title (String) - Image
- sling:resourceSuperType (String) - core/wcm/components/image/v1/image
To enable drag-and-drop behavior for the image component (so an image asset is dragged into the page), you need to perform a few extra steps. First, with the image node selected, right-click in the JCR Properties view and select Show in editor. This action opens the XML representation of this node in the Eclipse editor and Outline view. In the Outline view, right click on the jcr:root entry and select Edit Namespaces.
In the Edit Schema Information dialog, click the Add button. Select Specify New Namespace. As the Prefix, enter cq. As the Namespace Name, enter http://www.day.com/jcr/cq/1.0. Click the OK button.
Next, select the image node and create a new node inside it (right-click, select New, then Node). Enter cq:editConfig as the node name and cq:EditConfig as the node type.
Note:
These values are different only by a single casing change. Be careful.
In the XML editor in Eclipse, select the line which reads
<cq:editConfig jcr:primaryType="cq:EditConfig"/> and
<cq:editConfig jcr:primaryType="cq:EditConfig">
<cq:dropTargets jcr:primaryType="nt:unstructured">
<image jcr:primaryType="cq:DropTargetConfig" accept="[image/.*]" groups="[media]"
propertyName="./fileReference">
<parameters jcr:primaryType="nt:unstructured" imageCrop=""
imageMap="" imageRotate=""
sling:resourceType="my-aem-project/components/content/image"/>
</image>
</cq:dropTargets>
<cq:inplaceEditing jcr:primaryType="cq:InplaceEditingConfig" active="{Boolean}true"
editorType="image">
<config jcr:primaryType="nt:unstructured">
<plugins jcr:primaryType="nt:unstructured">
<crop jcr:primaryType="nt:unstructured" features="*"/>
<flip jcr:primaryType="nt:unstructured" features="-"/>
<map jcr:primaryType="nt:unstructured" features="*"/>
<rotate jcr:primaryType="nt:unstructured" features="*"/>
<zoom jcr:primaryType="nt:unstructured" features="*"/>
</plugins>
<ui jcr:primaryType="nt:unstructured">
<inline jcr:primaryType="nt:unstructured"
toolbar="[crop#launch,rotate#right,history#undo,history#redo,fullscreen#fullscreen,control#close,control#finish]">
<replacementToolbars jcr:primaryType="nt:unstructured"
crop="[crop#identifier,crop#unlaunch,crop#confirm]"/>
</inline>
<fullscreen jcr:primaryType="nt:unstructured">
<toolbar jcr:primaryType="nt:unstructured"
left="[crop#launchwithratio,rotate#right,map#launch,flip#horizontal,flip#vertical,zoom#reset100,zoom#popupslider]"
right="[history#undo,history#redo,fullscreen#fullscreenexit]"/>
<replacementToolbars jcr:primaryType="nt:unstructured">
<crop jcr:primaryType="nt:unstructured"
left="[crop#identifier]"
right="[crop#unlaunch,crop#confirm]"/>
<map jcr:primaryType="nt:unstructured"
left="[map#rectangle,map#circle,map#polygon]"
right="[map#unlaunch,map#confirm]"/>
</replacementToolbars>
</fullscreen>
</ui>
</config>
</cq:inplaceEditing>
</cq:editConfig>
Configure the template to let the Core components created eariler in this article to be used in it. Perform these tasks:
- Allow the use of the Title component in the Root Layout Container to add a Title component to the top of the template.
- Allow the use of the Text and Image components into the child Layout Containers so that those components can be added by an author.
- 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.
Click the Policy icon and scroll down the list of component groups until My Project is displayed. Click the caret to show the component list and select the Title component.
Click the check at the top of the page to save the changes to the policy. Set up a policy for the two other Layout Container in this template.
Start by clicking on the left Layout Container and click on the Policy icon (You can set a separate policy on each container component).
Specify a new name for the policy; for example, Content Layout Container Policy. Scroll down the list of component groups until My Project 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.
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 - My Project (it should be the only option). By default, the entry for Mime types should be populated with image/.* Click the check at the top of the page to save the policy.
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.
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.
Before an Experience Manager author can use the teample 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.
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.
Specify a title for your page and click the Create button. In this example, the page is named First 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.
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.
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.
Repeat this for the second image on the right.
You are probably noticing that these image do not appear correct. THat is, they are not sized correctly and are geting cut off. You can address that situation in the next section by using a CSS stylesheet.
You can add style to the Experience Manager page so it appears most visually appealing. The first task you can perform is to add a web font using Adobe’s TypeKit service.
To start, switch back to Eclipse. In the Project Explorer view, open:
example-project.ui.apps, src/main/content/jcr_root, apps, my-aem-project, components, structure, and finally page.
Double-click on the customheaderlibs.html. This file lets you add more code into the <head> tag of the HTML generated by the template.
Add the following contents to the end of this file. Then save this this file.
<script src="https://use.typekit.net/rzg1nql.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
In the Project Explorer view, open the folders etc, then clientlibs, then my-aem-project and finally
main. Right click on the css folder and select New and then File.
Set the file name to styles.css and click the Finish button.
The CSS that is used has two rules:
- Style all text in the core components with the font in the TypeKit kit (Filson Soft).
- All images should take up 100% of the space available by their containing component.
Copy the following contents and paste them into the new CSS file.
.cmp {
font-family: "filson-soft";
}
.cmp-image img {
width: 100%
}
Once adding this content to the CSS file, click the Save button. Then double-click on the style css.txt in the main folder and add a new line containing styles.css at the bottom, below grid.less. Click the Save button.
With these two changes, our page should looks betterer. Go back to the browser and refresh the page. Notice how the images are resized as specified by the CSS.
You can configure the Text component to enable different authoring options. In this example, the Text component is configured. Start by switching back to the Template Editor browser tab. In the left Layout Container, click on the Policy icon for the Text component.
Specify a title for the new policy (name it TextPolicy). Click the caret next to the Formatting header in the Properties panel and click the Show underline option checkbox.
Click the check mark in the top right corner to save the policy.
Switch back to the page editor browser tab and reload. Click on the text component to open the toolbar and click on the edit icon. Click on the formatting toolbar item (the letter A) and you will now see an underline option.
You can configure the Image component in the same manner as you did the Text compoent. First click the policy for the Image component in the Template Editor view.
Specify a title for the policy. In the right pane, switch to the Feature tab. Click the caret next to the
Cropping header in the Properties panel. Click the Add button to add a new crop ratio. Set the name to
Cinemascope and the Ratio to 0.4184.
Click the check mark in the top right corner to save the policy. Switch back to the page editor browser tab and reload. Click on the image component to open the toolbar and click on the edit icon.
You can extend Experience Manager Core component by modify the HTL scipt to address your business requirements. In this example, the placeholder text shown by the Image component is modified. Start by dropping in an empty Image component onto your page.
Notice that the Placeholder text is Image. To change this placeholder text, switch over to Eclipse. Navigate to the image component (which should be already visible, but if not, open the containing folders to expose it). Right-click on the image folder and select New:File from the context menu.
Specify image.html as the file name and click the Finish button. Add the following code this file.
<div data-sly-use.image="com.adobe.cq.wcm.core.components.models.Image"
data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
data-sly-test="${image.src}"
data-sly-unwrap="${wcmmode.disabled}"
class="cq-dd-image">
<a data-sly-unwrap="${!image.link}"
href="${image.link}"
data-title="${image.title || image.alt}" data-asset="${image.fileReference}">
<noscript data-sly-unwrap="${!image.json}" data-cmp-image="${image.json}">
<img src="${image.src}"
alt="${image.alt || (image.displayPopupTitle && image.title) || true}"
title="${image.displayPopupTitle && image.title}"/>
</noscript>
</a>
<span class="cmp-image--title" data-sly-test="${!image.displayPopupTitle && image.title}">${image.title}</span>
</div>
<sly data-sly-call="${templates.placeholder @ isEmpty = !image.src, classAppend = 'cq-dd-image',
emptyTextAppend='My Project'
}"></sly>
The difference between this file and the image.html file from the base Core component is the
second to last line which sets some text to append to the placeholder text. If you look back at your page, you notice text My Project is appended.
Join the AEM community at: Adobe Experience Manager Community.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.