C++Builder 2009 ファーストガイド 第八回 「コンポーネント」

By: Chikako Yonezawa

Abstract: C++Builder 2009 のコンポーネントの概要とその操作について説明します。

このファーストガイドは、これから C++Builder 2009を使い始める初心者の方を対象に 10回に分けて基本的な事項を説明していきます。

第八回は、コンポーネントの概要とその操作について説明します。

    1.コンポーネントとは

TComponentから派生したクラスを「コンポーネント」といい、フォームやデータモジュールにコンポーネントを配置して設計時に操作することが可能です。コンポーネントは、主にビジュアルコンポーネントと非ビジュアルコンポーネントに分類されます。

    1.1ビジュアルコンポーネント(コントロール)

実行時のフォーム上に表示されるコンポーネント。例えば TButtonや TMemoがこれに該当します。

Hide image
comp07

TControlから派生したコントロールは、GUIアプリケーションで使用され、その実行時に目に見える形で表示されます。

    1.2非ビジュアルコンポーネント

実行時に表示されないコンポーネント。例えば TDataSourceなどのデータベース関連のコンポーネントがこれに該当します。

設計時にはアイコンの形で表示されます。

Hide image
comp08

    2.グループ化(コンテナコンポーネント)

コンポーネントは、フォームなどの親となるコンポーネント上に配置します。関連のあるコントロールをグループに分けて親となるコンポーネント上に配置すると、使いやすさが向上します。

グループ化を行う親となるコンポーネントをコンテナコンポーネントと呼びます。

例えば、フォーム上にコンテナコンポーネントである TPanelを貼り、TPanelの上に TButtonをいくつか配置します。TPanelを移動すると、子コンポーネントである TPanel上の TButtonも、親である TPanel内の相対位置を保持したまま一緒に移動します。

このようなコンテナコンポーネントには、他に、TGroupBox TPanel TRadioGroup TScrollBox TTabControl TPageControl THeaderControlなどがあります。

    3.プロパティ

第四回「プログラミング手順」で触れましたが、プロパティとは、コンポーネントの外観や性質を設定できる属性のことを示します。たとえば、フォームの上部に表示される文字列は、フォームの Captionプロパティ、文字のフォントについては Colorプロパティで設定することができます。

    3.1プロパティの設定

設計時にコンポーネントのプロパティを設定するには、オブジェクトインスペクタを使用します。

Hide image
comp05

使用者は、オブジェクトインスペクタに表示されたプロパティを選択し、

  • テキストボックスに値を直接入力する

Hide image
comp09

  • ドロップダウンリストから値を選択する

Hide image
comp10

  • 参照符ボタン[…]を押してプロパティエディタを使用する

Hide image
comp11

などの方法でプロパティの値を変更します。

オブジェクトインスペクタ上で変更された内容は、すぐにデザイナ上に反映されるので、使用者は、変更された状態の画面を逐次確認することができます。

また、プロパティは設計時だけではなく、コードを記述することで実行時にも設定できます。

以下はフォームのキャプションを変更する場合のコード例となります。

Form1->Caption = “キャプションを変更”;

    3.2 主なプロパティ

各コンポーネントには多くの共通のプロパティがあります。主なものについて以下の表に記します。

プロパティ名

説明

Action

アクションをコンポーネントに関連付けます

Align

親(コンテナ)コンポーネント内でコンポーネントを揃える方法を指定します

Alignment

コンポーネント内のテキストの横方向の配置を制御します

AlignWithMargins

コンポーネントをマージンで制約するかを示します

Anchors

コンポーネントがその親に対してどのようにアンカー設定されるかを指定します

BiDiMode

コンポーネントの双方向モードを指定します

Caption

コンポーネントのラベルとして表示される文字列を指定します

Color

コンポーネントの色を指定します

Constraints

コンポーネントのサイズ制約を指定します

Cursor

コンポーネントの対象座標上にマウスがあるときにマウスポインタの表示に使用するイメージを指定します

CustomHint

コンポーネントのカスタムヒント

Enabled

コンポーネントが、マウス・キーボード・タイマーのいずれかのイベントに応答するかどうかを制御します

