我爱编程：AEM学习笔记

This note will focus on project setup, core components, editable templates, client-side libraries, and component development with AEM sites.

The link: Get started with AEM Sites – WKND tutorial | Adobe Experience Manager

Create the project

Verify the Maven is installed.
Navigate to the directory where you want to generate the AEM project.
Paste the following code.

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \
    -D archetypeGroupId=com.adobe.aem \
    -D archetypeArtifactId=aem-project-archetype \
    -D archetypeVersion=39 \
    -D appTitle="WKND Sites Project" \
    -D appId="wknd" \
    -D groupId="com.adobe.aem.guides" \
    -D artifactId="aem-guides-wknd" \
    -D package="com.adobe.aem.guides.wknd" \
    -D version="0.0.1-SNAPSHOT" \
    -D aemVersion="cloud"

4. The following folder and file structure is generated.

~/code/
    |--- aem-guides-wknd/
        |--- all/
        |--- core/
        |--- ui.apps/
        |--- ui.apps.structure/
        |--- ui.config/
        |--- ui.content/
        |--- ui.frontend/
        |--- ui.tests /
        |--- it.tests/
        |--- dispatcher/
        |--- pom.xml
        |--- README.md
        |--- .gitignore

Deploy and build the project.

Ensure an author instance of AEM running locally on port 4502.
From the command line, navigate to the project directory.

$ cd aem-guides-wknd

3. Run the following command to build and deploy the entire project to AEM.

$ mvn clean install -PautoInstallSinglePackage

4. Navigate to Package Manager on your local AEM instance: http://localhost:4502/crx/packmgr/index.jsp. You should see packages for aem-guides-wknd.ui.apps, aem-guides-wknd.ui.config, aem-guides-wknd.ui.content, and aem-guides-wknd.all.

5. Navigate to the Sites console: http://localhost:4502/sites.html/content. The WKND Site is one of the sites. It includes a site structure with a US and Language Masters hierarchy. This site hierarchy is based on the values for language_country and isSingleCountryWebsite when generating the project using the archetype.

6. Open the US > English page by selecting the page and clicking the Edit button in the menu bar:

7. Starter content has already been created and several components are available to be added to a page. Experiment with these components to get an idea of the functionality.

Inspect the project

The generated AEM project is made up of individual Maven modules, each with a different role. This tutorial and most development focus on these modules:

core – Java Code, primarily back-end developers.
ui.frontend – Contains source code for CSS, JavaScript, Sass, TypeScript, primarily for front-end developers.
ui.apps – Contains component and dialog definitions, embeds compiled CSS and JavaScript as client libraries.
ui.content – contains structural content and configurations like editable templates, metadata schemas (/content,%20/conf?lang=en).
all – this is an empty Maven module that combines the above modules into a single package that can be deployed to an AEM environment.

Inclusion of Core Components

AEM Core Components are a set of standardized Web Content Management (WCM) components for AEM. These components provide a baseline set of a functionality and are styled, customized, and extended for individual projects.

Source Control Management

Maven creates a target folder whenever you build and install the code package. The target folder and contents should be excluded from SCM.

Under, the ui.apps module observe that many .content.xml files are created. These XML files map the node types and properties of content installed in the JCR. These files are critical and cannot be ignored.

The AEM project archetype generates a sample .gitignore file that can be used as a starting point for which files can be safely ignored. The file is generated at <src>/aem-guides-wknd/.gitignore.

Ui.apps and Ui.content modules

The ui.apps maven module contains all the rendering code needed for the site beneath /apps. This includes CSS/JS that is stored in an AEM format called clientlibs. This also includes HTL scripts for rendering dynamic HTML. You can think of the ui.apps module as a map to the structure in the JCR but in a format that can be stored on a file system and committed to source control. The ui.apps module only contains code.

Component Authoring

Components can be thought of as small modular building blocks of a web page. In order to reuse components, the components must be configurable. This is accomplished via the author dialog. Next let’s author a simple component and inspect how values from the dialog are persisted in AEM.

TL (HTML Template Language) and Dialogs

HTML Template Language or HTL is a light-weight, server-side templating language used by AEM components to render content.

Dialogs define the configurations available that can be made for a component.

Create the Article Page Template

When creating a page you must select a template, which is used as the basis for creating the page. The template defines the structure of the resultant page, initial content, and allowed components.

There are three main areas of Editable Templates:

Structure – defines components that are a part of the template. These are not editable by content authors.
Initial Content – defines components that the template start with, these can be edited and/or deleted by content authors
Policies – defines configurations on how components behave and what options authors have.

Client libraries and front-end workflow

Client-Side Libraries provide a mechanism to organize and manage CSS and JavaScript files necessary for an AEM Sites implementation. The basic goals for client-side libraries or clientlibs are:

Store CSS/JS in small discrete files for easier development and maintenance
Manage dependencies on third-party frameworks in an organized fashion
Minimize the number of client-side requests by concatenating CSS/JS into one or two requests.

Client-side libraries do have some limitations. Most notably is a limited support for popular front-end languages like Sass, LESS, and TypeScript.

Update base styles

Next, update the base styles defined in the ui.frontend module. The files in the ui.frontend module generate the clientlib-site and clientlib-dependecies libraries that contain the Site theme and any third-party dependencies.

Client-side libraries do not support more advanced languages like Sass or TypeScript. There are several open-source tools like NPM and webpack that accelerate and optimize front-end development. The goal of the ui.frontend module is to be able to use these tools to manage most front-end source files.