Browsersync and JRebel for keeping you in flow

Browsersync is a helpful utility for automatically reloading browser windows when making modifications to your application and also reflecting browser events between multiple browsers. This can be really helpful when testing your application in multiple browsers while developing.

To get Browsersync working with Vaadin, one can use JRebel to automatically redeploy code modifications to server and then have Browsersync to notify listening browsers that they should reload the page. The trick for connecting Browsersync to JRebel is to have it watch ~/.jrebel/javarebel.stats file that is updated by JRebel after each reload. For theme development you might also want to listen for your scss files and let Vaadin handle SASS recompilation on the fly.

Here is how to start Browsersync on OSX for an app deployed to localhost:8080:

browser-sync start --proxy="localhost:8080" --files="$HOME/.jrebel/javarebel.stats"

For a demo, see the video below.

Using Vaadin Grid

Last week we released one of the most important components in the 7.4 version of the framework - the Grid. If you haven’t taken a look at it yet, I can tell you that there are quite a few features that you can use to present and tune to get your data on the screen.

Like you know, Grid is now a part of the open source framework and free to use under Apache 2 license. To help you get started with it, we wanted to give you some code snippets to visualize how it’s used.

Create and show a data grid

Create an empty Grid with a caption and add it to your layout.  Here we want to reserve most of the space in VerticalLayout for the grid:

Grid grid = new Grid("My data grid");
layout.setExpandRatio(grid, 1);

There are alternative constructors for binding the Container data source at the same time. Check out the Grid Javadocs for more details.

Adding data

The most simple way of adding data is to just add some rows:

grid.addRow("com.vaadin", "vaadin-server", "7.4.0");
grid.addRow("com.vaadin", "vaadin-client-compiled", "7.4.0");

You already guessed that this adds two rows with three columns to the data grid, but you can go further by binding containers as data source:

final BeanItemContainer<Person> ds = 
    new BeanItemContainer<Person>(Person.class, personList);
Grid grid = new Grid("Employees", ds);

Of course you can use other (your favorite) containers, from LazyQueryContainer, CollectionContainer to ListContainer, and your own custom ones.

Configuring columns

Now you have something to show. But maybe not all. If your Person objects have nested POJOs, they don’t look that nice, but fortunately you can easily expand those:


Setting the column order is equally as easy:

grid.setColumnOrder("firstName", "lastName", "salary",
    "address.streetAddress", "", "");

You can also set sizes for individual columns. Just grab the column handle and configure:

grid.getColumn("salary").setExpandRatio(1); // take all available

And you can also set the minimum width for a column:

grid.getColumn("salary").setMinimumWidth(200); // can expand

If you have too many columns to be visible at once, you can have some columns fixed so that they are kept visible all the time.


Headers and Footers

While data is the most important thing, it is also important to make it meaningful. Good headers and titles help to bring meaning to your data.

HeaderRow row = grid.prependHeaderRow();
row.join("firstName", "lastName").setHtml("<b>Full name</b>");

As you can see, the HTML can be used to emphasize things.

And the same goes for footers. Display aggregate values, totals, averages or just some text in the end of the data grid:

FooterRow footer = grid.appendFooterRow();
footer.getCell("salary").setText("avg: 1528.55");

Custom data presentation

Sometimes custom data presentation is as easy as binding data, but most typically your data does not match the presentation you want to have. Here is what you can do:

grid.getColumn("salary").setRenderer(new ProgressBarRenderer(),
               new BigDecimalToDoubleConverter());

What happens here is that a “renderer” is used to present column values. You can use one of the built in renderers and converters, or simply create your own special converter:

    .setConverter(new BooleanTrafficLight())
    .setRenderer(new HtmlRenderer());

Notice the fluent API implementation. Here a colored dot is presented instead of the underlying boolean value.

Selecting rows

Primarily you present long (or short) lists of data with the data grid, let the user select something there and receive an event as he or she makes the selection:

