Ajax4JSFで簡単Ajax!
第1回:JavaScriptを記述しなくてもいいんです!
著者:カサレアル 岡本 充洋
公開日:2007/12/11(火)
サンプルアプリケーションの作成
今回はWebコンテナのApplicationコンテキストにデータを貯めていく、簡単なチャットアプリケーションを作成します。ここではAjaxを利用するプログラムをどうやって作成するのかに焦点をあててみていきしょう。
先ほど述べたように、Ajax4JSFはServletフィルタとして実装されていますので、Web.xmlにフィルタを登録します(リスト1)。
org.ajax4jsf.Filterクラスが用意されていますので、このServletFilterをFaces Servletに対して設定します。これにより、JSFのリクエストをAjax4JSFがコントロールできます。Filterの登録が完了したら、通常のJSFと同じ手順でアプリケーションを作成していきます。
まずManeged Beanを作成します。作成は通常のJSFで開発する場合と特に変わりはありません。Applicationスコープに溜め込んだコメントを返却する「getCommentList」というプロパティと、コメントを投稿するためのアクションメソッド「postComment」を記述します(リスト2)。
リスト1:Web.xmlの抜粋
<filter>
<filter-name>Ajax4jsf Filter</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>Ajax4jsf Filter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces⁄*</url-pattern>
</servlet-mapping>
リスト2:Maneged Bean
package jp.co.casareal.sample.ajax4jsf;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import java.util.Map;
import javax.faces.context.FacesContext;
public class ChatBean {
private String name;
private String comment;
public String postComment() {
List<String> list = getCommentList();
list.add(name + " : " + comment);
if (list.size() > 20) {
getCommentList().remove(0);
}
comment = "";
return null;
}
@SuppressWarnings("unchecked")
public List<String> getCommentList() {
Map<String, Object> applicationMap = FacesContext.getCurrentInstance()
.getExternalContext().getApplicationMap();
List<String> commentList = (List<String>) applicationMap
.get("commentList");
if (commentList == null) {
commentList = Collections.synchronizedList(new ArrayList<String>());
applicationMap.put("commentList", commentList);
}
return commentList;
}
public String getComment() {
return comment;
}
public void setComment(String comment) {
this.comment = comment;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
リスト3:WEB-INF/facesconfig.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<managed-bean>
<managed-bean-name>chatBean</managed-bean-name>
<managed-bean-class>
jp.co.casareal.sample.ajax4jsf.ChatBean
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
</faces-config>
次にJSF設定ファイルに登録を行います。WEB-INF/facesconfig.xmlを作成して、リスト3のように記述します。今回は画面遷移を行いませんので、先ほど作成したChatBeanクラスの登録だけ行います。
最後に、JavaScriptを記述しなくてもよい仕掛け部分を設定しましょう。 次のページ