L4205 Workbook

AdobeExperience Manager
March 23rd, 2017 Justin Edelson

Project Lead
Adobe Summit
Hands-On Labs
L4205 - Faster time to value with Adobe
Experience Manager Core Components
ii
Table of Contents
Introduction .................................................................................................................................................. 1
Lesson 0 - Core Components ...................................................................................................................... 2
Objectives ............................................................................................................................................. 2
Overview .............................................................................................................................................. 2
Prerequisites and Preparation ............................................................................................................. 4
Lesson 1 - Starting the Project .................................................................................................................... 8
Objectives ............................................................................................................................................. 8
Step 1: Generate an AEM Project ........................................................................................................ 8
Step 2: Import the Generated Project into Eclipse ............................................................................. 8
Step 3: Publish the Generated Projects to Eclipse ............................................................................. 11
Lesson 2 - Create a Simple Template ........................................................................................................ 13
Objectives ........................................................................................................................................... 13
Step 1: Create a new Template ........................................................................................................... 13
Step 2: Add Structural Components to the Page ............................................................................... 15
Step 3: Add a Basic Stylesheet to the Template ................................................................................ 17
Step 4: Set up a Two Column Layout ................................................................................................ 19
Lesson 3 - Adding a Core Component to the Project ............................................................................... 20
Objectives ........................................................................................................................................... 20
Step 1: Creating a Text Component ................................................................................................... 20
Step 2: Doing It Again ........................................................................................................................ 23
Step 3: Allowing ese Components in Our Template ..................................................................... 26
Step 4: Add the Title Component to the Template ........................................................................... 29
Step 5: Enable the Template ............................................................................................................. 30
Lesson 4: Creating a Page with Our Template .......................................................................................... 31
Objectives ........................................................................................................................................... 31
Step 1: Create a Page .......................................................................................................................... 31
Step 2: Add Text to the Page ............................................................................................................. 32
Step 3: Add Images to the Page ........................................................................................................ 33
Lesson 5: Styling the Core Components ................................................................................................... 34
Objectives ........................................................................................................................................... 34
Step 1: Add a TypeKit font kit ............................................................................................................ 34
Step 2: Add a CSS Stylesheet ............................................................................................................ 35
Lesson 6: Conguring the Core Components ........................................................................................... 38
Objectives ........................................................................................................................................... 38
Step 1: Seing a Policy for the Text Component ............................................................................... 38
Step 2: Seing a Policy for the Image Component ........................................................................... 40
Lesson 7: Extending the Core Components .............................................................................................. 42
Objectives ........................................................................................................................................... 42
Step 1: Extending an HTL Script ........................................................................................................ 42
Step 2: Extending a Java Model ........................................................................................................ 44
Wrapping Up - Recommendations ............................................................................................................ 47
Appendix: Using is Workbook Outside of Summit ............................................................................... 48
Soware Installations ......................................................................................................................... 48
Soware Setup ................................................................................................................................... 49
Adobe Summit L4205 Lab Workbook © 2017 Adobe Systems, Inc.

iii
Files .................................................................................................................................................... 50

1
Introduction
In this lab we will explore the new Adobe Experience Manager Core Components. e Core Components
are a new initiative by the Adobe Experience Manager team to provide a set of resuable and extensible
components 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

Objectives
In this lesson we will become familiar with AEM Core Components on a high level and we will set up our
AEM instance to begin the exercises.
Overview
Adobe Experience Manager has long included a set of components called the Foundation components
for generic functionality like text blocks, images, lists and so on. For the release of Adobe Experience
Manager 6.3, we have developed a new strategy for supporting these types of common components and
new implementations that we are referring to as the "Core Components". ese Core Components have a
number 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 a
handful in this lab, but the concepts apply to all of them:
• Page
• Title
• Text
• Image
• List
• Breadcrumb
• Sharing
• Forms Container
• Forms Buon
• Forms Text
• Forms Options
• Forms Hidden
e goal of the Core Components initiative is to provide reusable, production-ready components which
accomodate the most common use cases and can then be extended for more specic use cases. ese
components are congurable through the AEM Template Editor and we will be using this capability in
this lab. e HTML produced by the components is all accessible, semantic and mobile-ready. Perhaps
the 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 GitHub
repository, hps://github.com/adobe-marketing-cloud/aem-core-wcm-components, and will have
regular 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 components
is that when they use them directly, it becomes difficult to manage over time when they "outgrow" the
capabilities 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 installed
based using those components and need to be extremely careful about backwards compatibility. In
order to handle both of these problem, the Core Components are versioned, which allows us to iterate
on them over time, and their usage by customer requires the use of "Proxy Components". ese proxy
components are what are actually exposed to authors using AEM. We will be exploring the creation of
proxy components in this lab.
In a deployment of AEM, there could be multiple different proxy components for different sites or
business units and each of these proxy components could point to a different versioned of the proxied
Core component.

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 Preparation

