L4205 - Faster time to value with Adobe Experience Manager ...aempodcast.com/wp-content/uploads/2017/07/L4205-workbook.pdf · In this lab we will explore the new Adobe Experience

AdobeExperience ManagerMarch 23rd, 2017 Justin Edelson

Project Lead

Adobe SummitHands-On LabsL4205 - Faster time to value with AdobeExperience Manager Core Components

ii

Table of ContentsIntroduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Lesson 0 - Core Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Prerequisites and Preparation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Lesson 1 - Starting the Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Step 1: Generate an AEM Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Step 2: Import the Generated Project into Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Step 3: Publish the Generated Projects to Eclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Lesson 2 - Create a Simple Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Step 1: Create a new Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Step 2: Add Structural Components to the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15Step 3: Add a Basic Stylesheet to the Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Step 4: Set up a Two Column Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Lesson 3 - Adding a Core Component to the Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Step 1: Creating a Text Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Step 2: Doing It Again . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Step 3: Allowing ese Components in Our Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Step 4: Add the Title Component to the Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29Step 5: Enable the Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Lesson 4: Creating a Page with Our Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Step 1: Create a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Step 2: Add Text to the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Step 3: Add Images to the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Lesson 5: Styling the Core Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Step 1: Add a TypeKit font kit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Step 2: Add a CSS Stylesheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Lesson 6: Conguring the Core Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Step 1: Seing a Policy for the Text Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Step 2: Seing a Policy for the Image Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Lesson 7: Extending the Core Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Step 1: Extending an HTL Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Step 2: Extending a Java Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Wrapping Up - Recommendations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Appendix: Using is Workbook Outside of Summit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Soware Installations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Soware Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Adobe Summit L4205 Lab Workbook © 2017 Adobe Systems, Inc.

iii

Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50


1

IntroductionIn this lab we will explore the new Adobe Experience Manager Core Components. e Core Componentsare a new initiative by the Adobe Experience Manager team to provide a set of resuable and extensiblecomponents which can help projects get up and running in a way that helps to ensure future success.

Let’s get started!


2

Lesson 0 - Core Components

ObjectivesIn this lesson we will become familiar with AEM Core Components on a high level and we will set up ourAEM instance to begin the exercises.

OverviewAdobe Experience Manager has long included a set of components called the Foundation componentsfor generic functionality like text blocks, images, lists and so on. For the release of Adobe ExperienceManager 6.3, we have developed a new strategy for supporting these types of common components andnew implementations that we are referring to as the "Core Components". ese Core Components have anumber of key differences from the existing Foundation components.

e initial release of the Core Components contains 12 components, of which we will only be using ahandful in this lab, but the concepts apply to all of them:

• Page

• Title

• Text

• Image

• List

• Breadcrumb

• Sharing

• Forms Container

• Forms Buon

• Forms Text

• Forms Options

• Forms Hidden

e goal of the Core Components initiative is to provide reusable, production-ready components whichaccomodate the most common use cases and can then be extended for more specic use cases. esecomponents are congurable through the AEM Template Editor and we will be using this capability inthis lab. e HTML produced by the components is all accessible, semantic and mobile-ready. Perhapsthe most fundamental difference between the Core Components and the Foundation components


3

is that, following the release of AEM 6.3, the Core Components will be available in a public GitHubrepository, hps://github.com/adobe-marketing-cloud/aem-core-wcm-components, and will haveregular ongoing releases which are not directly tied to a new release of Adobe Experience Manager.

Here’s a full comparison of the Foundation and Core components:

One of the concerns customers and partners have raised in the past about the Foundation componentsis that when they use them directly, it becomes difficult to manage over time when they "outgrow" thecapabilities of the Foundation components and need to implement their own extended components.Further, Adobe has had problems updating the Foundation components since we have a large installedbased using those components and need to be extremely careful about backwards compatibility. Inorder to handle both of these problem, the Core Components are versioned, which allows us to iterateon them over time, and their usage by customer requires the use of "Proxy Components". ese proxycomponents are what are actually exposed to authors using AEM. We will be exploring the creation ofproxy components in this lab.

