Vaadin - GRID Component

Introduction

Vaadin 7.4 was recently released and it includes a new component called the GRID.

It represents a 'Spreadsheet" type model from a UI perspective, however I think it lacks a lot of features you would expect from this type of component.

Maybe this component will evolve over time and it will begin to have the functions that you expect from a spreadsheet. ( note: there is a commercial add on called the Spreadsheet from Vaadin )

Use Case

The use case I am demonstrating below is a simple grid showing projected sales of Widgets over a five year period.

Creation

Creating a Grid is very simple and you have numerous options for sizing on the page. In the example below I setting it across the page. The Grid rows can be selected for editing, you can select single or multiple rows in a single action.

myGrid = new Grid();
myGrid.setSizeFull();
myGrid.setSelectionMode(SelectionMode.SINGLE);

Container Backing

Similar to many other Vaadin components you have the ability to link the component to a Container. This means that changes to the container are reflected on the displayed page.

I created a Index Container as the backing data source. The data itself is randomly generated. The final row in the Grid is the Yearly totals, they are accumulated as the container is filled with data.

 private void dataSetUp() {
        aContainer = new IndexedContainer();
        aContainer.addContainerProperty("Product", String.class, "product");
        aContainer.addContainerProperty("Year 1", Integer.class, 11);
        aContainer.addContainerProperty("Year 2", Integer.class, 12);
        aContainer.addContainerProperty("Year 3", Integer.class, 13);
        aContainer.addContainerProperty("Year 4", Integer.class, 14);
        aContainer.addContainerProperty("Year 5", Integer.class, 16);

        randomValues();

        for (int[] row : values) {
            Item newItem = aContainer.getItem(aContainer.addItem());
            newItem.getItemProperty("Product").setValue("Widget " + RandomStringUtils.randomAlphabetic(1));
            newItem.getItemProperty("Year 1").setValue(row[0]);
            year1Total = year1Total + row[0];
            newItem.getItemProperty("Year 2").setValue(row[1]);
            year2Total = year2Total + row[1];
            newItem.getItemProperty("Year 3").setValue(row[2]);
            year3Total = year3Total + row[2];
            newItem.getItemProperty("Year 4").setValue(row[3]);
            year4Total = year4Total + row[3];
            newItem.getItemProperty("Year 5").setValue(row[4]);
            year5Total = year5Total + row[4];

        }

        Item lastItem = aContainer.getItem(aContainer.addItem());
        lastItem.getItemProperty("Product").setValue("Revenue Totals");
        lastItem.getItemProperty("Year 1").setValue(year1Total);
        lastItem.getItemProperty("Year 2").setValue(year2Total);
        lastItem.getItemProperty("Year 3").setValue(year3Total);
        lastItem.getItemProperty("Year 4").setValue(year4Total);
        lastItem.getItemProperty("Year 5").setValue(year5Total);
    }

    private void randomValues() {

        for (int i = 0; i < values.length; i++) {
            for (int j = 0; j < values.length; j++) {
                Random randomGenerator = new Random();
                values[i][j] = randomGenerator.nextInt((1000 - 10) + 1) + 10;
            }
        }

    }

Formatting

You can format the cells in numerous ways, I have chosen a simple currency format which is based on the locale.

NumberFormat format = NumberFormat.getCurrencyInstance();

        myGrid.setContainerDataSource(aContainer);

        myGrid.getColumn("Year 1").setRenderer(new NumberRenderer(format));
        myGrid.getColumn("Year 2").setRenderer(new NumberRenderer(format));
        myGrid.getColumn("Year 3").setRenderer(new NumberRenderer(format));
        myGrid.getColumn("Year 4").setRenderer(new NumberRenderer(format));
        myGrid.getColumn("Year 5").setRenderer(new NumberRenderer(format));

        layout.addComponent(myGrid);

        setContent(layout);

Listener

There is a Item Click Listener which detects mouse clicks on the cells. The example below just displays the value in the cell.

myGrid.addListener(new ItemClickListener() {

            @Override
            public void itemClick(ItemClickEvent event) {
                Notification.show("Value " + aContainer.getContainerProperty(event.getItemId(), event.getPropertyId()).getValue());

            }
        });

Conclusion

I think the Grid is a good start, but its lack of detailed features like a listener for Saving data makes it difficult to use outside a use case which just displays data.