為AEM Screens開發自訂元件 developing-a-custom-component-for-aem-screens

AEM 6.5 加上最新的Screens Feature Pack。

AEM Screens Player

本機開發環境

在 CRX封裝管理員，確認已安裝下列兩個套件：

1. screens-weretail-run.ui.content-0.0.1-SNAPSHOT.zip
2. screens-weretail-run.ui.apps-0.0.1-SNAPSHOT.zip

Screens We.Retail 執行 Ui.Apps 和 Ui.Content 透過CRX Package Manager安裝的套件。

此 screens-weretail-run.ui.apps 套件會在下方安裝程式碼 /apps/weretail-run.

此套件包含負責呈現專案自訂元件的程式碼。 此套件包含元件程式碼以及所需的任何JavaScript或CSS。 此套件也會嵌入 screens-weretail-run.core-0.0.1-SNAPSHOT.jar 其中包含專案所需的任何Java™程式碼。

以CRXDE Lite表示ui.apps程式碼

此 Hello World 元件只是預留位置。 在教學課程中新增功能，讓作者可更新元件顯示的訊息。

此 screens-weretail-run.ui.content 套件會在下方安裝程式碼：

• /conf/we-retail-run
• /content/dam/we-retail-run
• /content/screens/we-retail-run

此套件包含專案所需的起始內容和設定結構。 /conf/we-retail-run 包含的所有設定 We.Retail 執行專案。 /content/dam/we-retail-run 包括開始專案的數位資產。 /content/screens/we-retail-run 包含Screens內容結構。 所有這些路徑下的內容主要是在AEM中更新。 為了提高環境（本機、開發、舞台、生產）之間的一致性，通常會將基本內容結構儲存在原始檔控制中。

導覽至AEM Screens > We.Retail 執行專案：

從AEM「開始」功能表，按一下畫面圖示。 驗證 We.Retail 出現執行專案。

在 CRXDE-Lite http://localhost:4502/crx/de/index.jsp （或選擇的IDE）瀏覽至 /apps/weretail-run/components/content/helloworld.

將下列屬性新增至 helloworld 元件：

    jcr:title="Hello World"
    sling:resourceSuperType="foundation/components/parbase"
    componentGroup="We.Retail Run - Content"

/apps/weretail-run/components/content/helloworld的屬性

此 Hello World 元件延伸 foundation/components/parbase 元件，以便在序列頻道中正確使用。

在下方建立檔案 /apps/weretail-run/components/content/helloworld 已命名 helloworld.html.

將下列專案填入檔案中：

<!--/*

 /apps/weretail-run/components/content/helloworld/helloworld.html

*/-->

<!--/* production: preview authoring mode + unspecified mode (i.e. on publish) */-->
<sly data-sly-test.production="${wcmmode.preview || wcmmode.disabled}" data-sly-include="production.html" />

<!--/* edit: any other authoring mode, i.e. edit, design, scaffolding, etc. */-->
<sly data-sly-test="${!production}" data-sly-include="edit.html" />

Screens元件需要兩種不同的轉譯，視何者而定 製作模式 正在使用：

1. 生產：預覽或發佈模式(wcmmode=disabled)
2. 編輯：用於所有其他撰寫模式，即編輯、設計、支架、開發人員……

helloworld.html充當開關，檢查處於活動狀態的創作模式，並重新導向到另一個HTL指令碼。 Screens元件使用的常見慣例是 edit.html 編輯模式的指令碼和 production.html 生產模式的指令碼。

在下方建立檔案 /apps/weretail-run/components/content/helloworld 已命名 production.html.

將下列專案填入檔案中：

<!--/*
 /apps/weretail-run/components/content/helloworld/production.html

*/-->

<div data-duration="${properties.duration}" class="cmp-hello-world">
 <h1 class="cmp-hello-world__message">${properties.message}</h1>
</div>

以上是Hello World元件的生產標籤。 A data-duration 屬性包含在內，因為元件用於序列頻道上。 此 data-duration 屬性是序列管道用來瞭解序列專案要顯示多久。

元件會呈現 div 和 h1 標籤文字。 ${properties.message} 是HTL指令碼的一部分，會輸出名為的JCR屬性的內容 message. 稍後會建立一個對話方塊，讓使用者可以輸入 message 屬性文字。

另請注意，元件會使用BEM （區塊元素修飾元）記號。 BEM是CSS編碼慣例，可讓您更輕鬆地建立可重複使用的元件。 BEM是以下專案使用的記號： AEM Core Components.

在下方建立檔案 /apps/weretail-run/components/content/helloworld 已命名 edit.html.

將下列專案填入檔案中：

<!--/*

 /apps/weretail-run/components/content/helloworld/edit.html

*/-->

<!--/* if message populated */-->
<div
 data-sly-test.message="${properties.message}"
 class="aem-Screens-editWrapper cmp-hello-world">
 <p class="cmp-hello-world__message">${message}</p>
</div>

<!--/* empty place holder */-->
<div data-sly-test="${!message}"
     class="aem-Screens-editWrapper cq-placeholder cmp-hello-world"
     data-emptytext="${'Hello World' @ i18n, locale=request.locale}">
</div>

以上是Hello World元件的已編輯標籤。 如果已填入對話方塊訊息，第一個區塊會顯示元件的已編輯版本。

如果沒有輸入對話方塊訊息，則會轉譯第二個區塊。 此 cq-placeholder 和 data-emptytext 轉譯標籤 Hello World 在該情況下為預留位置。 可使用i18n將標籤的字串國際化，以支援在多個語言環境中撰寫。

複製Screens影像對話方塊以用於Hello World元件。

