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

Delphi Community Edition Meet up ! - FireDAC FireMonkey 編

More than 1 year has passed since last update.

これは、2018年8月3日に行なった Delphi Community Edition Meet up ! で行なったデータエクスプローラのデモで、FireDAC 接続を使って、サラッとデータを表示する FireMonkey アプリケーションを作った際の説明です

データエクスプローラは、アプリケーションの作成の時にも効力を発揮します
予め接続する先のデータベースが決まっているのであれば、データエクスプロラー上に接続情報を作成しておくことで、必要なプロパティが設定されたコンポーネントを生成してくれます

デモで行なったこと

FireMonkey アプリケーションを新規に作成して、ノンコーディングでデータを表示するアプリケーションを作り実行しました

デモの手順

1. FireMonkey の新規アプリケーションを作成します

Delphi のメニューから「ファイル|新規作成|マルチデバイスアプリケーション - Delphi」を選択して、その後に表示されるダイアログで「空のアプリケーション」を選択します
firedac02_1.gif

2. データエクスプローラから接続設定をフォーム上にドラックアンドドロップして、接続に必要なコンポーネントを生成します

データエクスプローラ側の設定等については Delphi Community Edition Meet up ! - データエクスプローラ編 を参照してくださいませ
このデモでは、データエクスプローラ上の Local DB (dbdemos.gdb) 内の BIOLIFE テーブルを使用しています
データエクスプローラ上で Local DB に接続して、BIOLIFE テーブルをドラックしてフォーム上にドロップします
firedac02_2.gif

この動作によって、フォーム上に予め接続設定が行なわれている Local Connection (TFDConnection) と、Biolife Table (TFDQuery) が自動生成されます

3. フィールドエディタに、テーブルのフィールドを追加します

Biolife Table コンポーネントをマウスで選択して、マウスの右ボタンをクリックします
ポップアップメニューから「フィールドエディタ」を選択します
表示されたフィールドエディタ上でマウスの右ボタンをクリックします
ポップアップメニューから「すべてのフィールドを追加」を選択します
オブジェクトインスペクタ上で、Biolife Table (TFDQuery) の Active プロパティが True になっていない場合は True にして、データベースのテーブルと接続しておきます
firedac02_3.gif

設計時でも接続できるってスゴイ!

4. データを表示するためのコンポーネントを追加する

ツールパレットから TStringGrid と TEdit を追加します
firedac02_4.gif
時間が無かったので、ざっとデータを確認できる TStringGrid と、カレントのデータが分かるように TEdit を使いました

5. Visual Live Binding を使ってコンポーネントとデータを結びつける

FireMonkey の場合は、VCL とは異なり、データセット上のデータを扱うためのコンポーネントは決まっていません
コンポーネントのプロパティで扱える型と、データ型があっていれば、データを表示できるからです
なので、フィールドエディタからドラッグアンドドロップで、フィールドをフォーム上に配置することはできません
ここでは、コンポーネントとデータの結びつけを行なうため Visual Live Binding の機能を使用しています
Visual Live Binding については、以前ここで書いたので参照してくださいね

オブジェクトインスペクタ上の「ビジュアルにバインド」のリンクをクリックします
LiveBinding デザイナが開きます
Biolife Table の * の箇所と、StringGrid1 の * の箇所をマウスで線を引くように結び付けます
Biolife Table の SPECIES_NO と、Edit1 の Text プロパティの箇所をマウスで線を引くように結び付けます
これでバインドが完了です
firedac02_5.gif
データベースのデータとバインドを行なうと、その情報を保持する TBindSourceDB が自動生成されます

6. ナビゲータを追加して、設定する

カレントのデータだけ見せるだけだと、面白くないので、データを前後に送るためのナビゲータを追加します
Visual Live Binding の際に自動的に生成された BindSourceDB1 フォーム上で選択して、マウスの右ボタンをクリックします
表示されたポップアップから「ナビゲータの追加」を選択すると、データと Bind 済みのナビゲータコンポーネントが追加されます
firedac02_6.gif

7. 実行する

あとは実行するだけ
ナビゲータを操作するとカレントのカーソルが動きます
firedac02_7.gif

あとがき

今回は簡単なデモでしたので、フォームにそのままペタペタ貼りましたが、データモジュールを使って、ロジックと UI を分けた方がベターです(拡張や修正の面からも)

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