经典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
版本CQ 5.3及更早版本使用的路径/libs/wcm/global.jsp
现已过时。
以下列表默认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
的节点,并添加特定属性和子节点,配置组件的<a0/>编辑行为。
有关详细信息,请参阅使用和扩展ExtJS构件。
有关详细信息,请参阅使用xtypes。
本节介绍如何创建您自己的组件并将其添加到段落系统。
快速入门的方法是复制现有组件,然后进行所需的更改。
有关如何开发组件的示例在扩展文本和图像组件——示例中有详细说明。
要基于现有组件为AEM开发新组件,您可以复制该组件,为新组件创建javascript文件并将其存储在AEM可访问的位置(另请参阅自定义组件和其他元素):
使用CRXDE Lite,在以下位置创建新组件文件夹:
/ apps/<myProject>/components/<myComponent>
像在libs中一样重新创建节点结构,然后复制现有组件(如文本组件)的定义。 例如,要自定义文本组件副本,请执行以下操作:
/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替换。 有关如何下载和安装文档,请参见GeometrixxWe.Retail Reference Implementation。
要创建新组件,我们将使用标准文本时间组件作为基础并对其进行修改。 我们将新组件存储在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.
修改组件的对话框以包含新选项。 新组件会继承与原始对话框中相同的对话框部分。 我们添加的唯一功能是扩展高级选项卡,添加图像位置下拉列表,其选项为左和右:
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
的路径属性。对于tab3:
保留属性和子节点而不进行更改
将新字段定义添加到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
单击保存全部。 组件已准备好进行测试。
以Geometrixx(如英语/公司)打开页面。
切换到设计模式并激活“图像”(Extended)。
切换回编辑模式,并将其添加到段落系统。 在下一张图片上,您可以看到原始图像组件与刚刚创建的图像组件之间的差异。
原始图像组件:
您的新图像组件:
该组件现已准备就绪。