Override "Processing" in ZK - zk

Question

<?page id="p" title="Data Profiling Home" contentType="text/html;charset=UTF-8"?>
<zk>
<button label="Procesing" onClick="Clients.showBusy(null)"></button>
</zk>
OnClick of button I see this :
I want to Override the Processing widget so that I can acheive this.
I have searched, in ZK documentation but din't find any help, have any one tried this earlier or any hint,link or reference, can this be acheived In ZK?

Answer 1

Please try
<zk>
<button label="busy">
<attribute name="onClick">
busyWin.doModal();
Div div = busyWin.getFellow("div");
Clients.showBusy(div, null);
</attribute>
</button>
<window id="busyWin" visible="false" position="center"
border="normal" title="busy..." xmlns:w="client">
<attribute w:name="bind_">
function (desktop, skipper, after) {
this.$bind_(desktop, skipper, after);
if (this._drag)
this._drag.opts.ignoredrag = true; // prevent dragging
}
</attribute>
<hbox>
<div id="div" height="30px" width="30px" style="color: transparent;">a</div>
<button label="abort">
<attribute name="onClick">
Clients.clearBusy(div);
busyWin.setMode("embedded");
busyWin.setVisible(false);
</attribute>
</button>
</hbox>
</window>
</zk>
Edit:
The new sample
<zk>
<script type="text/javascript"><![CDATA[
function showBusy () {
// show busy mask
zAu.cmd0.showBusy('Loading...');
// move abort button under busy message
jq('.z-loading')[0].appendChild(jq('$abortButton')[0]);
}
function clearBusy () {
// move abort button back under abort div
jq('$abortDiv')[0].appendChild(jq('$abortButton')[0]);
// clear busy mask
zAu.cmd0.clearBusy(null);
}
]]></script>
<zscript><![CDATA[
class AbortableRunnable implements Runnable {
boolean aborted = false;
int i = 0;
public void run () {
while (true) {
// do somoething
i++;
try {
Thread.sleep(1000);
} catch (Exception e) {
System.out.println(e);
}
// finish
if (i == 5 || aborted)
break;
}
}
public void abort () {
aborted = true;
}
public int getI () {
return i;
}
}
AbortableRunnable ar = new AbortableRunnable();
void start () {
// start
System.out.println("started");
new Thread(ar).start();
}
void abort () {
// abort
System.out.println("aborted");
ar.abort();
// reset
ar = new AbortableRunnable();
}
void finish () {
// finish
System.out.println("finished");
// reset
ar = new AbortableRunnable();
}
]]></zscript>
<!-- abort div to keep the abort button,
display outside the screen -->
<div id="abortDiv" style="position: absolute; left: -1000px; top: -1000px">
<button id="abortButton" label="abort">
<attribute name="onClick">
// abort the running process
abort();
// stop the checking timer
checkTimer.stop();
// move self element back to abort div
// and clear the busy mask
Clients.evalJavaScript("clearBusy();");
</attribute>
</button>
</div>
<button label="do something long">
<attribute name="onClick">
// start to run the process
start();
// start the checking timer
checkTimer.start();
// show busy mask and move
// the element of abort button under busy message
Clients.evalJavaScript("showBusy();");
</attribute>
</button>
<timer id="checkTimer" running="false" repeats="true" delay="1000">
<attribute name="onTimer">
// check whether it is finished
// similar to the abort part
if (ar.getI() == 5) {
finish();
self.stop();
Clients.evalJavaScript("clearBusy();");
}
</attribute>
</timer>
</zk>
Regards,
Ben