Before geing started, we need to start AEM and congure our development environment (Eclipse) to
connect 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 setup
1. 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 Finish
buon.

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 buon.

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

Objectives
1. Generated a skeletal AEM project.
2. Import the generated project into Eclipse.
3. Publish the generated project to AEM.
Step 1: Generate an AEM Project

In this lesson, we will create a skeletal AEM application project which is pre-congured to be used with
AEM 6.3 in general and the AEM Template Editor specically. ere are a variety of ways to generate this
type of project structure. e most common are using Maven Archetypes (either on the command line
or 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 then
allows for the generated project to be customized in a very exible fashion. For this lab we have a specic
Lazybones 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, which
is used to structure authoring activities. Here we are generating a code project which will
contain 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 new
folder 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 this
lab, 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 Eclipse

Now that we have our skeletal project created we need to import it into Eclipse so that we can edit the
les 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 the
Maven folder).
Click the Next buon.

10
Click the Browse buon and select the my-project folder (if you chose a different folder name when
generating the project, select it instead).
Click the Finish buon.
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 conguration, 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 OSGi
bundle. 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 this
project directly in this lab.
Step 3: Publish the Generated Projects to Eclipse

Finally, 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 and
select Add and Remove…
Important
Make sure before doing this that the server is "Started".
Click the Add All >> buon.
Click the Finish buon.

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

13
Lesson 2 - Create a Simple Template

Objectives
1. 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 dene a 2-column layout.
Step 1: Create a new Template

In this lesson, we will be creating a template using the AEM Template Editor and seing it up as a
container for the components created in subsequent lessons.
To start, go to the Chrome browser window and log into AEM using the username admin and the
password 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 buon to create a template.

15
In the Create Template wizard, select the My AEM Project Empty Page template type and click the Next
buon.
Tip
A Template Type is a sort of "template for templates". Developers will generally create them
but 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 buon.
Once your template has been created, click the Open buon to open the template.
Step 2: Add Structural Components to the Page

With the newly created template open in the Template Editor, we have a blank canvas in which we will
dene a basic 2-column layout. Our blank template has a single "root" Layout Container into which we
will add two additional Layout Container components — one for each of our columns. First, we must
specify 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 orange
bounding box will appear. Once it does, click the mouse buon to show the component toolbar. Click on
the 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 are
allowed to be placed into the Layout Containers. For now, we will only specify that Layout Containers
can 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 something
intuitive like "My Layout Container Policy"). en 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.

17
You will now be back in the Template Editor. Drag the Layout Container component from the le panel
onto the box labeled Drag components here. en do this a second time. Once done, the template
should look the image below.
Note
If the Components panel is not displayed on the le side of the screen, you should click on the
Toggle 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 components
to 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 Template

We 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 the
appropriate 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 three
sliders) and select Page Design. is will allow us to specify the policy for the page (whereas before we
were 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 value
will use but an intuitive value like "My Page Policy" is a good idea).
Click the Add buon 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 Layout

e last thing we want to do to our template is to lay out the two newly added Layout Container
components into a two-column layout. e grid used by this template has 12 columns; we will specify 8
columns 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 the
Layouting 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’s
toolbar. Click the Layout buon 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 the

Project
Objectives
1. 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 Component

In 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 project
and open up the folders src/main/content/jcr_root, then apps, then my-aem-project and nally
components.
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 veried, click the Continue (do not
ask again) buon.
In the New Node dialog box, provide text as the node name and cq:Component as the node type. Click
the OK buon.
In the boom pane, switch to the Properties view. Click on the JCR Properties tab. en click on the
newly 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 newly
created row and set the Name to componentGroup and the Value to My Project. Repeat this two more
times 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 Eclipse
tooling, feel free to use your method of choice.

23
Step 2: Doing It Again

Now we want to do the same for a title component. Name the node title with the node type of
cq: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 of
cq: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 specic drag-and-drop behavior for the image component (specically that
it gets created when an image asset is dragged into the page), we need to do a few extra steps. First, with
the image node selected, right-click in the JCR Properties view and select Show in editor. is will open
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 buon. Select Specify New Namespace. As the
Prex, enter cq. As the Namespace Name, enter http://www.day.com/jcr/cq/1.0. Click the OK buon.
Back in the Edit Schema Information dialog, click the OK buon. en click the Save icon.

25
en 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.
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 copy
the 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’s
content.

26
When you are done, the le should look like the image below.
en save this le.
Step 3: Allowing ese Components in Our

Template
Now that we have our components ready to be used, we need to allow their use in the template. We are
actually 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 Title
component to the top of the template.

27
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 (just like we did in Lesson 2).
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.
Now we need to set up a policy for the two other Layout Container in this template. Start by clicking on
the 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 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.
Repeat this to open the policy a second time. is time, select the Default Components tab on the right
panel. Click the Add mapping buon.
In the Component drop down, select "Image - My Project" (it should be the only option). e default
entry 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 Template

e last thing we will do for our template before making it available to authors is to add the Title
component to the top of the page. From the Components sidebar, drag the Title component above the
rst Layout Container.

30
Step 5: Enable the Template

Our template is now ready for use by authors but we have to rst enable it to allow authors to create
pages using it. To do this, switch to the browser tab which contains the template list (leave the template
editor tab open; we will come back to it later). Mouse over the template and click on the check mark to
select it.
en click the Enable buon on the toolbar. In the resulting dialog, click the Enable buon.

31
Lesson 4: Creating a Page with Our Template

Objectives
1. Create a page with the template created in prior lessons
2. Add a few components to the page.
Step 1: Create a Page

Starting in the Template console (where we ended up at the end of the last lesson) and click the X icon
in the top right corner to exit selection mode. en click on the AEM logo on the top-le 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.
Select the My AEM Project folder in the rst column. Click the Create buon and select Page.

32
Click on the template to select it. Click the Next buon.
Specify a title for your page and click the Create buon.
When the page is created, click the Open buon to open it in the page editor.
Step 2: Add Text to the Page

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

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 Page

In the le panel, click on the top icon to switch back to the Assets tab. Drag an image into the le Layout
Container 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 are
geing cut off. We’ll x that in the next lesson with a CSS stylesheet.

34
Lesson 5: Styling the Core Components

Objectives
1. Add a TypeKit font kit to provide a custom font.
2. Add a CSS stylesheet
Step 1: Add a TypeKit font kit

In this lesson we are going to apply a bit of styling to our page to make it more visually appealing. e
rst 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.apps
project and open up the folders src/main/content/jcr_root, then apps, then my-aem-project, then
components, then structure and nally page. Double-click on the le customheaderlibs.html. is
le 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 this
le.
Step 2: Add a CSS Stylesheet

In the Project Explorer view, open the folders etc, then clientlibs, then my-aem-project and nally
main. Right click on the css folder and select New and then File.
Set the le name to styles.css and click the Finish buon.
e CSS we will use just has two rules. We are rst going to style all text in the core components with the
font in the TypeKit kit (Filson So). en we will specify that all images should take up 100% of the space
available by their containing component.

36
Open the le named styles.txt on your desktop and copy/paste the contents of this le into the editor
window.
Once adding this content to the CSS le, click the Save buon.
en double-click on the le css.txt in the main folder and add a new line containing styles.css at
the boom, below grid.less. Click the Save buon.

37
With these two changes, our page should look slightly beer. Go back to the browser. Hold down the
Shi key and click the Reload icon.

38
Lesson 6: Conguring the Core Components

Objectives
1. Congure authoring options for the rich text editor
2. Congure authoring options for the image editor
Step 1: Seing a Policy for the Text Component

In this lesson we are going to take a step further with the Core Components and enable some different
authoring 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 the
Policy icon for the Text component.
Specify a title for the policy. Click the caret next to the Formaing header in the Properties panel and
click 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 before
to open the toolbar and click on the edit icon. Click on the formaing toolbar item (the leer A) and you
will now see an underline option.

40
Step 2: Seing a Policy for the Image Component

Now let’s do the same for the Image component. Switch back to the Template Editor browser tab. In the
le 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 the
Cropping header in the Properties panel. Click the Add buon 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 you created
before 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 will
now see the newly added crop aspect ratio.

42
Lesson 7: Extending the Core Components

Objectives
1. 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 Script

In this last lesson we are going to do a bit of coding to extend the image and text components. e
changes we are going make are, to be honest, a lile silly, but they are emblematic of the types of
changes you will generally want to do when extending the Core component to meet your specic project
requirements and they give you the idea while still being relatively easy to implement and having some
immediate visual impact.
e rst extension case we’ll do is to extend the placeholder text shown by the Image component when
it is added to a page but before an asset has been chosen. We actually haven’t seen this placeholder
yet in the lab because we’ve been adding assets directly from the asset nder and having the Image
component 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 involves
clicking on the minimize buon 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 below
the 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 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 le name and click the Finish buon.
Put the contents of the le named custom-image-htl.txt from your desktop into this blank le. en
save the le.
e only difference between this le and the image.html le from the base Core component is the
second 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 the
placeholder.
Step 2: Extending a Java Model

e next step we are going to take is to customize the backing Java object used by the Title
component to add some static text to the end of the title. e way the Core Components are
wrien, they reference backing Java objects, implemented using the Sling Models framework,
by interface name. For example, the title component’s HTML references an interface named
com.adobe.cq.wcm.core.components.models.Title. When the HTL script asks for an implementation
of this interface, Sling Models uses the implementation class which is associated with the nearest
resource type. So, to provide a custom backing Java object, we need to create a Sling Model class which
uses 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 context
menu.
Specify MyTitle as the Name and click the Finish buon.

45
Put the contents of the le named custom-title-class.txt from your desktop into this le, replacing
any content. en save the le. As with the HTL example above, this class is only different from the
standard 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 updated
to use the new model.

47
Wrapping Up - Recommendations
Now that you’ve seen a bit of what the Core Components can do, you may be interested in starting to
use them. Before jumping in with both feet, it is worth considering Adobe’s recommendation on when
and how to use these components.
For new projects starting on AEM 6.3, we recommend starting with the Core Components where
possible. ere are some Foundation components which do not (yet) have counterparts in the
Core Component set and if those are suitable for your project, by all means use them. But we don’t
recommend using both, for example, the Core Title component and the Foundation Title component in
the 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 requiring
refactoring, there is no need to move from the Foundation Components. Eventually we will deprecate
the Foundation Components, but we have to reach feature parity rst. With respect to your custom
components, while those aren’t impacted by these new Core Components, it is worth looking at the
paerns used by the Core Components and adopting them for your custom components.

48
Appendix: Using is Workbook Outside of

Summit
e desktops used by Summit aendees have been been setup specically to run this lab and this
workbook has been wrien with the assumption that it is being used on one of those desktops. If you
want to run the excercises in this workbook outside of Summit, there are some steps that must be rst
taken.
Soware Installations
AEM
is workbook requires the use of AEM 6.3. You can use any release following Beta Load 4 (internal
designation for Beta Load 4 is Load 19). A valid Adobe Experience Manager license is required.
Eclipse
For the purpose of this lab, we are using Eclipse Neon.2, the current release. To install it, please follow
these steps:
1. Go to hps://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 Soware from Help menu.
2. Click Add buon
3. In the Name eld, enter “AEM Developer Tools”
4. In the Location eld, enter hps://eclipse.adobe.com/aem/dev-tools/
5. Click OK
6. Check both the AEM and Sling checkboxes (or just push the Select All buon)
7. Click the Next buon
8. On the Install Details dialog, click the Next buon
9. Accept the license terms and click the Finish buon
10. Restart Eclipse

49
Lazybones
Lazybones is installed using a two-step process. First, install sdkman, a Soware Development Kit
management system. Instructions for installing sdkman can be found at hp://sdkman.io/install.html. In
short, 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:

sdk install lazybones
And then open a new Terminal window.
Note
Windows users can nd a PowerShell version of sdkman at hps://github.com/ofreud/posh-
gvm. It might also be easier to download the Lazybones distribution, unzip it, and add it to
your path. See hps://github.com/pledbrook/lazybones#running-it
Maven
Maven can be installed using Lazybones as well:
sdk install maven
Other installation methods are detailed on hp://maven.apache.org/install.html
Soware Setup
Lazybones
e Lazybones template used in this workbook is not available in a standard Lazybones conguration. To
enable 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"
]
Maven
If you are using this workbook before AEM 6.3 is released, i.e. you are in the AEM Beta program, you must
add 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:

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 aer AEM 6.3 is released, aer you generate the project in Step 1, edit the
le 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>
Files
e les referenced in this workbook can all be found at hps://adobe.ly/2lRD8lC

L4205 Workbook

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

L4205 Workbook

Încărcat de

Drepturi de autor:

Formate disponibile

AdobeExperience Manager

March 23rd, 2017 Justin Edelson

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

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

Let’s get started!

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

Lesson 0 - Core Components

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

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

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

Prerequisites and Preparation

• Open the AEM folder on the desktop.

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

2. Click the link to create a new server.

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

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

7. Click the Save buon.

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

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

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

Lesson 1 - Starting the Project

Step 1: Generate an AEM Project

To start, open the Terminal.

In the Terminal window, type

And press the Return key.

Step 2: Import the Generated Project into Eclipse

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

To start, switch to Eclipse.

Click the Next buon.

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

Click the Finish buon.

ese projects serve diﬀerent purposes:

• example-project.ui.apps - is project contains conguration, server-side scripts, client-side scripts,

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

Step 3: Publish the Generated Projects to Eclipse

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

Click the Add All >> buon.

Click the Finish buon.

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

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

Lesson 2 - Create a Simple Template

Step 1: Create a new Template

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

Click on the My AEM Project folder to open it.

en click the Create buon to create a template.

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

Step 2: Add Structural Components to the Page

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

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

Repeat for the second layout container.

Step 3: Add a Basic Stylesheet to the Template

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

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

Step 4: Set up a Two Column Layout

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

Lesson 3 - Adding a Core Component to the

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

3. Use one of the components in our template

Step 1: Creating a Text Component

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

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

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

Step 2: Doing It Again

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