Full Ajaxやってみた - しんさんの出張所はてなブログ編

過去にシンプルにAjaxのみではどうなるかということでテストまではしたのだが、本格的に作ることはしなかった。テストはformによるsubmitだったが、今回はajaxのみということで非常にシンプルになる。

ページはプレーンなhtmlまんま（wicketとかカスタムタグのように修正が入るわけではない）。最終的にhtmlさえ生成されればいいのでビューは何のフレームワークを選択してもよい。

seasar2のセットアップで躓く

コンポーネントの登録にはSeasar2を。でもhot deployのセットアップの仕方が分らん。
hotdeploy.diconをincludeしたら大量にあれがないだのいわれた。
seasar2は環境設定ファイルが大量にあるのだが、どれが何を意味するとかのドキュメントが見つからない。

まずは一番シンプルな登録のみをやってみる。

･･･動かない。おかしい。前回の設定のままでも動かない。

そこでFileSystemComponentAutoRegisterに変更してみる。お･･･動いた。

とりあえず設定ファイルは以下のように。

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

    <component class="org.seasar.framework.container.autoregister.FileSystemComponentAutoRegister" >
        <initMethod name="addClassPattern">
            <arg>"fullajax.page"</arg>
            <arg>".*"</arg>
        </initMethod>
    </component>
</components>

ソース

ビューはこれだけ。真にプレーンなhtml。必要なのはページを表示したときにinit()を呼ばせるだけ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <script src='dwr/interface/FullAjax.js'></script>
        <script src='dwr/engine.js'></script>
        <script src='dwr/util.js'></script>
        <script src='prototype.js'></script>
    </head>
    
    <body onload="FullAjax.init();">
        <form id="form1" >
            <input id="text1" type="text" >
            <input id="button1" type="button" value="送信">
            <div id="label1" ></div>
        </form>
        <hr>
    </body>
</html>

ページに関連付けされるクラス。テキストとラベルとボタンだけ関連付けしている。アノテーションの中の文字列はhtmlのidを指定しているだけ。これが関連のすべて。

package fullajax.page;

import fullajax.annotation.Text;
import fullajax.annotation.Init;
import fullajax.annotation.Action;
import fullajax.annotation.Label;
import org.seasar.framework.container.annotation.tiger.Component;
import org.seasar.framework.container.annotation.tiger.InstanceType;

@Component(name="/index.html" ,instance=InstanceType.PROTOTYPE)
public class Index {

    @Text("text1")
    public String text;
    
    @Label("label1")
    public String label;
    
    //画面開いたときの初期設定
    @Init
    public void init(){
        text = "初期値";
        label = "ここに表示されます";
    }
    
    //ボタンクリックされたイベント
    @Action("button1")
    public void submit(){
        label = "はろー" + text;
    }
}

実行

動作はソースから予想されるとおり。

開いた状態。初期値がinitメソッドの内容で上書きされている。htmlは適当な文字をセットしておいてもよい。

名前を入力してボタンをクリックする。

ポイントはjavaとhtmlの関連にはidのみを使っていること。しかもアノテーションでシンプルに。

できないこと

ファイルアップロード

これだけはセキュリティ的にできないのでインナーフレームとか別の処理でやらせる必要がある。

さらによくするには

今回はテストということでStringとvalueを直接結びつけたが、これはコンポーネントにしたほうがよさそうだ。上のコードならば

@Text("text1")
TextField text1 = new TextField("初期値");

@Label("label1")
Label label1 = new Label("ここに表示されます");

    @Action("button1")
    public void submit(){
        label.setText( "はろー" + text.getValue() );
    }

のような感じで。こうすることによって、java側のライブラリでcss等も細かく調整できる。

適当に作った割には満足した結果になった。