ビジュアル コンポーネントを追加する（コード不要の IBX チュートリアル）
チュートリアル：InterBase Express を使用してコードを書かずにアプリケーションを作成する への移動
ビジュアル コンポーネントを追加し、既にフォーム上に配置したデータベース コンポーネントと結び付けます。
パネルの追加
TPanel コンポーネントを 4 つ追加し、以下の図のように配置します。 TPanels は、他のコンポーネントを配置するためのフレームワークとなります。
- それぞれの TPanel は、フォームを選択した状態で追加します。そうすることで、各 TPanel は、別の TPanel の子ではなく、フォームの子になります。
- TPanel "Panel1" は左上にあり、Height が 215、Width が 260 です。
- "Panel2" は右上にあり、Height が 25、Width が 255 です。
- この 2 つのパネルの位置に合わせて残りのパネルも追加します。
- パネルのハンドルをドラッグし、領域に合わせてサイズを変更することができます。
- すべての TPanel.Captions を空白に設定しても構いません。このキャプションはアプリケーションで何の意味も持たないからです。
Panel 1
TPanel "Panel1" には、画像とキャプションを持たせます。
- TDBImage を TPanel "Panel1" 上にドラッグします。 TDBImage コンポーネントの Height を 170 に、Width を 250 に設定します。 DataSource を "DataSource1" に設定します。 DataField を、ドロップダウン メニューを使って "GRAPHIC" に設定します。 これによって、どのテーブル フィールドを表示するかを選択します。
- TDBText コンポーネントを TDBImage の下に配置して、TPanel 内の残りのスペースを埋めます。 TDBText は、データベース フィールドから取り出したテキストを保持するためのデータベース対応コントロールです。 DataSource を "DataSource1" に設定します。 DataField を、ドロップダウン メニューを使って "COMMON_NAME" に設定します。 TDBText.Font プロパティのリストを展開して、次のようにプロパティを変更します：
- Color をドロップダウン メニューの "clRed" に変更します。
- Font を "MS Serif" に変更します。
- Size を "14" に変更します。
- Style のリストを展開して、"fsBold" と "fsItalic" をオンにします。
- TIBDataSet を選択し、Active プロパティを True に設定します。 これで、TDBImage コンポーネントに画像が、TDBText コンポーネントにキャプションが表示されるはずです。
Panel 2
TPanel "Panel2" には、ラベルと項目名を持たせます。
- TLabel を、TPanel "Panel2" の左側に配置します。 Caption を "About the"に設定します。 Font プロパティを次のように変更します：
- Color をドロップダウン メニューの "clBlue" に変更します。
- Name をドロップダウン メニューの "MS Sans Serif" に変更します。
- Size を "8" に変更します。
- Style の下の "fsBold" をオンにします。
- TDBText コンポーネントを TLabel の隣にドラッグします。 DataSource を "DataSource1" に設定します。 DataField を、ドロップダウン メニューを使って "COMMON_NAME" に設定します。 Font プロパティを、TLabel コンポーネントに設定したのと一致するように設定します。
Panel 3
このパネルでは、1 つのデータベース対応コントロール TDBMemo の中に、データベースから取り出した情報のテキストを表示します。
- TDBMemo を TPanel "Panel3" の上に配置します。 TDBMemo コンポーネントでは、長いデータ フィールドのテキストを保持することができます。それが TDBText コンポーネントとの違いです。
- BorderStyle を "bsNone" に変更します。
- TDBMemo の Align プロパティを alClient に設定します。
- Color プロパティを "clSilver" に設定します。
- ScrollBars を "ssVertical" に変更し、情報をスクロールできるようにします。
- 最後に、TDBMemo をデータベースに接続します。 "DataSource1" を DataSource プロパティに対して選択します。 テーブル フィールドを選択するには、DataField のドロップダウン メニューから "NOTES" を選択します。
- TDBMemo はデータベース対応コントロールなので、データベースから取り出したメモ テキストが表示されます： これでフォームは次のようになっています。
Panel 4
このパネルにはデータベース テーブルの列を表示します。
- DataSource をドロップダウン メニューから "DataSource1" に変更します。 すると、TDBGrid に即座にデータベースの列のデータが表示されます：
次のセクションでは、データ表示をカスタマイズします。