开发AEM组件（经典UI）

经典UI使用ExtJS创建提供组件外观的小部件。 由于这些构件的性质，组件与经典UI的交互方式与 触屏优化UI.

结构

页面上介绍了组件的基本结构 AEM组件 — 基础知识，适用于触屏优化UI和经典UI。 即使您不需要在新组件中使用触屏UI的设置，也可以在继承现有组件时了解这些设置。

JSP脚本

可以使用JSP脚本或Servlet渲染组件。 根据Sling的请求处理规则，默认脚本的名称是：

<*componentname*>.jsp

global.jsp

JSP脚本文件 global.jsp 用于提供对用于呈现组件的任何JSP脚本文件的快速访问（即访问内容）。

因此 global.jsp 应包含在每个组件渲染JSP脚本中，其中提供的一个或多个对象 global.jsp 已使用。

默认的位置 global.jsp 为：

/libs/foundation/global.jsp

global.jsp、使用的API和Taglibs的功能

下面列出了默认环境提供的最重要的对象 global.jsp：

摘要:

• <cq:defineObjects />

  • slingRequest — 包装的请求对象( SlingHttpServletRequest)。
  • slingResponse — 包装的响应对象( SlingHttpServletResponse)。
  • resource - Sling资源对象( slingRequest.getResource();)。
  • resourceResolver - Sling资源解析程序对象( slingRequest.getResoucreResolver();)。
  • currentNode — 请求的已解析JCR节点。
  • log — 默认记录器()。
  • sling - Sling脚本助手。
  • properties — 已寻址资源的属性( resource.adaptTo(ValueMap.class);)。
  • pageProperties — 已寻址资源的页面的属性。
  • pageManager — 用于访问AEM内容页面的页面管理器( resourceResolver.adaptTo(PageManager.class);)。
  • component — 当前AEM组件的组件对象。
  • designer — 用于检索设计信息的设计器对象( resourceResolver.adaptTo(Designer.class);)。
  • currentDesign — 寻址资源的设计。
  • currentStyle — 已寻址资源的样式。

访问内容

有三种方法可访问AEM WCM中的内容：

• 通过中引入的属性对象 global.jsp：

  properties对象是ValueMap的实例(请参阅 Sling API)并包含当前资源的所有属性。

  示例： String pageTitle = properties.get("jcr:title", "no title"); 在页面组件的渲染脚本中使用。

  示例： String paragraphTitle = properties.get("jcr:title", "no title"); 在标准段落组件的渲染脚本中使用。

• 通过 currentPage 引入的对象 global.jsp：

  此 currentPage 对象是页面的实例(请参阅 AEM API)。 Page类提供了一些访问内容的方法。

  示例: String pageTitle = currentPage.getTitle();

• Via currentNode 引入的对象 global.jsp：

  此 currentNode 对象是节点的实例(请参阅 JCR API)。 可以通过以下方式访问节点的属性 getProperty() 方法。

  示例: String pageTitle = currentNode.getProperty("jcr:title");

JSP标记库

通过CQ和Sling标记库，可访问在模板和组件的JSP脚本中使用的特定函数。

有关详细信息，请参阅文档 标记库.

使用客户端HTML库

现代网站在很大程度上依赖于由复杂的JavaScript和CSS代码驱动的客户端处理。 组织和优化此代码的服务可能是一个复杂的问题。

为帮助处理此问题，AEM提供了 客户端库文件夹，用于将客户端代码存储在存储库中，将其组织成不同类别，并定义何时以及如何向客户端提供每种类别的代码。 然后，客户端库系统负责在最终网页中产生正确的链接，以加载正确的代码。

查看文档 使用客户端HTML库 了解更多信息。

对话框

您的组件需要一个对话框供作者添加和配置内容。

参见 AEM组件 — 基础知识 了解更多详细信息。

配置编辑行为

您可以配置组件的编辑行为。 这包括各种属性，例如组件可用的操作、就地编辑器的特征以及与组件上的事件相关的侦听器。 尽管存在某些特定差异，但配置对于触屏优化UI和经典UI都是通用的。

此 组件的编辑行为已配置 通过添加 cq:editConfig 类型节点 cq:EditConfig 在组件节点下(类型为 cq:Component)，并添加特定属性和子节点。

使用和扩展ExtJS小组件

参见 使用和扩展ExtJS小组件 了解更多详细信息。

为ExtJS构件使用xtype

参见 使用xtype 了解更多详细信息。

开发新组件

本节介绍如何创建自己的组件并将它们添加到段落系统中。

快速入门方法是复制现有组件，然后进行所需的更改。

中详细描述了如何开发组件的示例 扩展文本和图像组件 — 示例。

开发新组件（调整现有组件）

