开发AEM组件（经典UI）

经典UI使用ExtJS创建构件，提供组件的外观。由于这些构件的性质，组件与经典UI和触屏优化UI的交互方式存在一些差异。

注意

组件开发的许多方面对于经典UI和触屏优化UI都很常见，因此您必须阅读AEM组件——使用此页面前的基础知识，该页面涉及经典UI的特定信息。

注意

虽然HTML模板语言(HTL)和JSP都可用于为经典UI开发组件，但本页说明了如何使用JSP进行开发。这完全是由于在经典UI中使用JSP的历史记录。

HTL现在是AEM的推荐脚本语言。请参见HTL和开发AEM组件以比较方法。

结构

AEM组件——基础知识页介绍了组件的基本结构，该页同时应用触屏和经典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

注意

版本CQ 5.3及更早版本使用的路径/libs/wcm/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中引入的属性对象：

属性对象是ValueMap的一个实例（请参阅Sling API），并包含当前资源的所有属性。

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

示例：String paragraphTitle = properties.get("jcr:title", "no title");用于标准段落组件的渲染脚本。
通过global.jsp中引入的currentPage对象：

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

示例: String pageTitle = currentPage.getTitle();
通过global.jsp中引入的currentNode对象：

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

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

JSP标记库

CQ和Sling标签库允许您访问特定函数，以便在模板和组件的JSP脚本中使用。

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

使用客户端HTML库

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

为帮助解决此问题，AEM提供客户端库文件夹，允许您将客户端代码存储在存储库中，将其组织到类别中，并定义何时以及如何将每个类别代码提供给客户端。然后，客户端库系统负责在最终网页中生成正确的链接，以加载正确的代码。

有关详细信息，请参阅文档使用客户端HTML库。

对话框

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

有关更多详细信息，请参阅AEM组件——基础知识。

配置编辑行为

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

通过在组件节点（类型cq:Component）下添加cq:editConfig类型cq:EditConfig的节点，并添加特定属性和子节点，配置组件的<a0/>编辑行为。

使用和扩展ExtJS构件

有关详细信息，请参阅使用和扩展ExtJS构件。

将xtypes用于ExtJS构件

有关详细信息，请参阅使用xtypes。

开发新组件

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

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

有关如何开发组件的示例在扩展文本和图像组件——示例中有详细说明。

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

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

使用CRXDE Lite，在以下位置创建新组件文件夹：

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

像在libs中一样重新创建节点结构，然后复制现有组件（如文本组件）的定义。例如，要自定义文本组件副本，请执行以下操作：
- 从 /libs/foundation/components/text
- 到 /apps/myProject/components/text
修改jcr:title以反映其新名称。
打开新组件文件夹并进行所需的更改。同时，删除文件夹中的任何无关信息。

您可以进行以下更改：
- 在对话框中添加新字段
  - cq:dialog -触屏优化UI的对话框
  - dialog -经典UI的对话框
- 替换.jsp文件（在新组件后命名它）
- 或完全重新工作整个组件（如果您希望）
例如，如果您获取标准文本组件的副本，则可以向对话框添加一个附加字段，然后更新.jsp以处理在该处输入的内容。
注意
用于以下项目的组件：
- 触屏优化UI使用Granite组件
- 经典UI使用ExtJS构件
注意

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

为触屏优化UI定义的对话框在经典UI中无法运行。

根据您的实例和作者环境，您可能希望为组件定义这两种类型的对话框。
以下节点之一应当存在并正确初始化，新组件才能显示：
- cq:dialog -触屏优化UI的对话框
- dialog -经典UI的对话框
- cq:editConfig -组件在编辑环境中的行为方式（例如拖放）
- design_dialog -设计模式对话框（仅限经典UI）
通过以下任一方式在段落系统中激活新组件：
- 使用CRXDE Lite将值<path-to-component>（例如/apps/geometrixx/components/myComponent）添加到节点/etc/designs/geometrixx/jcr:content/contentpage/par的属性组件中
- 按照向段落系统添加新组件中的说明操作
在AEM WCM中，在您的网站中打开一个页面，然后插入刚刚创建的新段落类型，以确保组件正常工作。

注意

要查看页面加载的计时统计信息，可以使用Ctrl-Shift-U —— 在URL中设置?debugClientLibs=true。

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

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

