经典UI使用ExtJS创建小组件,以提供组件的外观。 由于这些小组件的性质,组件与经典UI和触屏优化UI的交互方式存在一些差异。
组件开发的许多方面在经典UI和触屏UI中都很常见,因此您必须先阅读AEM组件 — 基础知识,然后再使用此页面,该页面介绍经典UI的特定内容。
AEM组件 — 基础知识页面中介绍了组件的基本结构,该页面同时应用了触屏界面UI和经典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
中引入的属性对象:
属性对象是ValueMap的一个实例(请参阅Sling API),并包含当前资源的所有属性。
示例:String pageTitle = properties.get("jcr:title", "no title");
用于页面组件的渲染脚本。
示例:String paragraphTitle = properties.get("jcr:title", "no title");
用于标准段落组件的渲染脚本。
通过global.jsp
中引入的currentPage
对象:
currentPage
对象是页面的一个实例(请参阅AEM API)。 页面类提供了一些访问内容的方法。
示例: String pageTitle = currentPage.getTitle();
通过在global.jsp
中引入的currentNode
对象:
currentNode
对象是节点的实例(请参阅JCR API)。 可通过getProperty()
方法访问节点的属性。
示例: String pageTitle = currentNode.getProperty("jcr:title");
通过CQ和Sling标记库,您可以访问特定函数,以在模板和组件的JSP脚本中使用。
有关更多信息,请参阅文档标记库。
现代网站严重依赖由复杂的JavaScript和CSS代码驱动的客户端处理。 组织和优化此代码的服务可能是一个复杂的问题。
为了帮助解决此问题,AEM提供了客户端库文件夹,这允许您将客户端代码存储在存储库中,将其组织到各个类别中,并定义何时以及如何将每个类别的代码提供给客户端。 然后,客户端库系统会负责在最终网页中生成正确的链接,以加载正确的代码。
有关详细信息,请参阅文档使用客户端HTML库。
您的组件需要一个供作者使用的对话框才能添加和配置内容。
有关更多详细信息,请参阅AEM组件 — 基础知识。
您可以配置组件的编辑行为。 这包括一些属性,例如组件可用的操作、就地编辑器的特性以及与组件上的事件相关的侦听器。 配置对于触屏UI和经典UI都是通用的,尽管存在某些特定差异。
组件的编辑行为配置为,具体方法是:在组件节点(cq:Component
类型)下添加cq:editConfig
类型的cq:EditConfig
节点,并添加特定属性和子节点。
有关更多详细信息,请参阅使用和扩展ExtJS小组件。
有关更多详细信息,请参阅使用xtypes 。
本节将介绍如何创建您自己的组件并将其添加到段落系统中。
快速入门的方法是复制现有组件,然后进行所需的更改。
扩展文本和图像组件 — 示例中详细描述了如何开发组件的示例。
要基于现有组件为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 — 在URL中设置?debugClientLibs=true
。
开发组件后,可将其添加到段落系统,使作者能够在编辑页面时选择和使用组件。
在使用段落系统的创作环境中访问页面,例如<contentPath>/Test.html
。
通过以下任一方式切换到设计模式:
将?wcmmode=design
添加到URL的末尾并再次访问,例如:
<contextPath>/ Test.html?wcmmode=design
在Sidekick中单击设计
您现在处于设计模式,可以编辑段落系统。
单击编辑。
将显示属于段落系统的组件列表。 此外,还将列出新组件。
可以激活(或停用)这些组件,以确定在编辑页面时向作者提供的组件。
激活组件,然后返回到正常的编辑模式,以确认该组件可供使用。
本节提供了有关如何使用可配置的图像放置功能来扩展广泛使用的文本和图像标准组件的示例。
文本和图像组件的扩展允许编辑器使用组件的所有现有功能以及一个额外的选项来指定图像的位置:
扩展此组件后,可通过组件的对话框配置图像放置。
本练习中介绍了以下技术:
此示例针对经典UI。
此示例基于Geometrixx示例内容,该内容不再随AEM一起提供,而已被We.Retail替换。 有关如何下载和安装Geometrixx,请参阅文档We.Retail参考实施。
要创建新组件,我们将使用标准文本时间组件作为基础并对其进行修改。 我们将新组件存储在GeometrixxAEM WCM示例应用程序中。
将标准文本时间戳组件从/libs/foundation/components/textimage
复制到Geometrixx组件文件夹/apps/geometrixx/components
中,并使用文本时间戳作为目标节点名称。 (通过导航到组件,右键单击并选择复制并浏览到目标目录,可复制组件。)
要简化此示例,请导航到您复制的组件,并删除新文本时间节点的所有子节点,以下子节点除外:
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
属性(属性:textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType
到geometrixx/components/textimage.
这样,当将图像拖放到页面上的组件中时,扩展文本时间组件的sling:resourceType
属性将设置为:geometrixx/components/textimage.
修改组件的对话框以包含新选项。 新组件会继承与原始组件相同的对话框部分。 我们添加的唯一内容是扩展Advanced选项卡,添加Image Position下拉列表,其中包含选项Left和Right:
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
的路径属性。对于选项卡3:
保留属性和子节点,不进行更改
向tab3/items
类型cq:Widget
的节点位置添加新字段定义
为新的tab3/items/position
节点设置以下属性(类型为字符串):
name
: ./imagePosition
xtype
: selection
fieldLabel
: Image Position
type
: select
添加类型为cq:WidgetCollection
的子节点position/options
以表示图像放置的两种选项,并在其下创建两个节点,即类型为nt:unstructured
的o1和o2。
对于节点position/options/o1
,设置以下属性:text
到Left
和value
到left.
对于节点position/options/o2
,设置以下属性:text
到Right
和value
到right
。
删除选项卡4。
图像位置将作为表示textimage
段落的节点的imagePosition
属性保留在内容中。 完成这些步骤后,组件对话框如下所示:
扩展组件脚本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
单击Save All。 组件已准备好进行测试。
以Geometrixx(如英语/公司)打开页面。
切换到设计模式并激活“图像(扩展)”。
切换回编辑模式,并将其添加到段落系统。 在下一张图片中,您可以看到原始图像组件与刚刚创建的图像组件之间的差异。
原始图像组件:
您的新图像组件:
组件现已准备就绪,可供使用。