Home

Documentation

https://github.com/headwirecom/aemdc

About

AEM Developer Companion (AEMDC) helps to quckly create any resource in your AEM maven project from predefined templates using command lines. Currently it is possible to create:

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

AEMDC allows 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 project contents using the 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 any your tools / "Program Files" directory.

Set 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 GIT_PATH=C:\Program Files\Git
set AEMDC_PATH=C:\mytools\aemdc
set PATH=%PATH%;%GIT_PATH%\bin;%AEMDC_PATH%\bin

Use example and video

As example of AEMDC using the next steps show 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

YouTube Video how to use AEMDC

https://github.com/headwirecom/aemdc/wiki/images/aemdc-youtube.jpg

1. Create a new AEM maven project "my-aem-project" using 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 -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_OSGI_FOLDER={{TARGET_PROJECT_ROOT}}/config
TARGET_JAVA_PACKAGE={{TARGET_JAVA_FOLDER}}/com/headwire/myaem/core

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-files templates for you needs.

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"

Rename the "aemdc-page" template-type if you want.

5. Create structured page component.

   aemdc comp contentpage page/page

6. Create paragraph component shells.

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

7. Create component model shells.

   aemdc model HeroModel.java hero/Hero.java aemdc model SampleSlingModel.java list/GraphicList.java aemdc model SampleSlingModel.java section/Headings.java

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 for your needs 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 fields definition in to components dialogs.

12. Implement component models.

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

13. Implement component JavaScripts.

    /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 JavaScripts 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 next 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.