Tuesday, January 31, 2012

Spring MVC 3.1 and JasperReports: Using iReport and AJAX (Part 1)

In this tutorial, we will study how to generate reports from a Spring MVC 3.1 application using JasperReports. We will use jQuery and jqGrid to provide AJAX support and an interactive table. To design the report, we will use iReport, an open source report designer for JasperReports. On the data layer, we'll utilize MySQL, Hibernate, and Spring Data JPA.

Table of Contents

Part 1: Introduction and Functional Specs
Part 2: Java classes
Part 3: Jasper layout with iReport
Part 4: HTML and jqGrid
Part 5: XML configuration
Part 6: Running the Application

Dependencies

  • Spring core 3.1.0.RELEASE
  • Spring Data JPA 1.1.0.M1
  • jQuery 1.6.4
  • jqGrid 4.3.1
  • Jasper Reports 4.5.0
  • See pom.xml for details

Github
To access the source code, please visit the project's Github repository (click here)

Functional Specs

Before we start, let's define our application's specs as follows:
  • Display reports in an interactive table
  • Downloadable reports in PDF and Excel formats
  • Use AJAX to avoid page refresh
  • Users have roles. They are either admin or regular (default)
  • A username is assumed to be unique

Here's our Use Case diagram:
[User]-(View)
[User]-(Download Pdf) 
[User]-(Download Excel)

Database

Our database contains two tables: user and role tables.


user and role table design

User table

The user table contains personal information of each user. Notice the password values are hashed using Md5.

user table

Role table

The role table contains role values of each user. We define a role value of 1 as an admin, while a role value of 2 as a regular user.

role table

Screenshots

Before we start with the actual development, let's preview how our application will look like. This is also a good way to clarify further the application's specs.

Entry page
The entry page is the primary page that users will see. It contains an interactive table where users can view and download records.
Entry page

Pdf document
This is the downloadable Pdf document whenever the user clicks on the Pdf button.
Report in Pdf format as previewed from Chrome

Excel document
This is the downloadable Excel document whenever the user clicks on the Excel button. When using Excel format, the document's appearance varies depending on the application, i.e Microsoft Excel, Google Docs, Open Office.
Report in Excel format as previewed from Google Docs

Progress dialog
When a user clicks on any of the download buttons (Pdf or Excel), a progress dialog will appear and disappears once the download starts.
Progress alert


Next

In the next section, we will discuss the project's structure and write the Java classes. Click here to proceed.
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Spring MVC 3.1 and JasperReports: Using iReport and AJAX (Part 1) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share

Posted by Mark Serrano at 10:52 PM

