4. Customizing UI

In this section, you will make some improvements to the appearance of the application:

  • Add a new column called lastModifiedBy to the WebDAV document wrapper data grid. This column will display the author of the latest changes made to the WebDAV file.

  • Add a lastModifiedDate column, whose cells will show the date of the latest changes to the WebDAV file.

  • Add a Download button above the data grid. Using this button, users with the Employee role will be able to download files from the knowledge base without the ability to modify them on the WebDAV server.

Using Renderers in Data Grid

In the data grid, we will learn how to display columns that are not directly linked to attributes of the associated entity. These columns are often used to show derived information. To create a column of this type, you need to define a column with a key attribute in the XML descriptor and then generate a renderer for that column.

Adding lastModifiedBy Column

Let’s configure the display of the author of the latest changes to the WebDAV file.

Add a new column to webdavDocumentWrappersDataGrid:

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

This column is not bound to an entity attribute, so it has the key attribute instead of property.

Select the lastModifiedBy column, switch to the Handlers tab of the component inspector and create the renderer handler method:

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

Implement the webdavDocumentWrappersDataGridLastModifiedByRenderer method:

@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 The method returns a TextRenderer object.
2 The renderer returns the name of the user who made changes to the latest version of the WebDAV document.

Adding lastModifiedDate Column

In the lastModifiedDate column, let’s configure the display of the date of the latest changes to the WebDAV file.

Add a new column to webdavDocumentWrappersDataGrid:

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

This column is not bound to an entity attribute, so it has the key attribute instead of property.

Select the lastModifiedDate column, switch to the Handlers tab of the component inspector and create the renderer handler method:

@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);
    });
}

Adding Download Button

Let’s add a Download button to the WebDAV documents data grid. Using this button, users with the Employees role would be able to force a download of the selected WebDAV file.

First add a download action to webdavDocumentWrappersDataGrid. Then, in the buttonsPanel hbox, add a button and associate it with the newly created action.

<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 The list_itemTracking action will automatically become active only when a specific item is selected in the associated dataGrid.

Generate an ActionPerformedEvent handler method for the download action. Add the logic to it:

@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 Use the Downloader bean to download files.
2 Get the last of WebdavDocumentVersion instance - specific version of a document managed within the WebDAV system.
3 The returned FileRef object is a reference to the file in the file storage.
4 The download() method accepts the FileRef value and takes the file from the file storage specified in the FileRef object. The name and type of the file are also encoded in FileRef, so the web browser correctly chooses whether to download or display the file.

Running the Application

Navigate to https://localhost:8443 using your web browser and sign in to the application with the credentials admin/admin.

Choose the Knowledge base item from the Application menu.

knowledge base with renderers

The Last modified by column displays the author of the latest modifications to the WebDav file, while the Last modified date column shows the date of the last modifications to the WebDav file.

The Download button allows users to download the selected WebDAV document.

Summary

In this section, you have learned that:

  • The data in data grid columns can be presented using renderers. Renderers provide a way to customize how the data is displayed in each column of a data grid.

  • The Downloader bean is used to download files.