<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<ellipse cx="5" cy="5" rx="3" ry="3" fill="#707070"/>
<ellipse cx="15" cy="5" rx="4" ry="4" fill="#707070"/>
<ellipse cx="5" cy="15" rx="5" ry="5" fill="#707070"/>
<ellipse cx="15" cy="15" rx="4" ry="4" fill="#707070"/>
组件的属性和子节点 properties-and-child-nodes-of-a-component
定义组件所需的许多节点/属性对这两个UI都是通用的，并且这些节点/属性之间的差异保持独立，以便您的组件可以在两个环境中工作。
组件是cq:Component类型的节点，具有以下属性和子节点：
cq:Component
当前组件。 组件为节点类型cq:Component.
componentGroup
String
在组件浏览器（触屏UI）或Sidekick（经典UI）中可选择组件的组。
值.hidden用于无法从UI选择的组件，例如实际的段落系统。
cq:isContainer
Boolean
指示组件是否为容器组件，因此可以包含其他组件，例如段落系统。
cq:templatePath
String
从组件浏览器或Sidekick添加组件时要用作内容模板的节点的路径。 这必须是绝对路径，而不是相对于组件节点的路径。
除非您希望重复使用在其他位置已提供的内容，否则不是必需的，cq:template就足够了（请参阅下文）。
jcr:created
创建组件的日期。
jcr:description
String
组件的说明。
jcr:title
String
组件的标题。
sling:resourceSuperType
String
设置后，该组件将继承该组件。
virtual
sling:Folder
允许创建虚拟组件。 要查看示例，请查看联系人组件：
/libs/foundation/components/profile/form/contact
<breadcrumb.jsp>
nt:file
脚本文件。
icon.png
nt:file
组件图标，显示在Sidekick中的标题旁边。
thumbnail.png
nt:file
将组件从Sidekick拖动到适当位置时显示的可选缩略图。
如果查看 Text 组件（任一版本），您可以看到以下元素：
jcr:title — 组件的标题；这可用于识别组件，例如，它显示在组件浏览器或sidekick内的组件列表中
jcr:description — 组件的描述；可以用作sidekick中组件列表的鼠标悬停提示
sling:resourceSuperType：这表示扩展组件时的继承路径（通过覆盖定义）
dialog (cq:Dialog) — 定义用于编辑此组件内容的对话框（特定于经典UI）
design_dialog (cq:Dialog) — 指定此组件的设计编辑选项
icon.png — 要用作Sidekick中组件的图标的图形文件
thumbnail.png — 从Sidekick拖动组件时用作组件缩略图的图形文件
对话框 dialogs
对话框是组件的关键元素，因为它们为作者提供了一个界面来配置该组件并提供输入内容。
根据组件的复杂性，您的对话框可能需要一个或多个选项卡 — 缩短对话框并对输入字段进行排序。
对话框定义特定于UI：
在Classic对话框中：
您可以将该对话框创建为cq:Dialog，这将提供单个选项卡 — 就像在文本组件中一样；或者，如果您需要多个选项卡（就像在文本时间组件中一样），则可以将该对话框定义为cq:TabPanel。
cq:WidgetCollection (items)用于为输入字段(cq:Widget)或其他选项卡(cq:Widget)提供基数。 此层次结构可以扩展。
设计对话框 design-dialogs
“设计”对话框与用于编辑和配置内容的对话框类似，但它们为作者提供了用于配置和提供该组件的设计详细信息的界面。
设计对话框在设计模式下可用，但并非所有组件都需要它们，例如，标题 和 图像 都具有设计对话框，而 文本 没有。
段落系统的“设计”对话框（例如，parsys）是一种特殊情况，因为它允许用户在页面上选择特定的其他组件（从组件浏览器或sidekick）。
将组件添加到段落系统 adding-your-component-to-the-paragraph-system
定义组件后，必须使其可用。 要使组件可在段落系统中使用，您可以：
将所需的组件添加到模板定义的components属性中：
/etc/designs/<*yourProject*>/jcr:content/<*yourTemplate*>/par
例如，请参阅：
/etc/designs/geometrixx/jcr:content/contentpage/par
定义（适用于两个UI）具有属性name= ./jcr:title
/libs/foundation/components/title/cq:dialog/content/items/column/items/title
/libs/foundation/components/title/dialog/items/title
在内容中，这将生成包含作者内容的属性jcr:title。
定义的属性取决于各个定义。 尽管它们可能比上述情况更加复杂，但它们仍然遵循同样的基本原则。
组件层次结构和继承 component-hierarchy-and-inheritance
AEM中的组件遵循三个不同的层次结构：
容器层次结构
这用于向子组件填充配置设置，并且最常用于Parsys场景。
例如，可以在父组件上定义编辑栏按钮、控件集布局（编辑栏、变换）和对话框布局（内联、浮动）的配置设置并传播到子组件。
cq:editConfig和cq:childEditConfig中的配置设置（与编辑功能相关）已传播。
包含层次结构
这是在运行时由include序列强制实施的。
Designer使用此层级，该层级反过来充当呈现的各个设计方面的基础；包括布局信息、css信息、parsys中的可用组件等。
编辑行为 edit-behavior
本节介绍如何配置组件的编辑行为。 这包括各种属性，例如组件可用的操作、就地编辑器的特征以及与组件上的事件相关的侦听器。
尽管存在某些特定差异，但配置对于触屏优化UI和经典UI都是通用的。
组件的编辑行为是通过在组件节点（类型为cq:Component）下添加类型为cq:EditConfig的cq:editConfig节点以及添加特定属性和子节点来配置的。 以下属性和子节点可用：
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
cq:actions="[edit]"
cq:dialogMode="floating"
cq:layout="editbar"
jcr:primaryType="cq:EditConfig">
<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
afteredit="REFRESH_PAGE"/>
</jcr:root>
要查找cq:editConfig节点的属性，例如cq:actions，您可以在 CRXDE Lite 中使用查询工具，并使用以下XPath查询字符串进行搜索：
//element(cq:editConfig, cq:EditConfig)[@cq:actions]
例如，要查找cq:editConfig的子节点，可以搜索类型为cq:DropTargetConfig的cq:dropTargets；可以在中使用查询工具 CRXDE Lite 并使用以下XPath查询字符串进行搜索：
//element(cq:dropTargets, cq:DropTargetConfig)
组件占位符 component-placeholders
组件必须始终呈现对作者可见的一些HTML，即使组件没有内容也是如此。 否则，它可能会从编辑器的界面中消失，从技术上讲，它会在页面上和编辑器中呈现但不可见。 在这种情况下，作者无法选择空组件并与之交互。
因此，组件应呈现占位符，只要它们在页面编辑器中呈现页面时（当WCM模式为edit或preview时）不呈现任何可见输出。
占位符的典型HTML标记如下：
<div class="cq-placeholder" data-emptytext="Component Name"></div>
在上一个示例中，isEmpty是一个变量，仅当组件没有内容并且作者不可见时才会为真。
为避免重复，Adobe建议组件的实施者对这些占位符使用HTL模板，类似于核心组件提供的占位符。
然后，通过下面的HTL行完成上一个链接中的模板使用：
<sly data-sly-use.template="core/wcm/components/commons/v1/templates.html"
data-sly-call="${template.placeholder @ isEmpty=!model.text}"></sly>
在上一个示例中，model.text是变量，仅当内容包含内容且可见时才会为真。
可在核心组件中看到此模板的示例用法，例如在标题组件中。
使用cq：EditConfig属性进行配置 configuring-with-cq-editconfig-properties
cq：actions cq-actions
cq:actions属性(String array)定义了一个或多个可对组件执行的操作。 以下值可用于配置：
text:<some text>
显示仅在经典UI中可见的静态文本值<some text>
。 触屏优化UI不会在上下文菜单中显示操作，因此该操作不适用。
添加分隔条。
仅在经典UI中可见。 触屏优化UI不会在上下文菜单中显示操作，因此该操作不适用。
添加按钮以编辑组件。
editannotate
delete
添加按钮以删除组件。
insert
添加按钮以在当前组件之前插入新组件。
copymove
添加按钮以复制和剪切组件。
以下配置将编辑按钮、分隔符、删除和插入按钮添加到组件编辑栏：
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
cq:actions="[edit,-,delete,insert]"
cq:layout="editbar"
jcr:primaryType="cq:EditConfig"/>
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
cq:actions="[text:Inherited Configurations from Base Framework]"
cq:layout="editbar"
jcr:primaryType="cq:EditConfig"/>
cq：layout（仅限经典UI） cq-layout-classic-ui-only
cq:layout属性(String)定义如何在经典UI中编辑该组件。 可以使用以下值：
rollover
默认值。 组件版本可通过单击和/或上下文菜单“在鼠标悬停时”访问。
对于高级使用，相应的客户端对象为： CQ.wcm.EditRollover。
editbar
可通过工具栏访问组件版本。
对于高级使用，相应的客户端对象为： CQ.wcm.EditBar。
选项将保留在客户端代码中。
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
cq:actions="[edit]"
cq:layout="editbar"
jcr:primaryType="cq:EditConfig">
</jcr:root>
cq：dialogMode（仅限经典UI） cq-dialogmode-classic-ui-only
该组件可以链接到“编辑”对话框。 cq:dialogMode属性(String)定义如何在经典UI中打开组件对话框。 可以使用以下值：
floating
对话框浮动。
inline
（默认值）。 该对话框锚定在该组件上。
如果组件宽度小于客户端CQ.themes.wcm.EditBase.INLINE_MINIMUM_WIDTH值，则该对话框为浮点型，否则为内联型。
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0"
cq:actions="[edit]"
cq:dialogMode="floating"
cq:layout="editbar"
jcr:primaryType="cq:EditConfig">
</jcr:root>
cq：emptyText cq-emptytext
cq:emptyText属性(String)定义不存在可视内容时显示的文本。 默认为： Drag components or assets here。
cq：inherit cq-inherit
cq:inherit属性(boolean)定义缺少的值是否继承自它继承的组件。 默认为false。
对话框布局 dialoglayout
dialogLayout属性定义默认情况下应如何打开对话框。
使用cq：EditConfig子节点进行配置 configuring-with-cq-editconfig-child-nodes
cq：dropTargets cq-droptargets
cq:dropTargets节点（节点类型nt:unstructured）定义了一个放置目标列表，该列表可以接受从内容查找器拖动的资产中的放置。 它用作cq:DropTargetConfig类型的节点的集合。
多个放置目标仅在经典UI中可用。
在触屏优化UI中，仅使用第一个目标。
cq:DropTargetConfig类型的每个子节点在组件中定义一个放置目标。 节点名称非常重要，因为它必须在JSP中使用，才能生成分配给作为有效放置目标的DOM元素的CSS类名称，如下所示：
<drop target css class> = <drag and drop prefix> +
<node name of the drop target in the edit configuration>
<drag and drop prefix>由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类型的节点必须具有以下属性：
accept
对资源mime类型应用正则表达式，以验证是否允许删除。
groups
放置目标组的数组。 每个组都必须与内容查找器扩展中定义的组类型匹配，并且组类型应附加到资产。
propertyName
有效放置后将更新的属性的名称。
以下配置是从下载组件中获取的。 它允许将media组中的任何资产（mime类型可以是任何字符串）从内容查找器拖放到组件中。 放置后，正在更新组件属性fileReference：
<cq:dropTargets jcr:primaryType="nt:unstructured">
jcr:primaryType="cq:DropTargetConfig"
accept="[.*]"
groups="[media]"
propertyName="./fileReference"/>
</cq:dropTargets>
cq：actionConfigs（仅限经典UI） cq-actionconfigs-classic-ui-only
cq:actionConfigs节点（节点类型nt:unstructured）定义了一个新操作列表，这些操作将附加到cq:actions属性定义的列表。 cq:actionConfigs的每个子节点通过定义构件来定义新操作。
以下示例配置定义了一个新按钮（带有用于经典UI的分隔符）：
<jcr:root xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
cq:actions="[EDIT,COPYMOVE,DELETE,INSERT]"
jcr:primaryType="cq:EditConfig">
<cq:actionConfigs jcr:primaryType="nt:unstructured">
<separator0
jcr:primaryType="nt:unstructured"
xtype="tbseparator"/>
<manage
jcr:primaryType="nt:unstructured"
handler="function(){CQ_collab_forum_openCollabAdmin();}"
text="Manage comments"/>
</cq:actionConfigs>
</jcr:root>
cq:formParameters节点（节点类型nt:unstructured）定义了添加到对话框表单的其他参数。 每个属性都映射到一个表单参数。
以下配置将名为name的参数（用值photos/primary设置）添加到对话框表单：
<cq:formParameters
jcr:primaryType="nt:unstructured"
name="photos/primary"/>
cq：inplaceEditing cq-inplaceediting
cq:inplaceEditing节点（节点类型cq:InplaceEditingConfig）定义组件的就地编辑配置。 它可以具有以下属性：
active
(boolean) True表示启用组件的就地编辑。
configPath
(String)编辑器配置的路径。 配置可由配置节点指定。
editorType
(String)编辑器类型。 可用的类型包括：
纯文本：用于非HTML内容。
标题：是一种增强的纯文本编辑器，可在编辑开始之前将图形标题转换为纯文本。 由Geometrixx标题组件使用。
文本：用于HTML内容（使用富文本编辑器）。
cq：listeners cq-listeners
cq:listeners节点（节点类型cq:EditListenersConfig）定义在对该组件执行操作之前或之后发生的情况。 下表定义了它可能的属性。
（仅限经典UI）
beforedelete
该处理程序在组件移除之前触发。
beforeedit
处理程序在编辑组件之前触发。
beforecopy
处理程序在复制组件之前触发。
beforemove
处理程序会在移动组件之前触发。
beforeinsert
处理程序会在插入组件之前触发。
仅针对触屏UI运行。
beforechildinsert
处理程序在组件插入另一个组件（仅限容器）之前触发。
afterdelete
在删除组件后，将触发该处理程序。
REFRESH_SELF
afteredit
处理程序在编辑组件后触发。
REFRESH_SELF
aftercopy
在复制组件后，将触发处理程序。
REFRESH_SELF
afterinsert
在插入组件后，将触发处理程序。
REFRESH_INSERTED
aftermove
处理程序在组件移动后触发。
REFRESH_SELFMOVED
afterchildinsert
将组件插入另一个组件（仅限容器）后，将触发处理程序。
事件处理程序可以通过自定义实施实施。 例如，其中project.customerAction是静态方法：
afteredit = "project.customerAction"
以下示例等效于REFRESH_INSERTED配置：
afterinsert="function(path, definition) { this.refreshCreated(path, definition); }"
使用下列配置，在删除、编辑、插入或移动组件后刷新页面：
<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
afterdelete="REFRESH_PAGE"
afteredit="REFRESH_PAGE"
afterinsert="REFRESH_PAGE"
afterMove="REFRESH_PAGE"/>
