zk client与server code组合提高长操作的响应性 _Web前端

zk client与server code结合提高长操作的响应性

一，关于长操作与响应性

zk client与server code结合提高长操作的响应性

--------------------------------------

响应性：《企业应用架构模式》一书这样说，响应性不同于请求处理，他是系统响应请求的速度有多快。这个指标在许

多系统里非常重要，因为对于一个系统而言，如果其响应性太慢，用户将难以忍受----尽管其响应时间可能不慢。如果请

求处理期间，系统一直处于等待状态，则系统的响应性与响应时间相同，然而，如果能够在处理真正完成之前就给用户

一些信息表明系统已经接到请求，测响应性会好一些，例如，则文件拷贝过程中，为用户提供一个进度条，将会提高用

户界面的响应性，但并不会提高响应时间

------------------------------------------

二，在zk中我们如何实现，提高用户体验

1，在zk中，已经有对长操作的一些解决方案，今天群里的朋友问起，我结合当前zk5的特性，搞了这么一个例子，希望对大家有所帮助

2，操作步骤

1提示请稍后，2 执行业务操作 3，提示完成

3，具体代码

代码部分，首先，利用zk client api 弹出请稍后提示框 w:onClick="zk.Widget.$(jq('$win')).doModal() "，

因为zk client api运行与浏览器端，会立即显示，此时尚未执行服务器端代码onClick部分

然后我们声明了一个事件 onClick="doSomething()"/>执行服务代码，

在代码中，我使用Thread.sleep(2000)，让该线程休息2s，模拟业务操作，

然后隐藏弹窗设置父组件为null，该作用是将其移除组件所在的页面，不再页面的组件不会显示。

这里我没有使用post close event给这个弹窗让其关闭，因为我觉得这样太麻烦，

还需要提交事件到事件队列。因为我看过onClose事件里的代码也就如此。

最后，提示操作完成

即：1，js弹窗请稍后，2执行业务代码，3代码执行完毕，稍后弹窗 4 提示业务操作完成

Xml代码

<zk>
<window title="My First Window" border="normal" width="200px" xmlns:w="client">
<zscript>
<![CDATA[
void doSomething(){
Thread.sleep(2000);
win.visible=false;
win.parent=null;
alert("加载完毕，请查看该用户详细信息！");
}
]]>
</zscript>
<button label="先提示忙，后提示完成" w:onClick="zk.Widget.$(jq('$win')).doModal() " onClick="doSomething()"/>
</window>
<window id="win" border="normal" width="350px" minheight="350" closable="true" title="提示">
<label value="执行中，请稍后..."/>
</window>
</zk>

<zk>
<window title="My First Window" border="normal" width="200px" xmlns:w="client">
<zscript> 
  <![CDATA[
        void  doSomething(){
                           Thread.sleep(2000);
                           win.visible=false;
                           win.parent=null;
                           alert("加载完毕，请查看该用户详细信息！");

                 }

]]>
</zscript>
<button label="先提示忙，后提示完成" w:onClick="zk.Widget.$(jq('$win')).doModal() " onClick="doSomething()"/>


</window>

<window id="win" border="normal" width="350px"  minheight="350" closable="true" title="提示">

<label value="执行中，请稍后..."/>

</window>



</zk>

示：