How To Use

AEM project creation

As an example of how to use AEMDC, the steps below show the integration of "Template 1: Landing Page" from

https://standards.usa.gov/page-templates/#landing-page

Prerequisites:

• Installation of AEMDC
• Installation of Maven
• Installation of Git
• Installation of Adobe Consulting AEM Lazybones Templates

Step-by-step AEMDC GUI Tutorial

This tutorial uses the AEMDC graphical user interface, however, you can also use the command line interface instead by using aemdc command.

1. Create a new AEM maven project "my-aem-project" using the Lazybones project creator.

   lazybones create aem-multimodule-project my-aem-project -PgroupId=com.headwire.myaem -PartifactId=my-aem-project -PuseNewNamingConvention=yes -PbundleInBundlesDirectory=no -PbundleArtifactId=my-aem-project.core -PcontentArtifactId=my-aem-project.ui.apps -Pversion=1.0.0-SNAPSHOT -PprojectName="My AEM Project" -PpackageGroup=my-aem-project -PaemVersion=6.2 -PappsFolderName=my-aem-project -PcontentFolderName=my-aem-project -PcreateEditableTemplatesStructure=yes -PconfFolderName=my-aem-project -PcreateDesign=yes -PdesignFolderName=my-aem-project -PcreateMainClientLib=yes -PcreateDependenciesClientLib=no -PenableCodeQuality=no -PcreateRunModeConfigFolders=no -PcreateAuthorAndPublishPerEnv=no -PreconfigureRootMapping=no -PincludeAcsAemCommons=no -PusingSlingModels=yes -PslingModelsPackage=com.headwire.myaem.core.model -PpurgeDamWorkflows=no

2. Create configuration properties.

Go to parent project "/my-aem-project" and create a configuration file:

aemdc config

This command creates the following configuration file:

/my-aem-project/aemdc-config.properties

Modify it according to your needs; for example:

TARGET_JAVA_PACKAGE_FOLDER={{TARGET_JAVA_FOLDER}}/com/headwire/myaem/core
TARGET_OSGI_SUBFOLDER=/configuration

3. Start the AEMDC GUI and checkout project with placeholders.

   aemdcgui

In the interactive mode clone the "aemdc-files" placeholders project from GitHub.

Or use git clone command

git clone https://github.com/headwirecom/aemdc-files.git ../aemdc-files

Modify the aemdc-file templates as needed for your project and restart aemdcgui

4. Create an AEM editable template structure with a template-type.

The "Preview" button shows the expected result file structure in the "preview" tab.

Click the "Create" button to create the resources. The "log" tab shows the result log.

If desired, rename the "aemdc-page" template-type.

5. Create a structured page component.

The "Preview" button shows the expected result file structure in the "preview" tab.

Click the "Create" button to create a page component.

6. Create paragraph component shells.

Create a "Hero" component

Create a "GraphicList" component

Create a "Headings" component

Create a "Tagline" component

The result project component structure will look like

7. Create component model shells.

Create a "Hero" component model

Create a "GraphicList" component model

Create a "Headings" component model

The resulting project models structure will look like this:

8. Create the site root content page.

Our custom Landing Page editable template will be used for site root content page. The Landing Page editable template itself will be created later under /conf/my-aem-project/settings/wcm/templates/landingpage

The resulting project content root structure will look like this:

9. Create policies for editable templates.

Update policies as needed to allow components for your editable templates. Modify the following resource:

/conf/my-aem-project/settings/wcm/policies/.content.xml

10. Copy html to page component shells.

    /apps/my-aem-project/components/page/page.html, body.html, ...

11. Copy html to paragraph component shells.

    /apps/my-aem-project/components/content/hero /apps/my-aem-project/components/content/tagline /apps/my-aem-project/components/content/graphicList /apps/my-aem-project/components/content/headings

Put field definitions into components dialogs.

12. Implement component models.

    /src/main/java/com/headwire/myaem/core/model/content/Hero.java /src/main/java/com/headwire/myaem/core/model/content/impl/HeroImpl.java /src/main/java/com/headwire/myaem/core/model/content/Headings.java /src/main/java/com/headwire/myaem/core/model/content/impl/HeadingsImpl.java /src/main/java/com/headwire/myaem/core/model/GraphicList.java /src/main/java/com/headwire/myaem/core/model/impl/GraphicListImpl.java

13. Implement component JavaScript.

    /apps/my-aem-project/components/content/tagline/tagline.js

14. Create designs assets.

Put HTML static images and fonts into the designs folder under

/etc/designs/my-aem-project

15. Create a client library for JavaScript and CSS used in your site under

    /etc/clientlibs/my-aem-project/main

16. Update filter.xml

Modify the file

/my-aem-project/ui.apps/src/main/content/META-INF/vault/filter.xml

with

<filter root="/apps/my-aem-project"/>
<filter root="/conf/my-aem-project/settings/wcm/policies" mode="merge"/>
<filter root="/conf/my-aem-project/settings/wcm/templates" mode="merge"/>
<filter root="/conf/my-aem-project/settings/wcm/template-types"/>
<filter root="/content/my-aem-project" mode="merge"/>
<filter root="/etc/designs/my-aem-project"/>
<filter root="/etc/clientlibs/my-aem-project"/>

17. Deploy the project to AEM.

In the root of "my-aem-project" project, run:

mvn clean install -PautoInstallPackage

OR

mvn clean install -PautoInstallPackage --settings /<path-to-maven-user-settings>/settings.xml

18. Create a new editable template - Author.

To create a new "landingpage" template, see [Creating a New Template - Author](https://docs.adobe.com/docs/en/aem/6-2/author/site-page-features/templates.html#Creating a New Template - Author)

Go to the Template console at

http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf

• Select Folder "my-aem-project" and click to "Create" to create a new template.
• Select the "AEMDC HTML5 Page" template and click "Next".

• Complete the Template Details with Template Name: "landingpage" and Description: "Editable template for Landing Page".
• Select Create. A confirmation will be shown; select Done to return to the template console.
• Select the newly created template "landingpage".
• Select Enable from the Toolbar, and again in the confirmation dialog.

19. Editing a Template Structure - Author.

    http://localhost:4502/editor.html/conf/my-aem-project/settings/wcm/templates/landingpage/structure.html

Drag and Drop the following components into a Layout Container:

/apps/my-aem-project/components/content/hero
/apps/my-aem-project/components/content/tagline
/apps/my-aem-project/components/content/graphicList
/apps/my-aem-project/components/content/headings

Unlock structure components.

20. Allow templates - Author.

• Go to the Sites

  http://localhost:4502/sites.html/content)

• Open the root Content Page "my-aem-project".

  http://localhost:4502/editor.html/content/my-aem-project.html

• Open Properties of this page (in the left top corner)

• Open the Advanced tab.

• Under Template Settings, use Add field to specify the path(s) to your template(s).

  /conf/my-aem-project/settings/wcm/templates/.*

21. Set up the designs - Author.

• In the same Advanced tab under Settings, specify the path to your designs.

  /etc/designs/my-aem-project

• Click "Done" to save and close dialog.

22. Create basic site - Author.

• Create a new "landingpage" Content Page

  /content/my-aem-project/landingpage

• Open the page

  http://localhost:4502/editor.html/content/my-aem-project/landingpage.html

• Edit Component contents over component dialogs or over in-place-editing.

23. Publishing a Template - Author.

• In the Templates console, select the template.
• Select Publish from the toolbar to open the wizard.
• Select the Content Policies to be published in tandem.
• Select Publish from the toolbar to complete the action.