JavaServer Faces(JSF) 2.0中にAjaxを利用するサンプルソースコード

JavaServer Faces (JSF) はJavaベースの Webアプリケーションフレームワークであり、Java EEアプリケーションのユーザーインターフェイスの開発を簡単にする。表示技術として使用するが、JSFはXULなどの他の表示技術を利用することもできる。

Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る。

最近、Web 2.0の発展にしたがって、Ajaxも広くてよく使われている。もともとWeb上で実現できない操作も、Ajaxを利用して素敵な実現できた。下記はJSF中にAjaxを利用するサンプルである。

まずは、下記のようなJSFソース：

import javax.faces.event.ActionEvent;
import javax.faces.model.ManagedBean;
import javax.faces.model.SessionScoped;
@ManagedBean(name = "count")
@SessionScoped
public class Count {
Integer count = 0;
public Integer getCount() {
return count++;
}
public void reset(ActionEvent ae) {
count = 0;
}
}

下記はフェイス部分のサンプルソース：

<!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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Ajax</title>
</h:head>
<h:body>
<h:form id="form1" prependId="false">
<h:outputScript name="ajax.js" library="javax.faces" target="head"/>
<h:outputText id="out1" value="#{count.count}"/>
<br/>
<h:commandButton id="button1" value="Count"
onclick="javax.faces.Ajax.ajaxRequest(this, event, {execute: this.id, render: 'out1'}); return false;"/>
<br/>
<h:commandButton id="reset" value="reset"
onclick="javax.faces.Ajax.ajaxRequest(this, event, {execute:'reset', render: 'out1'}); return false;"
actionListener="#{count.reset}"/>
</h:form>
</h:body>
</html>