チュートリアル:Metropolis UI で LiveBinding とデータ モジュールを使用する

提供: RAD Studio
移動先: 案内検索

データベースおよび LiveBinding のチュートリアル への移動


このチュートリアルでは、FireMonkey Metropolis UI グリッド テンプレートにデータを接続する手順を説明します。このチュートリアルのテーマは、DetailView にリンクされているデータGridView リスト ボックスに設定することと、アクションを使用してデータ内を移動するためのナビゲーション ボタンを DetailView フォームに追加することです。

ステップ 1:プロジェクトの作成

新規プロジェクトを作成します。[ファイル|新規作成|その他...|Delphi プロジェクト|FireMonkey Metropolis UI アプリケーションを選択し、ウィザードから[Grid Metropolis UI アプリケーション]を選択し、開きます。

  1. [プロジェクト マネージャ]でプロジェクト名(たとえば Project1.exe など)を右クリックし、[新規追加|その他...]を選択します。

    LBMetroUI1.png

  2. [Delphi プロジェクト|Delphi ファイル]ページから、[データ モジュール]を選択します。

    LBMetroUI2.png

  3. [プロジェクト マネージャ]で、データ モジュール ユニットの名前を DataModule.pas に変更します。
  4. GridView.pas ユニットを開き、[ファイル|ユニットを使う...]を選択して[DataModule.pas]を選びます。この操作は、GridView.pas ユニットの uses 句に DataModule.pas を手動で追加するのとまったく同じです。
  5. 同様に、DetailView.pas ユニットの uses 句に DataModule.pas ユニットを追加します。
  6. DataModule.pas ユニットを開き、[ツール パレット]から TPrototypeBindSource コンポーネントを追加します。
  7. PrototypeBindSource1 コンポーネントを右クリックし、[フィールドの追加...]コマンドを選択します。

    LBMetroUI3.png

  8. いくつかの項目を一度に選択して、サンプル データの複数のフィールドを追加します。特に、BitmapNamesBitmaps は必ず選択します。
  9. GridView.pas に戻り、ListBox1 コントロールを選択します(個々の MetroListBoxItem 項目を選択しないようにします)。
  10. [表示]メニューから[LiveBinding デザイナ]コマンドを選択して、[LiveBinding デザイナ]を起動します。[LiveBinding デザイナ]にデータ モジュールが表示されない場合は、デザイナで右クリックし[デザイナの更新]コマンドを選択します。

ステップ 2:LiveBinding の作成

[LiveBinding デザイナ]で以下を行います。

  1. DataModule1.PrototypeBindSource1.BitmapName1ListBox1.ItemText にバインドします。

    LBMetroUI4.png

  2. 新規の LiveBinding をデザイナでクリックして選択します。
  3. [オブジェクト インスペクタ][ListItemStyle]にアクセスし、ドロップダウン メニューから[MetropolisUI]を選択します。

    LBMetroUI5.png

    この時点で、LiveBinding を通じて ListBox1 コントロール内の項目にデータが自動的に設定されます。
  4. DataModule1.PrototypeBindSource1.ColorsName1ListBox1.Item.SubTitle に、DataModule1.PrototypeBindSource1.Bitmap1ListBox1.Item.Icon にバインドします。

    LBMetroUI6.png

    ListBox1 内の項目が、もう一度更新されます。
  5. TPrototypeDataSource1 コンポーネントに DataModule.pas ユニットから新しいフィールドを追加し、その他のリスト ボックス(ListBox2 および ListBox3)について上記の 4 ステップを繰り返します。

この段階でプロジェクトを保存し、以下の手順を続行します。

  1. DetailView.pas ユニットを開き、DataModule1.PrototypeBindSource1.Bitmap1Illustration1.Bitmap にバインドします。

    LBMetroUI7.png

  2. DataModule1.PrototypeBindSource1.ColorsName1Item.SubTitle.Text に、

DataModule1.PrototypeBindSource1.BitmapName1ItemTitle.Text にバインドします。

LBMetroUI8.png

ファイルをもう一度保存します。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 ユニットに戻り、以下を行います。

  1. フォームにボタンを 2 つ追加します。好きな場所に配置してください。

    LBMetroUI9.png

  2. [ツール パレット]からフォームに TActionList コンポーネントを追加します。
  3. Button1 については、[オブジェクト インスペクタ][Action]プロパティを選択します。ドロップダウン メニューから[標準アクションの新規作成|LiveBinding]を選択し、[TFMXBindNavigatorPrior]を選びます。

    LBMetroUI10.png

    次に、このアクションを[オブジェクト インスペクタ]で展開し、[DataSource]プロパティをダブルクリックします。

    LBMetroUI11.png

    これで、DataModule1.PrototypeBindSource1 コンポーネントが自動的に設定されます。
  4. Button2 については、[オブジェクト インスペクタ][Action]プロパティを選択します。ドロップダウン メニューから[標準アクションの新規作成|LiveBinding]を選択し、[TFMXBindNavigatorNext]を選びます。次に、このアクションを[オブジェクト インスペクタ]で展開し、[DataSource]プロパティをダブルクリックします。これで、DataModule1.PrototypeBindSource1 コンポーネントが自動的に設定されます。
  5. これら 2 つのボタンのそれぞれについて、ボタン アクションの Text プロパティとボタンの Text プロパティをクリアします。
  6. Button1 については、StyleLookup プロパティを flipviewleftbutton に設定しますが、Button2 については、同じプロパティを flipviewrightbutton に設定します。ボタンの外観が変わります。

    LBMetroUI12.png

結果

F9 キーを押すか[実行|実行]メニュー コマンドを使って、アプリケーションを実行します。

個々の項目を選択し、LiveBinding によってグリッド ビューや詳細ビューの項目にデータが自動的に提供される様子を観察します。


LBMetroUI13.png


LBMetroUI14.png

関連項目