In a deployment of AEM, there could be multiple different proxy components for different sites orbusiness units and each of these proxy components could point to a different versioned of the proxiedCore component.


https://github.com/adobe-marketing-cloud/aem-core-wcm-components

4

Note

For obvious reasons, the initial release of the Core Components only has a single version (v1)for each component.

Now that we’ve done the basic overview, let’s jump into the lab.

Prerequisites and PreparationBefore geing started, we need to start AEM and congure our development environment (Eclipse) toconnect to it.

• Open the AEM folder on the desktop.

• Double-clicking on the cq-author-p4502.jar le to start AEM.

• Ensure Chrome browser starts up.

• In the rst tab, log into AEM using admin as the username and admin as the password.

• Open Eclipse.


5

Eclipse setup1. In Eclipse, click on the Servers view.

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 Finishbuon.


6

4. Once the Server has been created in Eclipse, double-click on it.

5. Change the port number to 4502.

6. In the Install panel, select "Install bundles via bundle upload"

7. Click the Save buon.

8. Close the "Adobe Experience Manager at localhost" tab.


7

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

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

Status Check

Before proceeding, make sure that

• AEM is running.

• Eclipse is running.

• e Server entry in Eclipse shows a status of Started.


8

Lesson 1 - Starting the Project

Objectives1. Generated a skeletal AEM project.

2. Import the generated project into Eclipse.

3. Publish the generated project to AEM.

Step 1: Generate an AEM ProjectIn this lesson, we will create a skeletal AEM application project which is pre-congured to be used withAEM 6.3 in general and the AEM Template Editor specically. ere are a variety of ways to generate thistype of project structure. e most common are using Maven Archetypes (either on the command lineor through an IDE like Eclipse), checking a project structure out of GitHub, and a tool called Lazybones.Each of these has their pros and cons. For the purpose of this lab, we are going to be using Lazybones.Lazybones is a command line tool which generates a project structure based on a "template" and thenallows for the generated project to be customized in a very exible fashion. For this lab we have a specicLazybones template which comes setup will all of the feature we will need.

Note

ere is also a product feature called AEM Projects, which we are not using in this lab, whichis used to structure authoring activities. Here we are generating a code project which willcontain the application code running inside AEM.

To start, open the Terminal.

In the Terminal window, type

lazybones create aem-multimodule-project-summit2017 my-project

And press the Return key.

is will create a new project with the aem-multimodule-project-summit2017 template in a newfolder named my-project. You can actually specify any folder name you want here.

Lazybones will then prompt you with a number of questions about how to set up the project. For thislab, the defaults are all ne, so just keep pressing the Return key until you see the message

Project created in my-project!

Step 2: Import the Generated Project into EclipseNow that we have our skeletal project created we need to import it into Eclipse so that we can edit theles in our IDE.


9

To start, switch to Eclipse.

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

Click the Next buon.


10

Click the Browse buon and select the my-project folder (if you chose a different folder name whengenerating the project, select it instead).

Click the Finish buon.

You should now see three new projects added to the Project Explorer view.

ese projects serve different purposes:

• example-project.ui.apps - is project contains conguration, server-side scripts, client-side scripts,and styling code (CSS). We will spend the bulk of our time in this project.


11

• example-project.core - is project contains Java code which will be deployed to AEM as an OSGibundle. We will use this in the last lesson.

• my-project - is project acts as the container for the two other projects. We will not be using thisproject directly in this lab.

Step 3: Publish the Generated Projects to EclipseFinally, we need to publish our skeletal projects to our local AEM instance.

In Eclipse, in the Servers view, right-click on the Adobe Experience Manager on localhost server andselect Add and Remove…

Important

Make sure before doing this that the server is "Started".

Click the Add All >> buon.

Click the Finish buon.


12