最簡單的方式是從現有的對話方塊開始，然後進行修改。

1. 複製對話方塊來源： /libs/screens/core/components/content/image/cq:dialog
2. 在下方貼上對話方塊 /apps/weretail-run/components/content/helloworld

更新Hello World對話方塊以包含訊息的標籤。

更新對話方塊，使其符合下列內容。 最後對話方塊的JCR節點結構以XML形式顯示如下：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Hello World"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs"
        size="L">
        <items jcr:primaryType="nt:unstructured">
            <message
                jcr:primaryType="nt:unstructured"
                jcr:title="Message"
                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">
                            <message
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldDescription="Message for component to display"
                                fieldLabel="Message"
                                name="./message"/>
                        </items>
                    </column>
                </items>
            </message>
            <sequence
                jcr:primaryType="nt:unstructured"
                jcr:title="Sequence"
                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">
                            <duration
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                defaultValue=""
                                fieldDescription="Amount of time the image is shown in the sequence, in milliseconds"
                                fieldLabel="Duration (milliseconds)"
                                min="0"
                                name="./duration"/>
                        </items>
                    </column>
                </items>
            </sequence>
        </items>
    </content>
</jcr:root>

訊息的文字欄位會儲存到名為的屬性 message 且「持續時間」的數字欄位會儲存至名為的屬性 duration. 這兩個屬性都在 /apps/weretail-run/components/content/helloworld/production.html 由HTL作為 ${properties.message} 和 ${properties.duration}.

Hello World — 完成的對話方塊

為Hello World元件的使用者端資料庫建立資料夾。

下 /apps/weretail-run/components/content/helloworld，建立名為的資料夾 clientlibs.

在 clientlibs 資料夾，建立名為的節點 shared 型別 cq:ClientLibraryFolder.

將下列屬性新增至共用使用者端程式庫：

• allowProxy | 布林值 | true

• categories| 字串[] | cq.screens.components

/apps/weretail-run/components/content/helloworld/clientlibs/shared的屬性

categories屬性是識別使用者端程式庫的字串。 cq.screens.componentscategory會用於編輯和預覽/生產模式。 因此，在sharedclientlib中定義的任何CSS/JS都會以所有模式載入。

最佳實務是絕對不要在生產環境中直接向/apps公開任何路徑。 allowProxy屬性可確保透過前置詞of/etc.clientlibs來參考使用者端程式庫CSS和JS。

建立名為的檔案 css.txt 共用資料夾的下方。

將下列專案填入檔案中：

#base=css

styles.less

建立名為的資料夾 css 在 shared 資料夾。 新增名為的檔案 style.less 在 css 資料夾。 使用者端程式庫的結構現在看起來應該像這樣：

本教學課程不直接撰寫CSS，而是使用LESS。 更少 是常用的CSS預先編譯器，支援CSS變數、mixin和函式。 AEM使用者端程式庫原生支援LESS編譯。 可以使用Sass或其他預先編譯程式，但必須在AEM外部編譯。

填入 /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less ，其功能如下：

/**
    Shared Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less

**/

.cmp-hello-world {
    background-color: #fff;

 &__message {
  color: #000;
  font-family: Helvetica;
  text-align:center;
 }
}

複製並貼上 shared 使用者端資源庫資料夾，以建立名為的使用者端資源庫 production.

複製共用使用者端程式庫以建立生產使用者端程式庫。

更新 categories 要建置的生產使用者端程式庫屬性 cq.screens.components.production.

這可確保僅在「預覽/生產」模式中載入樣式。

屬性 /apps/weretail-run/components/content/helloworld/clientlibs/production.

填入 /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less ，其功能如下：

/**
    Production Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less

**/
.cmp-hello-world {

    height: 100%;
    width: 100%;
    position: fixed;

 &__message {

  position: relative;
  font-size: 5rem;
  top:25%;
 }
}

上述樣式會在畫面中央顯示訊息，但僅會顯示在「生產」模式中。

在 CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs，導覽至 /apps/settings/wcm/designs.

在設計資料夾下建立節點，名為 we-retail-run 具有型別 cq:Page.

在 we-retail-run 頁面，新增另一個名為的節點 jcr:content 型別 nt:unstructured. 將下列屬性新增至 jcr:content 節點：

設計頁面於 /apps/settings/wcm/designs/we-retail-run.

從AEM「開始」功能表，導覽至 Screens > We.Retail執行 >並按一下 頻道.

按一下 建立 按鈕

1. 選擇 建立實體

在建立精靈中：

範本步驟 — 選擇 順序頻道

1. 屬性步驟

• 基本標籤>標題= 閒置頻道
• 管道標籤>檢查 讓頻道上線

開啟「閒置頻道」的頁面屬性。

更新設計欄位，使其指向 /apps/settings/wcm/designs/we-retail-run，即在上一節中建立的設計頁面。

指向/apps/settings/wcm/designs/we-retail-run的設計設定

編輯新建立的「閒置頻道」，以將其開啟。

切換頁面模式至 設計 模式。

1. 按一下 扳手 圖示來設定允許的元件。

2. 按一下 Screens 群組與 We.Retail執行 — 內容 群組。

切換頁面模式至 編輯. 現在可將Hello World元件新增至頁面，並與其他序列頻道元件結合。

在 CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs/we-retail-run/jcr%3Acontent/sequencechannel/par，導覽至 /apps/settings/wcm/designs/we-retail-run/jcr:content/sequencechannel/par. 請注意 components 屬性現在包含 group:Screens， group:We.Retail Run - Content.

在/apps/settings/wcm/designs/we-retail-run下的設計設定