電卓のデザイン
では、実際にInputMan for Java EE 1.0Jのコンポーネントを持ったJSPファイルを作成してみましょう。使用するコンポーネントは「電卓」です。
デザイナの起動
デザイナを利用すれば、デザイン結果を見ながらプロパティを設定することで、JSPページに組み込むためのカスタムタグを自動的に生成できます。また、プレビュー画面では簡易的な操作を確認することができます。
デザイナを起動するには、Windowsのスタートメニューから［InputMan for Java EE 1.0J］－［InputMan for Java EE デザイナ］を選びます。
［ファイル］－［新規］メニューを選ぶと、コンポーネントのタイプを選択するウィンドウが表示されるので、使いたいコンポーネントを選びます。今回は、電卓コンポーネントを使用しますので、「Calculator」を選びます。
デザイナは、左上のペインがコンポーネントの完成イメージで、その下にJSPカスタムタグの記述が表示されます。右のペインがプロパティウィンドウになっているので、コンポーネントのプロパティを設定し、コンポーネントをデザインしていきます。
プロパティの操作
では、プロパティを操作して電卓をデザインしてみましょう。
デフォルトの状態では、ちょっと色気のない電卓になっているので枠線の色を変えてみます。プロパティウィンドウの「backColor」プロパティをクリックし、カラーチャートから「青色」（#0080ff）を選びます。
また、それぞれのボタンの背景色も変更します。背景色はbackColorプロパティですが、各ボタンはそれぞれオブジェクトグループとして扱われます。
各オブジェクトごとにbackColorプロパティを操作して、ボタンの色を変更できます。同時にその下のコードビューでは、このデザインした電卓を実装するためのJSPカスタムタグが作成されています。
作成したコンポーネントは、デザイナ専用のフォーマットで保存できます。
JSPファイルの作成
次に、この電卓を実装するJSPファイルを作成しましょう。Eclipseを起動してください。
JSPプロジェクトの作成
Eclipseで［ファイル］－［新規］－［その他］メニューを選び、［Java］－［Tomcatプロジェクト］を選びます。プロジェクト名は「mycalc」にします。
1 <%@ page language="java" pageEncoding="SHIFT_JIS" %>
2 <% String msg = new String("JSPプログラムのテストページです"); %>
3 <html>
4 <head>
5 <title>JSP プログラム</title>
6 </head>
7 <body bgcolor="#FFFFFF">
8 </body>
9 </html>
電卓のカスタムタグの挿入
次に、デザイナに戻り、作成した電卓のカスタムタグをこのJSPファイルに貼り付けます。
まず、2と3の間に、カスタムタグの最初の2行を貼り付けます。
1 <%@ page language="java" pageEncoding="SHIFT_JIS" %>
2 <% 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"%>
3 <html>
そして、7と8のbodyタグの間に、残りのコードを貼り付けます。
7 <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/> 8 </body>
これでできあがりです。ファイルを保存します。
<%@ 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/>
</body>
</html>
