Community Spotlight - July 2016

It’s time for another chapter of the Community Spotlight! And for this month’s edition, I had the opportunity to have a nice chat with Marco Collovati, winner of the IBM/Vaadin Challenge, author of the Spinkit Add-on for Vaadin, and active member of the Vaadin Community. Marco lives in Udine, a town in northeast Italy, and works for Techfriuli as a Senior Developer. He enjoys learning new software technologies and languages, likes reading books about archeology and history, and dedicates most of his spare time to his wife and daughter.

Hello Marco, thanks for accepting the invitation. Nice job with the add-on. I really liked the demo app. When did you start working on it and how did you come up with the idea?

Hi Alejandro, thank you for the invitation. I started working on it during the last Vaadin Challenge. I came across the Spinkit CSS library because I needed a loading screen for an application. So, I found the PleaseWait JavaScript library that uses Spinkit. I first used it on a non-Vaadin application. It was an HTML5 application hosted on a Xerox printer. After that I created the add-on and used it during the Vaadin challenge, and also in some other small Vaadin apps.

Hosted on a printer. Sounds cool! What was the purpose of the HTML application?

We developed two applications.The goal of the first one was to show advertising where the printer is idle. We use Magnolia CMS as backend to let customers load advertising images.

Magnolia! They use Vaadin as well.

Yes, they rewrote the UI completely with Vaadin on version 5. The second app was used for customer support. From the printer, users can send help requests by filling a form. The app also sends the printing counter to the server, used for billing purposes. The printer has a WebKit based browser with some functionality blocked (like audio).

Interesting. So... after that you decided to implement the add-on. Apparently you had some experience with Vaadin before implementing the add-on, right?

Yes, I used Vaadin 6 in the past to build some portlets on Liferay. After that, I built some applications inside Magnolia using Vaadin 7. They were small apps that integrate external data sources within Magnolia, for example simple CRUD views for legacy app databases and some sort of geolocation on top of the Vaadin Leaflet addon. Recently, we also built a UI to integrate a RFID reader. The app is connected to the RFID reader and when a tag is read and the associated information is fetched from JCR and displayed on the screen, if the tag is not recognized, the user follows a wizard to register data related to the tag.

Sounds like an interesting project. So, how did you find the experience of creating a Vaadin add-on?

Creating the add-on was easy. Vaadin documentation is very good and there are tons of other material that are very helpful (for example the blog and the wiki). I like AbstractJavascriptComponent and AbstractJavascriptExtension very much. They make integrating JavaScript libraries very easy

Yes, those are good options when implementing Vaadin client side components. Do you have any tip or advice for developers trying to implement their own add-ons or widgets?

I think the better way to learn something new is taking a look at existent code. So, downloading source code from other add-ons and studying them is my preferred way to start. Another useful thing is to use mvn vaadin:run-codeserver. Sometimes debugging connectors with console.log is not enough, if you know what I mean!

Totally agree! Well, thanks for sharing your thoughts with the community. Is there anything else you would like to add?

I’d like to thank the whole Vaadin team for your great work.

Thank you Marco and best wishes in your future projects!

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