4. Настройка UI

В этом разделе вы улучшите внешний вид приложения:

  • Добавите новую колонку lastModifiedBy в таблицу оболочек документов WebDAV. Эта колонка будет отображать автора последних изменений файла WebDAV.

  • Добавите колонку lastModifiedDate, ячейки которой будут показывать дату последних изменений файла WebDAV.

  • Добавите кнопку Download над таблицей. С помощью этой кнопки пользователи с ролью Employee смогут скачивать файлы из базы знаний без возможности изменять их на сервере WebDAV.

Использование рендереров в таблице данных

В таблице данных мы научимся отображать колонки, не связанные напрямую с атрибутами соответствующей сущности. Такие колонки часто используются для отображения производной информации. Чтобы создать колонку такого типа, необходимо определить колонку с атрибутом key в XML-дескрипторе, а затем сгенерировать рендерер для этой колонки.

Добавление колонки lastModifiedBy

Настроим отображение автора последних изменений файла WebDAV.

Добавьте новую колонку в webdavDocumentWrappersDataGrid:

<dataGrid id="webdavDocumentWrappersDataGrid" ...>
    <columns resizable="true">
        <!--..-->
        <column key="lastModifiedBy" header="msg://column.lastModifiedBy"/>
    </columns>
</dataGrid>

Эта колонка не связана с атрибутом сущности, поэтому вместо атрибута property у нее есть атрибут key.

Выберите колонку lastModifiedBy, перейдите на вкладку Handlers инспектора компонента и создайте метод-обработчик renderer:

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

Реализуйте метод webdavDocumentWrappersDataGridLastModifiedByRenderer:

@Supply(to = "webdavDocumentWrappersDataGrid.lastModifiedBy", subject = "renderer")
private Renderer<WebdavDocumentWrapper> webdavDocumentWrappersDataGridLastModifiedByRenderer() {
    return new TextRenderer<>(documentWrapper -> { (1)
        WebdavDocument webdavDocument = documentWrapper.getWebdavDocument();
        if (webdavDocument == null) {
            return null;
        }

        WebdavDocumentVersion lastVersion = webdavDocument.getLastVersion();
        return lastVersion.getCreatedBy(); (2)
    });
}
1 Метод возвращает объект TextRenderer.
2 Рендерер возвращает имя пользователя, внесшего изменения в последнюю версию документа WebDAV.

Добавление колонки lastModifiedDate

В колонке lastModifiedDate настроим отображение даты последних изменений файла WebDAV.

Добавьте новую колонку в webdavDocumentWrappersDataGrid:

<dataGrid id="webdavDocumentWrappersDataGrid" ...>
    <columns resizable="true">
        <!--..-->
        <column key="lastModifiedDate" header="msg://column.lastModifiedDate"/>
    </columns>
</dataGrid>

Эта колонка не связана с атрибутом сущности, поэтому вместо атрибута property у нее есть атрибут key.

Выберите колонку lastModifiedDate, перейдите на вкладку Handlers инспектора компонента и создайте метод-обработчик renderer:

@Autowired
private ApplicationContext applicationContext;

@Supply(to = "webdavDocumentWrappersDataGrid.lastModifiedDate", subject = "renderer")
private Renderer<WebdavDocumentWrapper> webdavDocumentWrappersDataGridLastModifiedDateRenderer() {
    DateFormatter dateFormatter = applicationContext.getBean(DateFormatter.class);
    return new TextRenderer<>(documentWrapper -> {
        WebdavDocument webdavDocument = documentWrapper.getWebdavDocument();
        if (webdavDocument == null) {
            return null;
        }

        WebdavDocumentVersion lastVersion = webdavDocument.getLastVersion();
        Date lastModifiedDate = lastVersion.getCreatedDate();
        dateFormatter.setFormat("MMM dd, yyyy");
        return dateFormatter.apply(lastModifiedDate);
    });
}

Добавление кнопки Download

Добавим кнопку Download в таблицу документов WebDAV. С помощью этой кнопки пользователи с ролью Employees смогут принудительно скачать выбранный файл WebDAV.

Сначала добавьте действие download в webdavDocumentWrappersDataGrid. Затем, в hbox с идентификатором buttonsPanel, добавьте кнопку и свяжите ее с только что созданным действием.

<vbox expand="webdavDocumentWrappersDataGrid">
     <hbox id="buttonsPanel" classNames="buttons-panel">
         <!--...-->
         <button id="downloadBtn" action="webdavDocumentWrappersDataGrid.download" icon="vaadin:download"/>
     </hbox>
     <dataGrid width="100%" id="webdavDocumentWrappersDataGrid" dataContainer="webdavDocumentWrappersDc">
         <actions>
             <!--...-->
             <action id="download" text="msg://download" type="list_itemTracking"/> (1)
         </actions>
         <!--...-->
     </dataGrid>
     <!--...-->
</vbox>
1 Действие list_itemTracking автоматически становится активным только тогда, когда в связанном dataGrid выбран конкретный элемент.

Сгенерируйте метод-обработчик ActionPerformedEvent для действия download. Добавьте в него логику:

@ViewComponent
private DataGrid<WebdavDocumentWrapper> webdavDocumentWrappersDataGrid;

@Autowired
private Downloader downloader; (1)

@Subscribe("webdavDocumentWrappersDataGrid.download")
public void onWebdavDocumentWrappersDataGridDownload(final ActionPerformedEvent event) {
    WebdavDocumentWrapper webdavDocumentWrapper = webdavDocumentWrappersDataGrid.getSingleSelectedItem();
    if (webdavDocumentWrapper == null) {
        return;
    }

    WebdavDocument webdavDocument = webdavDocumentWrapper.getWebdavDocument();
    if (webdavDocument == null) {
        return;
    }
    WebdavDocumentVersion lastVersion = webdavDocument.getLastVersion(); (2)
    FileRef fileReference = lastVersion.getFileReference(); (3)
    downloader.download(fileReference); (4)
}
1 Используйте бин Downloader для скачивания файлов.
2 Получите последний экземпляр WebdavDocumentVersion — конкретную версию документа, управляемую в системе WebDAV.
3 Возвращаемый объект FileRef является ссылкой на файл в хранилище файлов.
4 Метод download() принимает значение FileRef и берет файл из хранилища файлов, указанного в объекте FileRef. Имя и тип файла также закодированы в FileRef, поэтому веб-браузер правильно определяет, скачивать файл или отображать его.

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

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

Выберите пункт Knowledge base в меню Application.

knowledge base with renderers

Колонка Last modified by отображает автора последних изменений файла WebDav, а колонка Last modified date показывает дату последних изменений файла WebDav.

Кнопка Download позволяет пользователям скачать выбранный документ WebDAV.

Итоги

В этом разделе вы узнали, что:

  • Данные в колонках таблицы данных можно отображать с помощью рендереров. Рендереры позволяют настраивать способ отображения данных в каждой колонке таблицы данных.

  • Бин Downloader используется для скачивания файлов.