JSFでは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"