Font

コンポーネントに表示するフォントの属性を制御します

Height

コンポーネントの縦方向のサイズをピクセル数で指定します

HelpContext

状況感知型ヘルプトピックに対するコンポーネントの数値IDです

HelpKeyword

状況感知型ヘルプトピックに対するコンポーネントのキーワードです

HelpType

コンポーネントの状況感知型ヘルプトピックをコンテキストIDで識別するか、キーワードで指定するかを示します

Hint

マウスがコンポーネント上を移動するときに表示されるテキスト文字列を保持します

Left

コンポーネントの左端の水平座標を親に対する相対距離で指定します

Margins

コンポーネントのマージンを指定します

Name

コンポーネントを参照するときの名前を指定します

Parent

コンポーネントの親を設定します

ParentBiDiMode

コンポーネントが親の BiDiModeを使用するかどうかを指定します

ParentFont

コンポーネントが親のコンポーネントと同じフォントを使用するかどうかを指定します

PopupMenu

コンポーネントに関連付けられているポップアップメニューを表示します

ShowHint

マウスポインタをコンポーネント上に置いたときに、コンポーネントのヒントを表示するかどうかを制御します

Text

コンポーネントに関連付けられているテキスト文字列を保持します

Top

コンポーネントの左隅の垂直座標を親に対する相対距離で指定します

Visible

コンポーネントを画面上に表示するかを制御します

Width

コンポーネントの水平サイズをピクセル単位で指定します

注意: 上記のプロパティがすべてのコンポーネントに存在する訳ではありません。また、それぞれのプロパティについての詳細は、製品付属のヘルプ、および弊社ドキュメントセンターからダウンロード可能なヘルプドキュメントをご利用下さい。

    3.3プロパティの設定例

実際にフォーム上にコンポーネントを配置し、上記のそれぞれの方法にてプロパティを変更してみましょう。

  1. IDEのメニューから [ファイル | 新規作成 | VCLフォームアプリケーション – C++Builder]を選択します。デザイナが開き、何もコンポーネントが追加されていない状態のフォームが表示されます。

Hide image
comp04

  1. ツールパレットの Standardの横の +ボタンをクリックし、Standardカテゴリを開きます。

Hide image
comp12

Hide image
comp13

  1. TMemoをマウスでダブルクリックします。フォーム側に Memoコンポーネントが置かれます。

Hide image
comp14

  1. Memoコンポーネントをマウスで左上の方に移動させ、フォームの幅に合わせて幅を広げます。

Hide image
comp15

  1. ツールパレットの TButtonをマウスでダブルクリックします。するとフォーム側に Buttonコンポーネントが置かれます。

Hide image
comp16

  1. Buttonコンポーネントをマウスで Memoコンポーネントの下の適当な位置に移動します。

Hide image
comp17

  1. Buttonコンポーネントに表示されている文字を変更します。マウスで Buttonコンポーネントを選択し、オブジェクトインスペクタの Captionプロパティをマウスで選択すると、「Button1」と表示されている部分の色が反転し、変更可能となりますので、キーボードから「色変更」と入力します。フォーム上の Buttonコンポーネントの文字が「Button1」から「色変更」に変わります。

Hide image
comp18

Hide image
comp19

  1. Memoコンポーネントの色を変えます。マウスで Memoコンポーネントを選択し、オブジェクトインスペクタ上の Colorプロパティをマウスで選択すると▼ボタンが表示されます。この▼ボタンを押すとドロップダウンリストが表示されるので、表示されたドロップダウンリストから clSkyBlueを選択します。フォーム上の Memoコンポーネントの色が選択した色に変わります。

Hide image
comp20

Hide image
comp21

  1. Memoコンポーネントに表示されている文字を変更します。マウスで Memoコンポーネントを選択し、オブジェクトインスペクタの Linesプロパティをマウスで選択すると (TStrings)と反転表示された文字の横に参照符ボタン[…]が表示されます。この[…]ボタンを押すと、文字列リストの設定のプロパティエディタが表示されます。

