Override “Processing” in 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