読者です 読者をやめる 読者になる 読者になる

Challenge Java EE !

Java EEを中心に趣味や仕事における開発メモを書いています。

PrimeFacesのRequestContextはパワフルな予感

JavaScript PrimeFaces JSF

先日のJJUGナイトセミナー以来、コツコツとJavaScriptを勉強し始めました。
(参加記録→JJUG ナイト・セミナー「JavaエンジニアのためのJavaScript講座」に参加しました )

Java EEに限った話ではないですが、JavaScriptをもっとよく知って上手く使えれば、強力な武器になりますよね(^^)

で、実は今日初めて知ったのですが…PrimeFacesのRequestContextを利用すると、BackingBean内で生成したインスタンスをクライアント側へ返す、なんてことができるとのこと!

PrimeFacesのUser Guideに書いてあって気づいたので…やはりドキュメントは最初にしっかり目を通すべきだなぁ(^^;

で、以下のような感じの簡単なサンプル作りました。

ユーザクラス
public class User {
    private String firstname;
    private String lastname;
    
    public User(String firstname, String lastname){
        this.firstname = firstname;
        this.lastname = lastname;
    }

    //setter,getter省略
}
BackingBean
import javax.inject.Named;
import javax.enterprise.context.RequestScoped;
import org.primefaces.context.RequestContext;

@Named(value = "requestContextBean")
@RequestScoped
public class RequestContextBean {
    
    public void createUser(){
        RequestContext requestContext = RequestContext.getCurrentInstance();
        requestContext.addCallbackParam("user", new User("kikutaro", "777"));
    }  
}

先に定義したUserクラスのインスタンスを生成して、RequestContextのaddCallbackParamにセットするだけです。

JSFの画面xhtml
<?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">
    <h:head>
        <title>RequestContextサンプル</title>
    </h:head>
    <h:body>
        <h:form>
            <p:commandButton id="btnSubmit" value="Submit"
                             actionListener="#{requestContextBean.createUser()}"
                             oncomplete="showUser(xhr, status, args);"/>
            
            <script type="text/javascript">
                function showUser(xhr, status, args){
                    var firstname = args.user.firstname;
                    var lastname = args.user.lastname;
                    alert(firstname + lastname);
                }
            </script>
        </h:form>
    </h:body>
</html>

ボタンだけ置いて、actionListenerでBackingBeanの処理を呼び、onCompleteでJavaScriptの関数を呼び出しています。

たったこれだけです。実行すると

f:id:kikutaro777:20130508200927j:plain

ボタン押下すると

f:id:kikutaro777:20130508200938j:plain

おお、BackingBeanで生成したインスタンスの情報がJavaScript側で取得して表示できてる!

少し前に書いた「JavaScript内でJSFのEL式が使えることを初めて知りました ~画面表示時にダイアログ表示する挙動を例に~」に書いたようにJavaScript内でEL式も使えるし、色々JavaScriptを理解して使いこなせれば強力な感じが(^^)

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