*JSF-Ajax [#vd4db704]
JSFではJavaScriptのコードを書かなくてもAjaxを使用できる。~
Ajaxにより画面全体を再読み込みせず、画面の一部だけを変更できる。~
以前作成したをFaceletsをAjaxに対応させる。~
~
FaceletsをAjaxに対応させるには、画面更新のイベントを発生させる項目（例えばボタン）のタグに、f:ajaxタグを入れ込む。~
f:ajaxタグのexecute属性にサーバーに送信する項目のidを指定する。~
f:ajaxタグのrender属性に画面を変更する項目のidを指定する。~
（どちらの属性もidで指定した項目の内側の項目も対象になる）~
ここで使用するidは、各項目のid属性で設定しておく。~
@formはこの要素が含まれているフォーム部分全体を表す。~
c:forEachタグをフォーム内に移動し、この部分も同時に更新されるようにしている。~
>
    <h:body>
        <h:form>
            <c:forEach var="m" items="#{messageBoard.messages}">
                <h:outputText value="#{m.id}"/>：
                <h:outputText value="#{m.writetime}">
                    <f:convertDateTime pattern="yyyy/MM/dd(E) HH:mm:ss" timeZone="JST"/>
                </h:outputText><br/>
                #{'　'}<h:outputText value="#{m.message}"/><br/><br/>
            </c:forEach>
            <h:inputTextarea id="in" value="#{messageBoard.message}"/><br/>
            <h:commandButton value="書き込む" action="#{messageBoard.writeMessage}">
                <f:ajax execute="in" render="@form"/>
            </h:commandButton>
        </h:form>
    </h:body>

~
Ajaxを使用したため、書き込み時にページが変わっていない。~
#ref(aj1.gif)~


//業者からのコメントが多かったのでコメントアウトしますた
//*コメント [#f8301eb7]

//#comment
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS