目次

まずはプログラムの流れを考えるんだったっけ。うーん、数字を2つ入力して、足し算か掛け算かも入力して、計算して、結果を表示でいいのかな。

プロジェクトを新規作成します。メニューバーの「ファイル(F)|新規作成(N)|VCLフォームアプリケーション-Delphi for Win32(V)」を選択。作成したフォームのプロパティも設定しています。画面左下部の「オブジェクトインスペクタ|プロパティ」ページの「ローカライズ対象」の「Caption」プロパティに、「計算機」と入力します。タイトルバーの文字が、「計算機」にかわります。名前も付けておいたほうがいいのね。「その他」の「Name」プロパティに「frmCalc」と入れておきましょう。

コンポーネントがいっぱいあって画面作るの大変そうだけど、コンポーネントもコピーすればいいんだって。まずは、コンテナコンポーネントから配置します。画面右下部のツールパレット「Standard」の「TPanel」コンポーネントを1つ、「Additional」の「TFlowPanel」コンポーネントを1つ配置します。外観はTPanelと変わらないですね。ほかに、「Additional」の「TGridPanel」コンポーネントを1つ置きます。3つのコンテナコンポーネントに、それぞれAlignプロパティを設定します。プロパティは「オブジェクトインスペクタ|プロパティ」ページ「レイアウト」の「Align」で設定できたわよね。ついでに、それぞれの「ローカライズ対象」の「Caption」プロパティを取り除きます。

Panel1

FlowPanel1

GridPanel1

図03 コンテナコンポーネントのプロパティ設定

FlowPanel1にテンキー(数字キー)、Panel1に表示用のTEdit、GridPanel1にその他のボタンを配置します。配置しにくからフォームをちょっと大きくしておこうっと。Panel1に表示用のTEditとTLabelを配置します。ツールパレットから「Standard」の「TEdit」を3つ配置。それぞれのTEditの間に「Standard」の「TLabel」を2つ配置します。

図04 TEdit配置

次はテンキー用のボタンです。TButtonを配置したらいいのよね。

では、ツールパレット「Additional」の「TSpeedButton」をFlowPanel1の上に配置します。テンキーボタンっぽく、正方形に近い形にサイズ変更します。作成できたら、ボタンを選択したまま、キーボードの[Ctrl+C]キー、[Ctrl+V]キーを続けて押します。最初のボタンの隣にコピーしたボタンが配置できたら、そのまま[Ctrl+V]キーを続けて押し、同じボタンを10個作ります。FlowPanel1の幅をボタンが3個並ぶように調整しておきましょう。1つはみ出ちゃいますが、「0」のボタンです。ボタン3つ分の幅に広げて全体をまとめたらテンキーらしくなりますね。

図05 TSpeedButton配置

次に、足し算や割り算などの四則演算を入力するボタンを、4つ作ります。こっちは普通のTButtonでいいんだって。フォーム右側にあるGridPanel1の上に、「Standard」の「TButton」コンポーネントを4つ配置します。サイズを、テンキーのボタンと同じくらいに変更します。ほかに規定のサイズのボタンをつけるので、ツールパレットから「Standard」の「TButton」コンポーネントを、さらに4つ配置します。場所がないように見えますが、GridPanel1の上をクリックすれば配置できます。これで、大きいボタンが4つ、小さいボタンが4つ配置されました。

図06 配置完了

次にプロパティを設定します。コンポーネントにもNameプロパティをつけて、説明上区別しやすいようにします。

Panel1に配置したTEditから設定しましょう。「その他」の「Name」プロパティは左から「edtInput1、edtInput2、edtKekka」にします。3つあるTEditの「ローカライズ対象」の「Text」プロパティの内容は、必要ないので削除しておきます。

入力中のエディットは白、その他は違う色にしたら目立っていいわね。「表示」の「Color」プロパティも設定します。edtInput1は「clWhite」、edtInput2とedtKekkaは「clYellow」にします。

好きな色に設定してもいいですが、名前がついていたほうがコードで記述しやすいのでプルダウンボタンで「cl」から始まる色名を選ぶようにしましょう。

edtInput1

edtInput2

edtKekka

TLabelのNameプロパティは左から「lblEnzan、lblEqual」としておきます。次にTLabelのサイズを調整します。まずは、lblEnzanの「Caption」プロパティを削除しましょう。あれ？lblEnzanの幅がなくなっちゃった。

では、lblEnzanを選択して、「レイアウト」の「AutoSize」プロパティを「False」にします。幅調整はサイズ変更ハンドルでできるけれど、ドラッグしにくいときにはオブジェクトインスペクタでプロパティを設定すればいいんだって。「レイアウト」の「Width」プロパティに「20」くらいを代入します。

lblEnzan

次のlblEqualは「ローカライズ対象」の「Caption」プロパティに「=」を全角で入力します。半角でもいいけど小さすぎるから全角の方が見やすいみたい。計算結果が出るまではない方がいいのに。

