チュートリアル:Metropolis UI で LiveBinding とデータ モジュールを使用する
データベースおよび LiveBinding のチュートリアル への移動
このチュートリアルでは、FireMonkey Metropolis UI グリッド テンプレートにデータを接続する手順を説明します。このチュートリアルのテーマは、DetailView にリンクされているデータを GridView リスト ボックスに設定することと、アクションを使用してデータ内を移動するためのナビゲーション ボタンを DetailView フォームに追加することです。
ステップ 1:プロジェクトの作成
新規プロジェクトを作成します。[ファイル|新規作成|その他...|Delphi プロジェクト|FireMonkey Metropolis UI アプリケーション]を選択し、ウィザードから[Grid Metropolis UI アプリケーション]を選択し、開きます。
- [プロジェクト マネージャ]でプロジェクト名(たとえば Project1.exe など)を右クリックし、[新規追加|その他...]を選択します。
- [Delphi プロジェクト|Delphi ファイル]ページから、[データ モジュール]を選択します。
- [プロジェクト マネージャ]で、データ モジュール ユニットの名前を DataModule.pas に変更します。
- GridView.pas ユニットを開き、[ファイル|ユニットを使う...]を選択して[DataModule.pas]を選びます。この操作は、GridView.pas ユニットの uses 句に DataModule.pas を手動で追加するのとまったく同じです。
- 同様に、DetailView.pas ユニットの uses 句に DataModule.pas ユニットを追加します。
- DataModule.pas ユニットを開き、[ツール パレット]から TPrototypeBindSource コンポーネントを追加します。
- PrototypeBindSource1 コンポーネントを右クリックし、[フィールドの追加...]コマンドを選択します。
- いくつかの項目を一度に選択して、サンプル データの複数のフィールドを追加します。特に、BitmapNames と Bitmaps は必ず選択します。
- GridView.pas に戻り、ListBox1 コントロールを選択します(個々の MetroListBoxItem 項目を選択しないようにします)。
- [表示]メニューから[LiveBinding デザイナ]コマンドを選択して、[LiveBinding デザイナ]を起動します。[LiveBinding デザイナ]にデータ モジュールが表示されない場合は、デザイナで右クリックし[デザイナの更新]コマンドを選択します。
ステップ 2:LiveBinding の作成
[LiveBinding デザイナ]で以下を行います。
DataModule1.PrototypeBindSource1.BitmapName1
をListBox1.ItemText
にバインドします。- 新規の LiveBinding をデザイナでクリックして選択します。
- [オブジェクト インスペクタ]で
[ListItemStyle]
にアクセスし、ドロップダウン メニューから[MetropolisUI]を選択します。
この時点で、LiveBinding を通じて ListBox1 コントロール内の項目にデータが自動的に設定されます。 DataModule1.PrototypeBindSource1.ColorsName1
をListBox1.Item.SubTitle
に、DataModule1.PrototypeBindSource1.Bitmap1
をListBox1.Item.Icon
にバインドします。
ListBox1 内の項目が、もう一度更新されます。- TPrototypeDataSource1 コンポーネントに DataModule.pas ユニットから新しいフィールドを追加し、その他のリスト ボックス(ListBox2 および ListBox3)について上記の 4 ステップを繰り返します。
この段階でプロジェクトを保存し、以下の手順を続行します。
- DetailView.pas ユニットを開き、
DataModule1.PrototypeBindSource1.Bitmap1
をIllustration1.Bitmap
にバインドします。 DataModule1.PrototypeBindSource1.ColorsName1
をItem.SubTitle.Text
に、
DataModule1.PrototypeBindSource1.BitmapName1
を ItemTitle.Text
にバインドします。
ファイルをもう一度保存します。GridView.pas ユニットに戻り、ListBox1 コントロールを選択します。[オブジェクト インスペクタ]にアクセスし、OnChange イベントを以下のコードでセットアップします。
begin
if ListBox1.ItemIndex <> -1 then
begin
DataModule1.PrototypeBindSource1.ItemIndex := ListBox1.ItemIndex;
Application.GetDeviceForm('DetailView').Show;
end;
end;
その他の 2 つのリスト ボックス(ListBox2 および ListBox3)について、この手順を繰り返します。
DetailView.pas ユニットに戻り、以下を行います。
- フォームにボタンを 2 つ追加します。好きな場所に配置してください。
- [ツール パレット]からフォームに TActionList コンポーネントを追加します。
- Button1 については、[オブジェクト インスペクタ]で
[Action]
プロパティを選択します。ドロップダウン メニューから[標準アクションの新規作成|LiveBinding]を選択し、[TFMXBindNavigatorPrior]を選びます。
次に、このアクションを[オブジェクト インスペクタ]で展開し、[DataSource]
プロパティをダブルクリックします。
これで、DataModule1.PrototypeBindSource1 コンポーネントが自動的に設定されます。 - Button2 については、[オブジェクト インスペクタ]で
[Action]
プロパティを選択します。ドロップダウン メニューから[標準アクションの新規作成|LiveBinding]を選択し、[TFMXBindNavigatorNext]を選びます。次に、このアクションを[オブジェクト インスペクタ]で展開し、[DataSource]
プロパティをダブルクリックします。これで、DataModule1.PrototypeBindSource1 コンポーネントが自動的に設定されます。 - これら 2 つのボタンのそれぞれについて、ボタン アクションの
Text
プロパティとボタンのText
プロパティをクリアします。 - Button1 については、
StyleLookup
プロパティを flipviewleftbutton に設定しますが、Button2 については、同じプロパティを flipviewrightbutton に設定します。ボタンの外観が変わります。
結果
F9 キーを押すか[実行|実行]メニュー コマンドを使って、アプリケーションを実行します。
個々の項目を選択し、LiveBinding によってグリッド ビューや詳細ビューの項目にデータが自動的に提供される様子を観察します。