CodeZine(コードジン)

特集ページ一覧

マウスで線を結ぶだけでデータとUIコントロールを連携させる

Delphi XE3、C++Builder XE3のVisual LiveBindingを使ってみる

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/09/13 15:06

 RAD Studio XE3(Delphi XE3、C++Builder XE3)がリリースされました。Windows 8サポートが目玉になっていますが、データベースを使った業務システムなどを開発する人にとっては、Visual LiveBindingという機能も見逃せません。なぜなら、「マウスを線で結ぶだけでデータとUIコントロールを連携させる」ことができるからです。

データとUIコントロールを結び付けるコーディングは面倒?

 アプリケーション開発で面倒なのは、データとUIコントロールの連携です。画面に表示される入力ボックスにデータを表示して、編集結果を反映させるというアレです。

 コンポーネントベースの開発環境であれば、データベースアクセスをカプセル化して、あまりコードを書くことなく、UIを作成できます。しかし、扱うデータがコンポーネントによってサポートされていないものだったりすると、途端にスクラッチのコーディングに戻ってしまうなど、何かと不便です。

 特に最近では、Webサービス経由でデータを扱ったり、多層化してクライアント側で直接データベースのデータを扱わなかったりするような形態が増えてきており、上記のやり方が通用しなくなってきています。

 Delphi / C++Builderを例に見てみましょう。

データとUIコントールの連携 - Delphiの場合

 Delphiはもともと、Oracle向けのクライアントアプリケーション開発ツールを想定して開発された経緯があることから(DelphiというギリシャっぽいネーミングもOracle由来でしょう)、データベースとの連携は最初から組み込まれていました。データベースアクセスコンポーネントとデータベース対応のUIコントロールを結び付けて、データを表示、編集できます。ほぼノンコーディングです。

 現在では、対応データベースも幅広く、Oracle、MS SQL Server、DB2、Informix、Sybase、SQL Anywhere、InterBase、MySQL、SQLite、ODBCなど。Azureにもつながります。

近年のアプリケーション形態で起きるデータ連携の問題

 ここで2つの問題があります。古典的なクライアントサーバーアプリでは、クライアントは直接データベースに接続していました。デスクトップデータベースの延長のような感覚です。Excelの表のようなグリッドでデータを表示するアプリケーションがその典型です。

図1 グリッドでデータを表示する典型的なアプリケーション

 ところが、近年では、データ量が増加していることと、クライアントサーバー以外、Webやモバイルなどからもデータにアクセスしたいという要求があがっていることなどから、単純な2層では収まらなくなってくるケースが増えています。そうすると、これまでのデータアクセスコンポーネントが、そのまま使えなくなります。クライアントに持ってくるデータ量も最適化しなければならなくなります。

 そうすると、中間層では引き続きコンポーネントを使って効率化したとしても、クライアント層でUIとデータを結び付けるコーディングが増加してしまいます。ロジックまわりでなく、UIまわりの制御に膨大なコードを書くとなると、生産性低下に直結してしまいます。

 もうひとつは、UIコントロールです。最近のアプリケーションは、見た目にも美しくなってきました。データもさまざまな形態で表示できるようになっています。ところが、これらがデータベース対応のコンポーネントでないと、データをUIコントロールに表示するために、またたくさんコードを書かなければならなくなります。

そこでLiveBinding

FireMonkeyフレームワーク

 Delphi / C++Builderでは、昨年のリリースでFireMonkeyという新しいコンポーネントフレームワークを導入しました。

図2 視覚的に訴えるアプリケーションを作成できるFireMonkey

 特長は3つあって、まず、マルチプラットフォーム対応であること。WindowsとMac OS X向けのGUIアプリケーションを構築できます。次に、ネイティブであること。CPU/GPUのフルパワーを使ってハイパフォーマンスで動きます。マルチプラットフォームだからといって性能では劣るということはありません。そして3番目は、ビジュアル的に優れていること。HD/3Dの高品質なグラフィックを使ったコンポーネントを利用できます。

