Vaadin 7 + Spring 3 + JPA project summary and lessons learned

This blogpost is a short summary of the Vaadin 7.0 project I did last year, including tools used, lessons learned and a bunch of screenshots to show the results.

Tools used

• Spring 3.2 including annotation based configuration, Spring Task*Executor framework
• JPA2 with Hibernate 4.2 + JPA modelgen, including Envers for auditing
• JMS 2
• Vaadin 7.0.1
• JAXB 2.1
• Spring WS 2.1
• Shiro 1.2
• JUnit 4.8
• Mockito
• Eclipse 3.7
• SOAP + SoapUI
• MySql 5.5 + H2
• Tomcat 7
• Jenkins
• Fisheye/Crucible
• Sonar
• Subversion
• Maven 3
• Java 6

Lessons learned

• Don't only trust SoapUI of being able to validate your WSDL. Also try to generate stubs with Axis2 and JAXWS generators. *AND* actually make sure you can make a call to the webservice, because on our project it did work perfectly fine in SoapUI, but not in Axis nor JAXWS. Example: soap fault in operation but not in porttype defined. It required the project to defining one or more xyz.jaxb files for JAX-WS  (using .episodes dit not work for us). Then use these in the wsimport etc. Related links: Compiling multiple WSDLs that share a common schema and Customizing Java Packages.
• If sources not found of e.g junit-4.11 (junit.org is also giving a lot of 404s), then run mvn clean dependency:sources, that will download the sources too into the .m2 repo.
• Try to keep the WSDL and XSD as semantic as possible, so use Strings instead of IDs for for example lookup /reference values like: started, finished. Makes the interface much more readable and understandable by just looking at it.
• count(case ...) is NOT supported by Hibernate criteria API, when using it it gives: java.lang.IllegalArgumentException: org.hibernate.hql.internal.ast.QuerySyntaxException: unexpected token: case near line 1, column 92 [...  Use sum(case) since that is supported.
  
  So instead of:
  
  cb.count(cb.selectCase().when(cb.equal(workOrder.get(WorkOrder_.priority), 1), workOrder.get(WorkOrder_.priority)).otherwise(0)),
  Use:
  
  cb.sum(cb.selectCase().when(cb.equal(workOrder.get(WorkOrder_.priority), 1), 1).otherwise(0)) 
  
  SQL equivalent:
  
  Instead of:
  
  COUNT(CASE WHEN priority = 1 THEN priority ELSE NULL END) AS prio1,
  
  Use:
  
  SUM(CASE WHEN priority = 1 THEN 1 ELSE 0 END) AS prio1,
  
  Links about this:
  
  https://forum.hibernate.org/viewtopic.php?f=1&t=992497
  https://forum.hibernate.org/viewtopic.php?p=2393060
  http://stackoverflow.com/questions/11011151/jpa-criteria-query-order-by-enum-values
  Sums replacement for count
  JPA 2.0 spec including 'case expressions' and this one and this one.
  http://stackoverflow.com/questions/775787/plsql-get-sum-for-each-day-of-week-and-total-sum-for-week-in-a-single-query
• When trying to upgrade from Vaadin from version 7.0.1 to 7.0.4 by updating the version number in the pom.xml, a serial UID problem occurred when generating the widgetset for this new version:
  
  [INFO]  at com.google.gwt.dev.Compiler.main(Compiler.java:177)
  [INFO] Caused by: java.io.InvalidClassException: com.google.gwt.dev.jjs.ast.JMethod; local class incompatible: stream classdesc serialVersionUID = 5017484276333252513, local class serialVersionUID = 9103713597467037978
  Tried it then with 7.0.2, that one worked fine! 7.0.3 gave the same error. This post talks about maybe the GWT cache being the problem. So I deleted the directory (even though the timestamp on that directory was recent!) and that worked. In my case the directory to delete was:
  
  D:\workspace\xyz\frontend\app-web\src\main\webapp\VAADIN\gwt-unitCache 

The application

Below you can find a bunch of screenshots of the resulting application Planning Optimizer or ePOp.

This is its official website where you can get it, including a promotion video on what its functionality entails and a video explaining its features.

The login screen, authentication via Shiro with a custom Realm that does a SOAP call to the backend:

The dashboard so the planner can immediately see the status + what needs attention first:

The Vaadin Charts 90 days look ahead graph shows the status for the coming 90 days. Clicking on a bar shows the orders at the bottom table for that day. A similar 12 weeks graph is available on another tab:

Different ways of looking at the status exist, for example these week-based graphs, the first one based on craft, the second one on priority:

Notice in the above graph the multiple y-axis: the bars are for the left y-axis, the lines for the right y-axis.

And other filters:

When clicking on a row in the bottom table, details for that order can be filled in:

Links (from a whitelist) and documents can be attached too (including drag 'n drop), and in the end a PDF can be generated with all the info (including the attachments + where the links are pointing to!) included:

Vaadin Charts add-on showing custom properties in tooltip hover

Recently I had to investigate if it is possible to show other data than the X and Y value when hovering over a stacked bar graph in the Vaadin Charts add-on. And yes it is possible!
Nowhere I could find an example on how to do this, so that's why I wrote this blogpost. Hope it helps some people :)

Setup:
- Vaadin 7.0.1
- Charts add-on 1.0.1. In version 1.0.0 you can't set the color of the stacked bars using PlotOptions and ContainerDataSeries. This version has a fix for that.
- Note: I had to manually modify some labels of the hover in the screenshot since I can't use the real data used in the project. Same goes for the code, did not check if it still compiles. Let me know if something essential is missing :) Oh yeah and this is all demo-code so no quality complaints please....

Goal:
- Be able to add a custom field to the hover. And even better: be able to add an array to the hover tooltip.

Here's a screenshot of what the goal was. Click on it for a larger image:

The code:
Notice the Grapes ok: 7 Total: 16 in the hover text. These are the standard x and y values you can show easily via:

Tooltip tooltip = new Tooltip();         tooltip.setFormatter("function() { return ''+ this.x +'"+ " '+ this.series.name +': '+ this.y  +' '+'Total: '+ this.point.stackTotal;}");         conf2.setTooltip(tooltip);

But also note the extra this.point.custom = 708. That's an example of adding a custom value. The tooltip code then looks like:

tooltip.setFormatter("function() {"return ''+ this.x +'"+ " '+this.series.name +': '+ this.y +' '+ 'Total: '+ this.point.stackTotal + ' this.point.custom = ' + this.point.custom + "''"

And then below that line you see a set of table-like data: Quality 1: 2 Stored: 3 Interesting: 4. This is the data that comes from three arrays. The tooltip code then looks like this:

tooltip.setFormatter("function() { var qualityValuesArray = JSON.parse(this.point.qualities); " + "var storedValuesArray = JSON.parse(this.point.stored); " + "var interestingValuesArray = JSON.parse(this.point.interesting); " + "return ''+ this.x +'"+ " '+this.series.name +': '+ this.y +' '+ 'Total: '+ this.point.stackTotal + ' this.point.custom = ' + this.point.custom + " + "' Quality 1: ' + qualityValuesArray[0] + " + "'Stored: ' + storedValuesArray[0] + " + "'Interesting: ' + interestingValuesArray[0] + " + "' Quality 2: ' + qualityValuesArray[1] + " + "'Stored: ' + storedValuesArray[1] + " + "'Interesting: ' + interestingValuesArray[1] + " + "' Quality 3: ' + qualityValuesArray[2] + " + "'Stored: ' + storedValuesArray[2] + " + "'Interesting: ' + interestingValuesArray[2] + " + "' Quality 4: ' + qualityValuesArray[3] + " + "'Stored: ' + storedValuesArray[3] + " + "'Interesting: ' + interestingValuesArray[3] + " + "' Quality 5: ' + qualityValuesArray[4] + " + "'Stored: ' + storedValuesArray[4] + " + "'Interesting: ' + interestingValuesArray[4] + " + "' Quality 6: ' + qualityValuesArray[5] + " + "'Stored: ' + storedValuesArray[5] + " + "'Interesting: ' + interestingValuesArray[5] + " + "' Quality 7: ' + qualityValuesArray[6] + " + "'Stored: ' + storedValuesArray[6] + " + "'Interesting: ' + interestingValuesArray[6] + " + "' Quality 8: ' + qualityValuesArray[7] + " + "'Stored: ' + storedValuesArray[7] + " + "'Interesting: ' + interestingValuesArray[7] + " + "'.';}");

The span can also be replaced by a HTML b tag of course.

Too bad you can't use the setHTML() for better formatting, like putting in a HTML table tag. This is a known issue, see here.

Essential in constructing the data is to use the BeanItemContainer, ContainerDataSeries and the addAttributeToPropertyIdMapping() in which you can put custom class (bean) OrderChartItem:

/** * Class with custom value and 3 arrays to be displayed in tooltip */ public class OrderChartItem { private static final int NR_QUALITIES = 8; private final String name; private final int x; private final Number y; private final int someValue; private final Number[] quality = new Number[NR_QUALITIES]; private final Number[] stored = new Number[NR_QUALITIES]; private final Number[] interesting = new Number[NR_QUALITIES]; public OrderChartItem(String name, int x, Number y, int someValue) { this.name = name; this.x = x; this.y = y; this.someValue = someValue; for (int i = 0; i < NR_QUALITIES; i++) { quality[i] = i + 2; stored[i] = i + 3; interesting[i] = i + 4; } } public String getName() { return name; } public int getX() { return x; } public Number getY() { return y; } public int getSomeValue() { return someValue; } public List getQualities() { return java.util.Arrays.asList(quality); } public List getStored() { return java.util.Arrays.asList(stored); } public List getInteresting() { return java.util.Arrays.asList(interesting); } }

I made the arrays the same size because of its table data, but that doesn't have to be of course.

The basic mechanism is:

1. Set up a BeanItemContainer with values of OrderChartItem. Take special care when putting in 0 values. The graph then shows the number 0. To avoid that, put in 'null' as a value.
   
   

   BeanItemContainer containerGood = new BeanItemContainer(OrderChartItem.class); containerGood.addBean(new OrderChartItem("some name good", 1, null, 701));

   
    So the OrderChartItem has the properties that can be reached from the tooltip Javascript. Note the OrderChartItem just gets some name, later it is overwritten by setting the ContainerDataSeries names:
   
   

   seriesGood.setName("good");



2. Then wrap each BeanItemContainer in a ContainerDataSeries:
   
   

   ContainerDataSeries seriesGood = new ContainerDataSeries(containerGood);

3. Then add the custom properties for each container. First the one value:
   
   

   seriesGood.addAttributeToPropertyIdMapping("custom", "someValue");

   Then the arrays:

   seriesGood.addAttributeToPropertyIdMapping("qualities", "qualities");

4. And add the series to the configuration:
   
   

   conf2.addSeries(seriesGood);

In summary: the OrderChartItem is used as data-provider by adding them to the ContainerDataSeries. The properties-mappings of the custom OrderChartItem are then added to the series, after which they are accessible in the tooltip Javascript. Note the "trick" of using JSON.parse() in the formatter and the List getQualities() to get the arrays in the correct format.

Full source code can be found here.

The widgetsets directory has been cleared out because of distribution issues.