![Delphi WebView2 Labs | Embarcadero RAD Studio Delphi C++Builder Blogs delphi webview2 labs](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/03/Delphi-WebView2-Labs-4402768-4420107.jpg?resize=1140%2C675&ssl=1)
ここ数週間にわたって、このブログでは、Delphiの式エンジン、バインディング式とコンポーネント、そしてBindingsListコンポーネントについて説明してきました。シリーズの第4回となる今回のブログでは、動的バインディングによってアプリケーションを構成するための簡単で直感的な方法、Visual LiveBindingsのビジュアルツール(デザイナ)について紹介いたします。
これはLiveBindingデザイナ(IDEメニューの[表示] | [ツールウィンドウ]メニューから利用可能)と呼ばれ、設計時のフォームまたはデータモジュールと一緒に表示できる追加のペインです。
下図は、前回のブログのデモをLiveBindingデザイナによってどのように表示されるかを示した例です。
![frombindingslisttovisuallivebindingsja12483440 | Embarcadero RAD Studio Delphi C++Builder Blogs from bindings list to visual livebindings ja 1 2483440](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/06/from-bindings-list-to-visual-livebindings-ja-1-2483440.png?resize=448%2C431&ssl=1)
ここでは、LiveBindingデザイナを利用して直接バインディングする簡単な例を紹介します。サンプルプログラムの作成は、以下の手順の通りです。
- 新しいフォームを作成
- TNumberBoxコントロールとTProgressbarコントロールをフォーム上に配置
- LiveBindingデザイナで、下図のようにNumberBoxのValueプロパティからProgressbarのPositionプロパティへドラッグ
![frombindingslisttovisuallivebindingsja21859678 | Embarcadero RAD Studio Delphi C++Builder Blogs from bindings list to visual livebindings ja 2 1859678](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/06/from-bindings-list-to-visual-livebindings-ja-2-1859678.png?resize=403%2C357&ssl=1)
LiveBingingデザイナ内のコントロール同士を結ぶ矢印(ここでは、NumberBox1からProgressBar1を結ぶ矢印)を有効にして値を変更すれば、Delphiでコードを書かなくても動作します。また、NumberBoxに文字を入力すると、コントロールを離れたときに値が更新されます。(そのため、入力のフォーカスを受けられるコントロールが少なくとももう一つ必要です。)
ここで紹介したシナリオは非常にシンプルですが、これ以外にも接続できるコントロールのプロパティはたくさんあります。そのため作成してるアプリケーションによっては、LiveBindingデザイナで要素の下部にある3つのドットをクリックし、「バインド可能なメンバ」から任意のバインドしたいプロパティを選択する必要があります。
![frombindingslisttovisuallivebindingsja35786192 | Embarcadero RAD Studio Delphi C++Builder Blogs from bindings list to visual livebindings ja 3 5786192](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/06/from-bindings-list-to-visual-livebindings-ja-3-5786192.png?resize=494%2C299&ssl=1)
![frombindingslisttovisuallivebindingsja41554004 | Embarcadero RAD Studio Delphi C++Builder Blogs from bindings list to visual livebindings ja 4 1554004](https://i0.wp.com/blogs.embarcadero.com/wp-content/uploads/2021/06/from-bindings-list-to-visual-livebindings-ja-4-1554004.png?resize=492%2C425&ssl=1)
ここで重要なことは、このデザイナと関連するウィザードは、主にデータベースのデータバインディングのシナリオに焦点を当てているということです。そのためUIコントロールの関連付けは、今回紹介した内容のように単純ではなく、データバインディングの場合はもう少し複雑です。データバインディングについては、次回のブログでご紹介します。
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition