元件基本知識

切換至IDE並開啟專案至ui.apps模組。

開啟helloworld.html檔案並更新HTML標籤。

使用VSCode AEM Sync之類的IDE工具，將檔案變更與本機AEM執行個體同步。

返回瀏覽器並觀察元件轉譯器已變更。

開啟定義HelloWorld元件之對話方塊的.content.xml檔案：

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

更新對話方塊以新增名稱為​ Title ​且名稱為./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，該檔案代表負責從以下路徑轉譯HelloWorld元件的主要HTL指令碼：

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

更新helloworld.html以將​ Greeting ​文字欄位的值轉譯為H1標籤的一部分：

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

使用開發人員外掛程式或您的Maven技能，將變更部署到AEM的本機執行個體。

開啟檔案HelloWorldModel.java，這是搭配HelloWorld元件使用的Sling模型。

<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為null或空白：

/***
*
* @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

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。

HelloWorld模型執行個體現在可以透過model變數，使用HelloWord在HTL中使用。 這些方法引動可以使用縮短的方法語法，例如： ${model.getTitle()}可以縮短為${model.title}。

同樣地，所有HTL指令碼都插入了全域物件，您可以使用與Sling模型物件相同的語法來存取這些物件。

<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的本機執行個體。

開啟終端機視窗並導覽至ui.frontend目錄

在ui.frontend目錄中執行npm install npm-run-all --save-dev命令以安裝npm-run-all節點模組。 此步驟是Archetype 39產生的AEM專案​ 上的 ​必要步驟，在即將發行的Archetype版本中，此為不必要步驟。

接下來，執行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

返回瀏覽器，並觀察標題顏色已變更。