JAVA on Flowing Code

Lazy, Filtered and Sorted Vaadin Grid using External Data Source

Wed, 24 Apr 2019 18:06:00 +0000

In large enterprise application development projects, it’s usual to code use cases that, as the main requirement, define to show the user huge amounts of data in a tabular way. For this kind of scenarios, there is a particular web component that comes really handy: a Grid. Given that we like Vaadin’s framework, we are going to describe how to configure it in such a way that doesn’t restrict you about performance issues when doing that.

This post assumes that you have some knowledge of web application development using the Vaadin Framework and the Java Platform. But we’ll try to explain everything as much as possible. The version that we used to write this application is Vaadin 13, but this part of the API is almost the same since Vaadin 8, so it should be possible to use the same approach in older versions.

Setting up a Vaadin Grid, is really easy, just create an instance and then customize the columns, or even skip that part if your Pojo is sufficiently self-descriptive.

As an example, let’s assume that we want to show a grid with data for a person, which we can define as a simplified entity like this:

Creating a Vaadin Flow Server-Side API for a Javascript component

Tue, 08 Jan 2019 19:50:00 +0000

Today we are going to explore some tips about how to create a Java server-side wrapper for a regular javascript component using Vaadin Flow. As you might notice, this popular framework has good documentation about how to integrate an existing Polymer Component, but there is no much info about how to integrate a regular Javascript component, so we will show you one easy approach of doing that.

What we want to do is, to show you how to create a nice Java API around a typical javascript component, so you can easily integrate it in your java applications.

Of course, there are many ways to build javascript visual components around there, we will focus on the ones that use this common pattern: you create a html element (like a Div), and then you instruct the library to “enhance” it.

Then we have one important feature that is usually wanted: bidirectional communication between the server and the client.

For this short tutorial we want to build a Vaadin Flow wrapper around one interesting library that is able to draw time line graphs: vis.js. This library is based on the previous premise: to enhance (in this case) a div html tag.

Let’s start.

Step 1: Overview of your component

First, it’s a good idea to use a starter to build a project based on Vaadin. We will use this one, which is perfect for creating a new component. Because it’s mandatory to specify a base GitHub project, just leave the one that is offered, you can change that later.

We want our component to be easy to use; hence, following Vaadin conventions, we will create a simple class that will extend a Div component. This class will be able to render the component in the client side, exposing some methods that will give the developer the ability for interacting with it in several ways:

Vaadin’s Grid editing capabilities

Mon, 30 Oct 2017 14:15:00 +0000

This time I’d like to talk a little bit about something that I believe is one of the most powerful capabilities of Vaadin Grid component: the editing feature. The default view of the component is a read-only view, of the tabular data loaded in the component. But if you enable the editor, you can visually edit the grid’s cells and change the data that the grid is holding in the server’s memory. Let’s dig in some difficulties to use this feature and how to overcome them.

Inline editing

If you look at the demo sampler application, you’ll see that the Item Editor, is like a little form that opens whenever you double click a row. That’s different than the previous component in older Vaadin versions (Table). With Table, when you double click on it, the entire row turn into read/write mode, without changing the row into a “mini form” as grid does now. Of course this behavior is configurable, you can disable it just by calling setBuffered(false).

Despite of being somehow more visual, this new conduct, could be an undesirable behavior for enterprise applications that happens to use the keyboard a lot, and not depending so much on the mouse, to handle the table or grid.

If your users desire that kind of grid management, then the Grid Fast Navigation Addon is for you. It uses the Component Extension feature, to give the grid a new look, that makes the editing much more easier, and transforms it in a sort of excel style facility.

Grid Fast Navigation Addon in action

Components

Another thing that prevented some developers to stop using Table and starting to use grid, was that you couldn’t use a standard component inside a cell of a Grid. If you wanted to, for example, use checkboxes inside a cell, you had to create a special class, called “renderer”, that should handle the server and the client side of that cell.

Luckily there are some addons that may help you with that task. The one that stands out is the Grid renderes collection (it exists for Vaadin 7 and 8 versions). It provides a lot of components that let you handle select, checkbox, images, etc.

In the last version of Vaadin, one of the most interesting features, is a new Renderer, that adds the capability to render a Vaadin component inside a cell of a grid. You can see a preview in the sampler application.

If you are using Vaadin 7, although, you could use a experimental version of that feature, installing the Component Renderer Addon.
Happy coding!