第8回 - コーディング (画面のデザイン)

[ 目次へ | 第7回へ | 第9回へ ]

今回の目標
コーディングの最初の段階として画面を設計します。
VBScriptのコード記述は次回行います。

前回、ActiveX Control Padの操作方法を説明しました。CPadは、それほど複雑な操作体系を持つツールというわけではなくて、前回覚えた方法でほとんどすべての操作ができます。念のため、復習しておくのもいいかもしれません。

それでは電卓アプリケーションの設計を始めましょう。まずは前回の例と同様、画面のデザインから始めます。

CPadを起動すると、前回も見たようにPage1というウィンドウが開いているはずです。やはり前回と同じように、<BODY>と</BODY>との間の行で右クリックして、「Insert HTML Layout」を選択します。Layoutコントロールが作成されたら、電卓らしくボタンや表示窓を配置していきます。
コントロールの配置は、こちらを参考にしてください。よくある電卓のデザインと変わりありません。
上にある四角形はLabel、それ以外はCommand Buttonです。サイズや位置は好みで自由に決めてください。コントロールのサイズや位置の違いで動作が変わったり、あとで記述するVBScriptのコードが変わることはありません。自由に配置してください。

配置したコントロールは、プロパティを変更しなければなりません。今回作成する電卓では、すべてのコントロールのCaptionとIDとを変更する必要があります。Captionの変更の仕方は前回の例でやった通り、コントロールをダブルクリックするか右クリックでPropertiesを選択します。IDも同じ手順でできるはずです。
それぞれのコントロールのCaptionとIDは以下のように指定してください（例えばLabelではこんな感じ）。もちろん別のIDにしてもかまいませんが、あとのコーディングのことを考えて、今回は以下のようにすることをすすめます。

コントロール ID Caption
ラベル lblNumber 0
Cのボタン cmdClear C
CEのボタン cmdClearEntry CE
数字のボタン cmd0 〜 cmd9
およびcmdPeriod		 0 〜 9
および"."(ピリオド)
演算子のボタン cmdEnter、cmdPlus、cmdMinus、
cmdMultiple、cmdDevide		 =、+、-、*、/

Labelは、BackColorも好きな値に変更してもいいでしょう。

なお、作成したLayoutコントロールはcalc.alx、HTMLファイルはcalc.htmlなどの名前をつけて保存するといいでしょう。
既に作成した実際のソースコードを参考にしたい方は、こちらをダウンロードして、ご覧ください。解凍後、calc.htmlをCPadで開くと、ソースコードが見られます

こちらのページでは多少HTMLファイルに手を加えることで、電卓に枠をつけて立体的に見えるようにしています。
作成したcalc.htmlファイルを以下のように変更してください。

<TABLE BORDER="4"><TR><TD>
<OBJECT CLASSID=
　　〜中略〜
</OBJECT>
</TD></TR></TABLE>

ここまでできたら、ファイルを保存してInternet Explorerで開いてみましょう。デザインした電卓が表示されるはずです。
ただし、ボタンを押しても何も起こりません。まだVBScriptによるコーディングをしていないからです。

次回は電卓として動作するようにコーディングをします。

[ 目次へ | 第7回へ | 第9回へ ]

メール 瀬尾佳隆 (webmaster@seosoft.net)