元件基礎

在本章中，我們將通過一個簡單的IP，來探AEM討Adobe Experience Manager()站點元件的底層技術 HelloWorld 示例。將對現有元件進行小量修改，內容涵蓋創作、HTL、Sling模型、客戶端庫等主題。

必備條件

查看所需的工具和設定地方開發環境。

視頻中使用的IDE是 Visual Studio代碼和 VSCode同AEM步插件。

目標

瞭解HTL模板和Sling模型的角色以動態渲染HTML。
瞭解如何使用對話框來方便內容的創作。
瞭解客戶端庫的基本知識，以包括支援元件的CSS和JavaScript。

您將構建的

在本章中，您將對非常簡單的 HelloWorld 元件。在更新 HelloWorld 元件將瞭解元件開發的AEM關鍵領域。

第一章啟動項目

本章基於由項AEM目原型。觀看以下視頻並查看先決條件開始！

注意

如果成功完成了上一章，則可以重新使用項目，並跳過簽出啟動程式項目的步驟。

開啟新的命令行終端並執行以下操作。

在空目錄中，克隆埃姆 — 吉德 — 溫德儲存庫：
```
$ git clone git@github.com:adobe/aem-guides-wknd.git --branch tutorial/component-basics-start --single-branch
```
注意

（可選）您可以繼續使用上一章中生成的項目。項目設定。
導航到 aem-guides-wknd 的子菜單。
```
$ cd aem-guides-wknd
```
使用以下命令生成項目並將其部署到AEM的本地實例：
```
$ mvn clean install -PautoInstallSinglePackage
```
注意

如果使AEM用6.5或6.4，則追加 classic 配置檔案。
```
$ mvn clean install -PautoInstallSinglePackage -Pclassic
```
按照說明將項目導入首選IDE，以設定地方開發環境。

元件創作

元件可以被視為網頁的小模組化構造塊。為了重新使用元件，元件必須是可配置的。這是通過作者對話框完成的。接下來，我們將編寫一個簡單的元件並檢查對話框中的值是如何保留AEM的。

下面是上述視頻中執行的高級步驟。

建立名為 元件基礎 下 WKND站點 > 美國 > 恩。
添加 Hello World元件 的子菜單。
開啟元件的對話框並輸入一些文本。保存更改以查看頁面上顯示的消息。
切換到開發模式，在CRXDE-Lite中查看內容路徑並檢查元件實例的屬性。
使用CRXDE-Lite查看 cq:dialog 和 helloworld.html 位於 /apps/wknd/components/content/helloworld。

HTL(HTML模板語言)和對話框

HTML模板語言或 HTL 是元件用於呈現內容的輕量級伺服器端模AEM板語言。

對話框 定義可為元件建立的配置。

接下來，我們將更新 HelloWorld HTL指令碼，在文本消息前顯示附加問候語。

下面是上述視頻中執行的高級步驟。

切換到IDE並將項目開啟到 ui.apps 中。
開啟 helloworld.html 的子菜單。
使用IDE工具，如 VSCode同AEM步將檔案更改與本地實例同AEM步。
返回到瀏覽器並觀察元件呈現已更改。

開啟 .content.xml 定義對話框的檔案 HelloWorld 元件位於：

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

更新對話框以添加名為標題名為 ./title:

<?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，它表示負責呈現的主HTL指令碼 HelloWorld 元件，位於：

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

更新 helloworld.html 顯示 問候語 作為文本欄位的一部分 H1 標籤：

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

將更改部署到使用開發人員插AEM件或使用Maven技能的本地實例。

Sling 模型

Sling模型是注釋驅動的Java "POJO's"(Plain Old Java Objects)，它便於將資料從JCR映射到Java變數，並在上下文中開發時提供許多其他細AEM節。

接下來，我們將對 HelloWorldModel Sling Model（Sling模型），用於在將某些業務邏輯輸出到頁面之前，將其應用於JCR中儲存的值。

開啟檔案 HelloWorldModel.java，即與 HelloWorld 元件。

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

添加以下導入語句：

import org.apache.commons.lang3.StringUtils;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;

更新 @Model 注釋以使用 DefaultInjectionStrategy:

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

將以下行添加到 HelloWorldModel 類以映射元件的JCR屬性的值 title 和 text 到Java變數：

...
@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 為空或為空：

/***
*
* @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。此方法將字串轉換為全部大寫字元。

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

從 core 模組：
```
$ cd core
$ mvn clean install -PautoInstallBundle
```
注意

如果使用AEM6.4/6.5使用 mvn clean install -PautoInstallBundle -Pclassic

更新檔案 helloworld.html 在 aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/content/helloworld/helloworld.html 使用 HelloWorld 模型：

<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 class="cmp-helloworld__item"  data-sly-test="${model.message}">
        <p class="cmp-helloworld__item-label">Model message:</p>
        <pre class="cmp-helloworld__item-output"data-cmp-hook-helloworld="model">${model.message}</pre>
    </div>
</div>

將更改部署到使用Eclipse Developer插AEM件或使用Maven技能的本地實例。

用戶端資源庫

客戶端庫（簡稱客戶端庫）提供了一種機制，用於組織和管理AEM Sites實現所需的CSS和JavaScript檔案。客戶端庫是在中的頁面上包含CSS和JavaScript的標準方AEM法。

的 ui.frontend 模組是網路包整合到生成流程中的項目。這允許使用常用的前端庫，如Sass、LESS和TypeScript。的 ui.frontend 將更深入地研究模組「客戶端庫」一章。

接下來，更新 HelloWorld 元件。

下面是上述視頻中執行的高級步驟。

開啟終端窗口並導航到 ui.frontend 目錄和
在 ui.frontend 目錄運行 npm run watch 命令：
```
$ npm run watch
```
切換到IDE並將項目開啟到 ui.frontend 中。
開啟檔案 ui.frontend/src/main/webpack/components/_helloworld.scss。

更新檔案以顯示紅色標題：

.cmp-helloworld {}
.cmp-helloworld__title {
    color: red;
}

在終端中，您應看到顯示 ui.frontend 模組正在編譯更改並與的本地實例同步AEM。

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

返回到瀏覽器並觀察標題顏色已更改。

恭喜！

祝賀您，您剛剛在Adobe Experience Manager學到了元件開發的基礎知識！

後續步驟

熟悉下一章中的Adobe Experience Manager頁面和模板頁面和模板。瞭解如何將核心元件代理到項目中，並瞭解可編輯模板的高級策略配置以構建結構良好的文章頁面模板。

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

全新的改善搜尋

元件基礎

必備條件

目標

您將構建的

第一章啟動項目

元件創作

HTL(HTML模板語言)和對話框

Sling 模型

用戶端資源庫

恭喜！

後續步驟

adobe.com 上的資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe