文档AEMAEM 教程AEM Sites WKND 教程

组件基础知识 component-basics

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 初学者
  • 开发人员

在本章中，让我们通过一个简单的HelloWorld示例来探索Adobe Experience Manager (AEM) Sites组件的基础技术。 对现有组件进行了细微的修改，涉及的主题包括创作、HTL、Sling模型、客户端库。

先决条件 prerequisites

查看设置本地开发环境所需的工具和说明。

视频中使用的IDE是Visual Studio Code和VSCode AEM Sync插件。

目标 objective

  1. 了解HTL模板和Sling模型对于动态呈现HTML的作用。
  2. 了解如何使用对话框促进内容创作。
  3. 了解包含CSS和JavaScript以支持组件的客户端库的基础知识。

您即将构建的内容 what-build

在本章中，您对简单的HelloWorld组件执行了多项修改。 在对HelloWorld组件进行更新时，您将了解AEM组件开发的关键领域。

章节起始项目 starter-project

本章以AEM项目原型生成的通用项目为基础。 请观看以下视频并查看先决条件以开始使用！

NOTE
如果成功完成了上一章，则可以重用该项目并跳过签出入门项目的步骤。

https://video.tv.adobe.com/v/345300?quality=12&learn=on&captions=chi_hans

打开新的命令行终端并执行以下操作。

  1. 在空目录中，克隆aem-guides-wknd存储库：

    code language-shell 
    $ git clone git@github.com:adobe/aem-guides-wknd.git --branch tutorial/component-basics-start --single-branch
    note note
    NOTE
    或者，您可以继续使用上一章项目设置中生成的项目。

  2. 导航到aem-guides-wknd文件夹。

    code language-shell 
    $ cd aem-guides-wknd

  3. 使用以下命令生成项目并将其部署到AEM的本地实例：

    code language-shell 
    $ mvn clean install -PautoInstallSinglePackage
    note note
    NOTE
    如果使用AEM 6.5或6.4，请将classic配置文件附加到任何Maven命令。
    code language-shell 
    $ mvn clean install -PautoInstallSinglePackage -Pclassic

  4. 按照有关设置本地开发环境的说明将项目导入您的首选IDE。

组件创作 component-authoring

组件可以被视为网页的小型模块化构建基块。 要重用组件，必须对组件进行配置。 这是通过创作对话框实现的。 接下来，我们创建一个简单的组件，并检查对话框中的值如何在AEM中保留。

https://video.tv.adobe.com/v/345290?quality=12&learn=on&captions=chi_hans

以下是上述视频中执行的高层级步骤。

  1. 在​ WKND站点 > US > en ​下创建名为​ 组件基础知识 ​的页面。
  2. 将​ Hello World组件 ​添加到新创建的页面。
  3. 打开组件的对话框，然后输入一些文本。 保存更改以查看页面上显示的消息。
  4. 切换到开发人员模式，并在CRXDE-Lite中查看内容路径并检查组件实例的属性。
  5. 使用CRXDE-Lite查看/apps/wknd/components/content/helloworld中的cq:dialog和helloworld.html脚本。

HTL(HTML模板语言)和对话框 htl-dialogs

HTML模板语言或​ HTL ​是AEM组件用于呈现内容的轻量级服务器端模板语言。

对话框 ​定义可以为组件生成的可用配置。

接下来，让我们更新HelloWorld HTL脚本，以便在文本消息之前显示额外的问候语。

https://video.tv.adobe.com/v/345282?quality=12&learn=on&captions=chi_hans

以下是上述视频中执行的高层级步骤。

  1. 切换到IDE并打开项目到ui.apps模块。

  2. 打开helloworld.html文件并更新HTML标记。

  3. 使用VSCode AEM Sync等IDE工具将文件更改与本地AEM实例同步。

  4. 返回到浏览器并观察组件渲染已更改。

  5. 打开.content.xml文件，该文件定义HelloWorld组件的对话框，位置：

    code language-plain 
    <code>/aem-guides-wknd/ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/_cq_dialog/.content.xml

  6. 更新对话框以添加名为​ Title ​且名称为./title的额外文本字段：

    code language-xml 
    <?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Properties"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <title
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Title"
                        name="./title"/>
                    <text
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Text"
                        name="./text"/>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

  7. 重新打开文件helloworld.html，该文件表示负责从以下路径呈现HelloWorld组件的主HTL脚本：

    code language-plain 
        <code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html

  8. 更新helloworld.html以将​ Greeting ​文本字段的值渲染为H1标记的一部分：

    code language-html 
    <div class="cmp-helloworld" data-cmp-is="helloworld">
    <h1 class="cmp-helloworld__title">${properties.title}</h1>
    ...
</div>

  9. 使用开发人员插件或您的Maven技能将更改部署到AEM的本地实例。

Sling 模型 sling-models

Sling模型是注释驱动的Java™“POJO”(纯旧Java™对象)，便于将数据从JCR映射到Java™变量。 在AEM的上下文中进行开发时，它们还提供了其他一些细节。

接下来，我们对HelloWorldModel Sling模型进行一些更新，以便在将存储在JCR中的值输出到页面之前，将其应用一些业务逻辑。

