开发AEM组件 developing-aem-components

AEM组件用于保留、格式化和呈现网页上可用的内容。

代码示例 code-samples

本页提供了为AEM开发新组件所需的参考文档（或参考文档的链接）。 请参阅 开发AEM组件 — 代码示例 举几个实际例子。

结构 structure

页面上介绍了组件的基本结构 AEM组件 — 基础知识. 该文档涵盖了触屏界面和经典UI。 即使您不需要在新组件中使用经典设置，也可以在继承现有组件时了解这些设置。

扩展现有组件和对话框 extending-existing-components-and-dialogs

根据要实施的组件，可能会扩展或自定义现有实例，而不是定义和开发整个实例 结构 从头开始。

扩展或自定义现有组件或对话框时，您可以在进行更改之前复制或复制整个结构或对话框所需的结构。

扩展现有组件 extending-an-existing-component

可通过以下方式扩展现有组件 资源类型层次结构 以及相关的继承机制。

自定义现有组件对话框 customizing-a-existing-component-dialog

也可以覆盖 组件对话框 使用 Sling资源合并器 并定义属性 sling:resourceSuperType.

这意味着您只需要重新定义所需的差异，而不是重新定义整个对话框(使用 sling:resourceSuperType)。 现在，推荐使用此方法来扩展组件对话框

请参阅 Sling资源合并器 以了解更多详细信息。

定义标记 defining-the-markup

您的组件将渲染为 HTML. 您的组件需要定义所需的HTML，以便在创作和发布环境中获取所需的内容，然后根据需要进行渲染。

使用HTML模板语言 using-the-html-template-language

此 HTML模板语言(HTL)随AEM 6.0引入，它取代了JSP (JavaServer Pages)，成为适用于HTML的首选和推荐的服务器端模板系统。 对于需要构建强大企业网站的Web开发人员，HTL有助于提高安全性和开发效率。

开发内容逻辑 developing-the-content-logic

此可选逻辑选择和/或计算要呈现的内容。 它通过适当的Use-API模式从HTL表达式调用。

从外观中分离逻辑的机制有助于阐明对给定视图的调用。 它还允许对同一资源的不同视图使用不同的逻辑。

使用Java using-java

HTL Java Use-API让HTL文件可以访问自定义Java类中的Helper方法. 这使您能够使用Java代码实施用于选择和配置组件内容的逻辑。

使用JavaScript using-javascript

HTL JavaScript Use-API让HTL文件可以访问使用JavaScript编写的帮助程序代码. 这使您能够使用JavaScript代码实施用于选择和配置组件内容的逻辑。

使用客户端HTML库 using-client-side-html-libraries

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

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

读取 使用客户端HTML库 以了解更多信息。

配置编辑行为 configuring-the-edit-behavior

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

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

配置预览行为 configuring-the-preview-behavior

此 WCM模式 切换为时设置Cookie 预览 模式，即使页面未刷新。

对于呈现时对WCM模式敏感的组件，需要定义它们以专门刷新自身，然后依赖Cookie的值。

创建和配置对话框 creating-and-configuring-a-dialog

对话框用于允许作者与组件交互。 通过对话框，作者和/或管理员可以编辑内容、配置组件或定义设计参数(使用 “设计”对话框)

Coral用户界面和Granite用户界面 coral-ui-and-granite-ui

Coral UI 和 Granite UI 定义AEM的现代外观。

Granite UI提供了一系列基本组件（构件） 需要在创作环境中创建对话框。 必要时，您可以扩展此选择并 创建自己的构件.

有关完整的详细信息，请参阅：

创建新对话框 creating-a-new-dialog

触屏优化UI的对话框：

示例节点结构可能是：

newComponent (cq:Component)
  cq:dialog (nt:unstructured)
    content
      layout
      items
        column
          items
            file
            description

自定义对话框与开发组件类似，因为对话框本身是一个组件（即组件脚本渲染的标记以及客户端库提供的行为/样式）。

