Delphi Community Edition Meet up ! - FireDAC FireMonkey 編

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

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

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

## デモの手順

### 1. FireMonkey の新規アプリケーションを作成します
Delphi のメニューから「ファイル｜新規作成｜マルチデバイスアプリケーション - Delphi」を選択して、その後に表示されるダイアログで「空のアプリケーション」を選択します
![firedac02_1.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/2bbf4917-a129-9f65-57cf-3541e224cb84.gif)

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

データエクスプローラ側の設定等については [Delphi Community Edition Meet up ! - データエクスプローラ編](https://qiita.com/CYonezawa/items/3e58e7f6db9ff5bc7434) を参照してくださいませ
このデモでは、データエクスプローラ上の Local DB (dbdemos.gdb) 内の BIOLIFE テーブルを使用しています
データエクスプローラ上で Local DB に接続して、BIOLIFE テーブルをドラックしてフォーム上にドロップします
![firedac02_2.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/033aa550-975d-85cb-c835-2336d9749b51.gif)

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

### 3. フィールドエディタに、テーブルのフィールドを追加します
Biolife Table コンポーネントをマウスで選択して、マウスの右ボタンをクリックします
ポップアップメニューから「フィールドエディタ」を選択します
表示されたフィールドエディタ上でマウスの右ボタンをクリックします
ポップアップメニューから「すべてのフィールドを追加」を選択します
オブジェクトインスペクタ上で、Biolife Table (TFDQuery) の Active プロパティが True になっていない場合は True にして、データベースのテーブルと接続しておきます
![firedac02_3.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/ca064605-b987-5e10-07c9-b863c659899f.gif)

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

### 4. データを表示するためのコンポーネントを追加する
ツールパレットから TStringGrid と TEdit を追加します
![firedac02_4.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/debe98c9-d372-d07e-fd26-621768003452.gif)
時間が無かったので、ざっとデータを確認できる TStringGrid と、カレントのデータが分かるように TEdit を使いました

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

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

オブジェクトインスペクタ上の「ビジュアルにバインド」のリンクをクリックします
LiveBinding デザイナが開きます
Biolife Table の * の箇所と、StringGrid1 の * の箇所をマウスで線を引くように結び付けます
Biolife Table の SPECIES_NO と、Edit1 の Text プロパティの箇所をマウスで線を引くように結び付けます
これでバインドが完了です
![firedac02_5.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/260db6a3-1f3b-4262-7cf2-fb9f11a7c311.gif)
データベースのデータとバインドを行なうと、その情報を保持する TBindSourceDB が自動生成されます

### 6. ナビゲータを追加して、設定する
カレントのデータだけ見せるだけだと、面白くないので、データを前後に送るためのナビゲータを追加します
Visual Live Binding の際に自動的に生成された BindSourceDB1 フォーム上で選択して、マウスの右ボタンをクリックします
表示されたポップアップから「ナビゲータの追加」を選択すると、データと Bind 済みのナビゲータコンポーネントが追加されます
![firedac02_6.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/980be935-4e6d-9679-c955-f20b44fd240b.gif)

### 7. 実行する
あとは実行するだけ
ナビゲータを操作するとカレントのカーソルが動きます
![firedac02_7.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/8a09dc50-f8f2-9062-3589-c96b66983653.gif)

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