トップ > Java > 超簡単になったJSF 2.0でAjaxを試す

超簡単になったJSF 2.0でAjaxを試す

Java

超簡単になったJSF 2.0をさらに試すの続き。

jsfc使用中もJSF 2.0のAjaxタグが使えるかどうかを試す。JSF2.0のAjax対応そのものはJSF 2.0の新機能AJAXサポートを試すを参考に。

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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Facelets - Template Example</title>
        <link href="./css/default.css" rel="stylesheet" type="text/css" />
        <h:outputScript name="jsf.js" library="javax.faces" />
    </head>

    <body>
        <div>
            <form jsfc="h:form">
                <span id="msg" jsfc="h:outputText" value="#{HogeBean.text}"/>
                <input jsfc="h:commandButton" type="submit" value="おせ"
                       action="#{HogeBean.action}" >
                    <f:ajax  render="msg"/>
                </input>
            </form>
        </div>
    </body>
</html>

変更点はヘッダにscriptを追加したのとf:ajaxタグを追加。そして変更先のIDを生成するために出力文字列をspanタグで追加するように変更しただけ。


つまり本当にf:ajaxタグをinputタグの中においただけ。

実行！…問題なく動いた。

これだけでAjax対応になった。ボタンを押すとHogeBeans#action()メソッドが呼ばれ、idが「msg」のタグ部分のみが再レンダリングされる。画面遷移はしないので非常に高速で快適。


JSF 2.0っていろんなWebフレームワークのよいところを参考に作られただけあってかなりよくなってると思う。1.2の面影はどこにもねー。でも1.2との互換性もしっかりあるんだよね。1.2使ってるところはすぐに2.0いってよいと思う。