Over a million developers have joined DZone.

Simple Everyday Tips for Vaadin Developers (Part 5: Data Grid)

The final part of a five parts series about tips for Vaadin developers, this article shows a simple example of how to use Vaadin Grid.

· Java Zone

Navigate the Maze of the End-User Experience and pick up this APM Essential guide, brought to you in partnership with CA Technologies

This is the final part of a five parts series about tips for Vaadin developers. Here are all the series parts:

  1. Migrating From Vaadin 6 to Vaadin 7
  2. UI abstraction and using Vaadin CDI Add-on
  3. Styling Vaadin components and using Add-ons
  4. Data modeling in Vaadin
  5. Simple use case for Vaadin Grid

5. Simple Use Case for Vaadin Grid

So far the checkout button doesn’t do anything. We can toggle the availability of the button depending on items placed in the shopping cart. If it’s empty or cleared then it should be disabled; otherwise it should be enabled. I also designed a simple window that displays the final receipt when clicking on this button.

Related commit: Add checkout logic in ShoppingCartView

Vaadin Grid use case

There are plenty of examples on how to use Grid, but let’s take a use case today where we want to display the final checkout in a receipt format. We will be able to view the quantity of each selected item, as well as the total price, shipping, and promotions.

To start, let’s create a server-side component CheckoutWindow that extends Window. The receipt will be displayed as a window floating on top of the UI when the user clicks on the “Checkout” button. So we need to make some styling to make it in the center and taking all focus out of UI:

center();
setResizable(false);
setDraggable(false);
setModal(true);
setWidth(4 * UI.getCurrent().getWidth() / 5, UI.getCurrent().getWidthUnits());
setHeight(4 * UI.getCurrent().getHeight() / 5, UI.getCurrent().getHeightUnits());


The Window is another single component container; I made its content root as simple a Grid:

setContent(grid);


We want to customize the grid to show four columns ("Product Name", "Product Price", "Quantity", "Product Total"). And at the bottom we want to display the total amount, the total promotion, and the total shipping cost.

For the columns, although it can be straightforward to bind ShoppingCartItem with the table, “Product Total” will need extra calculations—that’s why I used GeneratedPropertyContainer. First let’s create container for our data source:

BeanItemContainer<ShoppingCartItem> container =
  new BeanItemContainer<ShoppingCartItem>(
    ShoppingCartItem.class, shoppingCart.getShoppingCartItemList());


Then create a GeneratedPropertyContainer:

GeneratedPropertyContainer gContainer = new GeneratedPropertyContainer(container);


And it will be easy to add custom property using the addGeneratedProperty method, for example to generate “Product Total” we multiply the price by the quantity:

gContainer.addGeneratedProperty(PROPERTY_PRODUCT_TOTAL,
    new PropertyValueGenerator<String>() {

  @Override
  public String getValue(Item item, Object itemId, Object propertyId) {
    ShoppingCartItem scItem = (ShoppingCartItem) itemId;
    return Formatter.formatPrice(
    scItem.getProduct().getPrice() * scItem.getQuantity());
  }

  @Override
  public Class<String> getType() {
    return String.class;
  }
});


Since we don’t want to display all the columns in the container, we can remove all the columns and re-add the desired ones in the needed order:

Grid grid = new Grid(gContainer);
grid.setColumns(PROPERTY_PRODUCT_NAME, PROPERTY_UNIT_PRICE,
  PROPERTY_QUANTITY, PROPERTY_PRODUCT_TOTAL);


For the footer part, the APIs are simple: we need to create a footer, append it to the grid, then merge cells according to design:

FooterRow gridFooter = grid.appendFooterRow();
gridFooter.join(PROPERTY_PRODUCT_NAME, PROPERTY_PRODUCT_PRICE,
  PROPERTY_QUANTITY).setText("Order Total:");


In the previous code we merged the first three columns to display a fixed text “Order Total:”, but in case we have external dependency, such as the sum of items (or sum of rows), we can define a specific cell as a member object to be able to calculate it from outside:

gridFooterTotal = gridFooter.getCell(PROPERTY_PRODUCT_TOTAL);
Related commit: Add grid to display checkout items and Add promotion rows in CheckoutWindow


It’s a wrap! Let’s go quickly over what we have done. Basically we started with some .pom file modifications to replace Vaadin 6 dependencies with Vaadin 7, then we fixed all incompatible APIs. We added the new CDI add-on, but this triggered the idea of abstracting the UI, injecting views separately in the main UI, and making the communication happen between the views through events.

Next, we explored the capabilities of styling Vaadin components with only Java code. We added icons and polished the UI, then added extra helper add-ons to make the UX even more awesome. We saw how creating a server-side component can be extremely easy, and we also saw the built-in tools that help binding data with UI components. Among those tools, we stumbled upon GeneratedPropertyContainer and BeanFieldGroup. And we added an extra window to display the final receipt, in a nicely formatted Grid component.

Do you have more thoughts to share about this experience? Do you have more tips for everyday Vaadining? I’ll be happy to hear from you in a comment below.

Thrive in the application economy with an APM model that is strategic. Be E.P.I.C. with CA APM.  Brought to you in partnership with CA Technologies.

Topics:
vaadin ,java ,cdi ,ui ,ux ,brms ,jboss

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}