Displaying charts in Vaadin Spreadsheet 1.2

Vaadin Spreadsheet was already a very capable component, but today it got a lot smarter. The simplest recipe for spreadsheet in your web application is still the same: add the spreadsheet component to your application layout and throw an Excel at it. Now, as an added bonus in version 1.2, if the Excel file contains charts, Vaadin Spreadsheet will display the charts nicely in a collapsible overlay on the sheet.

To take it into use, you only need a special vaadin-spreadsheet-charts package in your build. If you are using Maven, add the following in your pom.xml:

<dependency>
    <groupid>com.vaadin.addon</groupid>
    <artifactid>vaadin-spreadsheet</artifactid>
    <version>1.2.0</version>
</dependency>
<dependency>
    <groupid>com.vaadin.addon</groupid>
    <artifactid>vaadin-spreadsheet-charts</artifactid>
    <version>1.2.0</version>
</dependency>

Next you just compile your widgetset or use the new widgetset CDN and there you have it. This of course requires that you have an active license for both Vaadin Charts and Vaadin Spreadsheet – great news to all Pro Tools subscribers. Check out the spreadsheet integration demo at http://demo.vaadin.com/spreadsheet and remember that both Charts and Spreadsheet have free trial licenses available.

Red Hat Cool Store - a Vaadin powered solution

Vaadin powered front end solution for the Red Hat Cool Store demo project.

The Red Hat Cool Store has been one of the longest running demo projects of the many that I have put together. The initial release dates all the way back to April, 2013. It has gone through many evolutions on the JBoss middleware product side over the years, but I thought it would be a good time to look back at what the project is and how we got here with Vaadin powering the front end of the solution.

Ruling retail with JBoss BRMS

JBoss Business Rules Management System (BRMS) is an industry leading Open Source rules, events and planning solution. I have a lot of material around the introduction to JBoss BRMS and even online workshops where you can build the Cool Store application from scratch in a self paced tutorial.

The background of what the Cool Store demo project is showcasing is based on a need to showcase the JBoss BRMS features in action for our customers, partners and interested parties. This project showcases the use of business logic externalized from an application, so that updates to the business logic do not require a new build & deployment cycle for your application.

Added item highlights checkout button.

The business logic is created within JBoss BRMS in the following artifacts:

  • domain model in the form of data objects
  • business rules in various forms:
    • guided rules
    • technical rules
    • decision table
  • domain specific language (DSL)
  • ruleflow (process)

This is all fronted by an online web shopping cart application that leverages a RestAPI interfacing with the JBoss BRMS rules engine. The online web shopping cart application has been implemented using the Vaadin framework, but more on that in a minute.

Clear the shopping cart pop-up.

The workflow to be demonstrated is that you can design, build and deploy an application. After this you have JBoss BRMS with runtime access to your business logic, allowing your business owners to change that logic and having that logic picked up by the next user of your application.

Let's look at an example to review how this works. The CoolStore application leverages the JBoss BRMS rules to calculate the shipping costs based on your rules in the projects decision table. When you add items to the shopping cart as shown in the screenshots in this article, the various shipping tiers in the decision table will determine the price to be paid for shipping.

New checkout displays an order receipt.

Now, without re-deploying the web application, you can adjust how much the ranges are and what the shipping for the shopping cart total order will be by tweaking this table, for example:

  • the price from Tier 2 based on value totaling between $26 - $50 is $4.99
  • you can fill your cart with over $25 of materials to validate
  • edit decision table and adjust it to $6.99 
  • save changes
  • build & deploy your cool store project
  • clear the shopping cart application
  • re-order the same materials and validate the charge to shipping is now $6.99

This is all shown in a video which is included in the project documentation and based on the initial Vaadin release 1.0. This brings us to the best part of this story, how open collaboration brings out the best in all of us.

Vaadin powered front end solution

The Vaadin web application was put together using one of the original Vaadin releases and never updated over the ensuing years. That all changed on November 2015 when Matti Tahvonen, Vaadin's Marketing Manager, reached out and offered to collaborate on updating the online shopping cart application to showcase the newest versions of Vaadin.

Add item to new shopping cart.

We met online, chatted about the changes that they could help me with and I met AMahdy AbdElAziz, who forked the project to bring it up to the current version of Vaadin 7. This includes a few new UI features that we did not spend time on and a newer look and feel to the web application. It is amazing to see the changes between Vaadin 1.0 and the current versions. Here is an overview of what was done by AMahdy AbdElAziz (first in a five part series), but the best way to find out the differences is to try it for yourself.

 

Get started with Red Hat Cool Store

Getting started is pretty easy as the project is in the same template you are used to getting from my JBoss Demo Central projects, providing you with the 3-step setup you expect from us:

  1. clone the project.
  2. download the products (JBoss EAP + BRMS)
  3. run the init script for automated setup.

The updates have not stopped and AMahdy continues to keep the front end up to date with Vaadin releases. We have also pushed the entire project into the Cloud, so if you want to experiment with the containerized versions of this demo project, check out Red Hat Demo Central for more information. Keep your eyes on the project as it continues to evolve as a JBoss BRMS cornerstone in highlighting what you are able to achieve with rules, events, planning and an easy to use web framework like Vaadin.

JBoss BRMS Suite Cool Store Demo

Video Tutorials on Youtube

Videos are a great way to learn more about your favorite topic, they’re quick to watch and the best ones go straight to the point. If you haven’t followed Vaadin’s YouTube channel – now there’s all the more reason; besides webinars, we also publish shorter videos. This way you can spend less time learning and more time creating awesome user experiences for your users.

Vaadin Youtube Playlists

First off, Vaadin Framework’s starting tutorial is being made into a video series, which you can watch in its own playlist – here you’ll learn everything from setting up your environment to running your first app.

The popular Vaadin Elementary school series is also already 12 episodes long, teaching you everything from tweaking the Vaadin Grid component with Polymer to using Vaadin Combobox and Vaadin Fonts.

The Vaadin Charts playlist has a tutorial both for Angular 2, as well as for Vaadin Framework, Vaadin TestBench is filled with two videos teaching you how to record and run your tests and Vaadin Designer works as a perfect intro to building your UIs with the market’s best WYSIWYG editor.

Finally, if you haven’t seen the UX tips playlist yet, have a look at how to build highly usable apps with Vaadin, straight from our UX guys.