经典UI使用ExtJS创建提供组件外观的小部件。 由于这些构件的性质,组件与经典UI的交互方式与 触屏优化UI.
组件开发的许多方面对于经典UI和触屏UI都是通用的,因此 您必须阅读 AEM组件 — 基础知识 早于 使用此页面,该页面介绍经典UI的详细信息。
页面上介绍了组件的基本结构 AEM组件 — 基础知识,同时应用触屏界面和经典UI。 即使您不需要在新组件中使用触屏UI的设置,也可以在继承现有组件时了解这些设置。
JSP脚本或Servlet可用于呈现组件。 根据Sling的请求处理规则,默认脚本的名称为:
<*componentname*>.jsp
JSP脚本文件 global.jsp
用于提供对用于呈现组件的任何JSP脚本文件的快速访问特定对象(即访问内容)的权限。
因此 global.jsp
应包含在每个组件渲染JSP脚本中,其中在中提供的一个或多个对象 global.jsp
使用。
默认的位置 global.jsp
为:
/libs/foundation/global.jsp
路径 /libs/wcm/global.jsp
由CQ 5.3版本及更早版本使用的,现已过时。
下面列出了默认设置中提供的最重要的对象 global.jsp
:
摘要:
<cq:defineObjects />
slingRequest
— 包装的请求对象( SlingHttpServletRequest
)。slingResponse
— 包装的响应对象( SlingHttpServletResponse
)。resource
- Sling资源对象( slingRequest.getResource();
)。resourceResolver
- Sling资源解析程序对象( slingRequest.getResoucreResolver();
)。currentNode
— 请求的已解析JCR节点。log
— 默认记录器()。sling
- Sling脚本助手。properties
— 已寻址资源的属性( resource.adaptTo(ValueMap.class);
)。pageProperties
— 已寻址资源的页面的属性。pageManager
— 用于访问AEM内容页面的页面管理器( resourceResolver.adaptTo(PageManager.class);
)。component
— 当前AEM组件的组件对象。designer
— 用于检索设计信息的设计器对象( resourceResolver.adaptTo(Designer.class);
)。currentDesign
— 已寻址资源的设计。currentStyle
— 已寻址资源的样式。访问AEM WCM中的内容有三种方法:
通过中引入的属性对象 global.jsp
:
properties对象是ValueMap的实例(请参阅 Sling API)并包含当前资源的所有属性。
示例: String pageTitle = properties.get("jcr:title", "no title");
在页面组件的渲染脚本中使用。
示例: String paragraphTitle = properties.get("jcr:title", "no title");
在标准段落组件的渲染脚本中使用。
通过 currentPage
中引入的对象 global.jsp
:
此 currentPage
对象是页面的实例(请参阅 AEM API)。 page类提供了一些访问内容的方法。
示例: String pageTitle = currentPage.getTitle();
Via currentNode
中引入的对象 global.jsp
:
此 currentNode
对象是节点的实例(请参阅 JCR API)。 可以通过访问节点的属性 getProperty()
方法。
示例: String pageTitle = currentNode.getProperty("jcr:title");
利用CQ和Sling标记库,可访问在模板和组件的JSP脚本中使用的特定函数。
有关详细信息,请参阅文档 标记库.
现代网站在很大程度上依赖于由复杂的JavaScript和CSS代码驱动的客户端处理。 组织和优化此代码的服务可能是一个复杂的问题。
为了帮助解决此问题,AEM提供了 客户端库文件夹,可将客户端代码存储在存储库中,将其整理到不同类别中,并定义何时以及如何向客户端提供每种类别的代码。 然后,客户端库系统负责在最终网页中产生正确的链接,以加载正确的代码。
查看文档 使用客户端HTML库 以了解更多信息。
您的组件需要一个对话框供作者添加和配置内容。
请参阅 AEM组件 — 基础知识 以了解更多详细信息。
您可以配置组件的编辑行为。 这包括各种属性,例如组件可用的操作、就地编辑器的特征以及与组件上的事件相关的侦听器。 尽管存在某些特定差异,但配置对于触屏优化UI和经典UI都是通用的。
此 组件的编辑行为已配置 通过添加 cq:editConfig
类型节点 cq:EditConfig
在组件节点下(类型为 cq:Component
),并添加特定属性和子节点。
请参阅 使用和扩展ExtJS小组件 以了解更多详细信息。
请参阅 使用xtype 以了解更多详细信息。
本节介绍如何创建自己的组件并将它们添加到段落系统中。
快速入门方法是复制现有组件,然后进行所需的更改。
中详细描述了如何开发组件的示例 扩展文本和图像组件 — 示例。
要基于现有组件为AEM开发新组件,可以复制组件,为新组件创建JavaScript文件,并将其存储在AEM可访问的位置(另请参阅 自定义组件和其他元素):
使用CRXDE Lite在下列位置创建一个组件文件夹:
/ apps/<myProject>/components/<myComponent>
按照库中的方式重新创建节点结构,然后复制现有组件(如文本组件)的定义。 例如,要自定义文本组件复制,请执行以下操作:
/libs/foundation/components/text
/apps/myProject/components/text
修改 jcr:title
以反映其新名称。
打开新的组件文件夹,然后进行所需的更改。 另外,删除文件夹中任何无关的信息。
您可以进行如下更改:
在对话框中添加字段
cq:dialog
— 触屏UI的对话框dialog
— 经典UI的对话框更换 .jsp
文件(将其命名为新组件的后缀)
或者完全重新处理整个组件(如果需要)
例如,如果您复制了标准文本组件,则可以在对话框中添加一个额外的字段,然后更新 .jsp
以处理在那里输入的内容。
为经典UI定义的对话框在触屏UI中运行。
为触控式UI定义的对话框不会在经典UI中运行。
根据您的实例和创作环境,您可能需要为组件定义这两种类型的对话框。
应存在以下节点之一并已正确初始化,才能显示新组件:
cq:dialog
— 触屏UI的对话框dialog
— 经典UI的对话框cq:editConfig
— 组件在编辑环境中的行为(例如,拖放)design_dialog
— 设计模式对话框(仅限经典UI)通过以下任一方式激活段落系统中的新组件:
<path-to-component>
(例如, /apps/geometrixx/components/myComponent
)到节点的属性组件中 /etc/designs/geometrixx/jcr:content/contentpage/par
在AEM WCM中,打开网站中的页面,并插入您刚刚创建的类型的段落,以确保组件正常工作。
要查看页面加载的时间统计信息,可以使用Ctrl-Shift-U — 和 ?debugClientLibs=true
在URL中设置。
开发组件后,您可以将其添加到段落系统,这样作者就可以在编辑页面时选择并使用组件。
访问创作环境中使用段落系统的页面,例如 <contentPath>/Test.html
.
通过以下任一方式切换到设计模式:
添加 ?wcmmode=design
到该URL的末尾,然后再次访问,例如:
<contextPath>/ Test.html?wcmmode=design
在Sidekick中单击设计
您现在处于设计模式,可以编辑段落系统。
单击编辑。
此时将显示属于段落系统的组件列表。 您的新组件也会列出。
可以激活(或停用)组件以确定在编辑页面时将哪些组件提供给作者。
激活组件,然后返回正常编辑模式以确认该组件可用。
本节提供了一个示例,说明如何使用可配置的图像放置功能扩展广泛使用的文本和图像标准组件。
文本和图像组件的扩展允许编辑器使用组件的所有现有功能,并且还有一个额外的选项来指定图像的放置:
扩展此元件后,可通过元件的对话框配置图像放置。
本练习将介绍以下技术:
此示例针对经典UI。
此示例基于Geometrixx示例内容,该内容不再随AEM一起提供,已被We.Retail取代。 查看文档 We.Retail参考实施 了解如何下载和安装Geometrixx。
要创建组件,可使用标准文本页面组件作为基础并对其进行修改。 将新组件存储在GeometrixxAEM WCM示例应用程序中。
从以下位置复制标准文本页面组件 /libs/foundation/components/textimage
到Geometrixx组件文件夹中, /apps/geometrixx/components
,使用textimage作为目标节点名称。 (导航到组件,右键单击并选择复制,然后浏览到目标目录来复制组件。)
要使此示例保持简单,请导航到您复制的组件,并删除新文本时间节点的所有子节点,以下子节点除外:
textimage/dialog
textimage/textimage.jsp
textimage/cq:editConfig
对话框定义取决于UI:
textimage/cq:dialog
textimage/dialog
编辑组件元数据:
组件名称
jcr:description
到 Text Image Component (Extended)
jcr:title
到 Text Image (Extended)
组,其中组件在Sidekick中列出(保持原样)
componentGroup
设置为 General
新组件的父组件(标准文本时间组件)
sling:resourceSuperType
到 foundation/components/textimage
执行此步骤后,组件节点将如下所示:
更改 sling:resourceType
图像的edit configuration节点的属性(属性: 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):
/libs/foundation/components/textimage/dialog/items/tab1.infinity.json
和 /libs/foundation/components/textimage/dialog/items/tab2.infinity.json
、ID名称和ID名称等。对于选项卡3:
不更改属性和子节点
添加字段定义到 tab3/items
,类型为的节点位置 cq:Widget
为新的设置以下属性(类型为String) tab3/items/position
节点:
name
:./imagePosition
xtype
:selection
fieldLabel
:Image Position
type
:select
添加子节点 position/options
类型 cq:WidgetCollection
表示两个图像放置选项,并在其下创建两个类型为的节点o1和o2 nt:unstructured
.
用于节点 position/options/o1
设置属性: text
到 Left
和 value
到 left.
用于节点 position/options/o2
设置属性: text
到 Right
和 value
到 right
.
删除Tab4。
图像位置作为保留在内容中 imagePosition
节点的属性,表示 textimage
段落。 执行这些步骤后,组件对话框将如下所示:
扩展组件脚本, 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"><%
将组件保存到存储库。 该组件已准备好进行测试。
开发组件后,您可以将其添加到段落系统,这样作者就可以在编辑页面时选择并使用组件。 这些步骤允许您测试组件。
组件将其内容存储在公司页面上的段落中。
要禁用此功能,可使用标准图像组件作为基础并对其进行修改。 将新组件存储在Geometrixx示例应用程序中。
从复制标准图像组件 /libs/foundation/components/image
到Geometrixx组件文件夹中, /apps/geometrixx/components
,使用图像作为目标节点名称。
编辑组件元数据:
Image (Extended)
导航到 /apps/geometrixx/components/image/dialog/items/image
。
添加属性:
allowUpload
String
false
单击全部保存。该组件已准备好进行测试。
以Geometrixx(如英语/公司)打开页面。
切换到设计模式并激活图像(扩展)。
切换回编辑模式并将其添加到段落系统。 在下一张图片中,您可以看到原始图像组件与您创建的组件之间的差异。
原始图像组件:
您的新图像组件:
该组件现已准备就绪,可供使用。