PrimeFacesのAjaxStatusでBlock UI表示処理をまとめる

今一緒に開発している後輩からPrimeFacesのAjaxStatusなるコンポーネントを教えてもらいました(^^;知らなかった。

http://www.primefaces.org/showcase/ui/ajax/status.xhtml

これを上手く使うとBlock UIとかの制御が楽になりそうです。

Block UIは以前の開発で、ボタンの2度押しなどを防ぐために使っていました。

PrimeFaces ExtensionsのBlock UIを利用してみました - Challenge Java EE !

ボタンを押すと

Ajax処理が終わるまで以下のようにBlock UIが表示されて、クリックなどを受け付けません。

当時の開発では、利用したい各ボタンにonstartやoncompleteを付けていて冗長でした。

<h:form id="frm">
    <p:commandButton value="はろー1" actionListener="#{indexBean.hello()}" 
         onstart="PF('blc').show();" oncomplete="PF('blc').hide();" />
    <p:commandButton value="はろー2" actionListener="#{indexBean.hello()}" 
         onstart="PF('blc').show();" oncomplete="PF('blc').hide();" />

    <p:blockUI block="frm" widgetVar="blc" />
</h:form>

AjaxStatusコンポを利用するとAjaxのリクエストをグローバルに一括して扱えて、以下の記述ができます。

<h:form id="frm">
    <!-- ajaxStatusのonstartとoncompleteでBlock UIを呼ぶ -->
    <p:ajaxStatus onstart="PF('blc').show();" oncomplete="PF('blc').hide();" />

    <!-- 各ボタンからはBlock UIのコールを削除 -->
    <p:commandButton value="はろー1" actionListener="#{indexBean.hello()}" />
    <p:commandButton value="はろー2" actionListener="#{indexBean.hello()}" />
    
    <p:blockUI block="frm" widgetVar="blc" />
</h:form>        

おー。

ちなみに「このボタンは対象外にしたいんだけど…」という場合にはglobal属性をfalseにすれば対象外になります。

<p:commandButton value="はろー3" global="false" actionListener="#{indexBean.hello()}" />

前のプロジェクトで使っていたやつを参考に実装を～とお願いしたのですが、こうやってブラッシュアップしてくれるのはいいですねー。助かります。