Challenge Engineer Life !

エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。

JSFのAjaxタグのoneventでbegin/complete/successを使う

PrimeFacesに慣れてしまって、通常のHTMLタグでの記述方法がわからなかったりする点があった…ので、メモ。

Ajaxでリクエスト送信のタイミングやレスポンスが戻るタイミングに何らか(JavaScriptなどで)処理を入れたいことがあります。

今回の自分の例では、テキストのフォーカスアウト時にAjaxで処理を開始してからレスポンスが戻るまでの間に画面操作をブロックしたい。というものでした。

リクエストの送信時にブロックUIを出して、レスポンス受信時にブロックUIを解除する、イメージです。

画面で説明すると

テキストがあって

f:id:kikutaro777:20130828203939j:plain

文字を入力

f:id:kikutaro777:20130828204053j:plain

フォーカスアウトするとAjaxで処理を呼び出して、その間は画面ブロック

f:id:kikutaro777:20130828184214j:plain

Ajaxのレスポンスが戻った時点でブロックが消えて画面が操作できる流れです。

で、通常こうした処理ではAjaxタグにあるonevent属性を使うようです。
以下、実際にお試しで書いたビュー↓

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>フォーカスブロックのサンプル</title>
    </h:head>
    <h:body>
        <h:form id="frm">
            <!-- PrimeFaces ExtensionのBlockUIコンポーネント -->
            <pe:blockUI target="frm" widgetVar="blc">
                <h:panelGrid columns="2">
                    <p:graphicImage id="imgLoaderBlc" library="images" 
                       name="ajax-loader.gif" width="15px" height="15px"/>
                    <h:outputLabel id="lblBlcProcessing" 
                       value="処理中だよー" style="font-size: 0.6em;"/>
                </h:panelGrid>
            </pe:blockUI>

            <!-- 入力テキストとAjaxによるチェンジイベント -->
            <h:inputText id="txtInput" value="#{indexBean.inputVal}">
                <f:ajax event="change" listener="#{indexBean.calc()}" render="@form" 
                   onevent="focusBlock" />
            </h:inputText>
        </h:form>
        
        <!-- Block UIの呼出し -->
        <script type="text/javascript">
            function focusBlock(data){
                var ajaxStatus = data.status;

                //statusで処理を振り分ける
                switch(ajaxStatus){
                    //beginだったらブロックUIを表示
                    case "begin":
                        blc.block();
                        break;
                    //completeだったらブロックUIを解除
                    case "complete":
                        blc.unblock();
                        break;
                }
            }
        </script>
    </h:body>
</html>

ajaxタグのonevent属性でJavaScriptの処理を呼びますが、その中でstatusをみてbegin/completeの処理を書いてます。同じようにsuccessも使えるようです。

知らなかった…(^^;

ちなみにPrimeFacesを利用しているとJavaScriptの記述が不要でInputTextの部分が以下のように書けます。

<p:inputText id="pTxtInput" value="#{indexBean.inputVal}">
    <p:ajax event="change" listener="#{indexBean.calc()}" update="@form" 
       onstart="blc.block();" oncomplete="blc.unblock();" />
</p:inputText>

PrimeFacesの拡張Ajaxタグだとupdate属性が通常のrender属性にあたり、さらに属性でonstart/oncompleteが指定できます。さらにonsuccessも存在します。

実行すると同じです。(ただし以下はテキストもPrimeFacesのコンポ)

f:id:kikutaro777:20130828184518j:plain

JavaScript書かないし、記述はかなり楽です。

が、JSFの標準的な記述をちゃんと勉強せねば…と痛感(^^;

なお、今回の参考資料は

でした。さすが。

にほんブログ村 IT技術ブログへ
にほんブログ村 にほんブログ村 IT技術ブログ Javaへ
にほんブログ村