元件基本知識 component-basics

本章中,讓我們透過簡單的HelloWorld範例來探索Adobe Experience Manager (AEM) Sites元件的基礎技術。 對現有元件進行微幅修改,其中涵蓋編寫、HTL、Sling模型、使用者端資料庫等主題。

先決條件 prerequisites

檢閱設定本機開發環境所需的工具和指示。

視訊中使用的IDE是Visual Studio CodeVSCode AEM Sync外掛程式。

目標 objective

  1. 瞭解HTL範本和Sling模型以動態方式呈現HTML的作用。
  2. 瞭解如何使用對話方塊來促進內容的製作。
  3. 瞭解使用者端資料庫的基礎知識,以包含CSS和JavaScript以支援元件。

您即將建置的內容 what-build

在本章中,您對簡單的HelloWorld元件執行了數個修改。 更新HelloWorld元件時,您將瞭解AEM元件開發的主要領域。

章節起始專案 starter-project

本章以AEM專案原型產生的一般專案為基礎。 觀看以下影片並檢閱必要條件以開始使用!

NOTE
如果您成功完成上一章,您可以重複使用專案,並略過出庫入門專案的步驟。

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

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

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

  1. 在​ WKND網站 > US > en ​下方建立名為​ 元件基本知識 ​的頁面。
  2. 將​ Hello World元件 ​新增至新建立的頁面。
  3. 開啟元件的對話方塊並輸入一些文字。 儲存變更以檢視頁面上顯示的訊息。
  4. 切換到開發人員模式,並在CRXDE-Lite中檢視內容路徑並檢查元件例項的屬性。
  5. 使用CRXDE-Lite檢視/apps/wknd/components/content/helloworld中的cq:dialoghelloworld.html指令碼。

HTL (HTML範本語言)和對話方塊 htl-dialogs

HTML範本語言或​ HTL ​是AEM元件用來呈現內容的輕量型伺服器端範本語言。

對話方塊 ​定義元件可用的設定。

接下來,讓我們更新HelloWorld HTL指令碼,以在文字訊息前顯示額外的問候語。

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

  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中的值輸出到頁面之前,先將它們套用一些商業邏輯。

  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屬性titletext的值對應至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樣式。

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

  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