grid.addSelectionListener(new SelectionListener() {

   public void select(SelectionEvent event) {"Select row: "+grid.getSelectedRow());

You can choose from NONE, SINGLE and MULTI here and receive an event when the selection changes.

Inline editing

Using editor capabilities, you can let the users edit the data in place:

grid.setEditorSaveCaption("Save my data, please!");

While this would already make the data editable, the defaults might not be enough for your data types. Then you can create your own forms:

final MyForm form = new MyForm();
grid.addSelectionListener(new SelectionListener() {

    public void select(SelectionEvent event) {
        BeanItem<Person> item = ds.getItem(grid.getSelectedRow());

And then create a simple form of your own - TextFields, DateFields, Sliders,... whatever you might need there. Here we use the GridLayout (just a layout, not to be confused with the Grid itself) to present a form of three columns:

public class MyForm extends GridLayout {

    public BeanFieldGroup<Person> fieldGroup =
        new BeanFieldGroup<Person>(Person.class);

    private TextField firstName, lastName, salary;

    public MyForm() {
       super(3, 1);
       addComponents(firstName, lastName, salary);
       addComponent(new Button("Save", new ClickListener() {

           public void buttonClick(ClickEvent event) {
               try {
               } catch (CommitException e) {
                   //TODO: Say and do something meaningful

       addComponent(new Button("Cancel", new ClickListener() {

           public void buttonClick(ClickEvent event) {

With this, you already have a data grid driven CRUD application in your hands. Enjoy Java’s benefits and refactor and rename it to your needs.

Read more

This was just a small glimpse to what Vaadin Grid has to offer. There is much more you can achieve, with styling, filtering and sorting. Take a look at the developer guide, wiki and Javadocs for more.


Community Spotlight - February 2015

Spotlight, featured image

Directory renewal is getting closer.

In last month’s episode, we didn’t discuss about the Directory or traditional Vaadin add-ons at all. So lets start with some news about the upcoming Directory renewal. We have just deployed a new version of the preview, now with a fully featured administration console.

Add-on authors can already use it to add icons to their add-ons and spice up their descriptions and release notes with Markdown syntax. We think icons will be a great way to help people recognise their favourites and rich text formatting is a big aid for those who consider the directory page as their project’s homepage.

Although, you should note that it works with the same database as the public side. New icons will show up only in the preview version and possible markdown formatting will show up as raw text on the old side. If you find any oddities or improvement ideas, please, report them via the “Give Feedback” button on the top of the Directory preview.

JVx Application Framework generates you a Vaadin UI for web, Swing for desktop

In this article series we have referred lots of content from SibVisions’s blog that relate to Vaadin. This months highlight is definitely a nice video of a Vaadin UI controlling window shutters.

In case somebody has missed it, one of the reasons for their constant feed of Vaadin articles is their Apache 2 licenced UI toolkit called JVx Application Framework. With it you can build your UI just once and deploy it to web, mobile and desktop. JVx runs its web UI on Vaadin, its desktop UI on Swing and its mobile UI as native Android or iOS apps.

Jvx is definitely a tool to check out for those who need to maintain the same application on both web and desktop. To get a better understanding of what Jvx can do, you can check out this article and the included video that introduces their upcoming Java FX support.

BTW. Related to Swing, we are currently preparing some material for developers coming to Vaadin from a Swing background. If you have experiences you’d like to share or tips about topics we should handle, feel free to contact me via email. I’d appreciate all insights, it is way too long since I wrote my first Vaadin app to remember what I felt difficult - and I haven’t worked with Swing since.

Helper libraries like Jvx and vaadin4spring, which we discussed in the last episode, don’t fit into the Directory that well and might not get the publicity they’d deserve in Vaadin community. Thus I decided to create a new page for this kind of projects to the wiki. I created a separate category for various examples like technology integrations. I quickly filled in some projects, but there are lots of good stuff missing. Don’t hesitate to add links and short description to other projects. Lets make this a shared bookmark collection of Vaadin related OS projects.

Lots of Directory activity

Since we crossed the boundary of 500 add-ons we have had an insane activity in the Directory. Since the beginning of the year, there are 13 completely new add-ons and 43 different add-ons have celebrated new releases already during 2015. Big thanks to all active add-on contributors!

Completely new add-ons to the Directory during 2015: