Agenda Day 2:

• Installation of Geometrixx Website – 6.3

• Service configuration TOUCH to CLASSIC mode.
• Authoring Basics – WCM Modes.
• Website creation in CRXDE.
• AEM Template creation.
• AEM Component creation.
• AEM Pages.
• Side Kick on pages.
• Paragraph System on pages.

1. Installation of Geometrixx Website – 6.3

Adobe Experience Manager (AEM) version 6.3 and 6.4 comes with a default website i.e we-
retail and very less supported on classic UI as per the new migration policy.
Earlier versions having “Geometrixx” site having capability to show both classic and Touch UI
views of website.
Good to start with “Geometrixx”
To install “Geometrixx” in AEM 6.3 (Not supported in 6.4), you need to install a package “cq-
geometrixx-all-pkg-5.10.68.zip”

Step 1: Open package manager (Put appropriate port number)

http://localhost:4506/crx/packmgr/index.jsp

Svsoft solutions - An Online Training

Institute<info@svsoftsolutions.com>
Click ‘upload package’, browse the zip file on local environment and press OK.

Step 2: Click on install, Package will install on local machine.

2. Service configuration TOUCH to CLASSIC mode.

Navigate to site admin by :

http://localhost:4506/siteadmin
Navigate to below page, and double click on Men’s

Page will open in Touch UI mode as below:

http://localhost:4506/editor.html/content/geometrixx-outdoors/en/men.html

Svsoft solutions - An Online Training

Institute<info@svsoftsolutions.com>
Touch UI page have editor.html in URL at author
Classic UI page have cf# in URL at author.

How to open the page in classic mode?

2 ways,

• Replace editor.html with cf#

http://localhost:4506/editor.html/content/geometrixx-outdoors/en/men.html
http://localhost:4506/cf#/content/geometrixx-outdoors/en/men.html

• Change the respective configuration in config manager.

Goto http://localhost:4506/system/console/configMgr
Search “Authoring”.

Svsoft solutions - An Online Training

Institute<info@svsoftsolutions.com>
Open WCM Authoring UI mode Service.

Replace TOUCH with CLASSIC.

Press Save.

Go back to site admin, open the mens page again. (double click)

Page will open in Classic UI.

Svsoft solutions - An Online Training

Institute<info@svsoftsolutions.com>
 3. Authoring Basics – WCM Modes.

• Edit – default mode.

• Preview – Publish View, mode removes all the authoring interface and shows you how
the web page would look on the website
• Design – Design view to include the components and design dialog edit.
• Disabled – preview + remove sidekick -> Publish View
?wcmmode=(edit|preview|design|disabled)

4. Site Creation in CRXDE

3 Ways to create website in adobe AEM.

1. CRXDE Lite.
2. Maven Archetype
3. Eclipse – Plugin.

Start with CRXDE lite (IDE comes with AEM – Part of CRX repository along with User access
control, observation and indexing – JCR features).

Svsoft solutions - An Online Training

Institute<info@svsoftsolutions.com>
Open the CRXDE
http://localhost:4506/crx/de
Open apps folder, right click on it, select create folder and give name of your website.

Create below folders under your created folder.

• components
• templates
• src
• install
• clientlibs
• config

5. AEM Template Creation

• An essential to create a page

• An initial page layout, also defines the structure of page.
• A page rendering component script attached to the template.
• Template are of 2 types (Static / Editable).
• A page, when create using template copy the node properties from template to its child
node i.e. jcr:content node. (check primary type and sling:resourceType), no dynamic
connection after it (Static Template)
• Static templates must be configured by the developers.

Svsoft solutions - An Online Training

Institute<info@svsoftsolutions.com>
Reference : https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/templates.html

Properties while creating template:

1. Label – Node name (avoid spaces, special charater)

2. Title – The title of Template (Display in page creation dialog)
3. Description.
4. Resource Type: Page component path.
5. Ranking (To show in page dialog – priority)
6. Allowed Paths (To show the templates on page creation, can be controlled) - /content or
/content/abc or /content(/.*)?
7. Allowed Parents -- Path of a template that is allowed to be a parent of this template. (Sub pages
template control.)
8. Allowed Children -- Path of a template that is allowed to be a child of this template. (Sub pages
template control.)

Sample:
These properties allows you to set some contract of structure of pages in you project. For example: you
have 3 templates (and corresponding pages with this templates):

• template-1: allowedChildren="[template-2]"
• template-2: allowedChildren="[template-3]"
• template-3: allowedChildren="[]"
•
Then in siteadmin, you will be able to create:

• under page with template "template-1" only pages with template "template-2",
• under page with template "template-2" only pages with template "template-3",
• under page with template "template-3" you will not be able to create any page.

6. AEM Component Creation (Page + Global)

• Basic building block on any website, reusable or global on multiple pages.

• Static or dynamic.
• Each created component will be having default rendering script.
• 2 Category of component – Page and Global
• Page component attached to the template, it renders the template logic to display the layouts
or to integrate the sidekick, paragraph system, page level properties etc.

Svsoft solutions - An Online Training

Institute<info@svsoftsolutions.com>
Properties:
• Super Type : Inheritance purpose, reusability within components
• Group : The category for side kick or components browser.
• Is container : component behaves like a container – Can include the parsys
• No decoration : No wrapper to component.
• Cell Name : https://helpx.adobe.com/experience-manager/kb/DesigneCellId.html
• Dialog Path : path of dialog of other component if it does not have any.

Create folder page, under it right click and select Create Component, and fill above properties if
applicable for page component. And ok.
Remove the default generated script, write some thing.

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/components-basics.html

7. AEM Page

Goto Siteamdin, Select websites, click on new page.

http://localhost:4506/siteadmin

Select the appropriate template (it will be appearing in the dialog) and press create.

Open the page by double click:

Svsoft solutions - An Online Training

Institute<info@svsoftsolutions.com>
 8. Side Kick on pages

<%@include file="/libs/foundation/global.jsp"%>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>

global.jsp ->
When you develop the JSP script of a AEM component, it is recommended to include the following code
at the top of the script:

<%@include file=”/libs/foundation/global.jsp”%>

• The Adobe provided global.jsp declares the Sling, CQ and JSTL taglibs and exposes the regularly
used scripting objects defined by the tag.

• This shortens and simplifies the JSP code of your component.

• Note:- Adobe recommend to use HTL (formerly known as Sightly)

Svsoft solutions - An Online Training

Institute<info@svsoftsolutions.com>
9. Paragraph System on pages

<cq:include path="par" resourceType="/libs/foundation/components/parsys" />

Svsoft solutions - An Online Training

Institute<info@svsoftsolutions.com>