2009年10月29日木曜日

JSF2.0/Ajax/Tomcat6.0/Eclipse3.5

JSF2.0 ajax の、簡単な getting started 的なものを作ったので記録。 ■ 環境
  • Eclipse 3.5
  • Tomcat v6.0：(Eclipse の Servers ビューでこの定義を追加しておく)
  • JSF 2.0：mojarra-2.0.0-RC-binaryに入ってるやつ。https://javaserverfaces.dev.java.net/ から持ってこられる。
■ 作る
  • Dynamic Web Project を作成。プロジェクト名はここでは trial1 とした。Tomcat の場合、デフォルトでこの名前がコンテキストパスに使用される。
  • WebContent/WEB-INF/lib に、mojarra-2.0.0-RC-binaryに含まれてる jsf-api.jar とjsf-impl.jar を入れる。
  • web.xml に、以下のような faces 関連のサーブレット定義を追加する。
    <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>
  <url-pattern>*.faces</url-pattern>
</servlet-mapping>
  • WebContent 下に pages ディレクトリを作り、以下の内容の update.xhtml を作る
    <!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-ServerTime</title>
  </h:head>
  <h:body>
    <h:form id="form1" prependId="false">
      <h:outputScript name="jsf.js" library="javax.faces" target="head"/>
      <h:outputText id="textServerTime" value="#{serverTimeBean.time}"/>
      <br/>
      <h:commandButton id="update" value="update"
          onclick="jsf.ajax.request(this, event, {execute:'update', render: 'textServerTime'}); return false;"
          actionListener="#{serverTimeBean.update}"/>
    </h:form>
  </h:body>
</html>
  • 適当なパッケージに以下のように ServerTimeBeanクラスを作る
    package net.xad.web.jsf20.trial1;

import java.text.SimpleDateFormat;
import java.util.Date;

import javax.faces.event.ActionEvent;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "serverTimeBean")
@SessionScoped
public class ServerTimeBean {
   private String serverTime = "";
   public ServerTimeBean() {
      updateTime();
   }
   public String getTime() {
      return serverTime;
   }
   public void update(ActionEvent ae) {
      updateTime();
   }
   private void updateTime() {
      SimpleDateFormat format = new SimpleDateFormat("yy/MM/dd HH:mm:ss");
      serverTime = format.format(new Date());
   }
}
  • Eclipse の Servers ビューから、[Add and Remove...]でTomcat サーバにプロジェクトを追加
■ 確かめる Servers ビューから、Tomcat サーバを起動する。確認には FireFox から FireBugを使ってみる。次のような URLを打ち込むと下図のような初期表示が得られる。 http://localhost:8080/trial1/pages/update.faces F12 で FireBug を開いて、[Net]プルダウンで Enabled に切り替えると、通信内容がモニタリングされるようになる。ここで update ボタンを押下すると、時刻表示が更新されると同時に、FireBug のペインにも一行追加される。これを展開する。 Post タブでリクエストの内容が表示される。 Response タブでは、返された XML が表示される。読みづらいので整形すると以下のようになる。
<?xml version="1.0" encoding="utf-8"?>
<partial-response>
  <changes>
    <update id="textServerTime">
      <![CDATA[<span id="textServerTime">09/10/29 11:26:33</span>]]>
    </update>
    <update id="javax.faces.ViewState">
      <![CDATA[5735020966984487302:3643923077241363467]]>
    </update>
  </changes>
</partial-response>
HTML タブで現在の DOMツリーを表示して、id=textServerTime の<span>要素を観察すると、レスポンスで返されたXML の小片を使って、HTML の小部分のみを更新しているらしいのが分かる。 後ついでに、デバッガで ServerTimeBean の呼ばれ方なども観察してみる。 ■ 課題 maven (m2eclipse) とWTPが上手く連携しないので、今回は WTP のみでやってみた。maven で作ったプロジェクトを Dynamic Web Project にする事も、Dynamic Web Project に maven の依存性管理を与えることも、どちらもできないことは無いけど、面倒な上に、その後の eclipse からの起動がすんなり行かなくて更に一手間二手間かかる。依存性管理はなるべく maven に全部任せたいけど、なかなかうまくいかない。
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