文档AEMAEM Screens 指南

扩展AEM Screens组件

Last update: Fri Jul 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 中级
  • 开发人员

以下教程将指导您完成扩展AEM Screens现成组件的步骤和最佳实践。 扩展图像组件，以添加可创作的文本叠加。

概述 overview

本教程面向不熟悉AEM Screens的开发人员。 在本教程中，扩展了Screens图像组件以创建海报组件。 标题、描述和徽标叠加在图像上，以便在序列渠道中创建引人入胜的体验。

NOTE
在开始本教程之前，建议完成以下教程：开发AEM Screens的自定义组件。

自定义海报组件

通过扩展图像组件创建了Custom Poster组件。

先决条件 prerequisites

要完成本教程，您需要满足以下条件：

  1. AEM 6.5 +最新的Screens功能包
  2. AEM Screens 播放器
  3. 本地开发环境

使用CRXDE-Lite执行教程步骤和屏幕截图。 还可以使用Eclipse或IntelliJ IDE来完成教程。 有关使用IDE 使用AEM进行开发的更多信息，请访问此处。

项目设置 project-setup

Screens项目的源代码通常作为多模块Maven项目进行管理。 为了加快本教程，已使用AEM项目原型13预生成了一个项目。 有关使用Maven AEM项目原型创建项目的更多详细信息见此处。

  1. 使用​ CRX package manager http://localhost:4502/crx/packmgr/index.jsp)r:下载并安装以下包

获取文件

获取文件
或者， ​如果正在使用Eclipse或其他IDE，请下载以下源包。 使用Maven命令将项目部署到本地AEM实例：

mvn -PautoInstallPackage clean install

SRC启动Screens We.Retail运行项目

获取文件

  1. 在​ CRX包管理器 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

    Screens We.Retail运行通过CRX包管理器安装的Ui.Apps和Ui.Content包

    通过CRX包管理器安装的AEM Screens We.Retail Run Ui.Apps和Ui.Content包

创建海报组件 poster-cmp

海报组件可扩展现成的AEM Screens图像组件。 Sling sling:resourceSuperType机制用于继承图像组件的核心功能，而无需复制和粘贴。 有关Sling请求处理基础知识的更多信息可在此处找到。

海报组件在预览/生产模式下全屏渲染。 在编辑模式下，请务必以不同方式呈现组件，以便于创作序列渠道。

  1. 在​ CRXDE-Lite http://localhost:4502/crx/de/index.jsp （或选择的IDE）中，在/apps/weretail-run/components/content下创建名为poster的cq:Component。

    将以下属性添加到poster组件：

    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"/>

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

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

    通过将sling:resourceSuperType属性设置为等于screens/core/components/content/image，海报组件有效地继承了图像组件的所有功能。 可以在poster组件下添加在screens/core/components/content/image下找到的等效节点和文件，以覆盖和扩展功能。

  2. 复制/libs/screens/core/components/content/image下的cq:editConfig节点。 将cq:editConfig粘贴到/apps/weretail-run/components/content/poster组件下。

    在cq:editConfig/cq:dropTargets/image/parameters节点上，将sling:resourceType属性更新为等于weretail-run/components/content/poster。

    编辑配置

    cq:editConfig的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>

  3. 复制要用于poster组件的WCM Foundation image对话框。

    最简单的方法是从现有对话框开始，然后进行修改。

    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

    已将对话框从/libs/wcm/foundation/components/image/cq:dialog复制到/apps/weretail-run/components/content/poster

    AEM Screens image组件是WCM Foundation image组件的超类型。 因此，poster组件从两者继承功能。 海报组件的对话框由Screens对话框和Foundation对话框的组合组成。 Sling资源合并器 ​的功能用于隐藏从超类型组件继承的不相关对话框字段和选项卡。

  4. 使用以XML表示的以下更改更新/apps/weretail-run/components/content/poster下的cq:dialog：

    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>

    属性sling:hideChildren= "[linkURL,size]”在items节点上使用，以确保从对话框中隐藏​ linkURL ​和​ size ​字段。 仅从海报对话框中删除这些节点是不够的。 辅助功能选项卡上的属性sling:hideResource="{Boolean}true"用于隐藏整个选项卡。

    对话框中添加了两个单击字段“文本位置”和“文本颜色”，以使作者能够控制文本的位置以及“标题”和“描述”的颜色。

    海报 — 最终对话框结构

    海报 — 最终对话框结构

    此时，可以将poster组件的实例添加到We.Retail运行项目中的​ 空闲通道 ​页面： http://localhost:4502/editor.html/content/screens/we-retail-run/channels/idle-channel.edit.html。

    海报对话框字段

    海报对话框字段

  5. 在/apps/weretail-run/components/content/poster下创建名为production.html.的文件

    使用以下内容填充文件：

    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>

    可直接在上方看到海报组件的生产标记。 HTL脚本覆盖screens/core/components/content/image/production.html。 image.js是创建类似POJO的图像对象的服务器端脚本。 然后，可以调用Image对象将src渲染为内联样式背景图像。

    添加的The h1和h2标记根据组件属性显示标题和描述： ${properties.jcr:title}和${properties.jcr:description}。

    h1和h2标记周围是一个div包装器，其中包含三个变体为“cmp-poster__text”的CSS类。 textPosition和textColor属性的值用于更改基于作者的对话框选择呈现的CSS类。 在下一部分中，将写入客户端库中的CSS，以便在显示中启用这些更改。

    徽标还作为覆盖包含在组件中。 在此示例中， We.Retail徽标的路径在DAM中进行硬编码。 根据用例，可能更适合创建对话框字段，以将徽标路径设置为动态填充值。

    另请注意，组件使用BEM（块元素修饰符）表示法。 BEM是一种CSS编码约定，它使创建可重用组件变得更容易。 BEM是AEM核心组件使用的表示法。

  6. 在/apps/weretail-run/components/content/poster下创建名为edit.html.的文件

    使用以下内容填充文件：

    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>

    上面直接显示海报组件的​ 编辑 ​标记。 HTL脚本覆盖/libs/screens/core/components/content/image/edit.html。 该标记与production.html标记类似，在图像上方显示标题和描述。

    添加aem-Screens-editWrapper后，该组件不会在编辑器中全屏呈现。 data-emptytext属性可确保在没有填充图像或内容时显示占位符。

