JSFを使ったAjax

投稿日：2015年7月18日

現在開発中のサブプロジェクトでJSFからAjaxを使う機会があったので紹介します。

仕様自体は非常にシンプルで下記の画面でプルダウンが変更になったときにDBを見に行って画面の値を更新するような仕様です。

これをAjaxで実装します。

Contents

1 JSF側
2 ajaxタグの説明
3 ManagedBean側

JSF側

            <p><span>対象月</span>
                <h:selectOneMenu value="#{menuBean.targetDate}" >
                    <f:selectItems value="#{menuBean.targetMonthPullDown}"/>
                    <f:ajax event="change" execute="@this" listener="#{menuBean.setExpenseData() }" render="fixedSalary"/>
                </h:selectOneMenu>
            </p>
            固定給
            <h:outputText id="fixedSalary" value="#{menuBean.fixedSalary}" />

<h:selectOneMenu value="#{menuBean.targetDate}" >

<f:selectItems value="#{menuBean.targetMonthPullDown}"/>

<f:ajax event="change" execute="@this" listener="#{menuBean.setExpenseData() }" render="fixedSalary"/>

</h:selectOneMenu>

</p>

固定給

<h:outputText id="fixedSalary" value="#{menuBean.fixedSalary}" />

ajaxタグの説明

<f:ajax event=”change” execute=”@this” listener=”#{menuBean.setExpenseData() }” render=”fixedSalary”/>

説明の必要はあまりないかもしれませんが

event・・読んで字のごとくイベントです。今回はプルダウンが変わった時なのでそのままchangeです。

execute・・サーバー側に送るデータをここに記述します。自分だけの場合は@this、すべて送る場合は@all,formの中だけを送る@formなどあるようです。ディフォルトでは@thisです。

listener・・イベント発生時に実行させるメソッドです。戻り値はなしのものにすること

render・・これがはまりました。実はAjaxで送ってManagedBeanの値を更新してもJSF側の画面は変わりません。後ほど紹介する書籍にばっちりかいてありましたが、JSFのライフサイクルの中でレンダリングは行われないようです。更新したい場合はコンポーネントのidをここで記述する必要があります。

ManagedBean側

該当の処理部分だけ書きます。

    public void setExpenseData(){
        DateUtility du = new DateUtility();
        Date nowDate = du.stringToDate(targetDate);
        ConstantExpense ce = menuFacade.getConstantExpense(userBean.getUserId(), nowDate);

        if (ce != null) {
            this.fixedSalary = ce.getFixedSalary().toString();
            this.transportationSalary = ce.getTransportationSalary().toString();
        }
    }

public void setExpenseData(){

DateUtility du = new DateUtility();

Date nowDate = du.stringToDate(targetDate);

ConstantExpense ce = menuFacade.getConstantExpense(userBean.getUserId(), nowDate);

if (ce != null) {

this.fixedSalary = ce.getFixedSalary().toString();

this.transportationSalary = ce.getTransportationSalary().toString();

}

こちらは特に説明はいらないかもしれません。あえていうと画面の遷移がないので@ViewScopedにしたほうが、処理が軽いです。

@RequestScopedだとオブジェクトの生成・廃棄が起こります。

今回、参考になったのは書籍ですね。

「わかりやすいJavaEEウェブシステム入門」この9章がそのまま役に立ちました。