笔者在最近的项目中采用的是Jsf(myfaces+richfaces+Ajax4Jsf)+Spring+Hibernate技术,由于数据量大,系统反应时间为1.5~2秒,此时需要有提示的标记比如"正在理..."等。Ajax4Jsf中的"onsubmit"为提交表单时发生的动作,"oncomplete"为提交到服务器端处理完返回到客户端时执行的动作,这两者的时间差就是我们等待的时间。我们也就是要在这个时间段内显示标记。对于<t:commandButton/>或<t:commandLink /> 等可以用"onclick""ondblclick"等与"oncomplete"组合灵活应用。以下是简例片段:
1
<!--
执行的js方法
-->
2 < script type ="text/javascript" >
3 function beforeChange(){
4 var obj = document.getElementById('myForm:waitingGif');
5 obj.style.display='block';
6 }
7 function afterChange(){
8 var obj = document.getElementById('myForm:waitingGif');
9 obj.style.display='none';
10 }
11 </ script >
12 <!-- 应用 -->
13 < t:panelGrid columns ="3" id ="listGrid" forceId ="true" >
14 < t:selectOneRadio value ="#{myBean.selectItem}" >
15 < a4j:support event ="onclick"
16 actionListener ="#{myBean.selectItemChange}"
17 reRender ="listGrid" onsubmit ="beforeChange()"
18 oncomplete ="afterChange()" />
19 < f:selectItem itemLabel ="上月" itemValue ="4" />
20 < f:selectItem itemLabel ="本月" itemValue ="3" />
21 < f:selectItem itemLabel ="上周" itemValue ="2" />
22 < f:selectItem itemLabel ="本周" itemValue ="1" />
23 </ t:selectOneRadio >
24 < h:graphicImage id ="waitingGif" value ="/images/waiting.gif" style ="display:none" />
25 </ t:panelGrid >
2 < script type ="text/javascript" >
3 function beforeChange(){
4 var obj = document.getElementById('myForm:waitingGif');
5 obj.style.display='block';
6 }
7 function afterChange(){
8 var obj = document.getElementById('myForm:waitingGif');
9 obj.style.display='none';
10 }
11 </ script >
12 <!-- 应用 -->
13 < t:panelGrid columns ="3" id ="listGrid" forceId ="true" >
14 < t:selectOneRadio value ="#{myBean.selectItem}" >
15 < a4j:support event ="onclick"
16 actionListener ="#{myBean.selectItemChange}"
17 reRender ="listGrid" onsubmit ="beforeChange()"
18 oncomplete ="afterChange()" />
19 < f:selectItem itemLabel ="上月" itemValue ="4" />
20 < f:selectItem itemLabel ="本月" itemValue ="3" />
21 < f:selectItem itemLabel ="上周" itemValue ="2" />
22 < f:selectItem itemLabel ="本周" itemValue ="1" />
23 </ t:selectOneRadio >
24 < h:graphicImage id ="waitingGif" value ="/images/waiting.gif" style ="display:none" />
25 </ t:panelGrid >
运行时的显示效果:
其实Ajax4Jsf也有对此效果的支持:
1
<
a4j:status
startText
="正在处理"
startStyle
="font-size: 10pt;color:red;"
/>
页面上运用<a4j:status />后所有提交到后台的动作都可以被跟踪标记,但要保证<a4j:status />在此动作的刷新区域。