Do you reuse JDBC connections? Then be aware.

Sometimes we want to reuse a JDBC connection because the time taken to create a new one can be too big. This is the case we use inside NextReports Designer . Someone connects to a data source and then he can:

• see tables, views, procedures
• see columns information 
• make some validations
• create and run queries, reports and charts

Because the same connection is reused time after time, it is not closed unless we disconnect from the data source.

If we make many operations on that data source, after some time we can see an error raised like "too many open cursors" . Any database has a property OPEN_CURSORS which specifies the maximum number of open cursors. If this is reached, the error is raised.

In NextReports Designer, this was seen when a chart per record was used inside a report in detail band and after some hundreds of records the charts where not generated anymore because the exception was raised.

When a connection is closed, all the cursors are also closed. But in our case we reuse the connection and no close is done. So how to close the open cursors in JDBC?

The answer resides in calling commit() on our connection. We must take care if autocommit is true. If it is true, calling commit() will raise an exception  so this commit() must be called only in cases when autocommit is false.

Windows Outlook knocks out Eclipse

I was working on some project inside Eclipse. Suddenly I saw an error on Eclipse project and no clean or rebuild worked anymore. Inspecting the error I saw that my output build folder cannot be deleted because is used by other application.

I closed Eclipse and I tried to delete the folder manually, but Windows could not delete it either. I opened in windows resmon.exe and inside CPU tab / Associated Handles I searched for folder path.
I found an entry with an OUTLOOK handle to that path. Why? Just because I sent a mail with a file from that path.

Evil OUTLOOK is so buggy!

An awkward case of browser scroll

Context 

NextReports Server contains a dashboard were a set of widgets like tables, charts and  many others can be shown. Tables can contain sometimes a lot of data and a pagination & a scroll bar is used in such cases. If many widgets are inside a dashboard, then a browser scroll will be visible.


Problem

A table with pagination & scroll bar will make the entire browser to have a scroll even if there is no need of it. This scroll bar height is as if the table widget is fully rendered with no scroll at all.

 The dashboard should look instead as the following:

Investigation

Looking with firebug inspection to html & css a div element is seen: 

<div style="position: absolute; left: -9999px; width: 1px; height: 1px;">
  <input id="ide19focus" type="hidden" value="" name="ide19focus">
  <input type="submit">
</div>

This is not created by developers. Because Wicket framework is used, this html code is added by Pagination Navigator and it represents a non visible submit button used by navigation links. By commenting css attributes of this div style it can be seen the normal functionality.


Solution

The entire widget is contained inside a div with a class like: 

<div class="tableWidgetView">

 To make our entire dashboard look ok, tableWidgetView class must contain in addition a single css attribute:  

          position: relative;  

That's why because the problematic div (found inside tableWidgetView div) has an absolute position which is referring its parent. Simple solution, but hard to find.

Competition: Creating an application just for fun

When you're a developer and you like what you are doing, at some moment in time you will create something just for fun.

In 2012 I found myself in such a situation. I was playing with my friends to guess scores from Premier League. Till that time we kept an excel file with all the users, their scores and we had a special column to compute a total for all games in a stage (1 point for guessed prognostic and 3 points for exactly guessed score). That file was kept by one of us, sent by mail to all to complete scores, then sent back, and the admin user was updating the main file and so on. This process became soon a pain.

I started to create a web application to make it easier for all of us. Having an online web application with user security where users log and complete scores, then every computation is automatically done, was the right thing to do.

I did not want just a simple competition, like our Premier League. So I thought at it in a general manner. Administrator should be able to create a competition with a number of teams, stages and games, then a number of users will be registered to it. When a stage is approaching, users that did not complete it will be notified by mail to do so. In the day of the stage, application will inquire a site for live scores and, when finish, the scores will be automatically saved and a process of points computation will be run.

I chose as user scoring a simple algorithm to give 1 point for guessed prognostic, 3 points for guessed score when were at most 3 goals, n points for guessed score were n > 3 was the number of goals. This decision brings benefit to those that will guess a 2-2, 3-2 , or any score with more than 3 goals. To make it even more interesting, I created a section of questions for a competition. If user guesses a response he will be rewarded with 3 points. In time, another feature was added: a playoff. A competition can have a playoff phase. Starting from a defined stage, users will compete one against other and the user with a bigger scoring in that stage will advance to next round. The winner of the playoff will get a bonus of 10 points.

Using Java, Wicket and Spring I started to make this application happen. Spring Security helped to achieve users login/logout feature. When users are not logged , they can only see the real scores, but cannot see any data related to a user. When users are logged, they can see their scores, and after the stage started, they can see others scores.

Main screen is just a list of competitions (with Top3 aside) which by default shows only 4 of them. To look for other competitions, a search feature is used.

For small window sizes (like on mobile phones) the main screen is adjusted accordingly:

Admin user will be the only one that will see a toolbar inside main screen. From here, he can create users, competitions, teams, stages, games, questions. Also, admin can manually run the computation process , can reset top trends, can import a competition from a text file and can see the logins history.

By clicking a competition, a new screen will show all data for that competition:

At top, an auto-scroll banner will show the scores for last stage. User can see any stage from that competition and can enter scores for any stage that did not start yet. When the scores are automatically entered and after the computation process, user will see the number of points gained for every game and a total for that stage. User can also see how all other users performed. A Top section will show the total points for that competition with trend arrows (who climbed, who went down). There are a lot of other sections like the top of the real teams from that competition, the playoff, a rss feed to find news about that competition, statistics, graphics, questions.

Inside Statistics section, a general report for entire competition can be generated for every user. User can also see who was his lucky team because it brought him the most points. Also average points per stage top and the best stage scoring can be seen here:

Graphics can show user points evolution and some "awards" like who is the luckiest, who is the best at home games, who is the best at away games and who is the best at draw games.

All reports and charts were created and run using NextReports . I also made the code available on github.

There are more than 3 years from it's inception and many editions of Premier League, UEFA Champions League, World Cup, European Championship were finished. Competition fulfilled our needs: very easy to manage, to enter scores, notifications, auto computation processes. At the end all we need to do is to buy a cup for the winner and to celebrate him. Hurray!

Capture HTML elements to PDF

Capture HTML elements to a PDF file is an interesting feature some projects may need. My need was to capture a dashboard full of widgets.

For this I used two javascript libraries:
- html2canvas which is able to capture DOM elements as images
- jspdf which is able to create PDF documents in javascript

The ideea behind can be resumed to a small code snippet:

var doc = new jsPDF('l', 'mm'); 

html2canvas($(elementId), {
          onrendered: function(canvas) {         
              var imgData = canvas.toDataURL('image/png'); 
              ....
              doc.addImage(imgData, 'PNG', x, y);
              ...
              doc.save('dashboard.pdf');
           }
}

We can search for the DOM element with a specific id, capture it as a png image and add it to a landscape PDF file, in this case with a unit measure in mm.

I added this feature to NextReports Charts library with an example in main-test.html.

Here I tested for creating a pdf file with the full dashboard on a landscape page and for creating a pdf file with every widget on a different page.

In first case I do the following:

            var list = $('#dashboard');
            var pdfSettings = new Object();
            pdfSettings.doc = doc;
            pdfSettings.elements = list;
            pdfSettings.title = "NextReports Dashboard";
            capturePdf(pdfSettings);

This will create a nice PDF page:

In second case I look for all canvas elements in my HTML:

            var list = $('canvas[id^="canvas"]');           
            var pdfSettings = new Object();
            pdfSettings.doc = doc;
            pdfSettings.elements = list;
            pdfSettings.position = 1;
            pdfSettings.title = "NextReports Dashboard";
            pdfSettings.showFooter = true;    
            capturePdf(pdfSettings); 

By default a footer message will show the current page:

Footer message can be modified by:

pdfSettings.footerText = "Generated by NextReports"; 

We need to specify the position as 1 because the method is recursive and position is incremented for every new page.

This solution has a drawback. html2canvas library can take a snapshot of what is visible, if there is a scroll involved and some components are not visible, they will not be captured. NextReports Server uses this pdf capture for dashboard elements. To make an entire dashboard visible inside PDF capture, users can play with application and browser features:

- NextReports Server has buttons to hide some components like dashboards explorer
- Browser F11 button makes it to be visible in full screen
- CTRL+mouse wheel will allow to zoom-in/zoom-out the browser content

Using such tricks we may be able to make our dashboard to fit the visible area and PDF capture to look good.