https://video.tv.adobe.com/v/36031?quality=12&learn=on&captions=chi_hans

  1. 打开文件HelloWorldModel.java，它是与HelloWorld组件一起使用的Sling模型。

    code language-plain 
    <code>/aem-guides-wknd.core/src/main/java/com/adobe/aem/guides/wknd/core/models/HelloWorldModel.java

  2. 添加以下import语句：

    code language-java 
    import org.apache.commons.lang3.StringUtils;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;

  3. 更新@Model注释以使用DefaultInjectionStrategy：

    code language-java 
    @Model(adaptables = Resource.class,
   defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
   public class HelloWorldModel {
   ...

  4. 将以下行添加到HelloWorldModel类以将该组件的JCR属性title和text的值映射到Java™变量：

    code language-java 
    ...
@Model(adaptables = Resource.class,
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class HelloWorldModel {

    ...

    @ValueMapValue
    private String title;

    @ValueMapValue
    private String text;

    @PostConstruct
    protected void init() {
        ...

  5. 将以下方法getTitle()添加到HelloWorldModel类，该类返回名为title的属性的值。 此方法添加其他逻辑以返回“此处为默认值！”的字符串值。 如果属性title为null或为空：

    code language-java 
    /***
*
* @return the value of title, if null or blank returns "Default Value here!"
*/
public String getTitle() {
    return StringUtils.isNotBlank(title) ? title : "Default Value here!";
}

  6. 将以下方法getText()添加到HelloWorldModel类，该类返回名为text的属性的值。 此方法将字符串转换为所有大写字符。

    code language-java 
        /***
    *
    * @return All caps variation of the text value
    */
public String getText() {
    return StringUtils.isNotBlank(this.text) ? this.text.toUpperCase() : null;
}

  7. 从core模块生成并部署捆绑包：

    code language-shell 
    $ cd core
$ mvn clean install -PautoInstallBundle
    note note
    NOTE
    对于AEM 6.4/6.5，使用mvn clean install -PautoInstallBundle -Pclassic

  8. 更新位于aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/content/helloworld/helloworld.html的文件helloworld.html以使用HelloWorld模型的新创建方法。

    已通过HTL指令为此组件实例实例实例化了HelloWorld模型： data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel"，将实例保存到变量model。

    现在，通过使用HelloWord的model变量，HelloWorld模型实例在HTL中可用。 这些方法调用可以使用缩短的方法语法，例如： ${model.getTitle()}可以缩短为${model.title}。

    同样，所有HTL脚本都插入了全局对象，可以使用与Sling模型对象相同的语法访问这些对象。

    code language-html 
    <div class="cmp-helloworld" data-cmp-is="helloworld"
    data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel">
    <h1 class="cmp-helloworld__title">${model.title}</h1>
    <div class="cmp-helloworld__item" data-sly-test="${properties.text}">
        <p class="cmp-helloworld__item-label">Text property:</p>
        <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${properties.text}</pre>
    </div>
    <div class="cmp-helloworld__item" data-sly-test="${model.text}">
        <p class="cmp-helloworld__item-label">Sling Model getText() property:</p>
        <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${model.text}</pre>
    </div>
</div>

  9. 使用Eclipse开发人员插件或您的Maven技能将更改部署到AEM的本地实例。

客户端库 client-side-libraries

客户端库（简称clientlibs）提供了一种机制，用于组织和管理AEM Sites实施所需的CSS和JavaScript文件。 客户端库是在AEM的页面上包含CSS和JavaScript的标准方法。

ui.frontend模块是集成到生成过程中的分离的webpack项目。 这允许使用常见的前端库，如Sass、LESS和TypeScript。 ui.frontend模块将在客户端库一章中深入探讨。

接下来，更新HelloWorld组件的CSS样式。

https://video.tv.adobe.com/v/344332?quality=12&learn=on&captions=chi_hans

以下是上述视频中执行的高层级步骤。

  1. 打开终端窗口并导航到ui.frontend目录

  2. 位于ui.frontend目录中运行npm install npm-run-all --save-dev命令以安装npm-run-all节点模块。 此步骤在Archetype 39生成的AEM项目​ 上是 ​必需的，在即将发行的Archetype版本中，此步骤不是必需的。

  3. 接下来，运行npm run watch命令：

    code language-shell 
    $ npm run watch

  4. 切换到IDE并打开项目到ui.frontend模块。

  5. 打开文件ui.frontend/src/main/webpack/components/_helloworld.scss。

  6. 更新文件以显示红色标题：

    code language-scss 
    .cmp-helloworld {}
.cmp-helloworld__title {
    color: red;
}

  7. 在终端中，您应该会看到表示ui.frontend模块正在编译更改并将其与AEM的本地实例同步的活动。

    code language-shell 
    Entrypoint site 214 KiB = clientlib-site/site.css 8.45 KiB clientlib-site/site.js 206 KiB
2022-02-22 17:28:51: webpack 5.69.1 compiled successfully in 119 ms
change:dist/index.html
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js
+ jcr_root/apps/wknd/clientlibs/clientlib-site
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies

  8. 返回到浏览器并观察标题颜色已更改。

    组件基础知识更新

恭喜！ congratulations

恭喜，您已了解Adobe Experience Manager中组件开发的基础知识！

后续步骤 next-steps

在下一章页面和模板中熟悉Adobe Experience Manager页面和模板。 了解如何将核心组件代理到项目中，并了解可编辑模板的高级策略配置，以构建结构良好的文章页面模板。

在GitHub上查看完成的代码，或在Git分支tutorial/component-basics-solution上本地查看和部署代码。

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9