擴充AEM Screens元件

Last update: Tue Jun 17 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
開發熒幕

建立對象：

中繼
開發人員

下列教學課程會逐步解說擴充現成可用的AEM Screens元件的步驟和最佳作法。影像元件會延伸以新增可編寫的文字覆蓋。

概觀 overview

本教學課程適用於AEM Screens的新手開發人員。在本教學課程中，Screens影像元件已擴充以建立海報元件。標題、說明和標誌會覆蓋在影像上，以便在序列頻道中建立引人入勝的體驗。

NOTE

開始此教學課程之前，建議您完成此教學課程：為AEM Screens開發自訂元件。

自訂海報元件

Custom Poster元件是透過擴充影像元件所建立。

先決條件 prerequisites

若要完成本教學課程，您需要完成下列事項：

AEM 6.5 +最新Screens Feature Pack
AEM Screens 播放器
本機開發環境

教學課程步驟和熒幕擷取畫面使用CRXDE-Lite執行。 Eclipse或IntelliJ IDE也可以用來完成本教學課程。有關使用IDE以使用AEM進行開發的詳細資訊，請參閱此處。

專案設定 project-setup

Screens專案的原始程式碼通常會作為多模組Maven專案來管理。為了加快教學課程，已使用AEM專案原型13預先產生專案。有關使用Maven AEM專案原型建立專案的更多詳細資訊，請參閱此處。

使用 CRX封裝管理 http://localhost:4502/crx/packmgr/index.jsp)r:下載並安裝下列封裝

取得檔案

取得檔案
或者如果搭配使用Eclipse或其他IDE，請下載下列來源套件。使用Maven命令將專案部署到本機AEM執行個體：

mvn -PautoInstallPackage clean install

SRC啟動Screens We.Retail執行專案

取得檔案

在 CRX Package Manager http://localhost:4502/crx/packmgr/index.jsp中安裝了下列兩個套件：
1. screens-weretail-run.ui.content-0.0.1-SNAPSHOT.zip
2. screens-weretail-run.ui.apps-0.0.1-SNAPSHOT.zip
透過AEM Screens封裝管理員安裝的CRX We.Retail Run Ui.Apps和Ui.Content封裝

建立海報元件 poster-cmp

海報元件可延伸現成的AEM Screens影像元件。 Sling sling:resourceSuperType的機制可用來繼承影像元件的核心功能，而不需要複製和貼上。如需Sling要求處理基本概念的詳細資訊，請參閱此處。

海報元件會在預覽/生產模式中以全熒幕呈現。在編輯模式中，以不同方式呈現元件很重要，以方便編寫「序列」通道。

在 CRXDE-Lite http://localhost:4502/crx/de/index.jsp （或選擇的IDE）中，於/apps/weretail-run/components/content下建立名為poster的cq:Component。

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

code language-xml

code language-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" jcr:primaryType="cq:Component" jcr:title="Poster" sling:resourceSuperType="screens/core/components/content/image" componentGroup="We.Retail Run - Content"/>`

<?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"
    jcr:primaryType="cq:Component"
    jcr:title="Poster"
    sling:resourceSuperType="screens/core/components/content/image"
    componentGroup="We.Retail Run - Content"/>

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

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

透過將sling:resourceSuperType屬性設定為等於screens/core/components/content/image，海報元件將有效地繼承影像元件的所有功能。在screens/core/components/content/image下找到的對等節點和檔案可以在poster元件下新增，以覆寫和擴充功能。

複製/libs/screens/core/components/content/image底下的cq:editConfig節點。在/apps/weretail-run/components/content/poster元件下方貼上cq:editConfig。

在cq:editConfig/cq:dropTargets/image/parameters節點上，將sling:resourceType屬性更新為等於weretail-run/components/content/poster。

edit-config

以下表示的cq:editConfig的XML表示法：

code language-xml

code language-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="cq:EditConfig"> <cq:dropTargets jcr:primaryType="nt:unstructured"> <image jcr:primaryType="cq:DropTargetConfig" accept="[image/.*]" groups="[media]" propertyName="./fileReference"> <parameters jcr:primaryType="nt:unstructured" sling:resourceType="weretail-run/components/content/poster" imageCrop="" imageMap="" imageRotate=""/> </image> </cq:dropTargets> </jcr:root>

