Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

サンプルプロジェクトを作る

  1. ウェルカムページ上にある「マルチデバイスアプリケーション (Delphi) の新規作成」をクリックするか、メニューの [ファイル | 新規作成 | マルチデバイスアプリケーション - Delphi ] を選択する
    qiita01.png

  2. 「マルチデバイスアプリケーション」の画面が表示されるので「空のアプリケーション」を選択して [OK] ボタンをクリックする
    qiita02.png

  3. プロジェクトが生成されて、フォーム設計画面が表示されます
    qiita03.png

コンポーネントを配置します

  1. ツールパレットから、TPanel をフォーム上にドラッグアンドドロップで配置
    qiita04.png

  2. ツールパレットから、TSepiaEffect を先程配置した TPanel 上にドラックアンドドロップで配置
    qiita05.png

  3. ツールパレットから、TTrackBar をフォーム上にドラッグアンドドロップで配置
    qiita06.png

  4. TrackBar や Panel の大きさをマウスで調整します
    qiita07.png

オブジェクトインスペクタでプロパティの値を変更します

  1. オブジェクトインスペクタで TrackBar の Maxプロパティを 100 から 1 に変更する qiita08.png

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

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

Starter でライブバインディング

  1. ツールパレットから TBindingList コンポーネントをフォーム上にドラッグアンドドロップで配置
    qiita09.png

  2. オブジェクトインスペクタ上の「LiveBindingコンポーネントの新規作成」をクリック

  3. 表示されたダイアログから TLinkControlToProperty を選択して [OK]ボタンを押します
    qiita10.png

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

  • Component プロパティに SepiaEffect1 を設定
  • ComponentProperty プロパティに Amount を設定
  • Control プロパティに TrackBar1 を設定 qiita11.png

オブジェクトインスペクタ上の「式」をクリックすると、バインディングされた情報を確認することができます
qiita12.png

実行するとこんな感じ
trackbargif.gif
はい、今回もコードを1行も書いていません。

Professional 版以上でビジュアルライブバインディング

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

  1. オブジェクトインスペクタ上の「ビジュアルにバインド」をクリックして、LiveBinding デザイナを開きます。
    qiita13.png

  2. デザイナ上に表示されていないコンポーネントは、オブジェクトインスペクタ上で LiveBinding デザイナプロパティの「表示要素」を True に変更して表示することができます
    qiita14.png

  3. 表示されていないプロパティは、コンポーネントの表示の「...」の箇所をクリックすると、バインド可能なメンバの一覧がダイアログ上に表示されるので、チェックをつけて表示することができます
    qiita15.png

  4. あとはバインドさせたいプロパティ同士を、LiveBinding デザイナ上でマウスを使って線を引くように操作するだけです
    qiita16.png

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

CYonezawa
風都在住の万事屋
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away