S2-Ajax - Reworking...

WEB+DB PRESS Vol. 27とhttp://d.hatena.ne.jp/pasadera/20050625 に触発されて、ajaxで遊んでみた。
とりあえず、pasaderaさんのコードをそのまま実行してみる。keywordのgrep結果を表示してくれるだけですが、けっこうおもしろい。意外と簡単にできるんだとおもいつつ、s2-ajaxなるものを発見！

http://lists.sourceforge.jp/mailman/archives/seasar-user/2005-April/003561.html

さらに、それを改良されたのがあります。

http://www.wingnest.com/blog/index.php?itemid=323&catid=20

若干、不具合があったのですがとりあえず動くレベルに直してみました。
以下はpasaderaさんのサンプルをさらに簡略化してkeywordがファイル名に一致するのだけを表示するS2JSFのサンプルです。自分でサーブレットを書かなくてもPOJOでajaxできました。すばらしい。http://www.wingnest.com/gougi/tmp/s2ajaxtest.war をベースにしています。

Google Suggestみたいに、入力欄の下に候補を出して選べるようにするのってどうやるんだろ。

FileList.java

package ajax;

public interface FileList {
    public abstract String query(String keyword);
}

FileListImpl.java

package ajax;

import java.io.File;

import org.json.JSONArray;

public class FileListImpl implements FileList {
    private String dirname;

    public String query(String keyword) {
        File dir = new File(dirname);
        File[] files = dir.listFiles();
        
        JSONArray array = new JSONArray();
        for (int i = 0; i < files.length; i++) {
            if (files[i].isFile()) {
                String filename = files[i].getName();
                if (filename.indexOf(keyword) >= 0) {
                    array.put(filename);
                }
            }
        }
        return array.toString();
    }

    public void setDirname(String dirname) {
        this.dirname = dirname;
    }
}

filelist.dicon

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE components PUBLIC "-//SEASAR2.1//DTD S2Container//EN"
	"http://www.seasar.org/dtd/components21.dtd">
<components >
  <include path="aop.dicon"/>
  <component name="filelist" class="ajax.FileListImpl" instance="session">
    <meta name="s2-ajax"/>
    <property name="dirname">"/usr/bin"</property>
    <aspect>aop.traceInterceptor</aspect>
  </component>
</components>

filelist.html

<html xmlns:m="http://www.seasar.org/maya">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>S2-Ajax</title>
</head>

<body>

<span m:inject="ajax:javascript">
  <span m:inject="f:param" m:name="import" m:value="filelist.query" />
</span>

<script type="text/javascript">//<!--  
function query() {
	var t = document.getElementById('f0:t0').value;
	var list = document.getElementById('list');
	list.innerHTML = "";
	var array = eval(filelist.query(t));
	var html = "<p>" + array.length + " files</p>";
	if (array.length == 0) {
		html = "Not Found";
	} else {
		for (var i = 0; i < array.length; ++i) {
			html += array[i] + "<br/>"
		}
	}
	list.innerHTML = html;
}
//--></script>

<form id='f0'>
keyword: <input type="text" id="t0" autocomplete="off" onkeyup="query();"/>
<p><span id="list"></span></p>
</form>

</body>
</html>