<?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="cq:EditConfig">
    <cq:dropTargets jcr:primaryType="nt:unstructured">
        <image
            jcr:primaryType="cq:DropTargetConfig"
            accept="[image/.*]"
            groups="[media]"
            propertyName="./fileReference">
            <parameters
                jcr:primaryType="nt:unstructured"
                sling:resourceType="weretail-run/components/content/poster"
                imageCrop=""
                imageMap=""
                imageRotate=""/>
        </image>
    </cq:dropTargets>
</jcr:root>

複製WCM Foundation image對話方塊以用於poster元件。

最簡單的方式是從現有的對話方塊開始，然後進行修改。
1. 複製對話方塊來源： /libs/wcm/foundation/components/image/cq:dialog
2. 在/apps/weretail-run/components/content/poster下方貼上對話方塊
已將對話方塊從/libs/wcm/foundation/components/image/cq:dialog複製到/apps/weretail-run/components/content/poster

AEM Screens image元件是WCM Foundation image元件的超型別。因此，poster元件會從兩者繼承功能。海報元件的對話方塊是由Screens和Foundation對話方塊的組合所組成。 Sling Resource Merger 的功能可用來隱藏從超級型別元件繼承的不相關對話方塊欄位和索引標籤。

以下列以XML表示的變更更新/apps/weretail-run/components/content/poster下方的cq:dialog：

code language-xml

code language-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="Poster" sling:resourceType="cq/gui/components/authoring/dialog"> <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/tabs" type="nav"/> <items jcr:primaryType="nt:unstructured"> <image jcr:primaryType="nt:unstructured" jcr:title="Elements" sling:resourceType="granite/ui/components/foundation/section"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns" margin="{Boolean}false"/> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <items jcr:primaryType="nt:unstructured" sling:hideChildren="[linkURL,size]"> <file jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/fileupload" autoStart="{Boolean}false" class="cq-droptarget" fieldLabel="Image asset" fileNameParameter="./fileName" fileReferenceParameter="./fileReference" mimeTypes="[image]" multiple="{Boolean}false" name="./file" title="Upload Image Asset" uploadUrl="${suffix.path}" useHTML5="{Boolean}true"/> <title jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Title" name="./jcr:title"/> <description jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textarea" fieldLabel="Description" name="./jcr:description"/> <position jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/click" fieldLabel="Text Position" name="./textPosition"> <items jcr:primaryType="nt:unstructured"> <left jcr:primaryType="nt:unstructured" text="Left" value="left"/> <center jcr:primaryType="nt:unstructured" text="Center" value="center"/> <right jcr:primaryType="nt:unstructured" text="Right" value="right"/> </items> </position> <color jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/click" fieldLabel="Text Color" name="./textColor"> <items jcr:primaryType="nt:unstructured"> <light jcr:primaryType="nt:unstructured" text="Light" value="light"/> <dark jcr:primaryType="nt:unstructured" text="Dark" value="dark"/> </items> </color> </items> </column> </items> </image> <accessibility jcr:primaryType="nt:unstructured" sling:hideResource="{Boolean}true"/> </items> </content> </jcr:root>

<?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="Poster"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/tabs"
            type="nav"/>
        <items jcr:primaryType="nt:unstructured">
            <image
                jcr:primaryType="nt:unstructured"
                jcr:title="Elements"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                    margin="{Boolean}false"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items
                            jcr:primaryType="nt:unstructured"
                            sling:hideChildren="[linkURL,size]">
                            <file
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                autoStart="{Boolean}false"
                                class="cq-droptarget"
                                fieldLabel="Image asset"
                                fileNameParameter="./fileName"
                                fileReferenceParameter="./fileReference"
                                mimeTypes="[image]"
                                multiple="{Boolean}false"
                                name="./file"
                                title="Upload Image Asset"
                                uploadUrl="${suffix.path}"
                                useHTML5="{Boolean}true"/>
                            <title
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                fieldLabel="Title"
                                name="./jcr:title"/>
                            <description
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textarea"
                                fieldLabel="Description"
                                name="./jcr:description"/>
                            <position
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/click"
                                fieldLabel="Text Position"
                                name="./textPosition">
                                <items jcr:primaryType="nt:unstructured">
                                    <left
                                        jcr:primaryType="nt:unstructured"
                                        text="Left"
                                        value="left"/>
                                    <center
                                        jcr:primaryType="nt:unstructured"
                                        text="Center"
                                        value="center"/>
                                    <right
                                        jcr:primaryType="nt:unstructured"
                                        text="Right"
                                        value="right"/>
                                </items>
                            </position>
                            <color
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/click"
                                fieldLabel="Text Color"
                                name="./textColor">
                                <items jcr:primaryType="nt:unstructured">
                                    <light
                                        jcr:primaryType="nt:unstructured"
                                        text="Light"
                                        value="light"/>
                                    <dark
                                        jcr:primaryType="nt:unstructured"
                                        text="Dark"
                                        value="dark"/>
                                </items>
                            </color>
                        </items>
                    </column>
                </items>
            </image>
            <accessibility
                jcr:primaryType="nt:unstructured"
                sling:hideResource="{Boolean}true"/>
        </items>
    </content>