Eclipse will now publish these projects over to the AEM instance. is will take a few seconds tocomplete. You can see if it is done by expanding the item in the Servers view. e two projects listed willbe tagged with "Synchronized".


13

Lesson 2 - Create a Simple Template

Objectives1. Create a new Template using the AEM Template Editor.

2. Add some structural components to the template.

3. Add a basic stylesheet to the template.

4. Use the layout tool in the Template Editor to dene a 2-column layout.

Step 1: Create a new TemplateIn this lesson, we will be creating a template using the AEM Template Editor and seing it up as acontainer for the components created in subsequent lessons.

To start, go to the Chrome browser window and log into AEM using the username admin and thepassword admin.

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


14

Click on the My AEM Project folder to open it.

en click the Create buon to create a template.


15

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

Tip

A Template Type is a sort of "template for templates". Developers will generally create thembut in this case, the lazybones script generated these two for the lab.

On the Template Details step, provide a title for your template and click the Create buon.

Once your template has been created, click the Open buon to open the template.

Step 2: Add Structural Components to the PageWith the newly created template open in the Template Editor, we have a blank canvas in which we willdene a basic 2-column layout. Our blank template has a single "root" Layout Container into which wewill add two additional Layout Container components — one for each of our columns. First, we mustspecify a "policy" for this container which allows other Layout Container components to be added into it.


16

To start, mouse over the white area around the box labeled "Drag components here". An orangebounding box will appear. Once it does, click the mouse buon to show the component toolbar. Click onthe Policy icon, the rst item in the toolbar.

