开始开发新组件时，您需要了解其结构和配置的基础知识。

此过程包括阅读相关理论，并查看标准AEM实例中的各种组件实施。 尽管AEM已转移到新的标准、现代、触屏优化UI，但它继续支持经典UI，这一事实使后一种方法稍微复杂一些。

此部分涵盖关键概念和问题，并介绍开发您自己的组件时所需的详细信息。

在开始实际配置组件或对其进行编码之前，您应该询问：

在有关开发组件的任何严肃讨论开始之前，您必须知道作者使用的是哪种UI：

参见 适用于客户的UI界面Recommendations 了解更多详细信息。

可以实施组件以支持触屏UI和/或经典UI。 在查看标准实例时，您还会看到最初为经典UI或触屏UI或两者而设计的现成组件。

本页介绍了这两个函数的基本知识以及如何识别它们。

Adobe建议使用触屏优化UI以从最新技术中获益。 AEM现代化工具 可以更轻松地迁移。

Adobe建议将负责标记和渲染的代码与控制用于选择组件内容的逻辑的代码分开。

这一理念得到以下支持 HTL，一种模板化语言，旨在确保使用真正的编程语言来定义底层业务逻辑。 此（可选）逻辑通过特定命令从HTL调用。 此机制会突出显示为给定视图调用的代码，如有必要，还允许为同一组件的不同视图使用特定逻辑。

HTL是AEM 6.0中引入的一种HTML模板语言。

关于是否使用的讨论 HTL 或JSP (Java™ Server Pages)在开发您自己的组件时应该简单明了，因为HTL现在是AEM推荐的脚本语言。

HTL和JSP都可用于为经典用户界面和触屏优化UI开发组件。 尽管可能会倾向于认为HTL仅适用于触屏UI和经典UI的JSP，但这是一种误解，并且更多是由于时间原因。 触摸式UI和HTL大约在同一时期内合并到AEM中。 由于HTL现在是推荐的语言，因此它被用于新组件，这些组件倾向于用于触屏优化UI。

Granite UI Foundation表单字段除外（在对话框中使用）。 这些仍需要使用JSP。

要为相应的UI创建自己的组件，请参阅（阅读本页后）：

快速入门方法是复制现有组件，然后进行所需的更改。 要了解如何创建自己的组件并将它们添加到段落系统，请参阅：

呈现内容的组件必须部署在与内容相同的AEM实例上。 因此，必须在发布实例上部署用于创作和渲染创作实例上的页面的所有组件。 部署后，组件可用于渲染已激活的页面。

使用以下工具将组件移动到发布实例：

这些机制还可用于在其他实例之间传输组件，例如，从开发实例传输到测试实例。

页面:

段落系统：

AEM组件的结构强大而灵活，主要考虑因素包括：

结构的一个关键元素是资源类型。

这是一个抽象，有助于确保即使当外观和感觉随时间变化时，意图仍会停留在时间上。

组件的定义可细分如下：

AEM组件基于 Sling.

AEM组件（通常）位于以下位置：

项目/站点特定的组件（通常）位于以下位置：

AEM标准组件定义为 cq:Component 并具有关键元素：

jcr属性：

jcr属性的列表；这些属性是变量的，有些可能是可选的，但组件节点的基本结构、其属性和子节点由 cq:Component 定义

资源:

这些定义组件使用的静态元素。

脚本:

用于实施组件的结果实例的行为。

根节点：

重要属性：

jcr:title — 组件标题；例如，当组件在组件浏览器或Sidekick中列出时用作标签。

jcr:description — 组件的描述；可用作组件浏览器或Sidekick中的鼠标悬停提示。

经典 UI:

触屏 UI

重要子节点：

cq:editConfig (cq:EditConfig) — 定义组件的编辑属性，并使组件显示在组件浏览器或Sidekick中。

注意：如果组件有对话框，它将自动显示在组件浏览器或Sidekick中，即使cq：editConfig不存在。

cq:childEditConfig (cq:EditConfig) — 控制子组件的创作UI方面，这些组件未定义自己的组件 cq:editConfig.

触屏优化UI：

经典 UI:

组件的图标或缩写在开发人员创建组件时通过组件的JCR属性定义。 这些属性的计算顺序如下，并且使用找到的第一个有效属性。

如果以上属性均不( cq:icon， abbreviation， cq:icon.png，或 cq:icon.svg)，具体情况如下：

要取消从超级组件继承图标，请将设置为空 abbreviation 组件上的属性将还原为默认行为。

此 组件控制台 显示如何定义特定组件的图标。

定义组件所需的许多节点/属性对这两个UI都是通用的，不同之处保持独立，以便您的组件可以在两个环境中工作。

组件是类型的节点 cq:Component 和具有以下属性和子节点：

如果您查看 文本 组件（任一版本），您可以看到以下元素：

HTL ( /libs/wcm/foundation/components/text)