有关示例，请参阅：

自定义对话框字段 customizing-dialog-fields

创建新字段 creating-a-new-field

触屏UI的构件实施为Granite UI组件。

要创建要在组件对话框中用于触屏UI的构件，需要您 创建Granite UI字段组件.

如果将对话框视为表单元素的简单容器，则还可以将对话框内容的主要内容视为表单字段。 创建表单字段要求您创建资源类型；这等同于创建组件。 为了帮助您完成该任务，Granite UI提供了一个通用字段组件来继承(使用 sling:resourceSuperType)：

/libs/granite/ui/components/coral/foundation/form/field

更具体地说，Granite UI提供了一系列适合在对话框中使用的字段组件(或者，更一般地说，在 表单)。

创建资源类型后，可通过在对话框中添加新节点和属性来实例化字段 sling:resourceType 请参阅您刚刚引入的资源类型。

创建用于样式和行为的客户端库 creating-a-client-library-for-style-and-behavior

如果要为组件定义样式和行为，可以创建专用的 客户端库 定义您的自定义CSS/LESS和JS。

要仅为组件对话框加载客户端库（即，不会为其他组件加载客户端库），您需要设置属性 extraClientlibs 对话框的类别名称更改为已创建的客户端库的类别名称。 如果您的客户端库非常大和/或您的字段特定于此对话框，并且其他对话框不需要执行此操作，则建议您执行此操作。

要为所有对话框加载客户端库，请将客户端库的类别属性设置为 cq.authoring.dialog. 这是渲染所有对话框时默认包括的客户端库的类别名称。 如果客户端库较小和/或字段是通用的，并且可在其他对话框中重复使用，则需要执行此操作。

有关示例，请参阅：

扩展（继承）字段 extending-inheriting-from-a-field

根据您的要求，您可以：

对对话框字段的访问权限 access-to-dialog-fields

您还可以使用渲染条件( rendercondition)，以控制有权访问对话框中特定选项卡/字段的用户；例如：

+ mybutton
  - sling:resourceType = granite/ui/components/coral/foundation/button
  + rendercondition
    - sling:resourceType = myapp/components/renderconditions/group
    - groups = ["administrators"]

处理字段事件 handling-field-events

处理对话框字段上的事件方法现在已完成 自定义客户端库中的侦听器. 这与以前的方法有所不同，以前的方法是 内容结构中的侦听器.

自定义客户端库中的监听器 listeners-in-a-custom-client-library

要将逻辑注入到字段中，您应：

要实现此目的，您需要了解要与之交互的底层构件库。 请参阅 Coral用户界面文档 以识别您要对哪个事件做出反应。 这非常类似于过去使用ExtJS执行的流程：查找给定小部件的文档页面，然后检查其事件API的详细信息。

有关示例，请参阅：

内容结构中的侦听器 listeners-in-the-content-structure

在使用ExtJS的经典UI中，通常内容结构中给定小组件具有侦听器。 在触屏UI中实现相同操作与内容中不再定义JS侦听器代码（或根本没有任何代码）不同。

内容结构描述了语义结构；它应该（必须）不暗示底层构件的性质。 通过在内容结构中不具有JS代码，您可以更改实施详细信息，而不必更改内容结构。 换言之，无需接触内容结构即可更改构件库。

检测对话框的可用性 dialog-ready

如果您有一个自定义JavaScript，只有在对话框可用并准备就绪时才需要执行，则应监听 dialog-ready 事件。

只要对话框加载（或重新加载）并准备就绪，即表示只要对话框的DOM中存在更改（创建/更新），就会触发此事件。

dialog-ready 可用于挂接JavaScript自定义代码，以对对话框或类似任务中的字段执行自定义。

字段验证 field-validation

必填字段 mandatory-field

要将给定字段标记为必填字段，请在字段的内容节点上设置以下属性：

有关示例，请参阅：

