JSPファイルの実行
作成したワークスペースのフォルダ「mycalc」を表示し、コンポーネントが動作するために次の操作をします。
1
InputMan for Java EE 1.0Jがインストールされているフォルダのlibフォルダからclientフォルダをコピーし、JSPファイルのある仮想ディレクトリに配置します。ここには、コンポーネントが参照するクライアントスクリプトが格納されています。
2
InputMan for Java EE 1.0Jがインストールされているフォルダのlibフォルダから、ファイル「inputman.jar」をコピーし、JSPファイルのある仮想ディレクトリの「WEB-INF/lib」に配置します。そして、Eclipseのパッケージエクスプローラで「mycalc」を選択し、TomCat起動ボタンを押します。
これで、この仮想ディレクトリがTomcatに認識されましたので、Webブラウザを起動し、次のURLを入力します。
http://localhost:8080/mycalc/
無事、電卓が表示されれば成功です。もし、Tomcatがエラーになった場合は、一度Tomcatを終了し、再度「mycalc」を選択した状態でTomcatを起動してください。
また、JSPエラーが出た場合は、上記で説明しているファイルがフォルダ構成も含めて正しく設定されているかどうか確認してください。
イベント処理の作成
InputMan for Java EE 1.0Jの各コンポーネントのイベント処理は、サーブレットでサーバとの通信をする処理はもとより、クライアント側でJavaScriptによるイベント処理も可能になっています。今回は、クライアント側のスクリプト処理で、電卓の計算結果を受け取る処理を作成します。
まず、電卓の値を受け取って表示するボタンをJSPページに組み込みます。
<input id="button1" name="button1" type="button"
value="計算結果を使う" onclick="button1_click();"/>
クライアント側のスクリプトはJavaScriptで記述します。Calculatorコンポーネントの計算結果を取得するには、GetValueメソッドを使用します。
イベント発生元のコンポーネントを把握するには、イベントハンドラのパラメータを利用するか、FindIMControlメソッドを使用して把握します。FindIMControlメソッドは、引数にコンポーネントのIDを指定するだけで、操作対象のオブジェクトを参照できるので、これを使います。
今回作成したCalculatorコンポーネントのIDは、デザイナの「id」プロパティを参照するとわかります。デフォルトではコンポーネントの名称と数字の組み合わせで付けられています。今回作成したCalculatorコンポーネントも、「Calculator1」というidプロパティの値が付けられているので、これをFindIMControlメソッドの引数に指定して、GetValueメソッドを実行します。
GetValueメソッドは電卓の計算結果を返してきますので、今回はこれを変数に格納し、アラートダイアログボックスで表示してみました。
<script type="text/javascript">
function button1_click()
{
var value = FindIMControl("Calculator1").GetValue();
alert(value)
}
</script>
コードの入力が終わったら、JSPファイルを保存しWebブラウザをリロードして動作確認をします。アラートダイアログボックスで計算結果が表示されれば成功です。
<%@ page language="java" pageEncoding="SHIFT_JIS" %>
<% String msg = new String("JSPプログラムのテストページです"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://www.grapecity.com/inputman" prefix="im"%>
<html>
<head>
<title>JSP プログラム</title>
</head>
<body bgcolor="#FFFFFF">
<im:ScriptManager calculator="true" root="./client/" />
<form id="Form1" method="post">
<im:Calculator backColor="#0080ff" editButtonsStyle="#ffff80,WindowText" id="Calculator1" mathButtonsStyle="#ffb3b3,Maroon" memoryButtonsStyle="#e8a2ff,Blue" memoryStatusStyle=",WindowText" resetButtonsStyle="#ffff80,WindowText"/>
</form>
<im:PageEnd/>
<input id="button1" name="button1" type="button"
value="計算結果を使う" onclick="button1_click();"/>
<script type="text/javascript">
function button1_click()
{
var value = FindIMControl("Calculator1").GetValue();
alert(value)
}
</script>
</body>
</html>
まとめ
今回は、ページの関係もあって、電卓の計算結果を受け取る処理をクライアント側で行いましたが、サーブレットを作成しサーバサイドのJavaアプリケーションとやり取りすることも可能です。
InputMan for Java EE 1.0Jには、他にもいろいろな機能を持ったコンポーネントがありますので、次回以降も紹介していきたいと思います。
