本节介绍如何开发批量编辑器工具以及如何扩展基于批量编辑器的产品列表组件。
使用批量编辑器时,可以向URL添加多个查询参数,以调用具有特定配置的批量编辑器。 如果您希望批量编辑器始终与某个配置(例如,在产品列表组件中)一起使用,则需要修改bulkeditor.jsp(位于/libs/wcm/core/components/bulkeditor中)或创建具有特定配置的组件。 使用查询参数进行的更改不是永久的。
例如,如果您在浏览器的URL中键入以下内容:
https://<servername><port_number>/etc/importers/bulkeditor.html?rootPath=/content/geometrixx/en&queryParams=geometrixx&initialSearch=true&hrp=true
显示的批量编辑器不带有根路径字段,因为hrp=true将隐藏该字段。 当参数hrp=false时,将显示字段(默认值)。
以下是批量编辑器列表参数的查询:
每个参数都可以有一个长名和一个短名。 例如,搜索根路径的长名称为rootPath
,短名称为rp
。 如果未定义长名称,则从请求中读取短名称。
参数 (长名/短名) |
类型 |
描述 |
rootPath / rp |
字符串 | 搜索根路径 |
queryParams / qp |
字符串 | 搜索查询 |
contentMode / cm |
布尔型 | 如果为true,则启用内容模式 |
colsValue / cv |
String[] | 搜索的属性(colsSelection中的选定值显示为复选框) |
extraCols / ec |
String[] | 额外搜索的属性(显示在以逗号分隔的文本字段中) |
initialSearch / is |
布尔型 | 如果为true,则在页面加载 时执行查询 |
colsSelection / cs |
String[] | 搜索属性选择(以复选框形式显示) |
showGridOnly / sgo |
布尔型 | 当为true时,仅显示grid,而不显示搜索面板 |
searchPanelCollased / spc | 布尔型 | 如果为true,则加载时搜索面板将折叠 |
hideRootPath / hrp | 布尔型 | 当为true时,隐藏根路径字段 |
hideQueryParams / hqp | 布尔型 | 如果为true,则隐藏查询字段 |
hideContentMode / hcm | 布尔型 | 当为true时,隐藏内容模式字段 |
hideColsSelection / hcs | 布尔型 | 当为true时,隐藏列选择字段 |
hideExtraCols / hec | 布尔型 | 当为true时,隐藏额外的列字段 |
hideSearchButton | 布尔型 | 当为true时,隐藏搜索按钮 |
hideSaveButton / hsavep | 布尔型 | 当为true时,隐藏“保存”按钮 |
hideExportButton / hexpb | 布尔型 | 当为true时,隐藏“导出”按钮 |
hideImportButton/hib | 布尔型 | 当为true时,隐藏导入按钮 |
hideResultNumber / hrn | 布尔型 | 当为true时,隐藏网格搜索结果编号文本 |
hideInsertButton / hinsertb | 布尔型 | 当为true时,隐藏网格插入按钮 |
hideDeleteButton / hdelb | 布尔型 | 当为true时,隐藏网格删除按钮 |
hidePathCol / hpc | 布尔型 | 当为true时,隐藏网格“path”列 |
本节概述如何使用批量编辑器,并基于批量编辑器描述现有Geometrixx组件:产品列表组件。
产品列表组件允许用户显示和编辑数据表。 例如,您可以使用产品列表组件来表示目录中的产品。 该信息显示在标准HTML表中,任何编辑操作都在编辑对话框中执行,该对话框包含一个BulkEditor构件。 (此批量编辑器与/etc/importers/bulkeditor.html或通过“工具”菜单访问的编辑器完全相同。) 产品列表组件已针对特定的有限批量编辑器功能进行配置。 可以配置批量编辑器(或从批量编辑器派生的组件)的每个部分。
使用批量编辑器,您可以添加、修改、删除、过滤和导出行、保存修改和导入一组行。 每行都作为节点存储在产品列表组件实例本身下。 每个单元格都是每个节点的属性。 这是一个设计选择,可以轻松更改,例如,您可以将节点存储在存储库中的其他位置。 查询servlet的作用是返回要显示的列表节点;搜索路径被定义为产品列表实例。
产品列表组件的源代码位于/apps/geometrixx/components/productlist存储库中,它由几个部分组成,如所有AEM组件:
以下是对话框子节点的XML表示形式:
<editor
jcr:primaryType="cq:Widget"
colsSelection="[ProductId,ProductName,Color,CatalogCode,SellingSku]"
colsValue="[ProductId,ProductName,Color,CatalogCode,SellingSku]"
contentMode="false"
exportURL="/etc/importers/bulkeditor/export.tsv?lang=zh-Hans"
extraCols="Selection"
hideColsSelection="false"
hideContentMode="true"
hideDeleteButton="false"
hideExportButton="false"
hideExtraCols="true"
hideImportButton="false"
hideInsertButton="false"
hideMoveButtons="false"
hidePathCol="true"
hideRootPath="true"
hideSaveButton="false"
hideSearchButton="false"
importURL="/etc/importers/bulkeditor/import?lang=zh-Hans"
initialSearch="true"
insertedResourceType="geometrixx/components/productlist/sku"
queryParams=""
queryURL="/etc/importers/bulkeditor/query.json?lang=zh-Hans"
saveURL="/etc/importers/bulkeditor/save?lang=zh-Hans"
xtype="bulkeditor">
<saveButton
jcr:primaryType="nt:unstructured"
text="Save modifications"/>
<searchButton
jcr:primaryType="nt:unstructured"
text="Apply filter"/>
<queryParamsInput
jcr:primaryType="nt:unstructured"
fieldDescription="Enter here your filters"
fieldLabel="Filters"/>
<searchPanel
jcr:primaryType="nt:unstructured"
height="200">
<defaults
jcr:primaryType="nt:unstructured"
labelWidth="150"/>
</searchPanel>
<grid
jcr:primaryType="nt:unstructured"
height="275"/>
<store jcr:primaryType="nt:unstructured">
<sortInfo
jcr:primaryType="nt:unstructured"
direction="ASC"
field="CatalogCode"/>
</store>
<colModel
jcr:primaryType="nt:unstructured"
width="150"/>
<colsMetadata jcr:primaryType="nt:unstructured">
<Selection
jcr:primaryType="nt:unstructured"
checkbox="true"
forcedPosition="0"
headerText=""/>
<ProductId
jcr:primaryType="nt:unstructured"
cellCls="productlist-cell-productid"
headerText="Product Id"/>
<ProductName
jcr:primaryType="nt:unstructured"
cellStyle="background-color: #FFCC99;"
headerText="Product Name"/>
<CatalogCode
jcr:primaryType="nt:unstructured"
cellStyle="background-color: #EDEDED;"
headerText="Catalog Code"/>
<Color jcr:primaryType="nt:unstructured">
<editor
jcr:primaryType="nt:unstructured"
store="[Blue,Red,Yellow]"
triggerAction="all"
typeAhead="true"
xtype="combo"/>
</Color>
<SellingSku
jcr:primaryType="nt:unstructured"
headerText="Sku Id"/>
</colsMetadata>
</editor>
可以配置批量编辑器的每个部分。 下表列表了批量编辑器的所有配置属性。
属性名称 | 定义 |
rootPath | 搜索根路径 |
queryParams | 搜索查询 |
contentMode | 启用内容模式为true:属性在jcr:content节点上读取,而不在搜索结果节点上读取 |
colsValue | 搜索的属性(cols中的选定值显示为复选框的选择) |
extraCols | 额外搜索的属性(以逗号分隔的文本字段显示) |
initialSearch | 在页面加载时执行查询为true |
colsSelection | 搜索的属性选择(显示为复选框) |
showGridOnly | 如果为True,则仅显示网格而不显示搜索面板(请不要忘记将initialSearch设置为True) |
searchPanelCollased | 默认情况下,设置为“true”可折叠搜索面板 |
hideRootPath | 隐藏根路径字段 |
hideQueryParams | 隐藏查询字段 |
hideContentMode | 隐藏内容模式字段 |
hideColsSelection | 隐藏列选择字段 |
hideExtraCols | 隐藏附加列字段 |
hideSearchButton | 隐藏搜索按钮 |
hideSaveButton | 隐藏保存按钮 |
hideExportButton | 隐藏导出按钮 |
hideImportButton | 隐藏导入按钮 |
hideResultNumber | 隐藏网格搜索结果编号文本 |
hideInsertButton | 隐藏网格插入按钮 |
hideDeleteButton | 隐藏网格删除按钮 |
hidePathCol | 隐藏网格“路径”列 |
queryURL | 查询servlet的路径 |
exportURL | 导出servlet的路径 |
importURL | 导入servlet的路径 |
insertedResourceType | 插入行时添加到节点的资源类型 |
saveButton | 保存按钮构件配置 |
searchButton | 搜索按钮构件配置 |
exportButton | 导出按钮构件配置 |
importButton | 导入按钮构件配置 |
searchPanel | 搜索面板构件配置 |
网格 | 网格构件配置 |
商店 | 存储配置 |
colModel | 网格列模型配置 |
rootPathInput | rootPath构件配置 |
queryParamsInput | queryParams构件配置 |
contentModeInput | contentMode构件配置 |
colsSelectionInput | colsSelection构件配置 |
extraColsInput | extraCols构件配置 |
colsMetadata | 列元数据配置。 可能的属性(应用于列的所有单元格):
|
可以为每列配置:
显示属性:html样式、CSS类和只读
复选框
被迫的职位
CSS和只读列
批量编辑器有三种列配置:
配置必须定义为以下配置:
"colsMetadata": {
"Column name": {
"cellStyle": "html style",
"cellCls": "CSS class",
"readOnly": true/false
}
}
以下示例可在产品列表组件(/apps/geometrixx/components/productlist/dialog/items/editor/colsMetadata?lang=zh-Hans)中找到:
<colsMetadata jcr:primaryType="nt:unstructured">
<Selection
jcr:primaryType="nt:unstructured"
checkbox="true"
forcedPosition="0"
headerText=""/>
<ProductId
jcr:primaryType="nt:unstructured"
cellCls="productlist-cell-productid"
headerText="Product Id"/>
<ProductName
jcr:primaryType="nt:unstructured"
cellStyle="background-color: #FFCC99;"
headerText="Product Name"/>
<CatalogCode
jcr:primaryType="nt:unstructured"
cellStyle="background-color: #EDEDED;"
headerText="Catalog Code"/>
<Color jcr:primaryType="nt:unstructured">
<editor
jcr:primaryType="nt:unstructured"
store="[Blue,Red,Yellow]"
triggerAction="all"
typeAhead="true"
xtype="combo"/>
</Color>
<SellingSku
jcr:primaryType="nt:unstructured"
headerText="Sku Id"/>
</colsMetadata>
复选框
如果复选框配置属性设置为true,则列的所有单元格将呈现为复选框。 复选框将true发送到服务器Save servlet,否则发送false。 在标题菜单中,还可以选择全部或选择无。 如果所选标题是复选框列的标题,则这些选项将处于启用状态。
在前一个示例中,选择列仅包含复选框="true"。
强制位置
强制位置元数据forcedPosition允许您指定列在网格中的位置:0是第一个位置,<列数>-1是最后一个位置。 忽略任何其他值。
在前一个示例中,选择列是forcedPosition="0"的第一列。
默认情况下,可以在/libs/wcm/core/components/bulkeditor/json.java
找到查询servlet。 您可以配置其他路径以检索数据。
查询servlet的工作方式如下:它接收GQL查询和要返回的列,计算结果,并将结果作为JSON流发送回批量编辑器。
在“产品列表”组件中,发送到查询servlet的两个参数如下:
返回的JSON流如下所示:
{
"hits": [{
"jcr:path": "/content/geometrixx/en/products/jcr:content/par/productlist/1258674828905",
"ProductId": "21",
"ProductName": "Cube",
"Color": "Blue",
"CatalogCode": "43244",
"SellingSku": "32131"
}
],
"results": 1
}
每次点击都对应一个节点及其属性,并在网格中显示为一行。
您可以扩展查询servlet以返回复杂的继承模型或返回存储在特定逻辑位置的节点。 查询servlet可用于任何类型的复杂计算。 然后,网格可以显示存储库中多个节点的聚合行。 在这种情况下,这些行的修改和保存必须由保存Servlet管理。
在批量编辑器的默认配置中,每行都是一个节点,该节点的路径存储在行记录中。 批量编辑器通过jcr路径保留行与节点之间的链接。 当用户编辑网格时,将构建所有修改的列表。 当用户单击保存时,将向每个路径发送具有更新的属性值的POST查询。 这是Sling概念的基础,如果每个单元是节点的属性,则它是很好的。 但是,如果实现查询servlet进行继承计算,则此模型不能作为查询servlet返回的属性工作,该属性可以从其他节点继承。
保存servlet的概念是修改不会直接发布到每个节点,而是发布到执行保存作业的一个servlet。 这使此servlet能够分析修改并将属性保存到正确的节点上。
每个更新的属性都以以下格式发送到servlet:
参数名称:<jcr path>/<property name>
示例:/content/geometrixx/cn/products/jcr:content/par/productlist/1258674859000/SellingSku
值:<value>
示例: 12123
Servlet需要知道catalogCode属性的存储位置。
默认的保存servlet实现位于/libs/wcm/bulkeditor/save/POST.jsp,用于产品列表组件。 它从请求中获取所有参数(格式为<jcr path>/<property name>),并使用JCR API在节点上写入属性。 如果节点不存在(网格插入的行),也会创建节点。
默认代码不应按原样使用,因为它重新实现服务器本机操作(<jcr path>/<property name>上的POST),因此它只是构建用于管理属性继承模型的Save servlet的一个好起点。