• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 329
  • Last Modified:

How to install a progress bar on a Servlet

Here is the scenario.

I have a servlet. This servlet produces the presentation GUI interface that runs on a browser.
This interface contains several inputs where the user is allowed to input some data. At the
click of a button, from my servlet, I call a java class that does some (bit time consuming)
process. What I want is, while the processing is being done by the behind teh scene java class,
I want to show the user a progress bar or something similar, so that the user would know something
is going on. How would I do this?.

-prain
0
prain
Asked:
prain
  • 2
  • 2
  • 2
  • +1
1 Solution
 
radarshCommented:
Hi prain,

There are two ways to do this.

First
=====
This is a dummy progress bar and will not show a realistic status of the event
happening on the background. What you do is, display an animated gif on the page
until the response is returned from the servlet.

Second
======
This is bit difficult to code and is highly realistic. In this approach,
you use AJAX to periodically check the status of the background process.
You can have some status area on the servlet which will be updated by the
background process. The AJAX hit checks this status and reports on the UI.
AJAX being asynchronous, the page won't be refreshed/reloaded. The server
hit happens in the background.

If that's not clear, do ask.

________
radarsh
0
 
prainAuthor Commented:
Thanks radash. AJAX is a separate piece of SW right?. If I have Tomcat, should I have AJAX too?
Please enlighten me.
0
 
suprapto45Commented:
Hi,

>>"If I have Tomcat, should I have AJAX too?"
No. There is AJAX DWR which you can easily integrate with your Java app.

http://www.telio.be/blog/2006/01/06/ajax-upload-progress-monitor-for-commons-fileupload-example/
That is the best example on how to use AJAX for progress bar. I think that it combines with Jakarta Common Upload.

David
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
radarshCommented:
DWR is a very simple and easy to use AJAX framework, as David said.
You can go ahead with that.

http://getahead.ltd.uk/dwr/

________
radarsh
0
 
prainAuthor Commented:
hello all,
Thanks for your inputs. I have talked to the admin here with regard to get the AJAX. It may take some time. The environment here is not that easy to get work done. You know govt?. So I am, in the mean time looking around to get this done without using AJAX or similar, but by using pure java and servlets.

Please let me know if you have any other avenues.

Thanks
prain
0
 
IsisagateCommented:
Interestingly enough I am doing the same thing right now.

include this in your servlet output.


var loadedcolor='navy' ;            // PROGRESS BAR COLOR
var unloadedcolor='lightgrey';      // BGCOLOR OF UNLOADED AREA
var barheight=15;                   // HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=350;                   // WIDTH OF THE BAR IN PIXELS
var bordercolor='black';            // COLOR OF THE BORDER

var action=function()
{
//window.location="http://www.dynamicdrive.com
}

var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
var blocksize=(barwidth-2)/100;
barheight=Math.max(4,barheight);
var loaded=0;
var perouter=0;
var perdone=0;
var images=new Array();
var txt='<BR><BR><H1>L<img src="<%= ac.getRoot() %>/images/movepointAni.gif">ADING . . .</H1><BR>';
if(ns4){
      txt+='<table cellpadding=0 cellspacing=0 border=0><tr><td>';
      txt+='<ilayer name="perouter" width="'+barwidth+'" height="'+barheight+'">';
      txt+='<layer width="'+barwidth+'" height="'+barheight+'" bgcolor="'+bordercolor+'" top="0" left="0"></layer>';
      txt+='<layer width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+unloadedcolor+'" top="1" left="1"></layer>';
      txt+='<layer name="perdone" width="'+(barwidth-2)+'" height="'+(barheight-2)+'" bgcolor="'+loadedcolor+'" top="1" left="1"></layer>';
      txt+='</ilayer>';
      txt+='</td></tr></table>';
}else{

      txt+='<div id="perouter" onmouseup="hidebar()" style="position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px;">';
      txt+='<div style="position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; z-index:100; font-size:1px;"></div>';
      txt+='<div id="perdone" style="position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; z-index:100; font-size:1px;"></div>';
      txt+='</div>';
}

document.write(txt);

function incrCount(prcnt){
      loaded+=prcnt;
      setCount(loaded);
}

function decrCount(prcnt){
      loaded-=prcnt;
      setCount(loaded);
}

function setCount(prcnt){
      loaded=prcnt;
      if(loaded<0)loaded=0;
      if(loaded>=100){
loaded=100;
setTimeout('hidebar()', 400);
}
clipid(perdone, 0, blocksize*loaded, barheight-2, 0);
}

//THIS FUNCTION BY MIKE HALL OF BRAINJAR.COM
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
      layer=doc.layers[i];
      if(layer.name==name)return layer;
      if(layer.document.layers.length>0)
            if((layer=findlayer(name,layer.document))!=null)
                  return layer;
      }
return null;
}

function progressBarInit(){
perouter=(ns4)?findlayer('perouter',document):(ie4)?document.all['perouter']:document.getElementById('perouter');
perdone=(ns4)?perouter.document.layers['perdone']:(ie4)?document.all['perdone']:document.getElementById('perdone');
clipid(perdone,0,0,barheight-2,0);

if(ns4)perouter.visibility="show";

else perouter.style.visibility="visible";


}

function hidebar(){
action();
(ns4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
}

function clipid(id,t,r,b,l){
if(ns4){
id.clip.left=l;
id.clip.top=t;
id.clip.right=r;
id.clip.bottom=b;
}else id.style.width=r;
}

window.onresize=function(){
if(ns4)setTimeout('history.go(0)' ,400);
}

progressBarInit();





Then print the following at every interval.

<script type="text/javascript" language="javascript">
     setCount(10);  //set the progressbar to 10%
</script>

be sure to call flush(); after each interval to ensure that gets outputted to the browser.


Good luck.

0
 
IsisagateCommented:
forgot to add <script type="text/javascript" language="javascript"></script> around the guts.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now