开始开发新组件时,您需要了解其结构和配置的基础知识。
此过程涉及阅读理论并查看标准AEM实例中的各种组件实现。 后一种方法略为复杂,因为尽管AEM已转向新的标准、新式、触屏优化UI,但它仍支持经典UI。
本部分介绍开发您自己的组件时所需的详细信息,包括主要概念和问题。
在开始实际配置或编码组件之前,您应该询问:
您到底需要新组件做什么?
清晰的规范有助于在开发、测试和移交的所有阶段。
详细信息可能随时间而更改,但规范可以更新(尽管更改也应记录在案)。
您是需要从头开始创建组件,还是可以从现有组件继承基础知识?
您的组件是否需要逻辑才能选择/操作内容?
您的组件是否需要CSS格式?
我应该考虑哪些安全方面?
在进行任何有关开发组件的严肃讨论开始之前,您需要了解您的作者将使用的UI:
触屏优化 UI
AEM 5. 6.0中作为预览引入并在6.x中扩展的标准用户界面。它基于Adobe Marketing Cloud的统一用户体验,使用Coral UI和Granite UI 的 底层 技术。
基
于CQ 5.1中引入的ExtJS技术的经典UIser接口。
有关详细信息,请参阅客户UI接口Recommendations。
可以实施组件以支持触屏优化UI、经典UI或两者。 在查看标准实例时,您还会看到最初为经典UI或触屏优化UI设计的现成组件,或者两者兼有。
因此,本页将介绍两者的基础知识,以及如何识别它们。
Adobe建议利用触屏优化UI从最新技术中受益。 AEM Moderization Toolscan使迁移更简单。
建议将标记和渲染的代码与控制用于选择组件内容的逻辑的代码分开,以使代码负责。
此理念得到HTL的支持,该模板语言被有意限制,以确保使用真正的编程语言来定义基础业务逻辑。 此(可选)逻辑从HTL中使用特定命令调用。 此机制会高亮显示为给定视图调用的代码,并根据需要允许同一组件的不同视图使用特定逻辑。
HTL是AEM 6.0引入的HTML模板语言。
开发您自己的组件时是否使用HTL或JSP(Java服务器页)的讨论应该很简单,因为HTL现在是AEM的推荐脚本语言。
HTL和JSP都可用于为经典和触屏优化UI开发组件。 尽管有一种倾向认为HTL仅适用于经典UI的触屏优化UI和JSP,但这是一种误解,而且更多是由于时间原因。 触屏优化UI和HTL大约在同一时间段内并入AEM。 由于现在推荐使用HTL语言,因此它用于新组件,这些组件通常用于触屏优化UI。
除Granite UI Foundation表单字段外(在对话框中使用)。 这些仍需要使用JSP。
要为相应的UI创建您自己的组件,请参阅(阅读此页面后):
快速入门的方法是复制现有组件,然后进行所需的更改。 要了解如何创建您自己的组件并将其添加到段落系统,请参阅:
呈现内容的组件必须部署在与内容相同的AEM实例上。 因此,必须在发布实例上部署用于创作和呈现页面的所有组件。 部署后,组件可用于呈现已激活的页面。
使用以下工具将组件移至发布实例:
这些机制还可用于在其他实例之间传输组件,例如从开发到测试实例。
页面:
cq:Page
)。段落系统:
parsys
、 [responsivegrid](/docs/experience-manager-64/sites-authoring/responsive-layout.md)
)。AEM组件的结构强大而灵活,主要考虑事项有:
结构的关键元素是资源类型。
这是一个抽象,有助于确保即使外观和感觉随着时间而改变,意图也会保持时间。
组件的定义可以按如下方式进行划分:
AEM组件基于Sling。
AEM组件位于(通常)以下位置:
/libs/wcm/foundation/components
/libs/foundation/components
项目/站点特定组件(通常)位于:
/apps/<myApp>/components
AEM标准组件定义为cq:Component
,并具有关键元素:
jcr属性:
一列表jcr属性;这些是变量,某些可能是可选的,尽管组件节点的基本结构、其属性和子节点由cq:Component
定义定义定义
资源:
这些组件定义组件使用的静态元素。
脚本:
用于实现组件的结果实例的行为。
根节点:
<mycomponent> (cq:Component)
-组件的层次结构节点。重要属性:
jcr:title
-组件标题;例如,当组件在组件浏览器或Sidekick中列出时,将用作标签。
jcr:description
-组件说明;可用作组件浏览器或Sidekick中的鼠标悬停提示。
经典 UI:
icon.png
-此组件的图标。thumbnail.png
-如果此组件列在段落系统中,则显示的图像。触屏UI
重要子节点:
cq:editConfig (cq:EditConfig)
-定义组件的编辑属性,并使组件显示在组件浏览器或Sidekick中。
注意:如果组件具有对话框,则它将自动显示在组件浏览器或Sidekick中,即使cq:editConfig不存在也是如此。
cq:childEditConfig (cq:EditConfig)
-控制未定义其自身的子组件的作者UI方面 cq:editConfig
。
触屏优化 UI:
cq:dialog
( nt:unstructured
)-此组件的对话框。定义允许用户配置组件和/或编辑内容的界面。cq:design_dialog
( nt:unstructured
)-此组件的设计编辑经典 UI:
dialog
( cq:Dialog
)-此组件的对话框。定义允许用户配置组件和/或编辑内容的界面。design_dialog
( cq:Dialog
)-此组件的设计编辑。当开发人员创建组件时,组件的图标或缩写是通过组件的JCR属性定义的。 这些属性将按以下顺序计算,并使用找到的第一个有效属性。
cq:icon
-指向Coral UI库中标准图标的字符串属 性, 要在组件浏览器中显示
abbreviation
-用于自定义组件浏览器中组件名称的缩写的字符串属性
缩写应限制为两个字符。
如果提供空字符串,将根据jcr:title
属性的前两个字符生成缩写。
仅当组件具有abbreviation_commentI18n
属性时,缩写才被翻译,然后该属性用作翻译提示。
cq:icon.png
或- cq:icon.svg
此组件的图标,该图标显示在组件浏览器中
20 x 20像素是标准组件图标的大小。
建议颜色为rgb(112, 112, 112)> #707070
标准组件图标的背景是透明的。
仅支持.png
和.svg
文件。
如果通过Eclipse插件从文件系统导入,则文件名需要转义为_cq_icon.png
或_cq_icon.svg
。
.png
如果两者都 .svg
存在,就会先行
如果组件上没有找到上述属性(cq:icon
、abbreviation
、cq:icon.png
或cq:icon.svg
):
sling:resourceSuperType
属性相同的属性。jcr:title
属性的首字母构建缩写。要取消超级组件中图标的继承,在组件上设置空abbreviation
属性将恢复为默认行为。
组件控制台显示如何定义特定组件的图标。
<?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"/>
</svg>
定义组件所需的许多节点/属性对于两个UI都是通用的,差异保持独立,这样您的组件就可以在两个环境中工作。
组件是cq:Component
类型的节点,具有以下属性和子节点:
名称 |
类型 |
描述 |
. |
cq:Component |
当前组件. 组件的节点类型为cq:Component 。 |
componentGroup |
String |
在组件浏览器(触屏优化UI)或Sidekick(经典UI)中选择组件的组。 值用于 .hidden 无法从UI(如实际段落系统)中进行选择的组件。 |
cq:isContainer |
Boolean |
指示组件是否为容器组件,因此可以包含其他组件,如段落系统。 |
cq:dialog |
nt:unstructured |
触屏优化UI的编辑对话框定义。 |
dialog |
cq:Dialog |
经典UI的编辑对话框的定义。 |
cq:design_dialog |
nt:unstructured |
触屏优化UI的设计对话框的定义。 |
design_dialog |
cq:Dialog |
经典UI的设计对话框的定义。 |
dialogPath |
String |
当组件没有对话框节点时用于覆盖大小写的对话框路径。 |
cq:cellName |
String |
如果设置,则此属性将作为单元格ID。 有关详细信息,请参阅知识库文章如何构建设计单元格ID。 |
cq:childEditConfig |
cq:EditConfig |
当组件是容器时(例如段落系统),这将驱动子节点的编辑配置。 |
cq:editConfig |
cq:EditConfig |
编辑组件的配置。 |
cq:htmlTag |
nt:unstructured |
返回添加到周围html标签的其他标签属性。 支持向自动生成的div添加属性。 |
cq:noDecoration |
Boolean |
如果为true,则组件不会使用自动生成的div和css类呈现。 |
cq:template |
nt:unstructured |
如果找到此节点,则当从组件浏览器或Sidekick添加组件时,该节点将用作内容模板。 |
cq:templatePath |
String |
当从组件浏览器或Sidekick添加组件时,要用作内容模板的节点的路径。 这必须是绝对路径,而不是相对于组件节点。 除非您希望重新使用其他位置已有的内容,否则这不是必需的, cq:template 而且是足够的(请参阅下文)。 |
jcr:created |
Date |
组件的创建日期。 |
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组件(任一版本),我们可以看到以下元素:
HTL ( /libs/wcm/foundation/components/text
)
JSP(/libs/foundation/components/text
)
特定权益的物业包括:
jcr:title
-组件的标题;这可用于标识组件,例如,它显示在组件浏览器或Sidekick的组件列表中
jcr:description
-组件说明;可用作sidekick中组件列表中的鼠标悬停提示
sling:resourceSuperType
:这表示在扩展组件(通过覆盖定义)时继承的路径
特定感兴趣的子节点包括:
cq:editConfig
( cq:EditConfig
-控制视觉方面;例如,它可以定义条形或构件的外观,也可以添加自定义控件
cq:childEditConfig
( cq:EditConfig
)-它控制没有自己定义的子组件的可视方面
触屏优化 UI:
cq:dialog
( nt:unstructured
)-定义用于编辑此组件内容的对话框cq:design_dialog
( nt:unstructured
)-指定此组件的设计编辑选项经典 UI:
dialog
( cq:Dialog
)-定义用于编辑此组件内容的对话框(特定于经典UI)design_dialog
( cq:Dialog
)-指定此组件的设计编辑选项icon.png
-图形文件,用作Sidekick中组件的图标thumbnail.png
-从Sidekick拖动组件时用作组件缩略图的图形文件对话框是组件的关键元素,因为它们为作者提供了一个界面,用于配置该组件并为其提供输入。
根据组件的复杂性,对话框可能需要一个或多个选项卡——以保持对话框简短和对输入字段进行排序。
对话框定义特定于UI:
触屏优化 UI
cq:dialog
( nt:unstructured
节点:
定义用于编辑此组件内容的对话框
特定于触屏优化UI
是使用Granite UI组件定义的
具有属性sling:resourceType
,作为标准Sling内容结构
可以具有属性helpPath
来定义在帮助图标(? 图标)。
helpPath
,则显示默认URL(文档概述页)。在对话框中,定义了单个字段:
经典 UI
dialog
(节 cq:Dialog
点)
定义用于编辑此组件内容的对话框
特定于经典UI
是使用ExtJS构件定义的
具有xtype
属性,该属性引用ExtJS
可以具有属性helpPath
来定义选择帮助按钮时访问的上下文相关帮助资源(绝对或相对路径)。
helpPath
,则显示默认URL(文档概述页)。在对话框中,定义了单个字段:
在经典对话框中:
cq:Dialog
对话框,该对话框将提供单个选项卡——如文本组件中所示,或者,如果您需要多个选项卡,如textimage组件所示,该对话框可定义为cq:TabPanel
。cq:WidgetCollection
(items
)用于为输入字段(cq:Widget
)或其他选项卡(cq:Widget
)提供基础。 可以扩展此层次结构。设计对话框与用于编辑和配置内容的对话框非常相似,但它们为作者提供了界面,用于配置和提供该组件的设计详细信息。
设计对话框在设计模式中可用,但并非所有组件(如标题和图像)都 需要 这些对话框,而文本则 不需要。
段落系统(例如parsys)的设计对话框是一个特殊情况,因为它允许用户在页面上选择特定的其他组件(从组件浏览器或Sidekick)。
定义组件后,必须允许其使用。 要使组件可用于段落系统,您可以执行以下任一操作:
打开页面的设计模式并启用所需的组件。
将所需的组件添加到模板定义的components
属性中:
/etc/designs/<*yourProject*>/jcr:content/<*yourTemplate*>/par
例如,请参阅:
/etc/designs/geometrixx/jcr:content/contentpage/par
如果我们在页面上创建并配置Title组件的实例:<content-path>/Prototype.html
触屏优化 UI
经典 UI
然后,我们可以看到在存储库中创建的内容的结构:
特别是,如果您查看标题的实际文本:
定义(对于两个UI)的属性为name
= ./jcr:title
/libs/foundation/components/title/cq:dialog/content/items/column/items/title
/libs/foundation/components/title/dialog/items/title
在内容中,它将生成包含作者内容的属性jcr:title
。
定义的属性取决于各个定义。 虽然比起上面更复杂,但也遵循相同的基本原则。
AEM中的组件受3个不同层次的约束:
资源类型层次结构
它用于使用属性sling:resourceSuperType
扩展组件。 这允许组件继承。 例如,文本组件将继承标准组件的各种属性。
容器层次结构
它用于将配置设置填充到子组件,最常用于parsys方案。
例如,可在父组件上定义编辑栏按钮、控制集布局(编辑栏、滚动)、对话框布局(内联、浮动)的配置设置并传播到子组件。
将传播cq:editConfig
和cq:childEditConfig
中的配置设置(与编辑功能相关)。
包括层次结构
在运行时,这由包括序列强加。
此层次结构由设计人员使用,而设计人员又作为渲染的各个设计方面的基础;包括布局信息、css信息、parsys中的可用组件等。
本节介绍如何配置组件的编辑行为。 这包括可用于组件的操作、就地编辑器的特性以及与组件上的事件相关的监听器等属性。
该配置对于触屏优化UI和经典UI都是通用的,尽管有某些特定的差异。
通过在组件节点(类型cq:Component
)下添加cq:editConfig
类型cq:EditConfig
的节点,并添加特定属性和子节点,可配置组件的编辑行为。 以下属性和子节点可用:
cq:actions
( String array
):定义可对组件执行的操作。
cq:layout
( String
)::定义如何在经典UI中编辑组件。
cq:dialogMode
( String
):定义如何在经典UI中打开组件对话框
cq:emptyText
( String
):定义当不存在可视内容时显示的文本。
cq:inherit
( Boolean
):定义是否从它继承的组件继承缺失值。
dialogLayout
(字符串):定义对话框的打开方式。
cq:dropTargets
(节点类 nt:unstructured
型):定义拖放列表目标,可接受内容查找器资产的删除
cq:actionConfigs
(节点类 nt:unstructured
型):定义附加到cq:actions列表的新操作列表。
cq:formParameters
(节点类 nt:unstructured
型):定义添加到对话框表单的其他参数。
cq:inplaceEditing
(节点类 cq:InplaceEditingConfig
型):为组件定义就地编辑配置。
cq:listeners
(节点类 cq:EditListenersConfig
型):定义在组件上执行操作之前或之后发生的情况。
在此页中,节点(属性和子节点)表示为XML,如以下示例所示。
<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:dropTargets
,该节点类型为cq:DropTargetConfig
;您可以在查询中使用CRXDE Lite工具,并使用以下XPath查询字符串进行搜索:
/element(cq:dropTargets, cq:DropTargetConfig)
组件必须始终呈现作者可见的某些HTML,即使组件没有内容也是如此。 否则,它可能会从编辑器的界面中以可视方式消失,从而使其在技术上存在,但在页面和编辑器中不可见。 在这种情况下,作者将无法选择空组件并与其交互。
因此,当页面在页面编辑器中呈现时(当WCM模式为edit
或preview
时),组件应呈现占位符,只要它们不呈现任何可见输出。
占位符的典型HTML标记如下:
<div class="cq-placeholder" data-emptytext="Component Name"></div>
呈现上述占位符HTML的典型HTL脚本如下:
<div class="cq-placeholder" data-emptytext="${component.properties.jcr:title}"
data-sly-test="${(wcmmode.edit || wcmmode.preview) && isEmpty}"></div>
在上一个示例中,isEmpty
是一个变量,仅当组件没有内容且作者不可见时,它才为true。
为避免重复,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
是仅当内容包含内容且可见时才为true的变量。
在核心组件中可以看到此模板的示例用法,如标题组件。
cq:actions
属性(String array
)定义可对组件执行的一个或多个操作。 以下值可用于配置:
属性值 | 描述 |
text:<some text> |
显示静态文本值<some text> 仅在经典UI中可见。 触屏优化UI不在上下文菜单中显示操作,因此不适用。 |
- | 添加间隔符。 仅在经典UI中可见。触屏优化UI不在上下文菜单中显示操作,因此不适用。 |
edit |
添加用于编辑组件的按钮。 |
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
属性(String
)定义如何在经典UI中编辑组件。 以下值可用:
属性值 | 描述 |
rollover |
默认值。 组件版本可通过单击和/或上下文菜单“鼠标悬停”访问。 要进行高级使用,请注意相应的客户端对象是: CQ.wcm.EditRollover . |
editbar |
组件版本可通过工具栏访问。 要进行高级使用,请注意相应的客户端对象是: CQ.wcm.EditBar . |
auto |
选择由客户端代码进行。 |
翻转和编辑栏的概念在触屏优化UI中不适用。
以下配置将编辑按钮添加到组件编辑栏:
<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
属性(String
)定义如何在经典UI中打开组件对话框。 以下值可用:
属性值 | 描述 |
floating |
对话框是浮动的。 |
inline |
(默认值). 对话框锚定在组件上。 |
auto |
如果组件宽度小于客户端CQ.themes.wcm.EditBase.INLINE_MINIMUM_WIDTH 值,则对话框是浮动的,否则它是内嵌的。 |
在触屏优化UI中,对话框始终以桌面模式浮动,并在移动设备中自动以全屏方式打开。
以下配置定义了一个带有编辑按钮的编辑栏和一个浮动对话框:
<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
属性(String
)定义在不存在可视内容时显示的文本。 默认为:Drag components or assets here
。
cq:inherit
属性(boolean
)定义是否从继承的组件继承了缺失的值。 它默认为false
。
默认情况下,dialogLayout
属性定义如何打开对话框。
fullscreen
将全屏打开对话框。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">
<file
jcr:primaryType="cq:DropTargetConfig"
accept="[.*]"
groups="[media]"
propertyName="./fileReference"/>
</cq:dropTargets>
cq:actionConfigs
节点(节点类型nt:unstructured
)定义新操作列表,这些操作附加到由cq:actions
属性定义的列表。 cq:actionConfigs
的每个子节点通过定义构件来定义新操作。
以下示例配置定义一个新按钮(带有经典UI的分隔符):
由xtype tbseparator
定义的分隔符;
名为管理注释的按钮,它运行处理函数CQ_collab_forum_openCollabAdmin()
。
<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>
请参阅将新操作添加到组件工具栏作为触屏优化UI的示例。
cq:formParameters
节点(节点类型nt:unstructured
)定义添加到对话框表单的其他参数。 每个属性都映射到一个表单参数。
以下配置将名为name
的参数(用值photos/primary
设置)添加到对话框表单中:
<cq:formParameters
jcr:primaryType="nt:unstructured"
name="photos/primary"/>
cq:inplaceEditing
节点(节点类型cq:InplaceEditingConfig
)为组件定义就地编辑配置。 它可以具有以下属性:
属性名称 | 属性值 |
active |
(boolean )True可启用组件的就地编辑。 |
configPath |
(String )编辑器配置的路径。 配置节点可以指定配置。 |
editorType |
(
|
以下配置启用组件的就地编辑,并将plaintext
定义为编辑器类型:
<cq:inplaceEditing
jcr:primaryType="cq:InplaceEditingConfig"
active="{Boolean}true"
editorType="plaintext"/>
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 |
该处理函数在组件插入另一个组件后触发(仅容器)。 |
REFRESH_INSERTED
和REFRESH_SELFMOVED
处理函数仅在经典UI中可用。
监听器的默认值仅在经典UI中设置。
对于嵌套组件,对于定义为cq:listeners
节点上的属性的操作有一些限制:
对于嵌套组件,以下属性的值必须为REFRESH_PAGE
:
aftermove
aftercopy
事件处理函数可以通过自定义实现实现。 例如(其中project.customerAction
是静态方法):
afteredit = "project.customerAction"
以下示例与REFRESH_INSERTED
配置等效:
afterinsert="function(path, definition) { this.refreshCreated(path, definition); }"
对于经典UI,要查看哪些参数可用于处理函数,请参阅 CQ.wcm.EditBar
和 CQ.wcm.EditRollover
构件文档的before<action>
和after<action>
事件部分。
使用以下配置,在删除、编辑、插入或移动组件后刷新页面:
<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
afterdelete="REFRESH_PAGE"
afteredit="REFRESH_PAGE"
afterinsert="REFRESH_PAGE"
afterMove="REFRESH_PAGE"/>