Hide image
comp22

  1. 表示された文字列リストのプロパティエディタ内の「Memo1」の文字列を、「自由に入力できます」に変えて [OK]ボタンを押します。フォーム上の Memoコンポーネント内に表示されている文字列が「Memo1」から「自由に入力できます」に変わります。

Hide image
comp23

Hide image
comp24

Hide image
comp25

このように設計時にコンポーネントのプロパティの値を変更する場合は、コンポーネントを選択して、オブジェクトインスペクタ上のプロパティを変更するという手順で行います。

この段階で IDEのメニューから [プロジェクト | すべてのプロジェクトをビルド]を選択して、この作成したフォーム(VCLアプリケーション)を実行することができます(実行したアプリケーションはフォームの右上にある×ボタンを押すことで終了し、設計画面に戻ります)。ただし、ボタンをクリックしても何の動作も発生しませんし、Memoコンポーネントの中に入力した文字列は、アプリケーションの終了とともにクリアされます。

フォーム上のボタンをクリックした際に、何か動作をさせたい場合には、「イベント」を設定する必要があります。

    4.イベントとイベントハンドラ

何らかの動作によって発生する事象をイベントといい、イベントに直接応答するコードをイベントハンドラと呼びます。

例えば、「ボタンをクリックする」はイベントであり「ボタンをクリックしたときに実行されるコード」がイベントハンドラとなります。

多くのコンポーネントにはイベントが定義されており、そのイベントは、オブジェクトインスペクタの[イベント]タブをクリックすることで表示されます。また、一部のコンポーネントはデフォルトのイベントを持っており、デザイナ上でコンポーネントをダブルクリックすることで、デフォルトのイベントハンドラが生成されます。

    4.1 主なイベント

各コンポーネントには多くの共通のイベントがあります。主なものについて以下の表に記します。

イベント

説明

OnClick

コンポーネントをクリックしたときに発生します

OnDblClick

マウスポインタがコンポーネント上にある時点で、マウスの左ボタンをダブルクリックしたときに発生します

OnEnter

コンポーネントがフォーカスを受け取ったときに発生します

OnExit

コンポーネントがフォーカスを失ったときに発生します

OnKeyDown

コンポーネントがフォーカスを持っている状態で、キーボードが押されたときに発生します

OnKeyPress

コンポーネントがフォーカスを持っている状態で、文字として表せるキーが押されたときに発生します

OnKeyUp

コンポーネントがフォーカスを持っている状態で、押されていたキーが放されると発生します

OnMouseDown

マウスボタンを押したときに発生します

OnMouseEnter

コンポーネント上にマウスを移動したときに発生します

OnMouseLeave

コンポーネント外にマウスが移動したときに発生します

OnMouseMove

マウスポインタをコンポーネント上に置いて、マウスポインタを移動したときに発生します

OnMouseUp

押したマウスボタンから指を離したときに発生します

OnMouseWheel

マウスホイールが回転したときに発生します

OnMouseWheelDown

マウスホイールが下に回転したときに発生します

OnMouseWheelUp

マウスホイールが上に回転したときに発生します

OnResize

コンポーネントのサイズが変更された直後に発生します

WindowProc

コンポーネントに送られたメッセージに応答するウィンドウプロシージャを示します

注意: 上記のイベントがすべてのコンポーネントに存在する訳ではありません。また、それぞれのイベントについての詳細は、製品付属のヘルプ、および弊社ドキュメントセンターからダウンロード可能なヘルプドキュメントをご利用下さい。

    4.2イベントハンドラの設定例 – デフォルトのイベント

プロパティの設定例で作成したフォームを使用して、ボタンを押した際に発生するイベントに、プロパティを変更するコードを記載して、その動作を確認します。

  1. デザイナ上で[色変更]と書かれているボタンをマウスでダブルクリックします。TButtonコンポーネントはデフォルトのイベントとしてクリックのイベントを持っています。そのため、デザイナ上でダブルクリックすると自動的にクリックイベント(OnClick)のイベントハンドラが生成され、コードエディタが表示されます。

Hide image
event02