is will open the Layout Container Design dialog. Here we will specify the set of components which areallowed to be placed into the Layout Containers. For now, we will only specify that Layout Containerscan be added (i.e. we 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 eld (any value will do, but pick somethingintuitive like "My Layout Container Policy"). en open the General category in the right panel and checkthe box next to Layout Container. Finally, click the check mark in the top-right corner.


17

You will now be back in the Template Editor. Drag the Layout Container component from the le panelonto the box labeled Drag components here. en do this a second time. Once done, the templateshould look the image below.

Note

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

Finally, we need to unlock the newly added containers so that an author will be able to add componentsto them. Click on the rst layout container to expose the toolbar and click on the lock icon.

Repeat for the second layout container.

When you are done, the template should look like the image below.

Step 3: Add a Basic Stylesheet to the TemplateWe are going to be using AEM’s grid feature to set these two Layout Container components into a two-column layout. In order to do this, we must include a CSS stylesheet into the template which has theappropriate styles to support AEM’s grid system.


18

To start, open the Page Information drop-down menu from the top tool bar (the icon looks like threesliders) and select Page Design. is will allow us to specify the policy for the page (whereas before wewere specifying it for a particular component).

As when we set up the policy for the Layout Component, provide a title for the policy (again any valuewill use but an intuitive value like "My Page Policy" is a good idea).

Click the Add buon under Client-Side Libraries and enter my-aem-project.main in the text eld. Finally,click the check mark in the top-right corner.


19

Step 4: Set up a Two Column Layoute last thing we want to do to our template is to lay out the two newly added Layout Containercomponents into a two-column layout. e grid used by this template has 12 columns; we will specify 8columns for the rst container and 4 for the second.

Note

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

To start, click on the rst Layout Container component to select it. is will open the component’stoolbar. Click the Layout buon on the toolbar (the double-headed arrow).

Drag the circular handle on the right side of the screen four columns to the le.

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

When you are done, the template should look like the image below.


20

Lesson 3 - Adding a Core Component to theProject

Objectives1. Create three AEM components which allows for some Core Components to be used in our project.

2. Allow the use of this component in our template.

3. Use one of the components in our template

Step 1: Creating a Text ComponentIn this lesson, we will be taking the core Text component and making it available within our project.

To start, switch to Eclipse. In the Project Explorer view, open the example-project.ui.apps projectand open up the folders src/main/content/jcr_root, then apps, then my-aem-project and nallycomponents.

Right click on the content folder and select New and then Node.


21

Note

If you get a message box stating that node types cannot be veried, click the Continue (do notask again) buon.

In the New Node dialog box, provide text as the node name and cq:Component as the node type. Clickthe OK buon.

In the boom pane, switch to the Properties view. Click on the JCR Properties tab. en click on thenewly created text node to display the properties in the Properties view.


22

Right-click inside the Properties view and select Insert from the context menu. Double-click in the newlycreated row and set the Name to componentGroup and the Value to My Project. Repeat this two moretimes with the following values.

Name Value

componentGroup My Project

jcr:title Text

sling:resourceSuperType core/wcm/components/text/v1/text

When you are done, the Properties view should look like the screenshot below.

Note

ere are at least two other ways to do this. If you are familiar with AEM and/or the Eclipsetooling, feel free to use your method of choice.


23

Step 2: Doing It AgainNow we want to do the same for a title component. Name the node title with the node type ofcq:Component and specify these properties:

Name Value


jcr:title Title

sling:resourceSuperType core/wcm/components/title/v1/title

Repeat again to create an image component. Name the node image with the node type ofcq:Component and specify these properties:

Name Value


jcr:title Image

sling:resourceSuperType core/wcm/components/image/v1/image


24

Because we want to enable a specic drag-and-drop behavior for the image component (specically thatit gets created when an image asset is dragged into the page), we need to do a few extra steps. First, withthe image node selected, right-click in the JCR Properties view and select Show in editor. is will openthe XML representation of this node in the Eclipse editor and Outline view. In the Outline view, right clickon the jcr:root entry and select Edit Namespaces.

In the Edit Schema Information dialog, click the Add buon. Select Specify New Namespace. As thePrex, enter cq. As the Namespace Name, enter http://www.day.com/jcr/cq/1.0. Click the OK buon.

Back in the Edit Schema Information dialog, click the OK buon. en click the Save icon.


http://www.day.com/jcr/cq/1.0

25

en select the image node and create a new node inside it (right-click, select New, then Node). Entercq:editConfig as the node name and cq:EditConfig as the node type.

Caution

ese values are different only by a single casing change. Be careful.

On the desktop of your lab machine, open the le named image-edit-config.txt and copythe content of this le to your clipboard. In the XML editor in Eclipse, select the line which reads<cq:editConfig jcr:primaryType="cq:EditConfig"/> and replace it with the contents of the le.

Note

You may need to switch to the Source tab before making this change directly to the XML le’scontent.


26

When you are done, the le should look like the image below.

en save this le.

Step 3: Allowing ese Components in OurTemplate

Now that we have our components ready to be used, we need to allow their use in the template. We areactually going to do three different things:

1. Allow the use of the Title component in the Root Layout Container so that we can add a Titlecomponent to the top of the template.


27

2. Allow the use of the Text and Image components into the child Layout Containers so that thosecomponents can be added by an author.

3. Set up the Image component to be the default component created when image assets are added topages created from our template.

To start, switch back to the Template Editor. Click on the Root Layout Container and open the DesignDialog (just like we did in Lesson 2).

Scroll down the list of component groups until My Project is displayed. Click the caret to show thecomponent list and select the Title component.

Click the check at the top of the page to save the changes to the policy.

Now we need to set up a policy for the two other Layout Container in this template. Start by clicking onthe le Layout Container and click on the Policy icon.


28

Specify a new name for the policy (for example "Content Layout Container Policy"). en scroll down thelist of component groups until My Project is displayed. Click the caret to show the component list andselect the Text and Image components. Click the check at the top of the page to save the policy.

Repeat this to open the policy a second time. is time, select the Default Components tab on the rightpanel. Click the Add mapping buon.

In the Component drop down, select "Image - My Project" (it should be the only option). e defaultentry for Mime types should be populated with image/.*.

Click the check at the top of the page to save the policy.


29

Now click on the right Layout Container and click on the Policy icon.

Click on the Select policy drop down list and select the policy you created above.

Click the check at the top of the page to save the policy.

Step 4: Add the Title Component to the Templatee last thing we will do for our template before making it available to authors is to add the Titlecomponent to the top of the page. From the Components sidebar, drag the Title component above therst Layout Container.


30

Step 5: Enable the TemplateOur template is now ready for use by authors but we have to rst enable it to allow authors to createpages using it. To do this, switch to the browser tab which contains the template list (leave the templateeditor tab open; we will come back to it later). Mouse over the template and click on the check mark toselect it.

en click the Enable buon on the toolbar. In the resulting dialog, click the Enable buon.


31

Lesson 4: Creating a Page with Our Template

Objectives1. Create a page with the template created in prior lessons

2. Add a few components to the page.

Step 1: Create a PageStarting in the Template console (where we ended up at the end of the last lesson) and click the X iconin the top right corner to exit selection mode. en click on the AEM logo on the top-le corner of thescreen to open the global navigation. Click the compass icon to switch out of the Tools menu. Click on theSites icon to open the Sites console.

Select the My AEM Project folder in the rst column. Click the Create buon and select Page.


32

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

Specify a title for your page and click the Create buon.

When the page is created, click the Open buon to open it in the page editor.

Step 2: Add Text to the PageIn the le panel, click on the second item to switch to the Components tab. Drag the Text componentinto the page over the le Layout Container and release the mouse buon.


33

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

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

Step 3: Add Images to the PageIn the le panel, click on the top icon to switch back to the Assets tab. Drag an image into the le LayoutContainer and then another image into the right Layout Container.

You’re probably noticing that this doesn’t look quite right — the images aren’t sized correctly and aregeing cut off. We’ll x that in the next lesson with a CSS stylesheet.


34

Lesson 5: Styling the Core Components

Objectives1. Add a TypeKit font kit to provide a custom font.

2. Add a CSS stylesheet

Step 1: Add a TypeKit font kitIn this lesson we are going to apply a bit of styling to our page to make it more visually appealing. erst thing we will do is add a web font using Adobe’s TypeKit service.

To start, switch back to Eclipse. In the Project Explorer view, open the example-project.ui.appsproject and open up the folders src/main/content/jcr_root, then apps, then my-aem-project, thencomponents, then structure and nally page. Double-click on the le customheaderlibs.html. isle allows us to add more code into the <head> tag of the HTML generated by the template.


35

Add the contents of the le named typekit.txt on your desktop to the end of this le. en save thisle.

Step 2: Add a CSS StylesheetIn the Project Explorer view, open the folders etc, then clientlibs, then my-aem-project and nallymain. Right click on the css folder and select New and then File.

Set the le name to styles.css and click the Finish buon.

e CSS we will use just has two rules. We are rst going to style all text in the core components with thefont in the TypeKit kit (Filson So). en we will specify that all images should take up 100% of the spaceavailable by their containing component.


36

Open the le named styles.txt on your desktop and copy/paste the contents of this le into the editorwindow.

Once adding this content to the CSS le, click the Save buon.

en double-click on the le css.txt in the main folder and add a new line containing styles.css atthe boom, below grid.less. Click the Save buon.


37

With these two changes, our page should look slightly beer. Go back to the browser. Hold down theShi key and click the Reload icon.


38

Lesson 6: Conguring the Core Components

Objectives1. Congure authoring options for the rich text editor

2. Congure authoring options for the image editor

Step 1: Seing a Policy for the Text ComponentIn this lesson we are going to take a step further with the Core Components and enable some differentauthoring options. We will start with the Text component.

Start by switching back to the Template Editor browser tab. In the le Layout Container, click on thePolicy icon for the Text component.

Specify a title for the policy. Click the caret next to the Formaing header in the Properties panel andclick the Show underline option checkbox.


39

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 you created beforeto open the toolbar and click on the edit icon. Click on the formaing toolbar item (the leer A) and youwill now see an underline option.


40

Step 2: Seing a Policy for the Image ComponentNow let’s do the same for the Image component. Switch back to the Template Editor browser tab. In thele Layout Container, click on the Policy icon for the Image component.

Specify a title for the policy. In the right pane, switch to the Feature tab. Click the caret next to theCropping header in the Properties panel. Click the Add buon to add a new crop ratio. Set the name toCinemascope 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 you createdbefore to open the toolbar and click on the edit icon.


41

Click on the full screen icon to enter the full screen editor. Click on the crop toolbar item and you willnow see the newly added crop aspect ratio.


42

Lesson 7: Extending the Core Components

Objectives1. Extend the HTL script used by the image component.

2. Extend the Java model object used by the text component.

Step 1: Extending an HTL ScriptIn this last lesson we are going to do a bit of coding to extend the image and text components. echanges we are going make are, to be honest, a lile silly, but they are emblematic of the types ofchanges you will generally want to do when extending the Core component to meet your specic projectrequirements and they give you the idea while still being relatively easy to implement and having someimmediate visual impact.

e rst extension case we’ll do is to extend the placeholder text shown by the Image component whenit is added to a page but before an asset has been chosen. We actually haven’t seen this placeholderyet in the lab because we’ve been adding assets directly from the asset nder and having the Imagecomponent automatically created for us. So let’s rst drop in an empty Image component.

To start, make sure you are back at the Page Editor. If you are in the full-screen image edtior, this involvesclicking on the minimize buon in the top right corner and then the X icon to exit the inline image editor.Switch to the Components panel in the sidebar (if necessary) and then drag the Image component belowthe Text component.


43

is will add an empty Image component to the page with the placeholder text Image.

To change this placeholder text, switch over to Eclipse. Navigate to the image component (which shouldbe already visible, but if not, open the containing folders to expose it). Right-click on the image folder andselect New:File from the context menu.

Specify image.html as the le name and click the Finish buon.

Put the contents of the le named custom-image-htl.txt from your desktop into this blank le. ensave the le.

e only difference between this le and the image.html le from the base Core component is thesecond to last line which sets some text to append to the placeholder.


44

Note

You probably wouldn’t format that line exactly like this. at is just for readbility in the lab.

Go back to the Page Editor browser tab and reload. You should now see the custom text added to theplaceholder.

Step 2: Extending a Java Modele next step we are going to take is to customize the backing Java object used by the Titlecomponent to add some static text to the end of the title. e way the Core Components arewrien, they reference backing Java objects, implemented using the Sling Models framework,by interface name. For example, the title component’s HTML references an interface namedcom.adobe.cq.wcm.core.components.models.Title. When the HTL script asks for an implementationof this interface, Sling Models uses the implementation class which is associated with the nearestresource type. So, to provide a custom backing Java object, we need to create a Sling Model class whichuses a closer resource type than the default.

To start, go back to Eclipse and open the example-project.core project and then expand the src/main/java folder. Right click on the com.myco.models package and select New:Class from the contextmenu.

Specify MyTitle as the Name and click the Finish buon.


45

Put the contents of the le named custom-title-class.txt from your desktop into this le, replacingany content. en save the le. As with the HTL example above, this class is only different from thestandard class by a single line — line 55 which returns the static string "My Project - " before the title.


46

Finally, go back to the browser and reload the Page Editor. You should see the Title component updatedto use the new model.


47

Wrapping Up - RecommendationsNow that you’ve seen a bit of what the Core Components can do, you may be interested in starting touse them. Before jumping in with both feet, it is worth considering Adobe’s recommendation on whenand how to use these components.

For new projects starting on AEM 6.3, we recommend starting with the Core Components wherepossible. ere are some Foundation components which do not (yet) have counterparts in theCore Component set and if those are suitable for your project, by all means use them. But we don’trecommend using both, for example, the Core Title component and the Foundation Title component inthe same template, largely because that would be confusing to authors.

For existing projects upgrading from a prior version to AEM 6.3, unless there is a larger project requiringrefactoring, there is no need to move from the Foundation Components. Eventually we will deprecatethe Foundation Components, but we have to reach feature parity rst. With respect to your customcomponents, while those aren’t impacted by these new Core Components, it is worth looking at thepaerns used by the Core Components and adopting them for your custom components.


48

Appendix: Using is Workbook Outside ofSummit

e desktops used by Summit aendees have been been setup specically to run this lab and thisworkbook has been wrien with the assumption that it is being used on one of those desktops. If youwant to run the excercises in this workbook outside of Summit, there are some steps that must be rsttaken.

Soware Installations

AEMis workbook requires the use of AEM 6.3. You can use any release following Beta Load 4 (internaldesignation for Beta Load 4 is Load 19). A valid Adobe Experience Manager license is required.

EclipseFor the purpose of this lab, we are using Eclipse Neon.2, the current release. To install it, please followthese steps:

1. Go to hps://www.eclipse.org/downloads/ and download the installer.

2. Unzip and run the installer.

3. Select Eclipse IDE for Java EE Developers.

4. Launch the Application and choose a directory as your workspace.

AEM Eclipse Plugin

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

2. Click Add buon

3. In the Name eld, enter “AEM Developer Tools”

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

5. Click OK

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

7. Click the Next buon

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

9. Accept the license terms and click the Finish buon

10. Restart Eclipse


https://www.eclipse.org/downloads/

https://eclipse.adobe.com/aem/dev-tools/

49

LazybonesLazybones is installed using a two-step process. First, install sdkman, a Soware Development Kitmanagement system. Instructions for installing sdkman can be found at hp://sdkman.io/install.html. Inshort, in a Terminal window, run these two commands:

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

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

sdk install lazybones

And then open a new Terminal window.

Note

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

MavenMaven can be installed using Lazybones as well:

sdk install maven

Other installation methods are detailed on hp://maven.apache.org/install.html

Soware Setup

Lazybonese Lazybones template used in this workbook is not available in a standard Lazybones conguration. Toenable it, you must rst create a directory named .lazybones in your home directory. In this directory,create a le named config.groovy and populate it with:

bintrayRepositories = [ "acs/lazybones", "pledbrook/lazybones-templates"]

MavenIf you are using this workbook before AEM 6.3 is released, i.e. you are in the AEM Beta program, you mustadd the AEM 6.3 UberJar to your local Maven repository. Once you download the AEM 6.3 UberJar (e.g.from the beta website), you need to install it with this command:


http://sdkman.io/install.html

https://github.com/flofreud/posh-gvm

https://github.com/flofreud/posh-gvm

https://github.com/pledbrook/lazybones#running-it

http://maven.apache.org/install.html

50

mvn install:install-file -Dfile=<path to the downloaded file> -DgroupId=com.adobe.aem \-DartifactId=uber-jar -Dversion=6.3.0-summit -Dclassifier=apis -Dpackaging=jar

If you are using this workbook aer AEM 6.3 is released, aer you generate the project in Step 1, edit thele pom.xml and replace:

<dependency> <groupId>com.adobe.aem</groupId> <artifactId>uber-jar</artifactId> <version>6.3.0-summit</version> <scope>provided</scope> <classifier>apis</classifier></dependency>

with

<dependency> <groupId>com.adobe.aem</groupId> <artifactId>uber-jar</artifactId> <version>6.3.0</version> <scope>provided</scope> <classifier>apis</classifier></dependency>

Filese les referenced in this workbook can all be found at hps://adobe.ly/2lRD8lC


https://adobe.ly/2lRD8lC

Documents

L4205 - Faster time to value with Adobe Experience Manager ...aempodcast.com/wp-content/uploads/2017/07/L4205-workbook.pdf · In this lab we will explore the new Adobe Experience