开发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/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属性（属性： 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的路径属性。
  • 删除所有其他属性或子节点。

• 对于选项卡3：

  • 不更改属性和子节点

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

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

    • 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。

• 删除Tab4。

图像位置作为表示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"><%

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

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

编辑组件元数据：

• 将​ jcr：title ​设置为Image (Extended)

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

添加属性：

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

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

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

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

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

原始图像组件：

您的新图像组件：

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