在您的创作环境中访问使用段落系统的页面，例如<contentPath>/Test.html。
通过以下任一方式切换到“设计”模式：
- 将?wcmmode=design添加到URL的末尾并再次访问，例如：
  
  <contextPath>/ Test.html?wcmmode=design
- 单击Sidekick中的设计
您现在处于设计模式，可以编辑段落系统。
单击编辑。

将显示属于段落系统的组件的列表。还会列出您的新组件。

可以激活（或取消激活）这些组件，以确定在编辑页面时向作者提供的组件。
激活您的组件，然后返回正常编辑模式以确认该组件可供使用。

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

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

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

在文本的左侧（当前行为和新默认值）
在右侧

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

本练习介绍以下技术：

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

注意

此示例针对经典UI。

注意

此示例基于Geometrixx样本内容，该内容不再随AEM一起提供，而已被We.Retail替换。有关如何下载和安装文档，请参见GeometrixxWe.Retail Reference Implementation。

扩展现有文本时间组件

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

将标准文本时间组件从/libs/foundation/components/textimage复制到Geometrixx组件文件夹/apps/geometrixx/components中，使用文本时间作为目标节点名称。 (通过导航到组件，右键单击并选择复制并浏览到目标目录，即可复制组件。)
要使此示例简单，请导航到您复制的组件，并删除新文本时间节点的所有子节点，以下子节点除外：
- 对话框定义：textimage/dialog
- 组件脚本：textimage/textimage.jsp
- 编辑配置节点（允许拖放资产）:textimage/cq:editConfig
注意
对话框定义取决于UI:
- 触屏优化UI:textimage/cq:dialog
- 经典 UI: textimage/dialog
编辑组件元数据：
- 组件名称
  - 将jcr:description设置为Text Image Component (Extended)
  - 将jcr:title设置为Text Image (Extended)
- 组，其中组件列在Sidekick中（保持原样）
  - 将componentGroup设置为General
- 新组件的父组件（标准文本时间组件）
  - 将sling:resourceSuperType设置为foundation/components/textimage
此步骤之后，组件节点如下所示：
更改图像编辑配置节点的sling:resourceType属性(属性：textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType至geometrixx/components/textimage.

这样，当将图像拖放到页面上的组件时，扩展文本时间组件的sling:resourceType属性将设置为：geometrixx/components/textimage.
修改组件的对话框以包含新选项。新组件会继承与原始对话框中相同的对话框部分。我们添加的唯一功能是扩展高级选项卡，添加图像位置下拉列表，其选项为左和右:
- 保持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的路径属性。
  - 删除所有其他属性或子节点。
- 对于tab3:
  - 保留属性和子节点而不进行更改
  - 将新字段定义添加到tab3/items类型cq:Widget的节点位置
  - 为新tab3/items/position节点设置以下属性（字符串类型）:
    - name: ./imagePosition
    - xtype: selection
    - fieldLabel: Image Position
    - type: select
  - 添加类型cq:WidgetCollection的子节点position/options以表示图像放置的两种选择，并在其下创建两个类型nt:unstructured的节点，即o1和o2。
  - 对于节点position/options/o1，请设置以下属性：text至Left和value至left.
  - 对于节点position/options/o2，请设置以下属性：text至Right和value至right。
- 删除选项卡4。
图像位置作为表示textimage段落的节点的imagePosition属性保留在内容中。完成这些步骤后，组件对话框如下所示：

扩展组件脚本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"><%

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

检查新组件

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

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

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

禁用图像组件的上传功能

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

将标准图像组件从/libs/foundation/components/image复制到Geometrixx组件文件夹/apps/geometrixx/components中，使用图像作为目标节点名称。
编辑组件元数据：
- 将jcr:title设置为Image (Extended)
导航至 /apps/geometrixx/components/image/dialog/items/image.
添加新属性:
- 名称: allowUpload
- 类型: String
- 值: false
单击保存全部。组件已准备好进行测试。
以Geometrixx(如英语/公司)打开页面。
切换到设计模式并激活“图像”(Extended)。
切换回编辑模式，并将其添加到段落系统。在下一张图片上，您可以看到原始图像组件与刚刚创建的图像组件之间的差异。

原始图像组件：

您的新图像组件：
该组件现已准备就绪。