lblEqual

次にFlowPanel1に乗せたテンキー部分の左上のコンポーネントから順にNameプロパティをつけ、Captionプロパティに数値を設定します。左上のTSpeedButtonコンポーネントを選択して、「オブジェクトインスペクタ|プロパティ」ページで「その他」の「Name」プロパティに「sbtn1」、「ローカライズ対象」の「Caption」プロパティに「1」と入力します。このようにして順に「sbtn2、sbtn3、sbtn4、sbtn5、sbtn6、sbtn7、sbtn8、sbtn9 、sbtn0」とNameプロパティをつけ、それにあわせてCaptionプロパティも変更します。

図07 プロパティ設定

うーん、ちょっと大変。でも、コンポーネントはまだあります。今度はGridPanel1に配置したボタンです。こちらも左上から順に、Nameプロパティを変更しましょう。大きいボタン4つが四則演算のボタンです。「btnTasu、btnHIku、btnKakeru、btnWaru、btnClear、btnCopy、btnExit、btnKeisan」とします。Captionプロパティは全角文字で「+、－、×、÷、クリア、コピー、閉じる、計算」です。

btnTasu

btnHIku

btnKakeru

btnWaru

btnClear

btnCopy

btnExit

btnKeisan

図08 TButtonプロパティ

もうちょっとです。FlowPanel1のボタンとGridPanel1が、フォームの端にくっつきすぎているので離します。FlowPanel1は構造ペインを使うと選択しやすいんだって。FlowPanel1を選択してプロパティページから「レイアウト」の「Padding」プロパティで「+」をクリックします。表示される「Bottom」「Left」「Right」「Top」それぞれに、「5」を入力しましょう。TFlowPanelではコンポーネントの間には、隙間があかないのね。まわりだけに隙間ができました。同様にしてGridPanel1にも「Padding」プロパティでそれぞれ「3」にします。配置がおかしくなったらfrmCalcやFlowPanel1などの幅を調整してください。

図09 Paddingプロパティ

すべてのコンポーネントが表示されるようにfrmCalcとFlowPanel1、Panel１、GridPanel1のサイズを調整します。やっと画面が完成？

本当かな？ツールパレット「Win32」カテゴリの下のほうにある「TXPManifest」コンポーネントを配置します。実行時には表示されないからどこに配置してもいいんだって。フォームデザイナの画面でも見た目は変わりませんね。では、一度保存して実行してみましょう。ツールバーの[すべて保存]ボタンをクリックして保存します。ユニット名は「FormCalclator」、プロジェクト名は「Calclator」とします。保存できたらツールバーの[実行]ボタンをクリックしましょう。

図10 画面完成

わぁ、本当にボタンの形がXPスタイルになりました。

なんだか先生の指示が、前ほど具体的じゃないんですけど。自分で考えろってことね。うーん。sbtn1のOnClickイベントハンドラを作るのが先ね。sbtn1を選択して、「オブジェクトインスペクタ|イベント」ページで「入力」の「OnClick」をダブルクリックします。「1」って表示できればいいのね。じゃあコードはこうなるのかな。太字の部分を記述してね。

procedure TfrmCalc.sbtn1Click(Sender: TObject);
begin
  edtInput1.Text := '1';
end;

これで良さそうね。コピーして、sbtn2やsbtn3もつくろう。

ツールバーの[すべて保存]ボタンで保存して、[実行]ボタンをクリックしてみます。「1」ボタンを押してみると、edtInput１に「1」と表示されます。

図11 イベント作成

btn1OnClickイベントハンドラのコードを書き換えます。次に、ツールバーの[フォーム/ユニット切り替え]ボタンなどでフォームデザイナに戻ってbtn1と同様、btn2からbtn0のOnClickイベントハンドラの枠を作成します。コードはあとで記述するので、じゃんじゃん枠を作っちゃいますね。全部の枠ができたら、コードエディタに戻ってbtn1のコードをコピーして「1→2」のように数値の部分は書き換えます。太字の部分を追加しましょう。

procedure TfrmCalc.btn0Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '0';
end;

procedure TfrmCalc.btn1Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '1';
end;

procedure TfrmCalc.btn2Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '2';
end;

procedure TfrmCalc.btn3Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '3';
end;

procedure TfrmCalc.btn4Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '4';
end;

procedure TfrmCalc.btn5Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '5';
end;

procedure TfrmCalc.btn6Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '6';
end;

procedure TfrmCalc.btn7Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '7';
end;

procedure TfrmCalc.btn8Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '8';
end;

procedure TfrmCalc.btn9Click(Sender: TObject);
begin
  edtInput1.Text := edtInput1.Text + '9';
end;

できたらツールバーの[すべて保存]ボタンで保存して、実行しておきましょう。今度はedtInput1に複数の桁が表示されます。

図12 テンキー作成