开发AEM组件（经典UI） developing-aem-components-classic-ui

使用CRXDE Lite，在中创建新组件文件夹：

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

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

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

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

打开新组件文件夹，然后进行所需的更改。 此外，请删除文件夹中任何无关的信息。

您可以进行以下更改：

• 在对话框中添加新字段

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

• 替换 .jsp 文件（在新组件之后命名）

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

例如，如果您获取标准文本组件的副本，则可以向对话框中添加额外的字段，然后更新 .jsp 来处理输入。

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

• 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中，打开您网站的页面，并插入刚刚创建的类型的新段落，以确保组件正常工作。

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

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

• 添加 ?wcmmode=design 返回到URL的结尾并再次访问，例如：

  <contextPath>/ Test.html?wcmmode=design

• 在Sidekick中单击设计

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

单击编辑。

将显示属于段落系统的组件列表。 此外，还将列出新组件。

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

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

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

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

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

编辑组件元数据：

• 组件名称

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

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

  • 离开 componentGroup 设置为 General

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

  • 已设置 sling:resourceSuperType to foundation/components/textimage

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

更改 sling:resourceType 图像编辑配置节点的属性(属性： textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType) geometrixx/components/textimage.

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

修改组件的对话框以包含新选项。 新组件会继承与原始组件相同的对话框部分。 我们唯一的补充就是 高级 选项卡，添加 图像位置 下拉列表，带选项 左 和 Right:

• 离开 textimage/dialog属性未更改。

注意方式 textimage/dialog/items 有四个子节点，从tab1到tab4，表示textimage对话框的四个选项卡。

• 对于前两个选项卡（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 to Left 和 value to left.

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

• 删除选项卡4。

图像位置会在内容中保留，因为 imagePosition表示 textimage 段落。 完成这些步骤后，组件对话框如下所示：

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

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

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

编辑组件元数据：

• 已设置 jcr:title to Image (Extended)

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

添加新属性:

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

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

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

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

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

原始图像组件：

您的新图像组件：

组件现已准备就绪，可供使用。