开发Adobe Experience Manager (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 到 Text Image Component (Extended)
  • 设置 jcr:title 到 Text Image (Extended)

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

  • 离开 componentGroup 设置为 General

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

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

执行此步骤后，组件节点将如下所示：

更改 sling:resourceType 图像的edit configuration节点的属性(属性： 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、ID名称和ID名称等。
  • 删除所有其他属性或子节点。

• 对于选项卡3：

  • 不更改属性和子节点

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

  • 为新的设置以下属性（类型为String） 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.

• 删除Tab4。

图像位置作为保留在内容中 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 到 Image (Extended)

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

添加属性：

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

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

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

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

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

原始图像组件：

您的新图像组件：

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