27 comments:

  1. GauravFebruary 1, 2012 at 1:18 PM

    Hello Marks
    you are great, I appreciate you work , you explained so well that anyone can understand
    keep it up
    Hats off to you!!!
    Thanks

    ReplyDelete
  2. AnonymousMarch 6, 2012 at 1:46 PM

    SAM

    Hi Krams, This is a great great tutorial...thanks for your time and effort. really helpful and very much easy to understand from the beginning. i took ur source code sample and set it up on my local. it was awesome. thanks a lot and appreciate your effort.

    keep up the good work..

    Thanks,
    Sam

    ReplyDelete
  3. Mark SerranoMarch 6, 2012 at 4:58 PM

    @Sam, you're welcome.

    ReplyDelete
  4. AnonymousMarch 8, 2012 at 10:37 AM

    Hi Krams,

    I just tried to open that pdf file in a popup window. it works perfectly for google chrome but not for IE. i changed the javascript code as follows.
    // Start download
    //window.location = '${downloadUrl}'+'?token='+token+'&type='+type;
    var url = '${downloadUrl}'+'?token='+token+'&type='+type;
    window.showModalDialog(url);

    also i asked this question in stack overflow as well. can you please let me know is there any additional parameters that i need to set from the serverside?

    Thanks in advance.

    Regards,
    Sam.

    ReplyDelete
  5. Mark SerranoMarch 8, 2012 at 2:00 PM

    @Sam, honestly I have not tested this application with IE. I only tested it with Google and Firefox (both in Ubuntu and Windows 7). The best advice I could provide is have a JavaScript that will detect whether your user is using IE or a different browser. I'm sure there are already js libraries there that this for you. Maybe try Modernizr (http://www.modernizr.com/)?

    I don't think the issue is with the server side. If it does, then it must be the HTTP headers. But I'll put my bet that this is more a browser issue.

    ReplyDelete
  6. samithaMarch 24, 2012 at 1:43 PM

    @Krams - i tried to use your logging technique with 'CustomizableTraceInterceptor' with spring DM OSGI (Eclipse Virgo) server. but it wont print to the log. are there any specific way to doing it with respect to the OSGI ?

    ReplyDelete
    Replies
    1. Mark SerranoMarch 25, 2012 at 5:48 PM

      samitha, I am sorry but I haven't tried that CustomizableTraceInterceptor with Virgo. I'm not sure if it's supported. Take a look at the following discussion:

      http://www.eclipse.org/forums/index.php/t/303958/ and http://www.eclipse.org/forums/index.php/m/768584/

      Delete
    2. samithaMarch 26, 2012 at 1:30 AM

      @Krams - Thanks a lot for the postings..yes it seems some thing wrong with AOP weaving when it comes to OSGI.earlier i had issues with CGLIB and related bundles.i was able to solve those but it seems pointcut is not executing...Thanks a lot your effort krams.....Thanks..

      Delete
  7. dileep mauryaMay 12, 2012 at 2:12 PM

    i am not getting source code of this project would you please share the link to download please

    ReplyDelete
  8. AnonymousMay 29, 2012 at 6:24 PM

    Thanks for great tutorials.
    I have downloaded the source code and run it. It throw error due to repository for maven-copy-plugin have been changed. So if you meet the issue with maven-copy-plugin when building app, please update the pom.xml with following content:


    evgeny-goldin.org
    Evgeny Goldin Repository
    http://evgenyg.artifactoryonline.com/evgenyg/repo


    Thanks,
    Luan Vo

    ReplyDelete
    Replies
    1. Mark SerranoAugust 12, 2012 at 6:29 PM

      Please see my post about the new issues and fix for this plugin http://krams915.blogspot.com/2012/08/copy-maven-plugin-updates.html

      Delete
  9. David GofmanJuly 10, 2012 at 2:35 PM

    Didn't work for me I am using


    evgeny-goldin.org
    Evgeny Goldin Repository
    http://repository.opencastproject.org/nexus/content/repositories/evgeny-goldin/

    ReplyDelete
    Replies
    1. Mark SerranoAugust 12, 2012 at 6:29 PM

      Please see my post about the new issues and fix for this plugin http://krams915.blogspot.com/2012/08/copy-maven-plugin-updates.html

      Delete
  10. PradeepJuly 22, 2012 at 9:29 PM

    please change your pom evgeny-goldin plugin, the artifact is changed, i changed to this


    evgeny-goldin.org
    Evgeny Goldin Repository
    http://evgenyg.artifactoryonline.com/evgenyg/repo/

    ReplyDelete
    Replies
    1. Mark SerranoAugust 12, 2012 at 6:29 PM

      Please see my post about the new issues and fix for this plugin http://krams915.blogspot.com/2012/08/copy-maven-plugin-updates.html

      Delete
  11. W@ngOctober 3, 2012 at 3:19 PM

    thank you for your beautiful tutorial..

    i was following you tutorial in my college project to produce report using jasper report..and i am using spring 3 with hibernate and now i need to integrate to jasper report but i was unable to do that..

    in your tutorial you are using maven but i'm already using ant for build my project...
    can you tell me how to do this compiling stuffs of jrxml file with ant and use it with spring...this will be very helpful for me..also ireport has compiling feature on itself..so does .jasper produce my ireport can be used in project and how....

    please share your valuable knowledge

    thank your...

    ReplyDelete
  12. viramJanuary 4, 2013 at 2:25 PM

    I want to get Word report using jasper report in Spring MVC.can anyone help me.

    ReplyDelete
    Replies
    1. Mark SerranoJanuary 6, 2013 at 3:18 PM

      I think you'll need a library similar to Apache POI.

      Delete
  13. UnknownApril 11, 2013 at 5:33 AM

    Hi. Thank you very much for your blog. I have a similar request for a progress bar to be shown while jasper report being generated. Is it possible to show a progress bar with percentage amounts very similar to the one Windows Explorer uses, when copying files across, i.e. the green bar.

    ReplyDelete
    Replies
    1. Mark SerranoApril 18, 2013 at 12:20 AM

      This would be probably tricky. Maybe you can write an AJAX service that polls the backend if a download complete token is existing. Check one of my articles with FileUpload. I believe I have a strategy similar to that.

      Delete
  14. Rajesh GhewareMay 21, 2013 at 2:25 AM

    Nice article! This is what I was looking for :)

    Rajesh Gheware
    http://rajeshg.info

    ReplyDelete
  15. sasukeJune 20, 2014 at 3:50 PM

    how to use bar code in jasper reports in java

    ReplyDelete
  16. UnknownAugust 30, 2015 at 7:34 PM

    Kindly share these files custom.js,ui.jqgrid-4.3.1.css and style.css ,Because i am not able to download it

    ReplyDelete
  17. UnknownAugust 30, 2015 at 8:48 PM

    Kindly share these files custom.js,ui.jqgrid-4.3.1.css and style.css ,Because i am not able to download it

    ReplyDelete
  18. navyaNovember 22, 2016 at 2:36 PM

    I have read your blog its very attractive and impressive. I like it your blog.

    Spring online training Spring online training Spring Hibernate online training Spring Hibernate online training Java online training

    spring training in chennai spring hibernate training in chennai

    ReplyDelete
  19. WatsonOctober 23, 2020 at 7:20 PM

    Internet Business Ideas for 2020

    ReplyDelete

Subscribe to: Post Comments (Atom)