AjadでDOM操作

Ajad DOM applet

そんな訳で、いよいよAjadでAjaxもどきなことに挑戦してみようと思います。今回は第一歩として、テキストボックスに入力されたテキストを、bタグで囲ってspanタグのinnerHTMLにセットしてみようと思います。シンプルなDOM操作ですが、これができればいろいろと応用が可能になる・・・はず。

用意するHTMLはこんな感じ。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="ja">
 	<head>
 		<script type="text/javascript">
 			function getApplet() {
 				return document.getElementById("applet");
 			}
 		</script>
 	</head>
  	<body>
  		<!-- アプレット読込み -->
 		<applet id="applet" mayscript code="org/ajad/sample/web/applet/TopApplet" width="0" height="0"></applet>
 		
 		<!-- DOM操作用HTML -->
 		単純なDOM操作<br />
 		<div>
 			テキスト入力 : <input type="text" id="simpleDomInput" size="20" />
 			<input type="button" id="simpleDomButton" value="反映" onclick="getApplet().onClickSimpleDomButton();" /> 
 		</div>
 		<div>
 			入力したテキストの反映場所 : <span id="simpleDomOutput"></span>
 		</div>
 	</body>
 </html>

めざとい人(?)は気づくかもしれませんが、Javaだけでやるといいつつ実はボタンをクリックしたときにアプレットのメソッドを呼ぶ際にJavaScriptを使っています。実はここも、アプレットのinit()メソッド中でJSObjectを使ってイベントリスナーを張ればscriptタグや「onclick=」を使わなくてもイベントをはれるのですが、クロスブラウザ等々の問題で結構面倒くさいのでとりあえずここではこの方法でずるをしておくことにします。JavaScriptを使うといっても、この程度ならば別に大変ではない気がするし。

そして、肝心のアプレット側のコードはこんな感じ。

package org.ajad.sample.web.applet;

import java.applet.Applet;

import netscape.javascript.JSObject;

public class TopApplet extends Applet {
	private static final long serialVersionUID = 3871816411119859125L;

	@Override
	public void init() {
		// NOP.
	}
	
	public void onClickSimpleDomButton() {
		// Windowオブジェクト取得
		JSObject win = JSObject.getWindow(this);
		
		// Documentオブジェクト取得
		JSObject document = (JSObject)win.getMember("document");
		
		// テキストエリアの入力文字列を取得
		JSObject inputText = (JSObject)document.call("getElementById", new Object[] {"simpleDomInput"});
		String inputString = (String)inputText.getMember("value");
		System.out.println("value = " + inputText.getMember("value"));
		
		// 入力した文字列をspanのinnerHTMLに設定
		JSObject outputArea = (JSObject)document.call("getElementById", new Object[] {"simpleDomOutput"});
		outputArea.setMember("innerHTML", "<b>" + inputString + "</b>");
	}
}

実行してみると・・・

おぉぉぉぉぉっ！

見事にspanタグの間にbタグで太字になった文字列が表示されました。ポイントとしては、この辺りですかね。

	String inputString = (String)inputText.getMember("value");
	JSObject outputArea = (JSObject)document.call("getElementById", new Object[] {"simpleDomOutput"});
	outputArea.setMember("innerHTML", "<b>" + inputString + "</b>");

getElementById()を利用したJSObjectの取得やvalueの取得、innerHTMLへのHTMLのセット等々はしょっちゅう使うと思うので、ユーティリティ化するかAppletを継承してAbstractAjadAppletとか適当な抽象クラスを作ってそこに定義してやる等々の共通化を図るとよりコーディングが楽になるかも。

そんな訳で、次回はいよいよサーバ側と通信して、リンクをクリックした際にリンク先のHTMLをdivタグ内に読込むような非遷移更新をやってみたいと思います。