/libs/foundation/components/page/cq:dialog/content/items/tabs/items/basic/items/column/items/title/items/title

字段验证(Granite UI) field-validation-granite-ui

在Granite UI和Granite UI组件（等效于构件）中，使用进行字段验证 foundation-validation API。 请参阅 foundation-valdiation 有关详细信息，请参阅Granite文档。

有关示例，请参阅：

创建和配置设计对话框 creating-and-configuring-a-design-dialog

当组件具有可在其中编辑的设计详细信息时，会提供“设计”对话框 设计模式.

其定义与a的定义非常相似 用于编辑内容的对话框，不同之处在于它被定义为节点：

创建和配置就地编辑器 creating-and-configuring-an-inplace-editor

就地编辑器允许用户直接在段落流中编辑内容，而无需打开对话框。 例如，标准的“文本”和“标题”组件都有一个就地编辑器。

并非每个组件类型都需要/有意义的就地编辑器。

请参阅 扩展页面创作 — 添加新的就地编辑器 以了解更多信息。

自定义组件工具栏 customizing-the-component-toolbar

此 组件工具栏 允许用户访问组件的各种操作，如编辑、配置、复制和删除。

请参阅 扩展页面创作 — 向组件工具栏添加新操作 以了解更多信息。

为引用边栏配置组件（借入/借出） configuring-a-component-for-the-references-rail-borrowed-lent

如果新组件引用其他页面中的内容，则可以考虑是否希望它影响 借用的内容 和 借出内容 的部分 引用 边栏。

现成的AEM仅检查“参照”组件。 要添加组件，您需要配置OSGi捆绑包 WCM创作内容引用配置.

在定义中创建一个条目，指定组件以及要检查的属性。 例如：

/apps/<*your-Project*>/components/reference@parentPath

启用组件并将组件添加到段落系统 enabling-and-adding-your-component-to-the-paragraph-system

开发组件后，需要启用该组件，以便在适当的段落系统中使用，以便在所需的页面上使用。

可以通过以下任一方式完成此操作：

配置段落系统以便拖动资产可创建组件实例 configuring-a-paragraph-system-so-that-dragging-an-asset-creates-a-component-instance

利用AEM，可以在您的页面上配置段落系统，以便 当用户将资产（相应的）拖放到页面的实例上时，会自动创建新组件的实例 （无需始终将空组件拖动到页面）。

此行为以及所需的资产到组件关系可以配置：

有关示例，请参阅：

GITHUB上的代码

您可以在GitHub上找到此页面的代码

使用AEM Brackets扩展 using-the-aem-brackets-extension

此 AEM Brackets扩展 提供了流畅的工作流来编辑AEM组件和客户端库。 它基于 括号 代码编辑器。

扩展：

从经典组件迁移 migrating-from-a-classic-component

将设计为与经典UI一起使用的组件迁移到可与触屏UI一起使用的组件时（单独或联合），应考虑以下问题：

迁移cq：listener代码 migrating-cq-listener-code

如果您要迁移专为经典UI设计的项目，则 cq:listener 代码（和组件相关的clientlibs）可以使用特定于经典UI的函数(例如 CQ.wcm.*)。 对于迁移，您必须使用触屏UI中的等效对象/函数更新此类代码。

如果您的项目完全迁移到触屏UI，则需要替换此类代码，才能使用与触屏UI相关的对象和函数。

但是，如果您的项目必须在迁移期间（通常情况下）同时满足经典UI和触屏UI要求，则必须实施切换以区分引用相应对象的单独代码。

此切换机制可以按如下方式实现：

if (Granite.author) {
    // touch UI
} else {
    // classic UI
}

记录组件 documenting-your-component

作为开发人员，您希望能够轻松访问组件文档，以便快速了解：

因此，您可以轻松地在组件本身中使用任何现有的文档标记。

放置 README.md 文件。 此Markdown显示在 组件控制台.

受支持的Markdown与 内容片段.