ビジュアルプログラミングとは Borland Delphi 6 でビジュアルプログラミング フォーム等を使うプログラム フォーム等の配置はマウス操作で行う 振る舞い ( ボタンを押したときの振る舞いなど ) をプログラムで書く フォームの例 ) フォーム 概要 TMemo コンポーネント ( 出力用 ) TButton コンポーネント ( 出力用 ) 例題 1. ボタンを押すと, メッセージを表示するプログラム ビジュアルプログラミングの体験例題 2. ビジュアルプログラミングでの入力と出力 3 つの TLabel コンポーネント 3 つの TEdit コンポーネント ( 入力用 ) 入力用 : TMemo コンポーネント 出力用 : TEdit コンポーネント
例題 1. ボタンを押すと, メッセージを表示するプログラム 実行 (1/2) Borland Delphi 6 でのビジュアルプログラ ミングを体験する ここでは, ボタンを押すと, ダイヤログボックス ( メッセージ付き ) を表示するプログラム を作る ダイヤログボックスの表示のために ShowMessage を使う 押してください をクリックすると 実行 (2/2) Borland Delphi 6 の起動から終了まで Borland Delphi 6 の起動 フォームの編集 プログラムコードの編集と実行 プログラムコードの保存 Borland Delphi 6 の終了 ダイヤログボックスが現れる ビジュアルプログラミングでは, フォームの編集 を行うことになる
Borland Delphi 6 の起動から終了まで Borland Delphi 6 でのフォームの編集の 3 手順 Borland Delphi 6 の起動 フォームの編集 1. アプリケーションの新規作成 2. コンポーネントの配置 3. 大きさ, 位置, キャプション等の調整 プログラムコードの編集と実行 プログラムコードの保存 振る舞い ( ボタンを押したときなど ) をプログラムで書く. その他 Borland Delphi 6 の終了 step 1 step 2 step 3 アプリケーションの新規作成 コンポーネントの配置 大きさ, 位置, キャプション等の調整 アプリケーションの新規作成 アプリケーションの新規作成 (1/2) step 1 step 2 step 3 アプリケーションの新規作成 コンポーネントの配置 大きさ, 位置, キャプション等の調整 ファイル 新規作成 アプリケーション を選ぶ
アプリケーションの新規作成 (2/2) アプリケーションの新規作成 今までは, コンソールアプリケーションの新規作成 1 ファイル 新規作成 その他 を選ぶ 2 新規作成のためのウインドウが現れる 3 新規作成では フォーム編集用のウインドウが現れる コンソールアプリケーション を選ぶ OK を選ぶ 4プログラムコード編集のためのウインドウが現れる ビジュアルプログラミング 1 ファイル 新規作成 アプリケーション を選ぶ 2 フォーム編集用のウインドウが現れる コンソールアプリケーション 入力は文字 数値 出力は文字 数値 コンポーネントの配置 step 1 step 2 step 3 コンソールアプリケーションのウインドウは色 ( 背景は黒色 ), 大きさなどの見栄えが変えられない アプリケーションの新規作成 コンポーネントの配置 大きさ, 位置, キャプション等の調整 フォームの機能は無い TButton, TMemo, TEdit, TLabel などは使えな い
コンポーネントの配置 (1/3) コンポーネントの配置 (2/3) Standard をクリック TButton コンポーネントのアイコン をクリック ( 左から 8 番目 ) コンポーネントの配置 (3/3) コンポーネントの種類を間違ったとき フォーム編集用ウインドウの好きな場所をクリックすると, コンポーネントが置かれる コンポーネントを右クリック 編集 切り取り で, 置いたコンポーネントを消すことができる
コンポーネントの配置 コンポーネントの種類を選ぶ 1 Standard をクリック 2 適当なコンポーネントのアイコンをクリック例 ) TButton コンポーネントのアイコン ( 左から8 番目 ) コンポーネントを置く 3 Form 編集用ウインドウ の好きな場所をクリックすると, コンポーネントが置かれる 大きさ, 位置, キャプション等の調整 step 1 step 2 step 3 アプリケーションの新規作成 コンポーネントの配置 大きさ, 位置, キャプション等の調整 大きさの調整 位置の調整 コンポーネントの周りの黒い点を, マウスの左ボタンでドラッグすると, 大きさが変わる コンポーネントそのものを, マウスの左ボタンでドラッグすると, 位置が変わる
キャプションの調整 Caption の欄に新しいキャプションを設定できる 大きさ, 位置, キャプションの調整 大きさの調整 コンポーネントの周りの黒い点を, マウスの左ボタンでドラッグすると, 大きさが変わる 位置の調整 コンポーネントそのものを, マウスの左ボタンでドラッグすると, 位置が変わる キャプションの調整 Caption の欄に新しいキャプションを設定できる 練習 1. 例題 1のここまでの手順を行え 1 Borland Delphi 6 の起動 スタート プログラム Borland Delphi 6 Delphi 6 2 アプリケーションの新規作成 ファイル 新規作成 アプリケーション フォーム編集用のウインドウが現れる 3 コンポーネントの配置 コンポーネントの種類を選ぶ Standard をクリックし, TButton コンポーネントのアイコン ( 左から 8 番目 ) をクリック コンポーネントを置く Form 編集用ウインドウ の好きな場所をクリック 4 大きさ, 位置, キャプション等の調整 見やすいように, 納得のいくまで調整してください 余裕がある人は練習 2 に進んでください Borland Delphi 6 でのプログラムコードの編集と実行の手順 step 1 step 2 step 3 step 4 コンポーネントの選択 プログラムコードの編集 構文チェックとコンパイル 実行
コンポーネントの選択 コンポーネントの選択 (1/2) step 1 step 2 step 3 step 4 コンポーネントの選択 プログラムコードの編集 構文チェックとコンパイル 実行 先ほど置いた TButton コンポーネントをダブルクリック コンポーネントの選択 (2/2) コンポーネントの選択 プログラムコード編集用のウインドウが現れる 1 先ほど置いた TButton コンポーネントをダブルクリック プログラムコード編集用のウインドウが現れる
プログラムコードの編集 プログラムコードの編集 step 1 step 2 step 3 step 4 コンポーネントの選択 プログラムコードの編集 構文チェックとコンパイル 実行 すでにある begin と end の間にプログラムを書く プログラムコードの編集 ここでは, 試しに, 次のように書く フォーム という意味 ボタンを押したとき という意味 procedure TForm1.Button1Click(Sender: TObject); begin ShowMessage(' ボタンが押されましたが, 何も行いません '); end; end. あとで実行すると分かるが,ShowMessage は ダイヤログボックス を表示する機能をもつ procedure TForm1.Button1Click(Sender: TObject); begin ShowMessage(' ボタンが押されましたが, 何も行いません '); end; end. procedure TForm1.Button1Click(Sender: TObject); の行には意味がある. 書き換えないこと
プログラムコードの編集 1 プログラムコード編集用のウインドウ内で, すでにある begin と end の間 にプログラムを書く コンポーネントの選択 構文チェックとコンパイル step 1 step 2 step 3 step 4 プログラムコードの編集 構文チェックとコンパイル 実行 構文チェックとコンパイル 実行 コンソールアプリケーションのときと同じ手順 1 プロジェクト を構文チェック を選ぶ step 1 step 2 step 3 step 4 2 構文チェック結果が現れるエラーが出たら, プログラムコードを修正する コンポーネントの選択 プログラムコードの編集 構文チェックとコンパイル 実行 3 プロジェクト をコンパイル を選ぶ 4 コンパイル結果が現れる エラーが出たら, プログラムコードを修正する
実行 実行 押してください をクリックしてみる 実行 実行 を選ぶ 実行画面が現れる 実行 OK を押すと消える ダイヤログボックスが現れる 実行 1 実行 実行 を選ぶ 実行画面が現れる 2 実行画面で, 押してください をクリックしてみるダイヤログボックスが現れる プログラムの ShowMessage(' ボタンが押されましたが, 何も行いません '); で作られたもの 3 ダイヤログボックスの OK を押してみる ダイヤログボックスが消える
実行の終了 実行を終了するときは をクリックする 練習 2. 例題 1の実行まで至りなさい 1 コンポーネントの選択先ほど置いた TButton コンポーネントをダブルクリック プログラムコード編集用のウインドウが現れる 2 プログラムコードの編集 procedure TForm1.Button1Click(Sender: TObject); begin ShowMessage(' ボタンが押されましたが, 何も行いません '); end; end. 3 コンパイル プロジェクト をコンパイル 4 実行 実行 実行. 押してください をクリックしてみる. ダイヤログボックスが現れるので OK をクリック 例題 2. ビジュアルプログラミングでの入力と出力 3 つの数値 x, y, z を読み込んで ( 入 力 ),x + y + z を表示 ( 出力 ) するプ ログラムを作る 入力用 : Memo コンポーネント 出力用 : Edit コンポーネント 実行画面
例題 2 で使うコンポーネントの種類 例題 2 のフォーム TEdit データの読み込み ( 入力 ) TMemo データの書き出し ( 出力 ) TButton ボタン ShowMessage を使って, ダイアログボックスを出せる TLabel 説明書き 3 つの TLabel コンポーネント 3 つの TEdit コンポーネント ( 入力用 ) TMemo コンポーネント ( 出力用 ) TButton コンポーネント ( 出力用 ) 例題 2 でのフォームの編集手順 1. コンポーネントの配置 TButton コンポーネント : 1 個 TMemo コンポーネント : 1 個 TEdit コンポーネント : 3 個 TLabel コンポーネント : 3 個 2. キャプションの調整 Label1 のキャプション : x Label2 のキャプション : y Label3 のキャプション : z Button1 のキャプション : 計算実行 TLabel TEdit TMemo TButton コンポーネント配置に関係する機能
TButton コンポーネントを置く ( 同時に位置と大きさを調整する ) TMemo コンポーネントを置く ( 同時に位置と大きさを調整する ) TEdit コンポーネントを 3 個置く ( 同時に位置と大きさを調整する ) TLabel コンポーネントを 3 個置く ( 同時に位置と大きさを調整する )
Label1 をクリックする. そして, Label1 のキャプションを x に設定 Label2 をクリックする. そして, Label2 のキャプションを y に設定 Label3 をクリックする. そして, Label3 のキャプションを z に設定 Button1 をクリックする. そして, Button1 のキャプションを 計算実行 に設定
練習 3. 例題 2のここまでの手順を行え フォームの編集が終わったところ 1 アプリケーションの新規作成 ファイル 新規作成 アプリケーション フォーム編集用のウインドウが現れる 2 コンポーネントの配置 TButton コンポーネント : 1 個 TMemo コンポーネント : 1 個 TEdit コンポーネント : 3 個 TLabel コンポーネント : 3 個 3 大きさ, 位置, キャプション等の調整 Label1 のキャプション : x Label2 のキャプション : y Label3 のキャプション : z Button1 のキャプション : 計算実行 余裕がある人は練習 4 に進んでください オブジェクトツリー オブジェクトツリーのウインドウには, すべてのコンポーネントの 名前 が表示されている 名前 と キャプション は違う キャプション : あくまでも 表示 のため. 見栄えに関係する. 日本語可例 ) x, y, z, 計算実行 名前 : すべてのコンポーネントに付けられた名前 プログラム中では, 名前 を使う例 ) Button1, Edit1, Edit2, Edit3,
種類 TButton TEdit 名前 Button1 Edit1 Edit2 キャプション 計算実行キャプション無し オブジェクトインスペクタ 最後に選んだ ( 置いたり, クリックしたりした ) コンポーネントの情報が表示される 各項目の編集もできる Edit3 TLabel Label1 x TMemo Label2 Label3 Memo1 y z キャプション無し コンポーネントの種類と名前は, ここに表示される コンポーネントの選択とプログラムコードの編集 1 コンポーネントの選択 先ほど置いた TButton コンポーネントをダブ ルクリック プログラムコード編集用のウインドウが現 れる 2 プログラムコードの編集 現れたプログラム編集用ウインドウ この行の意味は : procedure TForm1.Button1Click(Sender: TObject); コンポーネントの名前 Button1 クリック 次ページのプログラムコードを書く
使用する変数を begin の前に書く プログラムコードの編集 Butto1 をクリックしたときに実行したいプログラムを begin と end; の間に書く procedure TForm1.Button1Click(Sender: TObject); var x: real; 入力を行っている部分 var y: real; var z: real; 出力を行っている部分 begin Memo1.Lines.Add( ' ボタンが押されました ' ); x := StrToFloat(Edit1.Text); y := StrToFloat(Edit2.Text); z := StrToFloat(Edit3.Text); Memo1.Lines.Add( 'x=' + FloatToStr(x) ); Memo1.Lines.Add( 'y=' + FloatToStr(y) ); Memo1.Lines.Add( 'z=' + FloatToStr(z) ); Memo1.Lines.Add( 'x+y+z=' + FloatToStr(x+y+z) ); end; TEdit コンポーネントでの入力 TEdit コンポーネントに入ってる値の読み込み 整数の変数 := StrToInt(Edit1.Text); 浮動小数の変数 := StrToFloat(Edit1.Text); Edit1 の部分は, コンポーネントの 名前 を書く ( 例 ) Edit2, Edit3 のように変わる
TMemo コンポーネントでの出力 出力 Memo1.Lines.Add( ' メッセージ ' ); Memo1.Lines.Add( IntToStr( 整数の変数 ) ); Memo1.Lines.Add( IntToFloat( 浮動小数の変数 ) ); 練習 4. 例題 2の実行まで至りなさい 1 コンポーネントの選択先ほど置いた TButton コンポーネントをダブルクリック プログラムコード編集用のウインドウが現れる 2 プログラムコードの編集 procedure TForm1.Button1Click(Sender: TObject); var x: real; var y: real; var z: real; begin Memo1.Lines.Add( ' ボタンが押されました ' ); x := StrToFloat(Edit1.Text); y := StrToFloat(Edit2.Text); z := StrToFloat(Edit3.Text); Memo1.Lines.Add( 'x=' + FloatToStr(x) ); Memo1.Lines.Add( 'y=' + FloatToStr(y) ); Memo1.Lines.Add( 'z=' + FloatToStr(z) ); Memo1.Lines.Add( 'x+y+z=' + FloatToStr(x+y+z) ); end; 3 コンパイル プロジェクト をコンパイル 4 実行 実行 実行. 押してください をクリックしてみる. ダイヤログボックスが現れるので OK をクリック