［LiveBinding デザイナ］
［表示］メニュー への移動
RAD Studio での LiveBinding への移動
目次
- ［表示］メニュー：
- ［表示｜LiveBinding デザイナ］
- ［ビジュアルにバインド...］コマンド：
- フォーム上のコンポーネントを右クリックし、［ビジュアルにバインド...］を選択する
- ［オブジェクト インスペクタ］の下のパネルで［ビジュアルにバインド...］を選択する
RAD Studio で LiveBinding（データ バインディング接続）を作成するには、［LiveBinding デザイナ］を使用する方法が最も一般的であり、推奨されています。［LiveBinding デザイナ］は、VCL アプリケーションまたはFireMonkey アプリケーションで使用できます。
［LiveBinding デザイナ］では次の作業が可能です。
- フォーム上のさまざまなビジュアル コンポーネントの間に新しい LiveBinding を作成する。
- 既存の LiveBinding を編集する。
- これまでに作成したすべての LiveBinding を図に表示する。
- バインディング図を画像ファイルとしてエクスポートする。
［LiveBinding デザイナ］のメイン ウィンドウ
［LiveBinding デザイナ］を開いた後、好みにより、［LiveBinding デザイナ］ウィンドウをドッキングして開いたままにすることができます。また、［LiveBinding デザイナ］まで含めたデスクトップ レイアウトを保存することもできます。［LiveBinding デザイナ］作業領域の要素をデザイナのレイヤと関連付け、必要なレイヤだけを一度に表示することができます。そうすれば、バインディング ビューが非常に複雑な場合でも、複雑な部分をある程度隠してレイヤを使用しやすくなります。
［ビジュアルにバインド...］コマンド： ［LiveBinding デザイナ］がまだ開いていない場合には、［ビジュアルにバインド...］コマンドを選択するとウィンドウが開きます。このコマンドは、フォーム上の各コンポーネントを右クリックすると表示されるコンテキスト メニューから使用できます。また、このコマンドでは、その要素が［LiveBinding デザイナ］で選択されます。そこで任意のメンバをクリックすると、そのメンバが青で強調表示され、それにバインド可能な他のメンバが緑で強調表示されます。
ヒント： バインド可能なメンバとは、選択したメンバに LiveBinding によってバインドできるメンバです。たとえば、データベースのテキスト フィールドをラベルにバインドしたり、2 つのラベルのキャプションをバインドすることができます。
次に挙げるのは［LiveBinding デザイナ］で実行できる作業の一部です。これらについてこのトピックで説明します。
- バインドを行うには、コンポーネントのバインド可能なメンバを選択し（たとえば
Edit1.Textなど）、それをドラッグして別のバインド可能なコンポーネントにバインドするだけです（接続線が表示されます）。 - 次のような方法で、［LiveBinding デザイナ］中のコンポーネントにメンバやプロパティを追加することができます。
- ダイアグラムに表示されたコンポーネントの省略記号（［...］）をクリックします。
- 例：
- ［バインド可能なメンバ］ダイアログ ボックスが開きます。
- 例：
- ［LiveBinding デザイナ］でコンポーネントの名前を右クリックし、コンテキスト メニューから［バインド可能なメンバ...］を選択します。
- ダイアグラムに表示されたコンポーネントの省略記号（［...］）をクリックします。
- 新しいコントロールに簡単にバインドするには、［LiveBinding デザイナ］でコンポーネントをクリックし、コンポーネントの
*メンバを選択して、何もない場所にドラッグします。これは多くのコンポーネントに当てはまります。 - ［再配置］ツールバー ボタンを使用すると、LiveBinding レイアウトの中の四角形や矢印を簡単に再配置することができます。
- コンテキスト メニュー コマンド［画像に保存］を使用すると、レイアウトを画像としてハード ディスクに保存することができます。
ヒント： プロジェクトを保存すると、LiveBinding 図はプロジェクトと同じディレクトリの
.vlbファイルに自動的に保存されます。そのため、プロジェクトを再び開いたときには、このダイアグラムはプロジェクトを保存したときと同じ状態になっています。
ウィンドウの図解
［LiveBinding デザイナ］は 1 つのウィンドウから構成され、それを使ってアプリケーションの LiveBinding を作成したり、編集したり、図に表示することができます。左側には、下に示すさまざまな機能に対応したボタンを含むツールバーがあります。上部右端には、デザイナが保持しているすべてのレイヤを含んだ［レイヤ］メニューがあります。このメニューを使って新しいレイヤを作成したり既存のレイヤを削除することができます。［LiveBinding デザイナ］には 3 種類のコンテキスト メニューもあります。
対応するフォーム
次の図は、上の図のマルチデバイス フォームをフォーム デザイナに表示したものです。ソース ファイルにはまったくコードを記述しておらず、すべてをバインディングで行っています。
コマンド ボタン
［LiveBinding デザイナ］の左側のボタンには、以下の機能があります。
| コマンド ボタンおよびアイコン | 説明 |
|---|---|
| ［ウィンドウに合わせる］
|
デザイナに表示されているすべてのブロックおよびダイアグラムの接続を、デザイナ ウィンドウに合わせてサイズ変更します。 |
| ［ズーム イン］
|
［LiveBinding デザイナ］の内容を拡大します。 |
| ［ズーム アウト］
|
［LiveBinding デザイナ］の内容を縮小します。 |
| ［実際の大きさに戻す］
|
［LiveBinding デザイナ］の内容の表示サイズをデフォルトに戻します。 |
| ［再配置］
|
［LiveBinding デザイナ］のすべてのブロックおよびダイアグラムの接続を並べ直します。 |
| ［LiveBinding ウィザード...］
|
［LiveBinding ウィザード］が開きます。メモ： ［ツール｜オプション...｜LiveBinding｜右クリック メニューに LiveBinding ウィザードを表示］をオンにして［LiveBinding ウィザード...］コマンドを有効にしているかどうかに関係なく、このボタンは使用可能です。 |
ダイアグラム上の表現
LiveBinding は、デザイナ上で、公開されたバインド可能なプロパティを含む四角形として表現されるオブジェクトを結ぶ線（接続）として表現されます。
コンポーネントは、［LiveBinding デザイナ］上で、バインド可能な名前およびプロパティを表示した四角形のブロックとして表示されます。
図では、［LiveBinding デザイナ］のダイアグラムのほとんどのコンポーネントには、プロパティが 1 つしか表示されていません。他のプロパティを追加して使用することができます。それには、省略記号（［...］）をクリックすると表示される［バインド可能なメンバ］ダイアログ ボックスで、デザイナに表示したい追加のプロパティを選択します。
さまざまなコンポーネント間のバインディング式を表す接続線は、［LiveBinding デザイナ］では次の図のように描画されます。式のうち単方向のものは、片側だけに式の方向を示す矢印が付いて表示されます。それ以外の双方向の式は、両側に矢印が付きます。
リンクの経路設定
［LiveBinding デザイナ］では、自動的にリンクの経路を再設定することができます。たとえば、ダイアグラムのブロックやリンクを表す線の位置を変更して乱雑になった場合には、デザイナを右クリックして、コンテキスト メニューから［リンクの経路設定］コマンドを選択します。すると、リンクの経路が適切に再設定されます。
ヒント： リンクおよびダイアグラムのブロックを完全に再配置したい場合には、デザイナのツールバーにある［再配置］コマンド ボタンを使用してください。
組み込みノード
［LiveBinding デザイナ］では、組み込みノードという概念も導入されています。たとえば、TClientDataSet と TBindSourceDB がフォーム上にあるとします。TBindSourceDB には DataSet というプロパティがあり、それが TClientDataSet を指しています。これにより、TClientDataSet オブジェクトがデフォルトで組み込まれます。組み込まれた状態の組み込みノードに対してリンクすることはできませんが、組み込みを解除するためのメニュー オプションがあり、それを使用すると非表示になっている元のノードが表示されてリンクできるようになります。組み込みメンバはそのまま残されます。
外部ノード
現在アクティブなフォームから参照されているモジュールに含まれる外部ノード（データ ソースなど）に対して、ノードが表示されます。外部ノードの名前は完全修飾名で表記され（DataModule2.ClientDataSet1 など）、外部ノードであることがわかるよう別の色で表示されます。
［LiveBinding デザイナ］のレイヤ
［レイヤ］メニュー（［LiveBinding デザイナ］の上部右端）を使用すると、以下のようなことができます。
- レイヤの表示を切り替える
- 新規レイヤを作成する
- 既存レイヤを削除する
- 既存レイヤの名前を変更する
［レイヤ］という文字の隣にある下向き矢印をクリックすると、［レイヤ］メニューを開いたり閉じたりすることができます。
画面を見るとわかるように、複数のレイヤをチェックすると、それに応じて［LiveBinding デザイナ］ウィンドウ ツールバーのフォーム名の横にあるレイヤ名が更新されます。そのため、［レイヤ］メニューを閉じている場合でも、各レイヤでどのレイヤが表示されるかを確認できます。
プラス記号のボタン（
）をクリックすると、新しいレイヤが追加されます。［レイヤ］メニューでレイヤをダブルクリックして名前を変更し、Enter キーを押すと、レイヤの名前を変更することができます。
特定のコンポーネントをレイヤに追加するには、まず［レイヤ］メニューでそのレイヤを選択する必要があります。それから、フォーム デザイナで 1 つまたは複数のコンポーネントを選択します （複数のコンポーネントを選択するには、Shift キーを押しながらクリックするか、［LiveBinding デザイナ］上のコンポーネントを選択ボックスで囲います）。コンポーネントを選択したら、デザイナのダイアグラムで、選択した（青の）コンポーネントのブロックのいずれかを右クリックし、［レイヤ］を選択してレイヤのサブメニューを表示します。レイヤのいずれかを選択して選択済みのコンポーネントすべてをそのレイヤに移動したり、［新しいレイヤに追加］コマンドを選択して選択済みのコンポーネントを新しいレイヤに追加することができます。
1 つのコンポーネントを 2 つの異なるレイヤに含めたい場合には、高度な機能として 2 つの方法で追加できます。
- ［レイヤ］メニューでレイヤを選択し、［LiveBinding デザイナ］でコンポーネントを選択して右クリックし、必要なレイヤに追加するか、右クリック コンテキスト メニューに表示されるレイヤの選択肢から新規レイヤに追加するというビジュアルな方法。
- コンポーネント（
Button1など）を選択し、［オブジェクト インスペクタ］の［LiveBinding デザイナ］プロパティを展開して、コンポーネントを追加したいレイヤの名前（［レイヤ］メニューに含まれているもの）を［要素のレイヤ］に追加でキー入力する方法。
ヒント： 選択したレイヤとは異なるレイヤにコンポーネントが置かれている場合には、フォーム デザイナでコンポーネントを選択してレイヤを変更することができます。
［レイヤ］メニューでは以下のコマンド ボタンを使用できます。
- プラス記号のボタン（
）： 新しいレイヤを追加する。 - ごみ箱のボタン（
）： そのレイヤを削除する。 - 目のボタン（
）： そのレイヤの表示/非表示を切り替える。
ヒント： ［デフォルト レイヤ］を削除したり名前を変更することはできません。
［LiveBinding デザイナ］のコンテキスト メニュー
［LiveBinding デザイナ］には 3 種類のコンテキスト メニューがあります。
デザイナのコンテキスト メニュー
［LiveBinding デザイナ］の背景を右クリックすると、次のコンテキスト メニューが表示されます。
| コマンド | 説明 |
|---|---|
| ［要素の表示/非表示を切り替え...］ | ［LiveBinding デザイナ］の複数の要素を表示したり非表示にすることができます。 |
| ［デザイナの更新］ | ハード ディスクからダイアグラムを再読み込みして更新します。
複数のフォームやデータ モジュールが含まれているアプリケーションでは、TBindSourceDB 内に埋め込まれたデータセットがデザイナで現在表示しているフォームの外部にある場合に、［LiveBinding デザイナ］上でそのデータセットに古いサブメンバが含まれている可能性があります。データセットの変更によっても、メンバが古くなることがあります。［デザイナの更新］コマンドを使用すると、そのような更新にかかわる問題を解決できます。 |
| ［拡大縮小］ | 以下のコマンドを含むサブメニューが開きます。
|
| ［レイアウト］ | ブロックと接続線を並べ直します。この機能は［再配置］コマンド ボタンの機能と同じです。 |
| ［リンクの経路設定］ | コントロール間のバインディングを表す接続線の経路を設定し直します。 |
| ［画像に保存］ | このコマンドを使用すると、［LiveBinding デザイナ］の内容を画像として保存できます。
|
コントロールのコンテキスト メニュー
デザイナでコントロールを右クリックすると、コントロールのコンテキスト メニューが表示されます。
| コマンド | 説明 |
|---|---|
| ［バインド可能なメンバ...］ | ［バインド可能なメンバ］ダイアログ ボックスが開き、そこでそのオブジェクトのどのプロパティをダイアグラムに表示してバインドできるようにするかを選択できます。 |
| ［レイヤ］ | 使用可能なレイヤを確認したり新しいレイヤに追加することができます。 |
| ［ノードを非表示］ | そのノードまたは選択された複数のノードを非表示にし、デザイナのビューに表示されないようにします。あとで表示することが可能です。 |
| ［拡大縮小］ | 以下のコマンドを含むサブメニューが開きます。
|
プロパティのバインディング コンテキスト メニュー
デザイナでプロパティを右クリックすると、プロパティのバインディング コンテキスト メニューが表示されます。
| コマンド | 説明 |
|---|---|
| ［LiveBinding ウィザード...］ | 選択したダイアグラム要素に合わせた状況依存モードで［LiveBinding ウィザード］が開きます。 |
| ［新規コントロールにリンク...］ | ［新規コントロールにバインド］ダイアログ ボックスが開き、そこで、ビジュアル コントロールのパレット全体の中からバインド先のコントロールを選択することができます。 |
| ［メンバの削除］ | このメンバを削除します。 |
| ［拡大縮小］ | 以下のコマンドを含むサブメニューが開きます。
|
［オブジェクト インスペクタ］との統合
［LiveBinding デザイナ］は、［オブジェクト インスペクタ］の［LiveBinding デザイナ］プロパティに統合されています。このプロパティは、TComponent のほとんどの下位クラスで表示されます。このプロパティを使って、コンポーネントが含まれるレイヤを変更したり、コンポーネントを［LiveBinding デザイナ］のダイアグラムにブロックとして表示するかどうかを変更することができます。
1 つのコントロールから複数のコントロールへのバインド
［LiveBinding デザイナ］を使用すると、1 つのコントロールから複数のコントロールへバインドすることも可能です。たとえば、編集ボックスをラベルにバインドし、さらに同じ編集ボックスをボタンにもバインドする場合、下の図のようにコントロールから複数のコントロールへ簡単にバインドできます。
フォーム ビュー
［LiveBinding デザイナ］
アプリケーションの実行
この画像は、テキスト変更前の編集ボックスを示しています。
次の画像は、編集ボックスでテキストを変更した後の編集ボックスです。
デザイナ上のバインディングそれぞれについて、［オブジェクト インスペクタ］の InitializeControlValue プロパティを使って、複数のコンポーネントが 1 つのコントロールにバインドされている場合に表示されるデフォルト値を定義することができます。たとえば、編集コントロールがラベルとボタンにバインドされている場合、編集コントロールにデフォルトで表示されるテキストが、ラベルのテキストかボタンのキャプションかを定義することができます。
ヒント： また、1 つのコントロールを複数のコンポーネント プロパティにバインドすることもできます。
たとえば、TEdit コントロールを複数の TText コントロールの Text プロパティにバインドすることができます。ただし、1 つの TEdit コントロールを別の 2 つの TEdit コントロールにバインドすることはできません（Edit1 を Edit2 と Edit3 にバインドするなど）。TEdit と TText はどちらもコントロールですが、LiveBinding に関しては、TEdit コントロールがユーザー入力を期待しているのに対し、TText コントロールはユーザー入力を期待しない点が異なっています。
- ユーザー入力を受け付けるコントロールを使用する場合、ユーザー入力によって変更される可能性があるプロパティはあらかじめ定義されています（たとえば TEdit.
Textなど）。 - ユーザー入力を受け付けないコントロールを使用する場合には、手動でプロパティを選択する必要があります。
［LiveBinding デザイナ］には、便宜上、ユーザー入力を受け付けないコンポーネントのデフォルト プロパティ（TText.Text など）が表示されます。ただし、LiveBinding に関する限り、TText.Text は TText コンポーネントの他のプロパティと同じ扱いになります。
［LiveBinding デザイナ］の手順
- LiveBinding を使ったデータの同期
- ［LiveBinding デザイナ］での要素の表示と非表示
- ［LiveBinding デザイナ］をズーム（拡大/縮小）する
- バインディング図を画像として保存する
- ［LiveBinding デザイナ］でのレイヤの使い方