Fa. Linstep, Stefan Volbers schrieb:
>
> Would you mind giving me details about how you made up the animated
> "Loading, please wait" popup? It is exactly what we wanted to add to
> our document retrieval app, but failed and instead worked around by
> using a browser native window popup - a slow and quite ugly solution
> compared to yours.
I am more than happy to share ... the popup looks like this in
QxTransformer Code
<qx:popup
height="auto" width="auto" autoHide="false"
onAppear="this.centerToBrowser()">
<qx:atom
border="outset-thin"
padding="10"
icon="icon/16/actions/ajax-loader.gif"
label="Loading, please wait..."
backgroundColor="white">
<qx:messageSubscriber
filter="qcl.databinding.messages.rpc.*">
<![CDATA[
var status = message.getName();
var timestamp = message.getData()
var queue = this.getUserData("queue") || [];
switch ( status )
{
case "qcl.databinding.messages.rpc.start":
queue.push(timestamp);
break;
case "qcl.databinding.messages.rpc.end":
for (var i=0; i<queue.length; i++)
{
if (queue[i]==timestamp)
{
queue.splice(i,1);
}
}
break;
}
this.setUserData("queue",queue);
if (queue.length) {
this.getParent().show();
} else {
this.getParent().hide();
}
]]>
</qx:messageSubscriber>
<!-- clear queue and hide popup -->
<qx:eventListener type="click">
this.setUserData("queue",[]);
this.getParent().hide();
</qx:eventListener>
</qx:atom>
</qx:popup>
translated into javascript, this is:
var qx_id45330 = new qx.ui.popup.Popup();
qx_id45330.setHeight("auto");
qx_id45330.setWidth("auto");
qx_id45330.setAutoHide(false);
qx_id45330.addEventListener("appear",function(event)
{
this.centerToBrowser()
},qx_id45330);
qx_id43170.add(qx_id45330);
var qx_id45324 = new qx.ui.basic.Atom(this.tr("Loading, please
wait..."),"icon/16/actions/ajax-loader.gif");
qx_id45324.setBorder("outset-thin");
qx_id45324.setPadding(10);
qx_id45324.setBackgroundColor("white");
qx_id45330.add(qx_id45324);
qx.event.message.Bus.subscribe("qcl.databinding.messages.rpc.*",function(message){
var status = message.getName();
var timestamp = message.getData()
var queue = this.getUserData("queue") || [];
switch ( status )
{
case "qcl.databinding.messages.rpc.start":
queue.push(timestamp);
break;
case "qcl.databinding.messages.rpc.end":
for (var i=0; i<queue.length; i++)
{
if (queue[i]==timestamp)
{
queue.splice(i,1);
}
}
break;
}
this.setUserData("queue",queue);
if (queue.length) {
this.getParent().show();
} else {
this.getParent().hide();
}
},qx_id45324);
qx_id45324.addEventListener("click",function(event){
this.setUserData("queue",[]);
this.getParent().hide();
},qx_id45324);
I use one central place in the code where rpc requests are dispatched --
in the MDataManager mixin. It looks roughly like this
var rpc = new qx.io.remote.Rpc();
[...]
var _this = this;
// start request
// notify of start of request
var timestamp = new Date().getTime();
qx.event.message.Bus.dispatch(new
qx.event.message.Message("qcl.databinding.messages.rpc.start",timestamp));
// callback function
var callbackFunc = function(data, ex, id) {
// notify of end of request
qx.event.message.Bus.dispatch(new
qx.event.message.Message("qcl.databinding.messages.rpc.end",timestamp));
request.reset();
request.dispose();
request = null; // dispose rpc object
[... ]
}
// send request
params.unshift(serviceMethod);
params.unshift(callbackFunc);
var request = rpc.callAsync.apply(rpc,params);
// pass request object to subscribers
qx.event.message.Bus.dispatch( "qcl.databinding.messages.rpc.object",
request );
So each and every request made to the server goes through this and the
corresponding start and end messages are dispathed. This is the great
advantage of using messages instead of events in some cases - the
messages can be intercepted everywhere- you do not have to know which
object is dispatching as in the case of events.
Best,
Christian
-------------------------------------------------------------------------
This SF.net email is sponsored by: Microsoft
Defy all challenges. Microsoft(R) Visual Studio 2008.
http://clk.atdmt.com/MRT/go/vse0120000070mrt/direct/01/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
