| ## Teeda Ajax 【最新情報】 Seasar2.4の新機能SmartDeployを利用した場合の使い方 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の詳細な使い方はこちらも参考にして下さい。 |
| Copyright© 2005-2006, The Seasar Foundation and the others. All rights reserved.