Home

Documentation

https://github.com/headwirecom/aemdc

About

AEM Developer Companion (AEMDC) can be used to quickly create any resource in your AEM maven project from predefined templates using the command line or a gui. Currently it is possible to create:

• templates
• components
• editable template structures (since AEM 6.2) with template types
• content pages
• osgi configurations
• java models
• java services
• java servlets

AEMDC allows the developer to prepare different project patterns with placeholders such as AEMDC Files (https://github.com/headwirecom/aemdc-files) for your future AEM projects and quickly setup a new project structure and contents using a sets of command lines.

Install

Download the last released AEMDC binary ".zip" or "tar.gz" file from (https://github.com/headwirecom/aemdc/releases).

Extract the binary to your tools / "Program Files" directory.

Set the JAVA_HOME and GIT_HOME global ENV variables, as well as the path to AEMDC "bin" folder in the global PATH variable. In Windows it must be under "Systems Properties -> Advanced -> Environmental Variables -> User/System Variables". You can also set the PATH in your cmd/cygwin console start command file like:

set JAVA_HOME=C:\Program Files\Java\jdk1.8.0_102
set GIT_HOME=C:\Program Files\Git
set AEMDC_HOME=C:\Program Files\aemdc
set PATH=%PATH%;%JAVA_HOME%\bin;%GIT_HOME%\bin;%AEMDC_HOME%\bin

Video Tutorial

As an example on 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

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

YouTube Video how to use AEMDC.

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 next configuration file.

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

Modify it for your needs, for example

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

3. Checkout project with placeholders.

   aemdc

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

4. Create editable template structure with template-type.

   aemdc confstr project-with-template-type my-aem-project "ranking={Long}1" "aemdc-page-title=AEMDC HTML5 Page" "aemdc-page-description=Template for a AEMDC HTML5 content page." "componentGroup=my-aem-project" "aemdc-page-resourceType=/apps/my-aem-project/components/page/page"

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

5. Create structured page component.

   aemdc component component-page page/page

6. Create paragraph component shells.

   aemdc component component-model content/hero "comp-model=com.headwire.myaem.core.model.hero.Hero" aemdc component component-model content/graphicList aemdc component component-model content/headings aemdc component component-js content/tagline

7. Create component model shells.

   aemdc model wcmusepojo hero "java-class=Hero" aemdc model resourcemodel list "java-class=GraphicList" aemdc model resourcemodel section "java-class=Headings"

8. Create site root content page.

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

aemdc page siteroot my-aem-project "sling:resourceType=/apps/my-aem-project/components/page/page" "cq:template=/conf/my-aem-project/settings/wcm/templates/landingpage"

9. Create policies for editable templates.

Update policies as needed to allow components for your editable templates. Modify the next 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 definition in to components dialogs.

12. Implement component models.

    /src/main/java/com/headwire/myaem/core/model/hero/Hero.java /src/main/java/com/headwire/myaem/core/model/list/GraphicList.java /src/main/java/com/headwire/myaem/core/model/section/Headings.java

13. Implement component JavaScript.

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

14. Create designs assets.

Put HTML static images and fonts to designs folder under

/etc/designs/my-aem-project

15. Create 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 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 "AEMDC HTML5 Page" template Type, click to "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.
• For the new 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 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. Setup 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.