2005-05-15

サンプルシステムの実装完了！

Ajax J2EE

1枚のJSPでごり押しなQuickDevが工数約0.5人日だったのに対し，こっちは工数4人日くらいかかった（30時間超えてると思う．土日ぜんぶ費やした．）　まあAjax未経験からのスタートだったから，経験曲線を考慮すると両者は単純に比較はできないが．

感想．デバッグが大変．J君が言っていたことを自分もしみじみ実感．

Eclipse上でのJava開発に慣れちゃっていると，Javascriptがエディタ上でリアルタイムデバッグできないのがもう大変で大変で・・・．またエラーが発生してもprintStackTraceのようなものは無いし・・・（MozillaのJavascriptコンソールはかなり役に立ったが）．あとJavascriptのDOMのAPIの一覧とかが探しても結局見つからず，JavaのDOM APIからの推測で全部実装したのも大変で・・・．あとJavascriptでHTMLの内容を書き換えてしまうのでHTMLソースを見てもデバッグの役には立たず，MozillaのDOMインスペクタでリアルタイムのHTMLを覗くも時間がかかる・・・．とまあ自分の怠慢にかこつけた不満ばかりｗ

要は開発環境が整えばもっと良くなるんじゃないかという感じ．しかし出来上がったものはJ2EEのみのアプリと比べると数段良い感じなので，今後に期待．

デバッグ用コードとか取り除いてきれいにしたやつをikda.netに記事とともにUPしたいですねー．

2005-05-15

経過

Ajax J2EE

4日目にしてようやく慣れてきた感じ．問題はほぼ解決したと思われる．

サーバ側はブラウザからのリクエストがあった場合にはHTMLを返し，XMLHttpRequestからのリクエストの場合はXMLを返すように改造．

ログイン部分はエラー処理も含めて実装完了．サーバ側のModelクラスは変更なし．ServletはリクエストのDispatchルーチンを改変．JSPで実装していたコードをJavascript側に移す．今までHTMLを返していたJSPをXMLで返すように変更．HTMLの大部分をJavascriptが生成するようになる．もうちょいで終わるか．

2005-05-15

気になるポイントの整理

Ajax J2EE

1つ目．XMLHttpRequestで取得した内容に""が入っていてもfunc1は使えない．関数の動的追加をJavascript自身は行えない（と仮定）から．

これに対してはやはりあらかじめ全ての関数を最初のページアクセスの際に返して置くしかない．このような手法をとると初回アクセスが遅くなる可能性があるので""はBodyの一番後ろに置いて，最初のほうで"Waiting..."とかのHTMLを出しておいて，onloadで本当に表示したいコンテンツを再度XMLHttpRequestで取りに言って差し替えるというパターンを取ることで対応．

2つ目がやっかいかも．XMLHttpRequestで取得した内容に"＜input id="hoge" type=text /＞"などが入っていた場合，そこにユーザが入力した内容をdocument.getElementByIdあるいは他の方法で取れるかどうか．innerHTMLに突っ込んだ昨日の方法だとid=hogeが取れなかった．もしかしてDOM関数を使って突っ込むようにすれば取れるのかな？それともouterHTMLで解決？

起きたら既に13時だった．昨日寝たの4時・・・．既に日本にいた時と同じような生活になりつつある．やばーい．

と書きましたが，Javascriptで追加したinput要素の方は普通に取れるようです．昨日は遅かったから頭がぼけてたのかな〜．

検証で使ったソース

<html>
<head>
<script>
function func1() {
  var fuga = document.getElementById("fuga");
  fuga.innerHTML = "<input type='text' id='id1' name='input1'/>";
  //fuga.innerHTML = "<form name='form1' action=''><input type='text' id='id1' name='input1'/></form>";
}

function func2() {
  var fuga = document.getElementById("fuga");
  fuga.outerHTML = "<form name='form1' action=''><input type='text' id='id1' name='input1'/></form>";
}

function func3() {
  var target = document.getElementById('id1');
  alert(target + ":" + target.value);
}
</script>
</head>
<body>
<p>
<button type="button" onclick="func1();">func1</button>
<button type="button" onclick="func2();">func2</button>
<button type="button" onclick="func3();">func3</button>
</p>
<p>
<div id="fuga">default message</div>
</p>
</body>
</html>