Implement a column renderer for Vaadin 8 Grid

Question

The Vaadin Framework guide has a page describing how to use Column Renderers in a Vaadin Grid. And this page describes implementing renderers, but all too briefly.

I

Answer 1

Special packaging required

Yes, special packaging is required. You cannot simply toss the Vaadin Grid column renderer implementation classes into a regular Vaadin app.

Two of the three classes needed for a column renderer implementation involve client-side development, rather than the usual server-side development we do commonly in Vaadin app work.

Fortunately, this is easier than it might sound. To just do a simple column renderer, Vaadin fortunately provides some super-classes that do most of the heavy-lifting. So we need not learn about all the gory details of the GWT and JavaScript magic that goes on under the covers in Vaadin.

The path to success involves:

• Creating a separate project using a Vaadin-provided template to build your own Vaadin Add-On.
• Populating that project with source code taken from the Vaadin Framework GitHub project.

vaadin-archetype-widget

Start a new project using a multi-module Maven archetype provided by the Vaadin team: vaadin-archetype-widget seen in this list.

addon module

Once you have created a project from that archetype in your IDE, add your three column renderer classes as shown in this screen shot for an Instant renderer.

• Renderer class goes in the 'addon' module’s main package.
• RendererConnector & RendererState class files go in the 'addon' module’s nested client package.

Of course, in real work you would delete the example MyComponent… files created by the archetype.

demo module

Once built you can try your column renderer in the 'demo' module’s Vaadin app by importing the package of the 'addon' module. In this case:

import org.basilbourque.timecolrenderers.InstantRenderer;

GitHub source

My successful implementation of a Instant column renderer was take entirely from three LocalDateTimeRenderer related classes provided with Vaadin 8.1.3 source code. You can find the current version of these classes by typing LocalDateTimeRenderer in the GitHub find file feature.

• shared/src/main/java/com/vaadin/shared/ui/grid/renderers/LocalDateTimeRendererState.java
• server/src/main/java/com/vaadin/ui/renderers/LocalDateTimeRenderer.java
• client/src/main/java/com/vaadin/client/connectors/grid/LocalDateTimeRendererConnector.java