JSP ( /libs/foundation/components/text)

特别感兴趣之物业包括：

特别感兴趣的子节点包括：

对话框是组件的关键元素，因为它们为作者提供了一个界面来配置该组件并提供输入。

根据组件的复杂性，您的对话框可能需要一个或多个选项卡 — 缩短对话框并对输入字段进行排序。

对话框定义特定于UI：

触屏优化UI

在该对话框中，定义了各个字段：

经典 UI

在该对话框中，定义了各个字段：

在Classic对话框中：

“设计”对话框类似于用于编辑和配置内容的对话框，但它们为作者提供了配置该组件并提供其设计详细信息的界面。

设计对话框在设计模式下可用，尽管并非所有组件都需要，例如， 标题 和 图像 两者都具有设计对话框，而 文本 不会。

段落系统的“设计”对话框（例如parsys）是一种特殊情况，因为它允许用户在页面上选择特定的其他组件（从组件浏览器或sidekick）。

定义组件后，必须使其可用。 要使组件可用于段落系统，您可以：

打开 设计模式 ，并启用所需的组件。

将所需的组件添加到 components 属性下的模板定义：

/etc/designs//jcr:content//par

例如，请参阅：

/etc/designs/geometrixx/jcr:content/contentpage/par

如果创建和配置实例 标题 页面上的组件： /Prototype.html

触屏优化UI

经典 UI

然后，您可以查看在存储库中创建的内容的结构：

特别是，如果您查看 标题：

定义（适用于两个UI）具有属性 name= ./jcr:title

在内容中，这将生成属性 jcr:title 保存作者的内容。

定义的属性取决于各个定义。 尽管它们可能比上述方法更复杂，但它们仍遵循相同的基本原则。

AEM中的组件遵循三个不同的层次结构：

资源类型层次结构

这用于使用属性扩展组件 sling:resourceSuperType. 这将使组件能够继承。 例如，文本组件从标准组件继承各种属性。

容器层次结构

这用于向子组件填充配置设置，并且最常用于parsys场景。

例如，可以在父组件上定义编辑栏按钮的配置设置、控件集布局（编辑栏、变换）、对话框布局（内联、浮动）并传播到子组件。

中的配置设置（与编辑功能相关） cq:editConfig 和 cq:childEditConfig 都会被传播。

包括层次结构

这是在运行时由include序列施加的。

设计器使用此层级，而此层级又用作呈现的各个设计方面的基础；包括布局信息、css信息、parsys中的可用组件等。

本节介绍如何配置组件的编辑行为。 这包括各种属性，例如组件可用的操作、就地编辑器的特征以及与组件上的事件相关的侦听器。

尽管存在某些特定差异，但配置对于触屏优化UI和经典UI都是通用的。

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

cq:editConfig 节点属性：

cq:actions ( String array)：定义可以对组件执行的操作。

cq:layout ( String)：定义如何在经典UI中编辑组件。

cq:dialogMode ( String)：定义如何在经典UI中打开组件对话框

cq:emptyText ( String)：定义不存在可视内容时显示的文本。

cq:inherit ( Boolean)：定义缺少的值是否从它继承的组件继承。

dialogLayout （字符串）：定义应如何打开对话框。

cq:editConfig 子节点：

cq:dropTargets (节点类型 nt:unstructured)：定义可以接受从内容查找器的资源进行放置的放置目标的列表

cq:actionConfigs (节点类型 nt:unstructured)：定义附加到cq：actions列表的新操作的列表。

cq:formParameters (节点类型 nt:unstructured)：定义添加到对话框表单的其他参数。

cq:inplaceEditing (节点类型 cq:InplaceEditingConfig)：定义组件的就地编辑配置。

cq:listeners (节点类型 cq:EditListenersConfig)：定义在组件上发生操作之前或之后发生的情况。

在此页中，节点（属性和子节点）表示为XML，如以下示例所示。

存储库中有许多现有配置。 您可以轻松搜索特定属性或子节点：

要查找 cq:editConfig 节点，例如， cq:actions中，您可以使用查询工具 CRXDE Lite 和搜索以下XPath查询字符串：

//element(cq:editConfig, cq:EditConfig)[@cq:actions]

查找的子节点 cq:editConfig例如，您可以搜索 cq:dropTargets，属于类型 cq:DropTargetConfig；您可以使用查询工具在​CRXDE Lite​和搜索中使用以下XPath查询字符串：

//element(cq:dropTargets, cq:DropTargetConfig)

组件必须始终呈现对作者可见的一些HTML，即使组件没有内容也是如此。 否则，它可能会从编辑器的界面中消失，从技术上讲，它会存在，但在页面和编辑器中不可见。 在这种情况下，作者将无法选择空组件并与之交互。

因此，组件应呈现占位符，前提是在页面编辑器中呈现页面时(当WCM模式为 edit 或 preview)。 占位符的典型HTML标记如下：