</jcr:root>

屬性sling:hideChildren= "[linkURL,size]」用於items節點，以確保對話方塊中的 linkURL 與 size 欄位隱藏。從海報對話方塊中移除這些節點是不夠的。協助工具標籤上的屬性sling:hideResource="{Boolean}true"可用來隱藏整個標籤。

在對話方塊中新增兩個按一下欄位（文字位置和文字顏色），讓作者可以控制文字的位置以及「標題」和「說明」的顏色。

海報 — 最終對話方塊結構

海報 — 最後一個對話方塊結構

此時，可以將poster元件的執行個體新增至We.Retail Run專案中的 閒置頻道 頁面： http://localhost:4502/editor.html/content/screens/we-retail-run/channels/idle-channel.edit.html。

海報對話方塊欄位

在/apps/weretail-run/components/content/poster下建立名為production.html.的檔案

將下列專案填入檔案中：

code language-xml

code language-xml
<!--/* /apps/weretail-run/components/content/poster/production.html */--> <div data-sly-use.image="image.js" data-duration="${properties.duration}" class="cmp-poster" style="background-image: url(${request.contextPath @ context='uri'}${image.src @ context='uri'});"> <div class="cmp-poster__text cmp-poster__text--${properties.textPosition @ context='attribute'} cmp-poster__text--${properties.textColor @ context='attribute'}"> <h1 class="cmp-poster__title">${properties.jcr:title}</h1> <h2 class="cmp-poster__description">${properties.jcr:description}</h2> </div> <img class="cmp-poster__logo" src="/content/dam/we-retail-run/logos/we-retail-run_dark.png" alt="we-retail-logo" /> </div>

<!--/*

    /apps/weretail-run/components/content/poster/production.html

*/-->
<div data-sly-use.image="image.js"
     data-duration="${properties.duration}"
     class="cmp-poster"
     style="background-image: url(${request.contextPath @ context='uri'}${image.src @ context='uri'});">
    <div class="cmp-poster__text
                cmp-poster__text--${properties.textPosition @ context='attribute'}
                cmp-poster__text--${properties.textColor @ context='attribute'}">
        <h1 class="cmp-poster__title">${properties.jcr:title}</h1>
         <h2 class="cmp-poster__description">${properties.jcr:description}</h2>
    </div>
 <img class="cmp-poster__logo" src="/content/dam/we-retail-run/logos/we-retail-run_dark.png" alt="we-retail-logo" />
</div>

可直接在上方看到海報元件的生產標籤。 HTL指令碼會覆寫screens/core/components/content/image/production.html。 image.js是伺服器端指令碼，可建立類似POJO的影像物件。然後可以呼叫Image物件將src演算為內嵌樣式background-image。

已新增The h1和h2標籤，根據元件屬性顯示標題和說明： ${properties.jcr:title}和${properties.jcr:description}。

h1和h2標籤周圍是div包裝函式，其中包含三個CSS類別，變數為"cmp-poster__text"。 textPosition和textColor屬性的值是用來變更根據作者對話方塊選取範圍演算的CSS類別。在下一個區段中，會寫入使用者端資料庫的CSS以啟用這些變更的顯示。

標誌也會以覆蓋圖的形式納入元件中。在此範例中， We.Retail標誌的路徑在DAM中以硬式編碼。視使用案例而定，更合理的做法是建立對話方塊欄位，將標誌路徑設為動態填入值。

另請注意，元件會使用BEM （區塊元素修飾元）記號。 BEM是CSS編碼慣例，可讓您更輕鬆地建立可重複使用的元件。 BEM是AEM的核心元件所使用的記號。

在/apps/weretail-run/components/content/poster下建立名為edit.html.的檔案

將下列專案填入檔案中：

code language-xml

