刚刚解决了壹個细小的技术问题,用 PrimeFaces 4.0 的 UI 组件完成界面元素的开发,XHTML 页面上共有三個按钮,id 分别为 verifyButton、viewButton、downloadButton,其中页面初始化时,verifyButton 处于激活状态(enable),viewButton 和 downloadButton 处于未激活状态(disable),当点击 verifyButton 之后,页面会向后台 Controller 发送 ajax 请求,然后在完成壹些业务逻辑之后返回页面,并将
viewButton 和 downloadButton 激活,此时三個按钮均处于可点击状态。页面部分源代码如下所示:
<h:form id="verificationForm"> <div class="button-padding right mt10"> <p:commandButton id="verifyButton" value="校验" update="@this" widgetVar="verifyButton" disabled="#{!batchVerificationMB.enabledVerifyButton()}" process="@this batchVerificationTable" actionListener="#{batchVerificationMB.verify()}" oncomplete="validationUtil.handleAjaxResponse(args, displayErrorMessagesBathVerification, function(){displayVerifyMessage();viewButton.enable();downloadButton.enable();})" /> <p:commandButton id="viewButton" value="查看" process="@this" widgetVar="viewButton" update=":verificationResultForm" onclick="verificationResultDialog.show();" /> <p:commandButton id="downloadButton" value="导出" process="@this" widgetVar="downloadButton" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop)" icon="ui-icon-arrowthichk-s"> <p:fileDownload value="#{fileDownloadController.file}" /> </p:commandButton> <script type="text/javascript"> viewButton.disable(); downloadButton.disable(); </script> </div> </h:form> <h:form id="verificationResultForm"> //...此处省略部分代码 </h:form> <p:dialog widgetVar="verificationResultDialog" modal="true" closable="true" resizable="false" width="800"> //...此处省略部分代码 </p:dialog>
其实只有两個地方需要注意,分别列举如下:
1、页面初始化时,我们需要通过Javascript脚本将viewButton和downloadButton设置为disable状态,见于第19和20行,其实就是普通的Javascript脚本;
2、另外,由于后面两個按钮是否激活是受按钮verifyButton控制的,所以我们需要在verifyButton里加上壹個属性 oncomplete,然后在 oncomplete 里面控制 viewButton 和 downloadButton 的激活状态;代码很长,但是并不复杂,实际只做了以下事情:先将后台反馈的信息显示在界面指定位置上,然后将 viewButton 和 downloadButton 激活;我们把 oncomplete 里的代码抽取出来是这样的。
validationUtil.handleAjaxResponse( args, displayErrorMessagesBathVerification, function(){ //显示后台反馈的信息 displayVerifyMessage(); //将viewButton和downloadButton状态激活 viewButton.enable(); downloadButton.enable(); } )
其实说起来,PrimeFaces 4.0 的 <p:commandButton> 用起来并不复杂,只是自己还不熟悉其用法罢了。查看
PrimeFaces 4.0 官方文档是,它是这样介绍 oncomplete 属性的: 默认值为null,类型为String,当ajax请求完成之后客户端会回调属性oncomplete指定的内容。其实已经说的非常简单明了了。类似的事件属性还有 onstart、onsuccess、onerror 等,如果有兴趣的朋友可以自行查找
相关文档以了解更多细节。