2. Работа с компонентами WebDav

На данном этапе разработки в приложении реализована система управления базой знаний, представленная экраном Knowledge base.

В этой главе вы:

Улучшите таблицу оболочек документов webDav, чтобы отображать ссылку на документ WebDAV вместо идентификатора документа.
Воспользуетесь компонентом webdavDocumentUpload на экране деталей оболочки документа webDav, чтобы загружать документ WebDAV в систему.

Добавление WebdavDocumentUploadField на экран

Найдите webdav-document-wrapper-detail-view.xml в окне инструмента Jmix и дважды щелкните на нем. Откроется дизайнер экрана:

Обратите внимание, что для отображения атрибута webdavDocument используется компонент entityPicker. Если вы хотите отобразить специальный компонент, предназначенный для работы с документами, добавьте UI-компонент WebdavDocumentUploadField в XML-дескриптор.

Удалите описание компонента entityPicker из XML-дескриптора и поместите курсор после departmentField. Затем нажмите Add Component на панели действий, найдите элемент WebdavDocumentUploadField и дважды щелкните на нем.

Новый элемент webdavDocumentUpload будет добавлен под элементом formLayout как на панели структуры Jmix UI, так и в XML. Настройте атрибуты 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 инспектора компонента и создайте метод-обработчик renderer:

@Supply(to = "webdavDocumentWrappersDataGrid.webdavDocument", subject = "renderer")
private Renderer<WebdavDocumentWrapper> webdavDocumentWrappersDataGridWebdavDocumentRenderer() {
    return null;
}

Инжектируйте объект UiComponents в класс контроллера:

@Autowired
private UiComponents uiComponents;

Вы можете использовать кнопку Inject на верхней панели действий редактора, чтобы инжектировать зависимости в контроллеры экранов и Spring-бины.

Реализуйте метод 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	Экземпляр компонента WebdavDocumentLink создается с помощью фабрики `UiComponents`.

Запуск приложения

Запустим приложение, чтобы увидеть новую функциональность в действии.

Перейдите по адресу http://localhost:8080 в веб-браузере и войдите в приложение с учетными данными admin/admin.

Выберите пункт Knowledge base в меню Application. Откроется экран Webdav document wrappers.list.

Колонка Webdav document содержит ссылку на документ WebDav и кнопку, позволяющую открыть стандартный экран WebDAV document versions.

Нажмите Create. Откроется экран Webdav document wrappers.detail. Помимо текстового поля, используемого для описания файла, и пикера для отдела, вы увидите встроенный компонент дополнения WebDAV для загрузки файлов. Попробуйте загрузить файл с помощью этого компонента:

После нажатия кнопки OK вы будете перенаправлены на экран списка.

Наведите курсор мыши на имя документа WebDAV. В левом нижнем углу вы увидите ссылку на место расположения документа на сервере WebDAV.

Однако при попытке открыть документ браузер отобразит сообщение о том, что не удалось установить соединение с сайтом.

Это происходит из-за того, что необходимые настройки еще не выполнены. Мы рассмотрим это в следующем разделе.

Итоги

В этом разделе вы узнали, как использовать компоненты, предоставляемые дополнением WebDAV.

Вы узнали, что:

Компонент WebDAVDocumentUploadField включает удобные встроенные инструменты для просмотра и загрузки документов WebDAV.
Вы можете использовать компонент WebDavDocumentLink в таблице данных, указав ComponentRenderer для колонки.