code language-xml
<!--/* /apps/weretail-run/components/content/poster/edit.html */--> <div class="aem-Screens-editWrapper ${image.cssClass} cmp-poster" data-sly-use.image="image.js" data-emptytext="${'Poster' @ i18n, locale=request.locale}"> <img class="cmp-poster__image" src="${request.contextPath}${image.src @ context='uri'}" width="100%" /> <div class="cmp-poster__text cmp-poster__text--${properties.textPosition @ context='attribute'} cmp-poster__text--${properties.textColor @ context='attribute'}"> <p class="cmp-poster__title">${properties.jcr:title}</p> <p class="cmp-poster__description">${properties.jcr:description}</p> </div> </div>

<!--/*

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

*/-->

<div class="aem-Screens-editWrapper ${image.cssClass} cmp-poster" data-sly-use.image="image.js" data-emptytext="${'Poster' @ i18n, locale=request.locale}">
    <img class="cmp-poster__image" src="${request.contextPath}${image.src @ context='uri'}" width="100%" />
    <div class="cmp-poster__text
           cmp-poster__text--${properties.textPosition @ context='attribute'}
       cmp-poster__text--${properties.textColor @ context='attribute'}">
      <p class="cmp-poster__title">${properties.jcr:title}</p>
      <p class="cmp-poster__description">${properties.jcr:description}</p>
    </div>
</div>

可直接在上方看到海報元件的 已編輯 標籤。 HTL指令碼會覆寫/libs/screens/core/components/content/image/edit.html。此標籤類似於production.html標籤，並在影像上方顯示標題和說明。

已新增aem-Screens-editWrapper，因此元件不會在編輯器中呈現全熒幕。 data-emptytext屬性可確保當沒有填入影像或內容時顯示預留位置。

建立使用者端程式庫 clientlibs

使用者端資料庫提供一種機制，可整理和管理AEM實作所需的CSS和JavaScript檔案。如需有關使用使用者端資料庫的詳細資訊，請參閱此處。

AEM Screens元件在編輯模式與預覽/生產模式中的轉譯方式不同。已建立兩組使用者端程式庫，一組用於編輯模式，另一組用於預覽/生產模式。

為海報元件的使用者端程式庫建立資料夾。

在/apps/weretail-run/components/content/poster下方，建立名為clientlibs的資料夾。
在clientlibs資料夾下，建立名稱為shared且型別為cq:ClientLibraryFolder.的節點
將下列屬性新增至共用使用者端程式庫：
- allowProxy | 布林值 | true
- categories | 字串[] | cq.screens.components
/apps/weretail-run/components/content/poster/clientlibs/shared 的屬性

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

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

最好不要在生產環境中直接向/apps公開任何路徑。 allowProxy屬性可確保透過前置詞/etc.clientlibs參考使用者端程式庫CSS和JS。有關allowProxy屬性的詳細資訊可在此處找到。

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

將下列專案填入檔案中：

code language-none
`#base=css styles.less`

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

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

以下列專案填入/apps/weretail-run/components/content/poster/clientlibs/shared/css/styles.less：

code language-css

code language-css
/* /apps/weretail-run/components/content/poster/clientlibs/shared/css/styles.less Poster component - Shared Style */ @import url('https://fonts.googleapis.com/css?family=Fjalla+One\|Open+Sans:400i'); @text-light-color: #fff; @text-dark-color: #000; @title-font-family: 'Fjalla One', sans-serif; @description-font-family: 'Open Sans', sans-serif; .cmp-poster { &__text { position: absolute; color: @text-light-color; top: 0; text-align:center; width: 100%; &--left { text-align: left; margin-left: 1em; } &--right { text-align: right; margin-right: 1em; } &--dark { color: @text-dark-color; } } &__title { font-weight: bold; font-family: @title-font-family; font-size: 1.2em; } &__description { font-style: italic; font-family: @description-font-family; } }

/*
 /apps/weretail-run/components/content/poster/clientlibs/shared/css/styles.less
 Poster component - Shared Style
*/

@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans:400i');

@text-light-color: #fff;
@text-dark-color: #000;
@title-font-family: 'Fjalla One', sans-serif;
@description-font-family: 'Open Sans', sans-serif;

.cmp-poster {

      &__text {
      position: absolute;
      color: @text-light-color;
      top: 0;
      text-align:center;
      width: 100%;

      &--left {
       text-align: left;
             margin-left: 1em;
      }

      &--right {
       text-align: right;
             margin-right: 1em;
      }

      &--dark {
       color: @text-dark-color;
      }
    }

    &__title {
      font-weight: bold;
         font-family: @title-font-family;
         font-size: 1.2em;
    }

    &__description {
  font-style: italic;
        font-family: @description-font-family;
 }

}