呈现上述占位符HTML的典型HTL脚本如下：

在上一个示例中， isEmpty 是一个变量，仅当组件没有内容并且作者不可见时为真。

为避免重复，Adobe建议组件的实施者为这些占位符使用HTL模板， 类似于核心组件提供的插件。

然后，使用下面一行HTL完成上一个链接中的模板使用：

在上一个示例中， model.text 是变量，仅当内容包含内容且可见时为真。

可在核心组件中查看此模板的示例用法， 例如，在标题组件中。

此 cq:actions 属性( String array)定义可以对组件执行的一个或多个操作。 以下值可用于配置：

以下配置将编辑按钮、分隔符、删除和插入按钮添加到组件编辑栏：

以下配置将文本“从基本框架继承的配置”添加到组件编辑栏：

此 cq:layout 属性( String)定义如何在经典UI中编辑组件。 可以使用以下值：

变换和编辑栏的概念不适用于触屏UI。

以下配置会将编辑按钮添加到组件编辑栏：

该组件可以链接到“编辑”对话框。 此 cq:dialogMode 属性( String)定义如何在经典UI中打开组件对话框。 可以使用以下值：

在触屏优化UI中，对话框在桌面模式下始终处于浮动状态，并在移动设备中自动作为全屏打开。

以下配置定义了一个带有编辑按钮的编辑栏和一个浮动对话框：

此 cq:emptyText 属性( String)定义不存在可视内容时显示的文本。 默认为： Drag components or assets here.

此 cq:inherit 属性( boolean)定义缺少的值是否从它继承的组件继承。 默认为 false.

此 dialogLayout 属性定义默认情况下应如何打开对话框。

此 cq:dropTargets 节点（节点类型） nt:unstructured)定义一个放置目标列表，这些放置目标可以接受从内容查找器拖动的资产中的放置。 它用作类型节点的集合 cq:DropTargetConfig.

多个放置目标仅在经典UI中可用。

在触屏优化UI中，仅使用第一个目标。

每个类型的子节点 cq:DropTargetConfig 在组件中定义放置目标。 节点名称非常重要，因为它必须在JSP中使用，如下所示，才能生成分配给作为有效放置目标的DOM元素的CSS类名称：

此 由Java™属性定义：

com.day.cq.wcm.api.components.DropTarget.CSS_CLASS_PREFIX。

例如，类名在下载组件的JSP中定义如下( /libs/foundation/components/download/download.jsp)，其中 file 是下载组件的编辑配置中的放置目标的节点名称：

String ddClassName = DropTarget.CSS_CLASS_PREFIX + "file";

类型的节点 cq:DropTargetConfig 必须具有以下属性：

以下配置是从下载组件中获取的。 它支持来自的任意资源（mime类型可以是任意字符串） media 组从内容查找器放入组件中。 放置后，组件属性 fileReference 正在更新：

此 cq:actionConfigs 节点（节点类型） nt:unstructured)定义附加到由定义的列表的新操作列表。 cq:actions 属性。 的每个子节点 cq:actionConfigs 通过定义构件来定义新操作。

以下示例配置定义了一个新按钮（带有用于经典UI的分隔符）：

分隔符，由xtype定义 tbseparator；

名为的按钮 管理评论 运行handler函数的 CQ_collab_forum_openCollabAdmin().

参见 将新操作添加到组件工具栏 作为触屏UI的示例。

此 cq:formParameters 节点（节点类型） nt:unstructured)定义添加到对话框表单的其他参数。 每个属性都映射到一个表单参数。

以下配置添加了一个名为的参数 name，使用值设置 photos/primary 到对话框窗体：

此 cq:inplaceEditing 节点（节点类型） cq:InplaceEditingConfig)为组件定义就地编辑配置。 它可以具有以下属性：

(String)编辑器类型。 可用的类型包括：

以下配置允许就地编辑组件并定义 plaintext 作为编辑器类型：

此 cq:listeners 节点（节点类型） cq:EditListenersConfig)定义对组件执行操作之前或之后执行的操作。 下表定义了它可能的属性。

默认值

（仅限经典UI）

此 REFRESH_INSERTED 和 REFRESH_SELFMOVED 处理程序仅在经典UI中可用。

监听器的默认值仅在经典UI中设置。

如果有嵌套组件，则对定义为属性的操作会有某些限制。 cq:listeners 节点：

事件处理程序可以通过自定义实施来实施。 例如(其中 project.customerAction 是静态方法)：

afteredit = "project.customerAction"

以下示例等效于 REFRESH_INSERTED 配置：

afterinsert="function(path, definition) { this.refreshCreated(path, definition); }"

对于经典UI，要查看哪些参数可以在处理程序中使用，请参阅 before 和 after 的事件部分 CQ.wcm.EditBar 和 CQ.wcm.EditRollover 构件文档。

采用以下配置时，在删除、编辑、插入或移动组件后刷新页面：