2. 使用 WebDav 组件
在此阶段,应用程序的知识库管理系统主要由 Knowledge base
视图展示。
在本章节中,我们将:
-
优化 WebDAV 文档的数据网格,显示 WebDAV 文档的链接,而非文档标识符。
-
使用 WebDAV 文档详情视图的 webdavDocumentUpload 组件将 WebDAV 文档上传到系统。
添加 WebdavDocumentUploadField
在 Jmix 工具窗口中找到 webdav-document-wrapper-detail-view.xml
并双击打开视图设计器:
![wdw detail view](_images/wdw-detail-view.png)
可以看到,webdavDocument
属性通过 entityPicker
组件展示。
如果要显示处理文档的特殊组件,需要在 XML 中包含 WebdavDocumentUploadField UI 组件。
从 XML 中删除 entityPicker
组件,并将光标放在 departmentField
之后。接下来,点击操作面板中的 Add Component,然后找到 WebdavDocumentUploadField
并双击。
![add wd upload field](_images/add-wd-upload-field.png)
会在 XML 和 Jmix UI 层级结构面板中的 formLayout
底部添加新的 webdavDocumentUpload
组件。按照如下示例配置 id
、colspan
和 property
属性:
<formLayout id="form" dataContainer="webdavDocumentWrapperDc">
<textField id="descriptionField" property="description"
colspan="2"/>
<entityPicker id="departmentField" property="department"
colspan="2">
<actions>
<action id="entityLookup" type="entity_lookup"/>
<action id="entityClear" type="entity_clear"/>
</actions>
</entityPicker>
<webdav:webdavDocumentUpload id="webdavDocumentField"
property="webdavDocument"
colspan="2"/>
</formLayout>
在表格中展示 WebdavDocumentLink
现在我们需要在数据网格中显示文档的链接,而不是标识符。
打开 webdav-document-wrapper-list-view.xml
并找到 webdavDocumentWrappersDataGrid
。
选择 webdavDocument
列,切换到组件属性面板的的 Handlers tab,然后创建 renderer
处理方法:
@Supply(to = "webdavDocumentWrappersDataGrid.webdavDocument", subject = "renderer")
private Renderer<WebdavDocumentWrapper> webdavDocumentWrappersDataGridWebdavDocumentRenderer() {
return null;
}
在控制器类中注入 UiComponents
对象:
@Autowired
private UiComponents uiComponents;
可以使用编辑器顶部操作面板中的 Inject 按钮将依赖注入到视图控制器和 Spring Bean 中。 |
实现 webdavDocumentWrappersDataGridWebdavDocumentRenderer
方法:
@Supply(to = "webdavDocumentWrappersDataGrid.webdavDocument", subject = "renderer")
private Renderer<WebdavDocumentWrapper> webdavDocumentWrappersDataGridWebdavDocumentRenderer() {
return new ComponentRenderer<>( (1)
() -> uiComponents.create(WebdavDocumentLink.class), (2)
(link, wrapper) -> {
WebdavDocument webdavDocument = wrapper.getWebdavDocument();
if (webdavDocument != null) {
link.setWebdavDocument(webdavDocument);
}
});
}
1 | 方法返回一个 Renderer 对象,用于创建渲染列的 UI 组件。 |
2 | 使用 UiComponents 工厂创建 WebdavDocumentLink 组件实例。 |
运行应用程序
下面我们运行应用程序查看新加的功能。
使用浏览器打开 http://localhost:8080
,然后用 admin/admin
登录。
从主菜单中选择 Knowledge base
。打开 Webdav document wrapper.list
视图。
![wd wrapper list](_images/wd-wrapper-list.png)
Webdav document 列包含了 WebDAV 文档的链接,以及一个按钮可以用来打开标准的 WebDAV document versions 视图。
点击 Create 打开 Webdav document wrappers.detail
视图。除了文件描述的文本控件和选择部门的选择器外,还可以看到用于上传文件的内置 WebDAV 组件。可以用该组件尝试上传一个文件:
![wd wrapper detail](_images/wd-wrapper-detail.png)
点击 OK 按钮后,会切换回列表视图。
将鼠标悬停在 WebDAV 文档名称上。在左下角,可以看到文档在 WebDAV 服务器的链接。
![wd wrapper list try open doc](_images/wd-wrapper-list-try-open-doc.png)
但是,如果尝试打开文档,浏览器会显示一个消息,说无法连接服务器。
这是因为有一些必要的配置还没有完成,我们将在下一章节继续。
总结
在本节中,我们学习了如何使用 WebDAV 扩展组件提供的 UI 组件。
我们了解到:
-
WebDAVDocumentUploadField 组件查看和上传 WebDAV 文档的便捷内置工具。
-
可以通过数据网格列的 ComponentRenderer 使用 WebDavDocumentLink 组件。