LiveBindingとは

 こういう高機能なUIが出てくると、先に挙げた問題に新しいテクノロジーで対応する必要性が増してきます。LiveBindingはそのための機能として用意されていますが、簡単にまとめると、次のようなことをしてくれます。

  • UIコントロールのプロパティとオブジェクトを結び付けます
  • オブジェクトの値が変更されると、UIコントロールのプロパティを変更します
  • UIコントロールのプロパティが変更されると、オブジェクトの値を変更します

 これで何ができるようになるかというと、

  • UIコントロールとデータセットのフィールドを結び付け、表示・編集を自動化します
  • UIコントロール同士を結び付け、一方のコントロールに対する変更によって他方の状態を変化させることができます(例えば、チェックボックスをクリックすると入力ボックスが無効になるといった処理)
  • UIコントロールと任意のオブジェクトを結び付け、オブジェクトの表示・編集を自動化します

 これらは、いずれもコードを一行も記述しません。コンポーネントに用意されたLiveBindingのプロパティを設定するだけで、UIコントロールとデータを同期/変更ができます。

LiveBindingをビジュアルに

Delphi / C++Builder XE3の新機能Visual LiveBinding

 先日発売されたDelphi / C++Builderの最新バージョン「XE3」では、このLiveBindingが使いやすくなっています。その名も「Visual LiveBinding」。マウス操作で、ビジュアルにLiveBindingの設定ができるというツールです。

 UIコントロールは画面上に複数ありますし、データにもさまざまなフィールドがあります。これらを結び付ける作業は、前バージョンではオブジェクトインスペクタで行っていました。オブジェクトインスペクタは、選択したコンポーネントのプロパティを設定するために使います。

図3 オブジェクトインスペクタ

 複数あるUIコントロールにデータを結び付けるには、コンポーネントをひとつずつ選択して設定を行わなければなりませんし、どのような設定がなされているのか俯瞰することができません。

LiveBindingデザイナ

 Visual LiveBindingでは、LiveBindingデザイナというツールを使います。

図4 LiveBindingデザイナ

 ご覧のような画面で、データ(左のBindSourceDB1)とUIコントロール(Edit1、Memo1など)を結び付けます。「マウスを線で結ぶだけでデータとUIコントロールを連携させる」そのままですね。

 早速簡単なアプリケーションを作成して確認してみましょう。Visual LiveBindingはDelphi / C++Builderのどのようなアプリケーションでも利用できます。XE3では、Windows APIをカプセル化してWindows向けのビジュアル開発が可能なフレームワークVCL(これはDelphi 1の頃からありますね)と、Windows / Mac OS Xでクロス開発ができるFireMonkeyフレームワークを使用できます。Visual LiveBindingは、このどちらでも利用可能です。

 ここでは、FireMonkeyアプリケーションを作成してみましょう。

コントロールのプロパティ同士をLiveBinding

 LiveBindingの仕組みを理解するために、UIコントロールを2つ使って、そのコントロールのプロパティを相互に関連付けてみましょう。入力ボックスに入力された文字を、別のコントロールに表示します。もちろんコードは記述しません。

FireMonkeyアプリケーションを作成する

 IDEのメニューより[ファイル]-[新規作成]-[FireMonkey デスクトップ アプリケーション - Delphi]を選択します。ウィザードで「FireMonkeyアプリケーションの種類」を選択します。ここでは、デフォルトの「HD FireMonkeyアプリケーション」を選択します。

 設計画面が表示されたら、ツールパレットのStandardカテゴリ内にあるTEditとTLabelをドラッグ&ドロップでフォーム上に配置します。

図5 コンポーネントの配置

 フォーム上でマウスを右クリックし、「ビジュアルにバインド」メニューを選択します。

図6 「ビジュアルにバインド」メニュー

 すると、設計画面の下半分に「LiveBindingデザイナ」が表示されます。デザイナ上には、フォーム上に配置した2つのコンポーネントがモデル図のように表示されています。

LiveBindingデザイナを使う

 LiveBindingデザイナの使い方は簡単です。連携させたいコンポーネントのプロパティ同士を線で結ぶだけです。マウスを使ってEdit1のTextから、Label1のTextに線を引っ張ります。

図7 LiveBindingデザイナ

 以上の操作で、2つのコントロールがビジュアルに接続されました。簡単ですね。

LiveBindingしたアプリケーションを実行してみる

 では、アプリケーションを実行してみましょう。IDEメニューから、[実行]-[実行]を選択します。

 入力ボックスに文字を入力すると、ラベルに表示されます。同期するタイミングは、入力が確定した時点なので、フォーカスが離れるか、Enterキーを押したときです。

図8 UIコントロールの同期

 LiveBindingの基本的な動きと使い方を理解できましたね。

 ここまでの操作をYouTubeビデオでご覧いただけます。

