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

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

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

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

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

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

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

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

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

<dataGrid id="webdavDocumentWrappersDataGrid"
          width="100%"
          minHeight="20em"
          dataContainer="webdavDocumentWrappersDc"
          columnReorderingAllowed="true">
    <columns resizable="true">
        <column property="webdavDocument"/>
        <column property="description"/>
        <column key="lastModifiedBy" header="msg://column.lastModifiedBy"/>
        <column property="department"/>
    </columns>
</dataGrid>

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

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

@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.

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

<dataGrid id="webdavDocumentWrappersDataGrid"
          width="100%"
          minHeight="20em"
          dataContainer="webdavDocumentWrappersDc"
          columnReorderingAllowed="true">
    <columns resizable="true">
        <column property="webdavDocument"/>
        <column property="description"/>
        <column key="lastModifiedBy" header="msg://column.lastModifiedBy"/>
        <column key="lastModifiedDate" header="msg://column.lastModifiedDate"/>
        <column property="department"/>
    </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, добавьте кнопку и свяжите ее с только что созданным действием.

<hbox id="buttonsPanel" classNames="buttons-panel">
    <button id="createBtn" action="webdavDocumentWrappersDataGrid.create"/>
    <button id="editBtn" action="webdavDocumentWrappersDataGrid.edit"/>
    <button id="removeBtn" action="webdavDocumentWrappersDataGrid.remove"/>
    <button id="downloadBtn" action="webdavDocumentWrappersDataGrid.download"
            icon="vaadin:download"/>
    <simplePagination id="pagination" dataLoader="webdavDocumentWrappersDl"/>
</hbox>
<dataGrid id="webdavDocumentWrappersDataGrid"
          width="100%"
          minHeight="20em"
          dataContainer="webdavDocumentWrappersDc"
          columnReorderingAllowed="true">
    <actions>
        <action id="create" type="list_create"/>
        <action id="edit" type="list_edit"/>
        <action id="remove" type="list_remove"/>
        <action id="download" text="msg://download.text" type="list_itemTracking"/> (1)
    </actions>
</dataGrid>
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 используется для скачивания файлов.