覆蓋「處理」在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按鈕，我看到這一點：

我想重寫處理部件，這樣我可以達致這。

我已經搜索過，在ZK文檔中，但沒有找到任何幫助，有任何人嘗試過此更早或任何提示，鏈接或引用，可以在ZK？

Answer 1

請嘗試

<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> 

編輯： 新樣本

<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> 

問候，

本