Delphi Starter でライブバインディングしてみた

Delphi の 製品版 (Professional版以上) だと、便利なビジュアルライブバインディング (LiveBindingデザイナ) という機能があります。
バインディングウィザード上で任意のオブジェクトとオブジェクトを、線を引く感覚でバインドすることができます。
Starter ではビジュアルバインディングはありませんが、ライブバインディングは LiveBinding ウィザードを使って行なうことができます。

サンプルプロジェクトを使って説明します。
サンプルプロジェクトは、TPanel コンポーネント、TSepiaEffect コンポーネント、TTrackBar コンポーネントを使って、トラックバーを動かすと、Panel の色が変わるという簡単なものです。

## サンプルプロジェクトを作る
1. ウェルカムページ上にある「マルチデバイスアプリケーション (Delphi) の新規作成」をクリックするか、メニューの [ファイル | 新規作成 | マルチデバイスアプリケーション - Delphi ] を選択する
![qiita01.png](https://qiita-image-store.s3.amazonaws.com/0/164551/0a4b05b9-5140-188f-f756-34f6c6bb1d16.png)


2. 「マルチデバイスアプリケーション」の画面が表示されるので「空のアプリケーション」を選択して [OK] ボタンをクリックする
![qiita02.png](https://qiita-image-store.s3.amazonaws.com/0/164551/1d670e94-739a-d29c-ce2b-2b8efe0bbec4.png)


3. プロジェクトが生成されて、フォーム設計画面が表示されます
![qiita03.png](https://qiita-image-store.s3.amazonaws.com/0/164551/8d3fa192-33c5-1d59-4d2a-c65e38a6746c.png)

###コンポーネントを配置します
4. ツールパレットから、TPanel をフォーム上にドラッグアンドドロップで配置
![qiita04.png](https://qiita-image-store.s3.amazonaws.com/0/164551/ad75d792-99d6-6500-680c-79f39f3b9bef.png)

5. ツールパレットから、TSepiaEffect を先程配置した TPanel 上にドラックアンドドロップで配置
![qiita05.png](https://qiita-image-store.s3.amazonaws.com/0/164551/dbd0a5e5-55fd-2ea4-7893-332d9cb0f676.png)

6. ツールパレットから、TTrackBar をフォーム上にドラッグアンドドロップで配置
![qiita06.png](https://qiita-image-store.s3.amazonaws.com/0/164551/732a49e8-8d24-e218-d7f3-72ee8e67e005.png)

7. TrackBar や Panel の大きさをマウスで調整します
![qiita07.png](https://qiita-image-store.s3.amazonaws.com/0/164551/9d27eec4-2c07-cc4e-844c-09f042950046.png)

###オブジェクトインスペクタでプロパティの値を変更します
8. オブジェクトインスペクタで TrackBar の Maxプロパティを 100 から 1 に変更する
![qiita08.png](https://qiita-image-store.s3.amazonaws.com/0/164551/f553d1bb-5ea9-200e-1f7c-ffb6fa5d24a9.png)

バインドする TSepiaEffect コンポーネントの Amount プロパティは、セピア色の強さを設定するプロパティで、その値の範囲は 0～1 なのです。そのため Max を 1 に変更しています。

ここまででベースとなるプロジェクトが完成
いよいよライブバインディング

## Starter でライブバインディング
1. ツールパレットから TBindingList コンポーネントをフォーム上にドラッグアンドドロップで配置
![qiita09.png](https://qiita-image-store.s3.amazonaws.com/0/164551/1c77ef39-2408-9f72-d1e3-88ded28accc5.png)

2. オブジェクトインスペクタ上の「LiveBindingコンポーネントの新規作成」をクリック
3. 表示されたダイアログから TLinkControlToProperty を選択して [OK]ボタンを押します
![qiita10.png](https://qiita-image-store.s3.amazonaws.com/0/164551/cc234be8-ee19-e45e-b2b0-26aa5d3fd01d.png)

4. オブジェクトインスペクタ上で、

- Component プロパティに SepiaEffect1 を設定
- ComponentProperty プロパティに Amount を設定
- Control プロパティに TrackBar1 を設定
![qiita11.png](https://qiita-image-store.s3.amazonaws.com/0/164551/fc97330d-48af-ac2e-ee01-eb38c5bc6121.png)

オブジェクトインスペクタ上の「式」をクリックすると、バインディングされた情報を確認することができます
![qiita12.png](https://qiita-image-store.s3.amazonaws.com/0/164551/b0052e77-2982-01ef-fe90-7eb74f5d44ac.png)

実行するとこんな感じ
![trackbargif.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/d3a84d45-7529-2930-f8fd-c6df8b64de11.gif)
はい、今回もコードを１行も書いていません。


##Professional 版以上でビジュアルライブバインディング
参考として Profesional 版以上の「ビジュアルライブバインディング」をご紹介
TrackBar の Max プロパティを 1 に変更するまでの手順は同じです

1. オブジェクトインスペクタ上の「ビジュアルにバインド」をクリックして、LiveBinding デザイナを開きます。
![qiita13.png](https://qiita-image-store.s3.amazonaws.com/0/164551/246c156a-b927-07c3-b74b-a7b62cb5dfb3.png)

2. デザイナ上に表示されていないコンポーネントは、オブジェクトインスペクタ上で LiveBinding デザイナプロパティの「表示要素」を True に変更して表示することができます
![qiita14.png](https://qiita-image-store.s3.amazonaws.com/0/164551/8795b34d-7b7f-cae1-5e2e-7843ae826657.png)

3. 表示されていないプロパティは、コンポーネントの表示の「...」の箇所をクリックすると、バインド可能なメンバの一覧がダイアログ上に表示されるので、チェックをつけて表示することができます
![qiita15.png](https://qiita-image-store.s3.amazonaws.com/0/164551/bede8584-d9bb-8ab3-148a-bee2c00a4d14.png)

4. あとはバインドさせたいプロパティ同士を、LiveBinding デザイナ上でマウスを使って線を引くように操作するだけです
![qiita16.png](https://qiita-image-store.s3.amazonaws.com/0/164551/78a11965-35d8-8140-915d-779eeeb97064.png)

直感的に操作できるのと、このLiveBinding デザイナの画面は画像としても保存できるので、資料としても使えるのが便利ですね(^^)