先日の記事では、Enterprise Connectors CSV コンポーネントではCSVファイルに対する SQL 操作が可能であることを紹介するために、トライアル版コンポーネントの一覧ファイルを操作してみました。この記事ではとりあえずFDConnectionとFDQueryを組み合わせてクエリを実行するところまでを試しましたが、これを使ってCSVファイルのデータをUIコンポーネントで表示してみましょう。

FireMonkey プロジェクトで作ってみる

Enterprise Connectors は Windows 32-bit / 64-bit 向けビルドのみに対応しているため、Windows向けのデモンストレーションでは、VCLフレームワークのプロジェクトで見せることが多いのですが、今回の記事では趣向を変えてクロスプラットフォーム開発向けフレームワーク FireMonkey プロジェクトで作ってみます。ただし、今回のようにクロスプラットフォーム向けの FireMonkey フレームワークでで Enterprise Connectors を使うアプリを作っても、macOS等では実行できません。あくまで Windows だけで実行できます。

UIコンポーネントで表示させてみる

新規の FireMonkey プロジェクトを開始したら、データエクスプローラより、前回の記事で作成した接続定義Enterprise Connectors のトライアル版リストを参照する定義を開いてテーブルをデザインフォームにドラッグ＆ドロップで貼り付けましょう。

ここにUIコンポーネントを足していきます。この例では、TFDConnection コンポーネントが CsvtestConnection、TFDQuery コンポーネントが Firedac_component_downloadlinkscsvTable とフォームデザイナ上で表示されています。

データのリスト表示のために TListView を用いる

TListView をツールパレットから探してデザインフォームに貼り、レイアウトを整えます。レイアウトの調整は10.2.3 からIDEに追加された「クイック編集」を使えば Align の設定を文字通りクイックに行えます。

TListView にはコンポーネント名とURLを表示させてみます。構造ペインで、ListView -> ItemAppearane -> Item の順に選択し、オブジェクトインスペクタ上で、プロパティタブ内の Appearance の値を ListItemRightDetail に変更します。

TListViewをデータベース操作のFDQueryと紐づける

ここまでの準備ができたら、最近のDelphi / C++Builder で利用可能なデータバインド方法である LiveBindingによってTFDQueryとTListViewを紐づけます。TFDQuery(フォームデザイナ上ではFiredac_component_downloadlinkcsvsTableと表示されています)を右クリックして「ビジュアルにバインド」を実行すると、IDE画面下部に「LiveBindingエディタ」が表示されました。

これに加えて設計時画面でデータを扱うために、オブジェクトインスペクタで TFDQueryのプロパティタブのActiveの値をTrueに変更します。

LiveBindingエディタでTFDQueryのNameをクリックし、そのままドラッグしてTLiveBingingのItem.Textにつなぎます。また、DownloadlinkをItem.Detailにつなぎます。なお、これらの操作を行うと、LiveBindingデザイナで表示される名称はBindSourceDB1に変わります。BindSourceDB1(TBindSourceDB)はTDataSourceやTDataSetなどの機能をもつ非ビジュアルコンポーネントであり、LiveBindingではすべてのコンポーネントがLiveBindingを使用してBindSoureDB1のデータにアクセスできるようになります。

ここまでが完了すると設計時画面でもTListViewにTFDQueryで取得されたデータを表示できるようになりました。

実際にビルドして動かす

ビルドして実行すると、コンポーネント一覧を表示するアプリが確かに動作しました。

しかし、これではリストに表示される項目が少し多すぎます。Enterprise Connectorsの接続コネクタ数は120個を超えており、TListViewで一覧閲覧できるだけでは良いインタフェースとは言えません。そこでこのリスト表示に絞り込み検索をつけてみることにしましょう。

検索フィールドに入力すると自動で絞り込み検索が進むように実装する

検索文字列の入力用にTEditを配置して画面のいちばん上にレイアウトします。

TListViewと同様にTEditを右クリックしてクイック編集で位置揃えを調整します。

このときに構造ペイン（IDE画面左上）で、TEditとTListViewが同じ階層に配置されていることを確認してください。異なる階層に配置されていた場合は構造ペインで修正します。

このTEditに文字が入力されるたびに絞り込み検索が行われるように実装します。これはOnTypingでクエリを再実行するか、フィルタを設定するとよいでしょう。ここではクエリの再実行を実装してみます。

また、アプリ起動時には必ずListViewに全件のデータを表示させるようにします。これはFormのonFormShowで TFDQueryコンポーネントのActiveプロパティの値を Trueにするとよいでしょう。

再度ビルドして絞り込み検索が動くことを確かめる

実装が終わったらもう一度ビルドして絞り込み検索の動作を確認します。たとえばBetaと入力すると、ベータ版のコンポーネントだけをリストアップできます。単にCSVを読み込むだけならどんな実装でも実現できますが、CSVをデータソースとして利用できるEnterprise Connectorsの特徴が実感できます。

この記事で紹介した内容のまとめ

FireMonkeyのUIコンポーネントを配置し、LiveBindingでTFDQueryと紐づけました。VCLではDBGridやDBEditなどのデータベース連携専用のUIコンポーネントを使用しますが、FireMonkeyでは任意のUIコンポーネントとDataSourceをLiveBindingで連携できます。
また絞り込み検索でのクエリ操作には、イベントハンドラにコードを書きましたが、これは VCL アプリケーションと基本的に同じです。VCLアプリケーションとFireMonkeyアプリケーションの違うところ、同じところを理解すれば、VCLアプリケーションの経験を活かしてFireMonkeyでの開発もできます。

さらにプロトタイプ開発して機能をつけよう

単に一覧表示して絞り込み検索できるだけではなく、さらにプロトタイプ的に拡張してみることを考えてみます。このアプリはEnterprise Connectorsのトライアル版やベータ版コンポーネントの名前とダウンロードURLを表示できていますが、選んだコンポーネントをダウンロードする機能があれば、より便利になります。
そこで次回の記事ではトライアル版コンポーネントのダウンロード機能を追加する実装を行います。

トライアル版でお試しください

Enterprise ConnectorsはDelphi / C++Builder / RAD Studio 10.2 Tokyoおよび10.3 Rioに追加インストールでき、リモートデータベース以外にFireDACの接続性を拡張するコンポーネントです。Professional以上のすべての商用エディションでご利用いただけます。
トライアル版は、製品ページからのお申し込みで無料でご利用いただけます。