组件基础知识 component-basics

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

主题：

创建对象：

undefined
undefined

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

先决条件 prerequisites

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

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

目标 objective

了解HTL模板和Sling模型对于动态呈现HTML的作用。
了解如何使用对话框促进内容创作。
了解包含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

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

在空目录中，克隆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
或者，您可以继续使用上一章项目设置中生成的项目。

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

code language-shell
`$ cd aem-guides-wknd`

使用以下命令生成项目并将其部署到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`

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

组件创作 component-authoring

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

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

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

在 WKND站点 > US > en 下创建名为 组件基础知识 的页面。
将 Hello World组件 添加到新创建的页面。
打开组件的对话框，然后输入一些文本。保存更改以查看页面上显示的消息。
切换到开发人员模式，并在CRXDE-Lite中查看内容路径并检查组件实例的属性。
使用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

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

切换到IDE并打开项目到ui.apps模块。
打开helloworld.html文件并更新HTML标记。
使用VSCode AEM Sync等IDE工具将文件更改与本地AEM实例同步。
返回到浏览器并观察组件渲染已更改。

打开.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`

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

code language-xml

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>

<?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>

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

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

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

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

使用开发人员插件或您的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

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

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

添加以下import语句：

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

更新@Model注释以使用DefaultInjectionStrategy：

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

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

code language-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() { ...`

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

    ...

    @ValueMapValue
    private String title;

    @ValueMapValue
    private String text;

    @PostConstruct
    protected void init() {
        ...

将以下方法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!"; }`

将以下方法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; }`

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

code language-shell
`$ cd core $ mvn clean install -PautoInstallBundle`

note note
NOTE
对于AEM 6.4/6.5，使用`mvn clean install -PautoInstallBundle -Pclassic`

更新位于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

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>

<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>

使用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

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

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

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

code language-shell
`$ npm run watch`

切换到IDE并打开项目到ui.frontend模块。
打开文件ui.frontend/src/main/webpack/components/_helloworld.scss。

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

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

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

code language-shell

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

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

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

恭喜！ congratulations

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

后续步骤 next-steps

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

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

recommendation-more-help

b2a561c1-47c0-4182-b8c1-757a197484f9