JSF-Ajax

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(): File not found: "aj1.gif" at page "JSF-Ajax"


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-08-19 (水) 12:19:55 (3172d)