Teeda - JSF meets DI and AOP -

Teeda Ajax

Teeda Ajaxとは、主に以下のような機能を提供します。

AjaxによりS2Containerに登録されているPOJOとの連携
AjaxにおけるパラメータのPOJOへの自動インジェクション
Ajaxを簡単に利用する為の、JavaScriptライブラリ

Teeda Ajaxの利用方法について解説します。 Ajaxを利用する為に必要なファイルは以下の通りです。

teeda-ajax-xx.jar
ajax.js

それでは、利用方法を見ていきましょう。

使用するアプリケーションのWEB-INF/lib配下にteeda-ajax-xx.jarを含めて下さい。

web.xmlの設定

web.xmlに上記AjaxServeltの設定を追加します。

<servlet>
    <servlet-name>AjaxServlet</servlet-name>
    <servlet-class>org.seasar.teeda.ajax.AjaxServlet</servlet-class>
    <load-on-startup>3</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>AjaxServlet</servlet-name>
    <url-pattern>*.ajax</url-pattern>
</servlet-mapping>

load-on-startupは任意に設定して下さい。

ajax.jsの使い方

ajax.jsを配置し、利用したいHTML側でajax.jsをincludeして下さい。

<script language="JavaScript" src="/js/ajax.js"></script>

Kumu.Ajax.executeTeedaAjaxという関数を呼びAjaxを実行します。この関数に指定するのは以下の通りです。

callback関数
パラメータ

callback関数は、以下の規約によって指定することにより自動で呼び出すコンポーネントとメソッド名を解決します。

// 呼び出したいコンポーネント名 + "_" + 呼び出したいメソッド名
function hoge_foo(response){
    // responseにはAjaxによるレスポンスが格納されています
    alert(response);
}
Kumu.Ajax.executeTeedaAjax(hoge_foo, {"パラメータ名" : "パラメータ値"});

上記の場合diconに定義されたhogeコンポーネントのfooメソッドが呼ばれます。

hogeコンポーネントのfooメソッドの呼び方としては以下の方法も可能です

// callback関数を任意の名前で定義
function test(response){
}
Kumu.Ajax.executeTeedaAjax(test, { "component" : "hoge", "action" : "foo" });

規約を使用しない場合は、パラメータにcomponent、actionを指定します。これによりhogeコンポーネントのfooメソッドが指定出来ます。

パラメータ

パラメータは連想配列で指定します

// 下記のようなHTMLでteeda, kumuというパラメータ名でパラメータを指定したい場合
<form name="x">
<input type="text" name="teeda" />
<input type="text" name="kumu" />
</form>
Kumu.Ajax.executeTeedaAjax(hoge_foo,
    {"teeda" : document.x.teeda.value, "kumu" : document.x.kumu.value});

それではサーバ側の処理を実装しましょう。上記hogeはどこで定義されているのでしょうか。hogeは、任意のdiconの中で、次のように定義されています。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container 2.4//EN"
	"http://www.seasar.org/dtd/components24.dtd">

<components>
  <include path="examples/teeda/dicon/zip.dicon"/>
  <component name="hoge" class="examples.ajax.HogeBean" instance="request">
    <meta name="teeda-ajax"/>
  </component>
</components>

teeda-extensionのAjaxではdiconで定義された任意のPOJOを利用する事が出来ます。

※注意　この際、meta情報をteeda-ajaxとして指定して下さい。meta情報が無いコンポーネントは呼び出せません。

HogeBeanの中身を見てみましょう

package examples.ajax;

public class HogeBean {

    private String teeda;
    private String kumu;

    public void setTeeda(String teeda) {
        this.teeda = teeda;
    }
    public void setKumu(String kumu) {
        this.kumu = kumu;
    }

    public String foo() {
        return "{ teeda :'" + this.teeda + "', kumu : '" + this.kumu + "' }";
    }
}

Kumu.Ajax.executeTeedaAjaxで指定されたパラメータ名と同名のセッターにパラメータを自動でDIします。先ほどのサンプルでは、teeda, kumuというパラメータ名を設定したので、それぞれのセッターにパラメータの値が設定されます。呼び出すメソッドは、戻り値が文字列で引数が無いメソッドです。 fooメソッドでは、JavaScriptに返したい文字列を作成するだけです。

戻り値の基本フォーマットは、JSONですが任意の形でも指定可能です

JSON
XML
HTML
TEXT

任意フォーマットの受渡しについては、teeda-ajax-demoのexample.htmlとExampleBean.javaを参考にして下さい。JSONについてはこちらを参考にして下さい。

日本語パラメータについて

Tomcat5.x系で日本語パラメータを使用する場合には、Tomcatの設定ファイル server.xmlのConnector要素のuseBodyEncodingForURI属性を以下のように"true"を設定して下さい。

<Connector
port="8080" maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
enableLookups="false" acceptCount="100"
debug="0" connectionTimeout="20000"
disableUploadTimeout="true" useBodyEncodingForURI="true"/>

詳しくはteeda-ajax-demoをEclipse上でプロジェクトとして取り込みTomcatを起動後http://localhost:8080/teeda-ajax-demo/にアクセスしてサンプルの動作確認を行って下さい。

Seasar2.4の新機能SmartDeployを利用した場合の使い方

推奨パターン

Pageクラスにajaxで呼び出すメソッドを追加します

呼び出し対象のコンポーネント登録するには？
呼び出す際のコンポーネント名は？

呼び出したい対象のコンポーネントをdiconファイルに登録する必要はありません。
　Pageクラスにajaxから始まるメソッド名を定義する事によりdiconファイルへ登録する際に必要だったmetaタグの登録が不要になります。
　【Pageクラス例】
　package examples.teeda.web.ajaxにあるAjaxPageクラスに以下のようにメソッドを定義します。
　※convention.diconで指定されているrootパッケージはexamples.teedaとします

package examples.teeda.web.ajax;

public class AjaxPage {
    // メソッド名はajaxから始める
    public String ajaxStartAjax() {
        return "Start Ajax";
    }
}

このコンポーネントをJavaScriptから呼び出すには、コンポーネント名が必要になります。
　SmartDeployを使用した場合にはPageクラスはサブアプリケーション名 + "_" + Pageクラス名(先頭小文字)という名前でS2に自動登録されます。
　上記の例の場合、サブアプリケーション名が"ajax"でPageクラス名がAjaxPageなので先頭を小文字にした"ajaxPage"となりますので
　以下のようにJavaScriptから呼び出す事が出来ます。

  // サブアプリケーション"ajax" + "_" + Pageクラス名の先頭小文字"ajaxPage" + "_" + 呼び出したいメソッド名
  function ajax_ajaxPage_ajaxStartAjax(res){
    alert(res);
  }
  Kumu.Ajax.executeTeedaAjax(ajax_ajaxPage_ajaxStartAjax, [], Kumu.Ajax.RESPONSE_TYPE_TEXT);

Kumu.Ajaxの詳細な使い方はこちらも参考にして下さい。