This is the description of a tapestry component which can be used to display a please wait message for pages which take some time to load. The concept is simple. You have 2 pages. The one from which you go and the one which is supposed to follow which is rather slow. The first page contains a hidden div which gets visible when the user submits the form. This div is the one which you see with the animated gif and some explanatory text. When the slow page has finished it’s load it will replace the first page. This is based on the fact that the browser will keep the old page until the new one is loaded.
The wait component
The wait message is an initialy hidden content which get displayed when the user click on the button which triggers the slow page.
The doWait.html
<span jwcid="@Script" script="DoWait.script"/><br></br><br></br><div id="wait" style="float:left;position:absolute;display:none;border:2px solid #333333;"><br></br><br></br> <table cellpadding="0" cellspacing="0" width="500" height="200"><br></br> <tr><td><br></br> <span jwcid="@RenderBody"/><br></br> </td></tr><br></br> </table><br></br></div><br></br><br></br><iframe<br></br> id="ifWait"<br></br> src="/blank.html"<br></br> scrolling="no"<br></br> frameborder="0"<br></br> style="position:absolute; top:0px; left:0px; display:none;"><br></br></iframe><br></br>
Some observations:
- the width and height are fixed and will be used later to calculate the position
- the src for the iframe is mandatory and that file must be somewhere
- if you want some transparency
<div id="wait"<br></br>style="float:left;position:absolute;display:none;filter:alpha(opacity=85);moz-opacity:.85;opacity:.85;border:2px<br></br>solid #333333;">
The doWait.jwc
<?xml version="1.0" encoding="UTF-8"?><br></br><!-- $Id: DoWait.jwc,v 1.2 2005/06/16 13:37:06 rb Exp $ --><br></br></br> "-//Apache Software Foundation//Tapestry Specification 3.0//EN"<br></br> "http://jakarta.apache.org/tapestry/dtd/Tapestry_3_0.dtd"><br></br><br></br><component-specification<br></br> allow-informal-parameters="yes" allow-body="yes"><br></br> <br></br></component-specification><br></br>
The wait script
<?xml version="1.0" encoding="UTF-8"?><br></br></br> "http://jakarta.apache.org/tapestry/dtd/Script_3_0.dtd"><br></br><script><br></br> <body><br></br><![CDATA[<br></br>var myWidth = 0, myHeight = 0;<br></br><br></br>function findSizes() {<br></br> if( typeof( window.innerWidth ) == 'number' ) {<br></br> //Non-IE<br></br> myWidth = window.innerWidth;<br></br> myHeight = window.innerHeight;<br></br> } else if( document.documentElement &&<br></br> ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {<br></br> //IE 6+ in 'standards compliant mode'<br></br> myWidth = document.documentElement.clientWidth;<br></br> myHeight = document.documentElement.clientHeight;<br></br> } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {<br></br> //IE 4 compatible<br></br> myWidth = document.body.clientWidth;<br></br> myHeight = document.body.clientHeight;<br></br> }<br></br>}<br></br><br></br>function doWait(source) {<br></br> waitW = 500; //dialog size<br></br> waitH = 200; //dialog size<br></br> findSizes();<br></br> var e = document.getElementById('wait');<br></br> var IfrRef = document.getElementById('ifWait');<br></br> var top = ((myHeight-waitH)/2) + "px";<br></br> var left = ((myWidth-waitW)/2) + "px";<br></br> e.style.top = top;<br></br> e.style.left = left;<br></br> e.style.display="block";<br></br> e.style.zIndex = 100;<br></br><br></br> IfrRef.style.width = e.offsetWidth;<br></br> IfrRef.style.height = e.offsetHeight;<br></br> IfrRef.style.top = e.style.top;<br></br> IfrRef.style.left = e.style.left;<br></br> IfrRef.style.zIndex = e.style.zIndex - 1;<br></br> IfrRef.style.display = "block";<br></br>}<br></br>]]><br></br> </body><br></br> <initialization/><br></br></script><br></br>
Usage
Put this in your page template file:
<span jwcid="@DoWait">...</span><br></br><br></br>...<br></br><input jwcid="@Submit"<br></br> listener="ognl:listeners.longAction"<br></br> value="message:longAction"<br></br> onClick="doWait(this);"<br></br>/><br></br>