要基于现有组件为AEM开发新组件，您可以复制组件，为新组件创建一个javascript文件，并将其存储在AEM可访问的位置(另请参阅 自定义组件和其他元素)：

1. 使用CRXDE Lite在下列位置创建新组件文件夹：

   / apps/<myProject>/components/<myComponent>

   按照库中的方式重新创建节点结构，然后复制现有组件（如文本组件）的定义。 例如，要自定义文本组件副本，请执行以下操作：

   • 从 /libs/foundation/components/text
   • 到 /apps/myProject/components/text

2. 修改 jcr:title 以反映其新名称。

3. 打开新的组件文件夹，并进行所需的更改。 另外，删除文件夹中的任何无关信息。

   您可以进行如下更改：

   • 在对话框中添加新字段

     • cq:dialog — 触屏UI的对话框
     • dialog — 经典UI的对话框

   • 替换 .jsp 文件（将其命名为新组件的后缀）

   • 或者完全重新工作整个组件（如果需要）

   例如，如果您复制了标准文本组件，则可以在对话框中添加一个附加字段，然后更新 .jsp 以处理在那里输入的内容。

   注意

   的组件：

   • 触屏优化UI使用 Granite 组件
   • 经典UI ExtJS构件
   注意

   为经典UI定义的对话框将在触屏UI中运行。

   为触屏UI定义的对话框不会在经典UI中运行。

   根据您的实例和创作环境，您可能需要为组件定义这两种类型的对话框。

4. 应存在以下节点之一并正确初始化，以便新组件显示：

   • cq:dialog — 触屏UI的对话框
   • dialog — 经典UI的对话框
   • cq:editConfig — 组件在编辑环境中的行为（例如拖放）
   • design_dialog — 用于设计模式的对话框（仅限经典UI）

5. 通过以下任一方式激活段落系统中的新组件：

   • 使用CRXDE Lite添加值 <path-to-component> (例如， /apps/geometrixx/components/myComponent)到节点的属性组件 /etc/designs/geometrixx/jcr:content/contentpage/par
   • 按照中的说明操作 向段落系统添加新组件

6. 在AEM WCM中，打开网站中的页面，并插入您刚刚创建的类型的新段落，以确保组件正常工作。

向段落系统添加新组件（设计模式）

开发组件后，您可以将其添加到段落系统，这样作者就可以在编辑页面时选择和使用组件。

1. 访问创作环境中使用段落系统的页面，例如 <contentPath>/Test.html.

2. 通过以下任一方式切换到设计模式：

   • 添加 ?wcmmode=design 前往URL的末尾，然后再次访问，例如：

     <contextPath>/ Test.html?wcmmode=design

   • 单击Sidekick中的Design

   您现在处于设计模式，可以编辑段落系统。

3. 单击“编辑”。

   此时将显示属于段落系统的组件列表。 新组件也会列出。

   可以激活（或停用）组件以确定在编辑页面时向作者提供哪些组件。

4. 激活组件，然后返回到正常编辑模式以确认该组件可供使用。

扩展文本和图像组件 — 示例

本节提供了一个示例，说明如何使用可配置的图像放置功能扩展广泛使用的文本和图像标准组件。

文本和图像组件的扩展允许编辑器使用组件的所有现有功能，并有一个额外的选项来指定图像的放置：

• 在文本的左侧（当前行为和新的默认值）
• 还有右手边

扩展此元件后，可通过元件的对话框配置图像放置。

本练习将介绍以下技术：

• 复制现有组件节点并修改其元数据
• 修改组件的对话框，包括从父对话框继承构件
• 修改组件的脚本以实施新功能

扩展现有文本时间组件

要创建新组件，我们使用标准文本组件作为基础并对其进行修改。 我们将新组件存储在GeometrixxAEM WCM示例应用程序中。

1. 从以下位置复制标准文本页面组件 /libs/foundation/components/textimage 到Geometrixx组件文件夹中， /apps/geometrixx/components，使用textimage作为目标节点名称。 （导航到组件，右键单击并选择复制，然后浏览到目标目录来复制组件。）

   

2. 要使此示例保持简单，请导航到您复制的组件，并删除新文本时间节点的所有子节点，以下子节点除外：

   • 对话框定义： textimage/dialog
   • 组件脚本： textimage/textimage.jsp
   • 编辑配置节点（允许拖放资产）： textimage/cq:editConfig
   注意

   对话框定义依赖于UI：

   • 触屏优化UI： textimage/cq:dialog
   • 经典 UI: textimage/dialog

3. 编辑组件元数据：

   • 组件名称

     • 设置 jcr:description 到 Text Image Component (Extended)
     • 设置 jcr:title 到 Text Image (Extended)

   • 组，其中组件在sidekick中列出（保持原样）

     • 离开 componentGroup 设置为 General

   • 新组件的父组件（标准文本时间组件）

     • 设置 sling:resourceSuperType 到 foundation/components/textimage

   在此步骤之后，组件节点如下所示：

   