データベースのデータと連携するためにLiveBindingを使う

 これを応用すると、データベースのフィールドとUIコントロールも簡単に結びつけることができます。ここでは、Delphi/C++Builder XE3のインストール時にいっしょにセットアップされるInterBase XE3 Developer Edition(開発用途に使用可能)を使って、データの連携を実践してみたいと思います。

データベースを使うための準備

 まず、事前準備です。IDEの右上に表示されているプロジェクトマネージャの「データエクスプローラ」タブをクリックします。ここには、使用するデータベース接続を登録します。InterBaseの部分をマウスでクリックし選択した後、マウスの右ボタンを押し、メニューから「新規接続を追加」を選択します。

図9 「新規接続を追加」メニュー

 InterBase接続の追加のダイアログが現れますので、DBDEMOSと入力します。

 接続の変更ダイアログが表示されますので、データベースの部分にサンプルディレクトリにあるdbdemos.gdbファイルへのパスを記述します。

C:\<ユーザー名>\Public\Documents\RAD Studio\10.0\Samples\Data\dbdemos.gdb

 [接続テスト]ボタンをクリックし、正しく接続できるかを確認します。

図10 接続テスト

 無事接続できることを確認したら[OK]ボタンをクリックします。これで準備完了です。

データベースデータを扱う

 先ほどと同じように、FireMonkeyデスクトップアプリケーションを作成します。表示された設計画面では、まず、データベース関連のコンポーネントを配置します。右側のデータエクスプローラから、InterBaseのツリーを選択し、接続するデータベースを選択。ツリーを展開して、テーブル名を表示します。

 表示されたテーブルの一つ(ここでは BIOLIFEというテーブルを使用しています)をマウスでドラッグし、フォーム上にドロップします。

図11  BIOLIFEテーブルをドロップ

 以上の操作で、データベースに接続するために必要なコンポーネント(TSQLConnection)とデータベーステーブルに関するコンポーネント(TSQLDataSet)がフォーム上に配置されます。次に、UIコントロールとの橋渡しを行うコンポーネントTDataSetProviderと、データセットをメモリ上に展開するためのTClientDataSetコンポーネントを配置します。これらは、ツールパレットのData Accessカテゴリにあります。

図12 データベース関連のコンポーネントを配置

 プロパティを次のように設定します。

TDataSetProvider1
プロパティ
DataSet BIOLIFE
ClientDataSet1
プロパティ
ProviderName DataSetProvider1
Active True

 データを表示するためのUIコントロールを配置します。TBindNavigator、TStringGrid、TEdit、TMemo、TImageControlコンポーネントを図のように配置します。

図13 UIコントロールの配置

 LiveBindingデザイナを表示し、マウスを使って関連付けを行います。関連付けを行うのは以下の項目です。

  • BindSourceDB1の(ClientDataSet1)の *と、StringGrid1の *
  • BindSourceDB1の(ClientDataSet1)の *と、BindNavigator1の *
  • BindSourceDB1の(ClientDataSet1)の COMMON_NAMEと、Edit1の Text
  • BindSourceDB1の(ClientDataSet1)の NOTESと、Memo1の Text
  • BindSourceDB1の(ClientDataSet1)の GRAPHICと、ImageControl1の Bitmap

 図のようになります。

図14 Visual LiveBindingの設定

 これで完成です。

 アプリケーションを実行すると、次のようにデータが表示されます。ナビゲーションボタンをクリックすると、レコードも移動します。

図15 アプリケーションの実行

 ここまでの操作をYouTubeビデオでご覧いただけます。

まとめ

 画面設計を効率化するツールはいくつもあっても、データの連携となると型どおりのことしかできない場合が多々ありました。Visual LiveBindingは、ビジュアルな操作で簡単にデータ連携を設計できるだけでなく、任意のオブジェクトを扱えるところがこれまでのツールと違う点です。

また、Visual LiveBindingでは、バインド設定をビジュアルに行えるだけでなく、デザイナ上に表示されている図を画像として保存することもできます。これは、プロジェクト設計の情報共有やプロジェクトのドキュメントとしても役立てることができます。

 ビジュアル開発ツールも日々進化しています。多様なデータを効率よく扱えるDelphi XE3とC++Builder XE3。ぜひ試してみてください。

関連情報

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • EDN編集部(イーディーエヌ編集部)

    エンバカデロ・デベロッパーネットワーク(EDN)は、ソフトウェア開発者とデータベース技術者のための技術情報サイトです。Delphi、C++Builderをはじめとする開発ツールやER/Studioなどのデータベースツールに関連する技術記事、ビデオなどを提供しています。EDN編集部は、EDN記事と連携...

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5