创建客户端库 clientlibs

客户端库提供了一种机制，用于组织和管理AEM实施所需的CSS和JavaScript文件。 有关使用客户端库的详细信息可在此处找到。

AEM Screens组件在编辑模式与预览/生产模式中的呈现方式有所不同。 将创建两组客户端库，一组用于编辑模式，另一组用于预览/生产模式。

  1. 为海报组件的客户端库创建文件夹。

    在/apps/weretail-run/components/content/poster下创建名为clientlibs的文件夹。

    2018-05-03_at_1008pm

  2. 在clientlibs文件夹下，创建名为shared且类型为cq:ClientLibraryFolder.的节点

    2018-05-03_at_1011pm

  3. 将以下属性添加到共享客户端库：

    • 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属性的详细信息可在此处找到。

  4. 在共享文件夹下创建名为css.txt的文件。

    使用以下内容填充文件：

    code language-none 
    #base=css

styles.less

  5. 在shared文件夹下创建名为css的文件夹。 在css文件夹下添加名为style.less的文件。 客户端库的结构现在应如下所示：

    2018-05-03_at_1057pm

    本教程不会直接编写CSS，而是使用LESS。 LESS是一种常用的CSS预编译器，它支持CSS变量、mixin和函数。 AEM客户端库本身支持LESS编译。 Sass或其他预编译器可以使用，但必须在AEM之外编译。

  6. 使用以下内容填充/apps/weretail-run/components/content/poster/clientlibs/shared/css/styles.less：

    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;
 }

}
    note note
    NOTE
    GoogleWeb Fonts用于字体系列。 Web Fonts需要互联网连接，并且并非所有AEM Screens实施都有可靠的连接。 规划离线模式是AEM Screens部署的一个重要考虑事项。

  7. 复制shared客户端库文件夹。 将其粘贴为同级并重命名为production。

    2018-05-03_at_1114pm

  8. 将生产客户端库的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的属性

  9. 使用以下内容填充/apps/weretail-run/components/content/poster/clientlibs/production/css/styles.less：

    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;
 }

}

    上述样式在屏幕上以绝对位置显示标题和描述。 显示的标题比描述大。 利用组件的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，可以将其添加到渠道中。

  1. 从We.Retail运行项目打开空闲通道： http://localhost:4502/editor.html/content/screens/we-retail-run/channels/idle-channel.edit.html

  2. 将​ Poster ​组件的新实例从侧栏拖放到页面上。

    2018-05-07_at_3_23pm

  3. 编辑海报组件的对话框，以便添加图像、标题和描述。 使用文本位置和文本颜色选项确保标题/描述在图像上可读。

    2018-05-07_at_3_25pm

  4. 要添加几个海报组件，请重复上述步骤。 在组件之间添加过渡。

    2018-05-07_at_3_28pm

融于一起 putting-it-all-together

以下视频介绍了已完成的组件以及如何将其添加到序列渠道。 然后，该渠道会添加到位置显示中，并最终分配给Screens播放器。

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