Hide image
event01

  1. 表示されたイベントハンドラ内に、TMemoコンポーネントの色を変更するコードを記述していきます。まず、Memoと記述したところで [Ctrl + Space]キーを押すと、コード補完の機能が働き、候補のリストが表示されます。補完リストより Memo1を選択して、Enterキーを押すと、選択されたコードがコード内に代入されます。

Hide image
event03

  1. Memoコンポーネントのプロパティを設定するため ->を記述するとコード補完のリストが表示されますので、Colorプロパティを選択します。

Hide image
event04

  1. Colorプロパティに、色を設定するため = を入力後、clと入力し、再度 [Ctrl + Space]キーを押します。
  2. 色の一覧が表示されますので clWhiteを選択して Enterキーを押し、コードに代入します。最後にコードの終端を表す ; を入力します。

Hide image
event05

  1. この作業でイベントハンドラ内に記載されたコードは以下となります。
Memo1->Color = clWrite;

Hide image
event06

  1. 実行し動作を確認してみましょう。メニューから [実行|実行]を選択します。
  2. プロジェクトがコンパイルビルドされ、作成したフォームが表示されます。
  3. 表示されたフォーム上の [色変更]のボタンをマウスでクリックします。
  4. Memoコンポーネントの色が変更されます。

    4.3イベントハンドラの設定例 – オブジェクトインスペクタから設定する

では、次に、オブジェクトインスペクタを使用してイベントを設定してみましょう。

  1. 実行しているアプリケーションをフォームの右上にある×ボタンを押して終了します。
  2. 設計画面に戻りますので、ツールパレットから別のボタンをフォーム上に貼り付けます。
  3. 新しく追加したボタンを選択し、オブジェクトインスペクタの [イベント]タブをクリックします。

Hide image
event07

  1. TButtonコンポーネントに設定されているイベントがいくつか表示されているのが確認できます。
  2. OnClickをマウスで選択し、その右側の空白部分をマウスでダブルクリックすると、自動的にイベントハンドラが生成され、コードエディタに画面が切り替わります。

Hide image
event08

Hide image
event09

  1. 先程と同様に、Memoコンポーネントの色を変えるコードを記述します。今度は色を Aquaに設定した以下のコードを記述します。
Memo1->Color = clAqua;

Hide image
event10

  1. 実行し動作を確認してみましょう。メニューから[実行|実行]を選択し、表示されたフォーム上の追加したボタンをマウスでクリックします。
  2. Memoコンポーネントの色が変更されます。

    4.4イベントハンドラの設定例 – 既に定義されているイベントを利用する

別のコンポーネントで、既に設定したイベントハンドラと同じ動作を実行する場合、同じ内容をいくつも記述するのは大変です。既に設定したイベントハンドラを割り当てることにより、同じコードをいくつも記載する必要がなくなります。

では、新しいボタンのイベントハンドラに最初のボタンに設定したイベントハンドラを設定してみましょう。

  1. 実行しているアプリケーションをフォームの右上にある×ボタンを押して終了します。
  2. 設計画面に戻りますので、ツールパレットから別のボタンをフォーム上に貼り付けます。
  3. 新しく追加したボタンを選択し、オブジェクトインスペクタの [イベント]タブをクリックします。

Hide image
event11

  1. TButtonコンポーネントに設定されているイベントの OnClickをマウスで選択し、その右側の▼印をマウスでクリックすると、既に設定されているイベントハンドラの名前がリスト表示されます。

Hide image
event12

  1. リスト表示されているイベントハンドラから Button1Clickを選択します。この操作により、新しく追加したボタンを Clickすると、Button1コンポーネントの Clickイベントが実行されます。

Hide image
event13

  1. 実行し動作を確認してみましょう。メニューから[実行|実行]を選択し、表示されたフォーム上の追加したボタンをマウスでクリックします。
  2. Memoコンポーネントの色が変更されます。

    あとがき

第八回は、コンポーネントの概要と、コンポーネントの操作について説明いたしました。

第九回は「コンポーネントの作成」。C++Builderでは既存のコンポーネントの機能拡張や、新たなコンポーネントの作成を行うことができます。次回は既存のコンポーネントをベースにして新たなコンポーネントを作成し、その作成したコンポーネントを使用する方法について説明する予定です。

Server Response from: ETNASC02