4. 更改 sling:resourceType 图像的edit configuration节点的属性(属性： textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType)至 geometrixx/components/textimage.

   这样，当图像放到页面上的组件时， sling:resourceType extended textimage组件的属性设置为： geometrixx/components/textimage.

5. 修改组件的对话框以包含新选项。 新元件继承对话框中与原始元件相同的部分。 我们所做的唯一补充是扩展 高级 选项卡，添加 图像位置 下拉列表，带选项 左侧 和 右：

   • 保留 textimage/dialog属性未更改。

   请注意操作方法 textimage/dialog/items 具有四个子节点，即tab1到tab4，表示“文本时间”对话框的四个选项卡。

   • 对于前两个选项卡（tab1和tab2）：

     • 将xtype更改为cqinclude（继承自标准组件）。
     • 添加带有值的路径属性 /libs/foundation/components/textimage/dialog/items/tab1.infinity.json和 /libs/foundation/components/textimage/dialog/items/tab2.infinity.json，则不会显示任何内容。
     • 删除所有其他属性或子节点。

   • 对于选项卡3：

     • 不更改属性和子节点

     • 将新的字段定义添加到 tab3/items，类型的节点位置 cq:Widget

     • 为新的设置以下属性（字符串类型） tab3/items/position节点：

       • name： ./imagePosition
       • xtype: selection
       • fieldLabel: Image Position
       • type: select

     • 添加子节点 position/options 类型 cq:WidgetCollection 表示两个图像放置选项，并在其下创建两个类型节点o1和o2 nt:unstructured.

     • 用于节点 position/options/o1 设置属性： text 到 Left 和 value 到 left.

     • 用于节点 position/options/o2 设置属性： text 到 Right 和 value 到 right.

   • 删除选项卡4。

   图像位置作为保留在内容中 imagePosition表示节点的属性 textimage 段落。 执行这些步骤后，“组件”对话框将如下所示：

   

6. 扩展组件脚本， textimage.jsp，并对新参数进行额外处理：

   Image image = new Image(resource, "image");
   
   if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
        image.loadStyleData(currentStyle);
   

   我们将替换强调的代码片段 %><div class="image"><% 新代码生成此标记的自定义样式。

   // todo: add new CSS class for the 'right image' instead of using
   // the style attribute
   String style="";
        if (properties.get("imagePosition", "left").equals("right")) {
             style = "style=\"float:right\"";
        }
        %><div <%= style %> class="image"><%
   

7. 将组件保存到存储库。 组件已准备好进行测试。

检查新组件

开发组件后，您可以将其添加到段落系统，这样作者就可以在编辑页面时选择和使用组件。 这些步骤允许您测试组件。

1. 以Geometrixx（如英语/公司）打开页面。
2. 通过单击Sidekick中的“设计”切换到设计模式。
3. 通过单击页面中间段落系统上的编辑，编辑段落系统设计。 此时将显示可放置在段落系统中的组件列表，该列表应包含新开发的组件文本图像（扩展） 。 选择段落系统并单击确定，以将其激活。
4. 切换回编辑模式。
5. 将文本图像（扩展）段落添加到段落系统中，用示例内容初始化文本和图像。 保存更改。
6. 打开文本和图像段落的对话框，将“高级”选项卡上的“图像位置”更改为“右” ，然后单击“确定”以保存更改。
7. 段落在渲染时将使用右侧的图像。
8. 该组件现已准备就绪，可使用。

组件将其内容存储在公司页面上的一个段落中。

禁用图像组件的上传功能

要禁用此功能，我们使用标准图像组件作为基础并对其进行修改。 我们将新组件存储在Geometrixx示例应用程序中。

1. 从以下位置复制标准图像组件 /libs/foundation/components/image 到Geometrixx组件文件夹中， /apps/geometrixx/components，使用图像作为目标节点名称。

   

2. 编辑组件元数据：

   • 设置 jcr：title 到 Image (Extended)

3. 导航到 /apps/geometrixx/components/image/dialog/items/image。

4. 添加新属性:

   • 名称: allowUpload
   • 类型: String
   • 值: false

   

5. 单击 全部保存. 组件已准备好进行测试。

6. 以Geometrixx（如英语/公司）打开页面。

7. 切换到设计模式并激活图像（扩展）。

8. 切换回编辑模式并将其添加到段落系统。 在下一张图片中，您可以看到原始图像组件与您刚刚创建的组件之间的差异。

   原始图像组件：

   

   您的新图像组件：

   

9. 该组件现已准备就绪，可使用。

Business.Adobe.com 资源

Content Insights Auto Form Fill Targeted Content Personalized Communications Mobile Forms Digital Signage