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:
|Digital Marketing Solution(s)||Adobe Experience Manager 6.3, 6.4|
|Video||Ask the AEM Community Experts|
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.
Windows Install latest binery:- https://bintray.com/pledbrook/lazybones-templates/lazybones#files
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:
Note:- For AEM 6.4, choose Target AEM version [6.3]: Choices are [6.3, 6.4]: 6.4
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.
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 diﬀerent 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 diﬀerent 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.
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.
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:
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.
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.
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).
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, 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.
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.
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.
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 (which looks like a half Orange) on the right side of the screen four columns to the left, as shown in this illustration.
Make sure that you drag in the direction shown in the illustrations.
Configure the template to let the Experience Manager components under the General category 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 General 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. The following sections describe how to 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 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.
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.
Make sure you select the proper policy value from the Select policy drop-down field.
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 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.
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.
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.
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.
Join the AEM community at: Adobe Experience Manager Community.