文件AEMAEM 教學課程AEM Sites WKND 教學課程

元件基本知識 component-basics

Last update: Mon Jul 15 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/330985?quality=12&learn=on

開啟新的命令列終端機，然後執行下列動作。

  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/330986?quality=12&learn=on

以下是上述影片中執行的高層級步驟。

  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/330987?quality=12&learn=on

以下是上述影片中執行的高層級步驟。

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

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

  3. 使用VSCode AEM Sync等IDE工具，將檔案變更與本機AEM執行個體同步化。

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

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

    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」(Plain Old Java™物件)，可方便將資料從JCR對應至Java™變數。 在AEM環境中開發時，這些範本也提供幾個其他細節。

接下來，讓我們對HelloWorldModel Sling模型做一些更新，以便在將儲存於JCR中的值輸出到頁面之前，先將它們套用一些商業邏輯。

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

  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. 新增下列匯入陳述式：

    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。

    HelloWorld模型執行個體現在可以透過model變數，使用HelloWord在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/340750?quality=12&learn=on

以下是上述影片中執行的高層級步驟。

  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