Announcement Announcement Module
Collapse
No announcement yet.
"progress bar" in Spring web app Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • "progress bar" in Spring web app

    hi all,

    for our next web app, we'll have quite a few search pages which we
    anticipate will take a long time to complete. We'd like to have a
    "progress" page to inform the user that their request is being
    processed before the search results are returned, something similar to
    the Travelocity or Expedia flight search. can anyone shred some lights
    on how we may best accomplish this? any resources or examples are
    welcomed. thanks.

    s o

  • #2
    You could try <meta http-equiv="refresh" content="20"> in the <head> of your HTML doc, which will reload the current page every 20 seconds.

    Using JSP or whatever, you could conditionally make this appear, i.e. stop refreshing once the job is done.

    There are variations on this as well where you can redirect after a number of seconds.

    Alternatively, there is probably some AJAX/timer based solution which may not involve page refreshes but the meta refresh tag may be the simplest to get going.

    Comment


    • #3
      Originally posted by gmatthews
      You could try <meta http-equiv="refresh" content="20"> in the <head> of your HTML doc, which will reload the current page every 20 seconds.

      Using JSP or whatever, you could conditionally make this appear, i.e. stop refreshing once the job is done.

      There are variations on this as well where you can redirect after a number of seconds.

      Alternatively, there is probably some AJAX/timer based solution which may not involve page refreshes but the meta refresh tag may be the simplest to get going.
      In this case, I'm assuming I wouldn't be taking the usual spring mvc route in which controller forwards the query result to the JSP. Instead, when the user submits the query, it'd immediately go to a JSP page having the refresh or ajax logic and that JSP also dispatch calls the query component. Am I correct in that assumption?

      Comment


      • #4
        I guess there are probably a few ways to do it, but yes, would think that the flow through pages could be:

        enter-query.htm --> show-progress.htm -> show-result.htm

        Comment


        • #5
          spinner.gif

          Alternatively you can use a invisible animated spinner.gif.
          When you post the search form you can show spinner.gif
          and when new page loaded spinner.gif disappear again.

          Comment


          • #6
            Progress Bar

            To answer your initial question, there's no "spring" way to do this, so you pretty much have to go the JSP route (of which there are a bunch of options). For progress and percent bars, I use a JSP script from http://scriptasylum.com. It works pretty well.

            As a side, I've recently come to the conclusion that a search is not a form "post" but a "get" because you're usually just grabbing information from the database. With this in mind, I have my controller pass by a current search value as part of the model in showForm and then have my jsp file update the progress bar according to that value.

            Hope that helps!
            BPMWare

            Comment


            • #7
              Fancy Progress Bar with DWR Ajax

              I have just recently implemented this functionality in one of my projects using DWR 1.1.1 with Spring 1.2.8 to get a fairly nice progress bar without doing page reloads. I began by generating gif images for the progress bar at 10% increments with Photoshop named 'ProgressBar0.jpg, ProgressBar10.jpg, ..., ProgressBar100.jpg'. I then wrote a quick javascript preloader to cache the images in the browser, along with a function to swap out the image in the img element, as follows:

              Code:
              // Progress Bar
              imageLibrary["ProgressBar0"] = new Image(300,100);
              imageLibrary["ProgressBar0"].src = "images/ProgressBar0.jpg";
              
              imageLibrary["ProgressBar10"] = new Image(300,100);
              imageLibrary["ProgressBar10"].src = "images/ProgressBar10.jpg";
              
              ...
              
              imageLibrary["ProgressBar100"] = new Image(300,100);
              imageLibrary["ProgressBar100"].src = "images/ProgressBar100.jpg";
              
              function loadImage(element,image) {
              	element.src = imageLibrary[image].src;
              }
              After setting up DWR (instructions can be found at the DWR homepage ), create a controller (in my case a subclass of AbstractController) to return the view that displays the progress bar and loading information. You must then include a script in your loader view to poll your server-side java object for its status, and update the progress bar image accordingly. There are two ways to do this (off the top of my head):
              1. Let the class you are calling from DWR kick-start the operation whose progress you want to monitor in segments and update the progress bar for each segment.
              2. Add a progress property to the Java class that is updated during the operation and have DWR poll the value of that property.

              For my implementation (which is loading / parsing data) the first approach made much more sense. So in my loader view I include a dataLoader.js file that makes sequential calls methods in the form of loadDataSegmentOne(), loadDataSegmentTwo(), etc. Since DWR is asynchronous, you must pass a callback function to the loadDataSegment*() method which updates the progress bar and calls the next loadDataSegment*() method. The last callback in the series can then redirect to the result URL by using the javascript
              Code:
              location.href = targetUrl
              .

              This method has worked very well so far, and it avoids the overhead incurred by the meta refresh tag. Hope this helps.

              Comment


              • #8
                It is possible to use javascript to update a progress bar and flush the HttpServletResonse during the process. Each flush flushes a javascript command to update the progressbar. After the request is finished the response is closed and the screen is updated with 100%.

                Martijn de Bruijn

                Comment


                • #9
                  I also found this solution:
                  http://abambenjamin.blogspot.mx/2012...ar-spring.html

                  Comment

                  Working...
                  X