note note
NOTE
Google Web Fonts用於字型系列。 Web Fonts需要網際網路連線，而且並非所有AEM Screens實作都有可靠的連線。離線模式的Planning是AEM Screens部署的重要考量。

複製shared使用者端程式庫資料夾。貼上為同層級，並將其重新命名為production。
將生產使用者端程式庫的categories屬性更新為cq.screens.components.production.

cq.screens.components.production類別可確保僅在「預覽/生產」模式中載入樣式。

/apps/weretail-run/components/content/poster/clientlibs/production的

/apps/weretail-run/components/content/poster/clientlibs/production的屬性

以下列專案填入/apps/weretail-run/components/content/poster/clientlibs/production/css/styles.less：

code language-css

code language-css
/* /apps/weretail-run/components/content/poster/clientlibs/production/css/styles.less Poster component - Production Style */ .cmp-poster { background-size: cover; height: 100%; width: 100%; position:absolute; &__text { top: 2em; &--left { width: 40%; top: 5em; } &--right { width: 40%; right: 1em; } } &__title { font-size: 5rem; font-weight: 900; margin: 0.1rem; } &__description { font-size: 2rem; margin: 0.1rem; font-weight: 400; } &__logo { position: absolute; max-width: 200px; top: 1em; left: 0; } }

/*
 /apps/weretail-run/components/content/poster/clientlibs/production/css/styles.less
 Poster component - Production Style
*/

.cmp-poster {

    background-size: cover;
 height: 100%;
 width: 100%;
 position:absolute;

     &__text {

        top: 2em;

        &--left {
            width: 40%;
            top: 5em;
        }

        &--right {
            width: 40%;
            right: 1em;
        }
    }

    &__title {
  font-size: 5rem;
  font-weight: 900;
  margin: 0.1rem;
 }

 &__description {
  font-size: 2rem;
  margin: 0.1rem;
  font-weight: 400;

 }

    &__logo {
  position: absolute;
  max-width: 200px;
  top: 1em;
  left: 0;
 }

}

上述樣式會在畫面上以絕對位置顯示「標題」和「說明」。顯示的標題比說明大。元件的BEM標籤法可讓您在cmp-poster類別中輕鬆調整樣式的範圍。

第三個使用者端程式庫類別： cq.screens.components.edit可用來將「僅編輯」特定樣式新增至元件。

Clientlib類別

使用情況

cq.screens.components

在編輯和生產模式之間共用的樣式和指令碼

cq.screens.components.edit

僅用於編輯模式的樣式和指令碼

cq.screens.components.production

僅用於生產模式的樣式和指令碼

新增海報元件至序列頻道 add-sequence-channel

海報元件用於序列色版。本教學課程的入門套件包含「閒置」頻道。閒置通道已預先設定為允許群組 We.Retail Run - Content 的元件。海報元件的群組已設為We.Retail Run - Content，且可供新增至頻道。

從We.Retail執行專案開啟[閒置]頻道： http://localhost:4502/editor.html/content/screens/we-retail-run/channels/idle-channel.edit.html
從側邊列將 Poster 元件的新執行個體拖放到頁面上。
編輯「海報」元件的對話方塊，以便新增影像、標題、說明。使用「文字位置」和「文字顏色」選項，確保標題/說明在影像上是可讀的。
若要新增一些「海報」元件，請重複上述步驟。在元件之間新增轉變。

整合所有內容 putting-it-all-together

以下影片說明完成的元件，以及如何將其新增到序列頻道。該管道隨後會新增至「位置」顯示，並最終指派給Screens播放器。

video poster

https://video.tv.adobe.com/v/22414?quaity=9

完成的程式碼 finished-code

以下是教學課程中完成的程式碼。 screens-weretail-run.ui.apps-0.0.1-SNAPSHOT.zip 和 screens-weretail-run.ui.content-0.0.1-SNAPSHOT.zip 是編譯的AEM套件。 SRC-screens-weretail-run-0.0.1.zip 是可以使用Maven部署的未編譯原始程式碼。

取得檔案

SRC最終AEM Screens We.Retail執行專案

取得檔案

recommendation-more-help

adce462a-f916-4dbe-9ab5-0b62cfb0f053