チュートリアル: データソースからUIを生成する

このチュートリアルでは、データソースからのデータを基にアプリケーションUIを生成する方法を学びます。

リストデータソースと Data-Driven Exclusive Activity Host を使用して、データオブジェクトのコンテンツから Activities を持つUIの一部を作成できます。例えば、データソースでメニューのコンテンツを定義し、Data-Driven Exclusive Activity Host を使用してアプリケーション内にメニューを作成することができます。

このチュートリアルでは、Data-Driven Exclusive Activity Host とリストデータソースを使用して、設定アイテムを表示する設定パネルを作成します。各アイテムには独自の UI コントロールがあります。

このビデオはチュートリアルの結果を示しています。

このチュートリアルは、Kanzi アクティビティシステムを使用する基本を理解していることを前提としています。そのための最適なエントリーポイントは、次のチュートリアルです。

• チュートリアル: アプリケーションUIの構造

• チュートリアル: アプリケーションUIを制御する

チュートリアルを入手する

チュートリアルを入手するには、Kanzi Studio の Quick Start ウィンドウで Examples をクリックします。Data-Driven Activities チュートリアルの横にある をクリックします。

Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。

• <KanziWorkspace>/Tutorials/Data-Driven Activities/Start/Tool_project ディレクトリにあるチュートリアルの開始地点プロジェクト。

  このプロジェクトの内容と、このようなプロジェクトの作成方法については、チュートリアル: アプリケーションUIを制御する を参照してください。

• <KanziWorkspace>/Tutorials/Data-Driven Activities/Completed ディレクトリにある完成したチュートリアル。

開始プロジェクトの内容

スタートポイントとなるプロジェクトには、このチュートリアルを完了するのに必要なコンテンツが含まれています。

• SettingsMenuBar 画像とプレハブ。Data-Driven Exclusive Activity Host が生成するコンテンツのインターフェースモックアップとしてこの画像を使用します。

  

• SettingsLayout プレハブ。このプレハブを使用して、アプリケーション内の Settings メニューのコンテンツをレイアウトし、Data-Driven Exclusive Activity Host が生成するアクティビティ間をナビゲートするためのUIコントロールを配置します。

  

• Kanzi Studio Factory Content からのこれらのUIコントロール：

  • Button が ControlButton プレハブでインスタンス化されました。

  • Checkbox が ControlCheckbox プレハブでインスタンス化されました。

  • Slider が ControlSlider プレハブでインスタンス化されました。

  • ControlToggleButton プレハブでインスタンス化された Toggle Button

  Data-Driven Exclusive Activity Host が生成するアクティビティで、これらのUIコントロールを使用します。

  

• チュートリアルで使用するフォント。

  

• XML_data_source は、Kanzi アプリケーションのデータソースとしてXMLを使用するための限定的なサポートを提供する Kanzi Engine プラグインです。

  この Kanzi Engine データソースプラグインを使用して、XMLデータソースからデータを取得し、そのデータを Data-Driven Exclusive Activity Host と共に使用してアクティビティを生成します。

  このプラグインと独自のデータソースの定義方法について詳しくは、チュートリアル: データソースからアプリケーションデータを取得する を参照してください。

  

• Application/bin/Settings.xml は、Data-Driven Exclusive Activity Host がアクティビティを生成するために使用するコンテンツを記述するデータを含んでいます。

  <SettingsPanels type="list">
      <items>
          <SettingsPanelItem>
              <PanelName type="string">WINDOWS</PanelName>
              <SettingsItems type="list">
                  <items>
                      <SettingItem>
                          <SettingName type="string">Front left</SettingName>
                          <SettingType type="string">slider</SettingType>
                          <SettingValue type="int">0</SettingValue>
                          <SettingRange type="int">10</SettingRange>
                      </SettingItem>
                      <SettingItem>
                          <SettingName type="string">Front right</SettingName>
                          <SettingType type="string">slider</SettingType>
                          <SettingValue type="int">0</SettingValue>
                          <SettingRange type="int">10</SettingRange>
                      </SettingItem>
                      <SettingItem>
                          <SettingName type="string">Back left</SettingName>
                          <SettingType type="string">slider</SettingType>
                          <SettingValue type="int">0</SettingValue>
                          <SettingRange type="int">10</SettingRange>
                      </SettingItem>
                      <SettingItem>
                          <SettingName type="string">Back right</SettingName>
                          <SettingType type="string">slider</SettingType>
                          <SettingValue type="int">0</SettingValue>
                          <SettingRange type="int">10</SettingRange>
                      </SettingItem>
                  </items>
              </SettingsItems>
          </SettingsPanelItem>
  
        ...
  
     </items>
  </SettingsPanels>
  

• Screen ノードのリソース辞書には、Cluster パラレルアクティビティホストを指すエイリアスが含まれています。このエイリアスを使用して、そのアクティビティホストにアクセスします。

  

• Header アクティビティには、Drive と Browse のアプリケーションモードを切り替えることができる Toggle Button ノードが含まれています。

  

データソースからアクティビティを生成する

このセクションでは、テンプレートアクティビティを作成し、それをデータ駆動型のエクスクルーシブアクティビティホストで使用して、XMLデータソースからアクティビティを生成します。

データソースからアクティビティを生成するには:

1. リストデータオブジェクトを持つデータソースを作成します。

   1. Kanzi Studio Quick Start ウィンドウで、Examples をクリックします。Data-Driven Activities チュートリアルの横にある Open をクリックし、Start project を選択します。

   2. Window のメインメニューで Data Sources を選択します。

      Data Sources ウィンドウを使用して、プロジェクト内のデータソースを作成、設定、削除し、データソースからデータオブジェクトをプロジェクト内のノードやリソースに接続します。

      

   3. Data Sources ウィンドウで Create Data Source をクリックし、次の設定でデータソースを作成します。

      • Name から Settings へ

      • Data Source Type から XML_data_source へ

      

   4. 作成したデータソースの隣にある Data Sources で、 をクリックし、XML Data Source File プロパティを Application/bin/Settings.xml XMLファイルをデータソースとして使用するように設定します。

      

   5. Settings データソースの隣の Data Sources で をクリックします。

      この方法で、Application/bin/Settings.xml ファイルからデータをロードし、データオブジェクトを作成します。データ駆動型のエクスクルーシブアクティビティホストは、これらのデータオブジェクトを使用してアクティビティを生成します。

      

2. データ駆動型排他アクティビティホストがそのアクティビティを生成するために使用するアクティビティのテンプレートを作成します。

   1. Prefabs で をクリックし、Activity 2D を選択して、SettingsPanelTemplate と名付け、そのアクティビティプレハブ内に Stack Layout 2D ノードを作成し、PanelName と名付けられた Text Block 2D ノードを作成します。

      

   2. Prefabs で、SettingsPanelTemplate > Stack Layout 2D > PanelName を選択し、Data Sources から Settings > SettingsPanels > Item > SettingsPanelItem > PanelName データオブジェクトを Properties にドラッグし、Text プロパティにドロップします。

      この方法で、PanelName ノードを設定メニューの名前を表示するように設定します。これは PanelName データオブジェクトで設定されています。データオブジェクトをプロパティにドロップすると、Kanzi Studio がそのプロパティタイプの値をデータオブジェクトの値にバインドします。

      PanelName データオブジェクトは、Settings.xml ファイルの <PanelName> 要素から値を取得します。

      <SettingsPanels type="list">
          <items>
              <SettingsPanelItem>
                  <PanelName type="string">WINDOWS</PanelName>
                  ...
              </SettingsPanelItem>
              <SettingsPanelItem>
                  <PanelName type="string">MIRRORS</PanelName>
                  ...
              </SettingsPanelItem>
              <SettingsPanelItem>
                  <PanelName type="string">LIGHTS</PanelName>
                  ...
              </SettingsPanelItem>
              <SettingsPanelItem>
                  <PanelName type="string">SEATS</PanelName>
                  ...
              </SettingsPanelItem>
          </items>
      </SettingsPanels>
      

      

   3. Prefabs で SettingsPanelTemplate を選択し、Properties で Vertical Padding プロパティフィールド Top を追加して80に設定します。

      この方法で、Settings パネルの上部とアプリケーションインターフェースの残りの部分の間にパディングを追加します。

      

3. SettingsPanel の構造とコンテンツを作成します。

   1. In the Activity Browser below the GaugeViewActivityHost click , select Create Activity, and name the Activity and its prefab Settings.

      

   2. Prefabs で SettingsMenuBar ノードを Settings アクティビティにドラッグします。

      

   3. Settings アクティビティの Activity Browser で をクリックします。

      この方法で、アクティビティのアクティベーションをシミュレートし、Preview で確認できます。

      

   4. Prefabs で Settings プレハブを選択し、Properties で追加して設定します。

      • Vertical Padding Top から 91 まで

      • Horizontal Alignment から Right へ

      

4. Cluster アクティビティホストが Browse モードのときに Settings アクティビティをアクティブにする Data Trigger を作成します。

   1. Prefabs で、GaugeView > GaugeViewActivityHost を選択します。

      

   2. Node Components Alt を押しながら右クリック Triggers で、Data Trigger を選択し、SettingsPanel と名付けます。

      

   3. Expression で次の式を使用します:

      {#Cluster/ActivityProperty.Cluster.MainView} == 1
      

      データトリガー内の条件式は、True または False のいずれかに評価されなければなりません。

      Apply をクリックします。

      この方法で、Data Trigger を設定し、ActivityProperty.Cluster.MainView プロパティが Browse （列挙値 1）に設定されている限り、データトリガーに適用された Apply Action を保持します。次のステップで Apply Activation Action を追加します。このバインディングにより、ActivityProperty.Cluster.MainView の値は Cluster アクティビティホストから取得されます。開始点プロジェクトに含まれている Cluster エイリアスを使用し、それが Cluster パラレルアクティビティホストを指します。

      

   4. SettingsPanel トリガー Alt を押しながら右クリック Actions で、Apply Activation Action を選択し、Activity Activation Path を Settings に設定します。

      Activity Activation Path プロパティで設定したアクティビティへのパスは、Activity Host Path プロパティで設定したアクティビティホストノードに対して相対的です。

      データトリガーと適用アクティベーションアクションは、データトリガーの条件が満たされている限り、このアクティビティをアクティブに保ちます。

      Activity Browser は、Activity Host が アイコンを持つ Data Trigger を持っていることを示します。

      

5. データソースからのデータを基にアクティビティを生成するための Data-Driven Exclusive Activity Host を作成して設定します。

   1. Settings アクティビティの下の Activity Browser で をクリックし、Create Data-Driven Exclusive Activity Host を選択し、データ駆動型排他的アクティビティホストに SettingsPanel という名前を付けます。

      

   2. Prefabs で Settings プレハブを選択し、Properties で Data Context > Data Context プロパティを追加し、先ほど作成した Settings データソースに設定します。

      この方法で、SettingsPanel データ駆動型排他アクティビティホストがアクティビティを生成するために使用するデータソースを設定します。

      

   3. Prefabs で Settings > SettingsPanel を選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。

      • Property から Activity Source へ

      • Binding Expression へ

        {DataContext.SettingsPanels}
        

      Save をクリックします。

      Activity Source プロパティをデータオブジェクトにバインドすると、そのデータオブジェクトのデータを使用してアクティビティを生成するようにデータ駆動型エクスクルーシブアクティビティホストに指示します。

      

   4. Prefabs で Settings > SettingsPanel を選択し、Properties で追加して設定します。

      • Activity Template を SettingsPanelTemplate プレハブに

        データ駆動型エクスクルーシブアクティビティホストは、このプレハブを使用してアクティビティを作成します。

      • アプリケーションがこのデータ駆動型排他アクティビティホストをアクティブにしたときに、データ駆動型排他アクティビティホストがアクティビティを作成するために使用するリストデータオブジェクト内のアイテムに Active Activity Index します。

        Active Activity Index プロパティの値はゼロベースであり、データソース内のリストデータオブジェクトにおける位置を示します。これは、データ駆動型排他アクティビティホストがアクティビティを作成するために使用します。値が -1 の場合、そのデータ駆動型排他アクティビティホスト内のアクティビティはアクティブではありません。

      

Activity Browser では、SettingsPanel データ駆動型エクスクルーシブアクティビティホストによって生成されたアクティビティを閲覧できるようになりました。

1. Activity Browser で Cluster を選択し、サイドパネルで MainView プロパティを Browse に設定します。

   

2. Activity Browser で、SettingsPanel データ駆動型排他アクティビティホストを選択し、サイドパネルで Active Activity Index プロパティの値を設定します。

   Active Activity Index プロパティを使用して、データ駆動型排他アクティビティホストノードにリストデータオブジェクト内のどのアイテムを作成するかを指示します。Activity Browser で Active Activity Index プロパティの値を設定すると、このプロパティのランタイム値が変更されます。Preview またはアプリケーションを再起動すると、データ駆動型排他アクティビティホストは、Properties で設定した Active Activity Index プロパティの値を読み取ります。

   

アクティビティ間をナビゲートするコントロールを作成する

このセクションでは、SettingsPanel データ駆動型エクスクルーシブアクティビティホスト内のアクティビティ間をナビゲートするためのコントロールを作成します。

アクティビティ間をナビゲートするコントロールを作成するには、以下のようにします。

1. Prefabs で、Settings > SettingsPanel を SettingsLayout プレハブの Previous ノードと Next ノードの間にドラッグし、その後、SettingsLayout を Settings アクティビティにドラッグします。

   

2. Prefabs で SettingsLayout > Previous ボタンノードを選択し、Node Components Alt を押しながら右クリック Button: Click で Dispatch Message Action > Exclusive Activity Host > Navigate to Previous Activity を選択します。

   

3. Navigate to Previous Activity アクションセットの Node Components で：

   • Target Item から Prefabs/SettingsLayout/SettingsLayout/SettingsPanel へ

     この方法で、前のアクティビティに移動したい Data-Driven Exclusive Activity Host を Navigate to Previous Activity アクションで設定します。

   • Loop Activity を有効にする

     この方法で、Data-Driven Exclusive Activity Host の最初のアクティビティに到達した後、そのアクティビティホスト内の最後のアクティビティに移動する Navigate to Previous Activity アクションを設定します。

   

4. SettingsLayout > Next ボタンノードの手順を繰り返しますが、Navigate to Next Activity アクションを作成します。

   

Activity Browser で Cluster アクティビティホストを選択し、サイドパネルで MainView を Browse に設定すると、Preview でボタンを使用して SettingsPanel データ駆動型排他アクティビティホスト内のアクティビティ間をナビゲートできます。

SettingsPanel で設定を表示

このセクションでは、SettingsPanel において、Settings データソース内の各パネルに定義された設定を表示します。

SettingsPanel で設定を表示するには、

1. Prefabs で、Stack Layout 2D プレハブを SettingItem という名前で作成し、その中に Text Block 2D を SettingName という名前で作成します。

   このプレハブを使用して、Settings データソースから各 SettingItem を表示します。

   

2. Prefabs で SettingItem > SettingName を選択し、Data Sources から Settings > SettingsPanels > Item > SettingsPanelItem > SettingsItems > Item > SettingItem > SettingName を Properties にドラッグし、Text プロパティにドロップします。

   この方法で、Settings データソースの SettingName データオブジェクトに、SettingName の Text プロパティをバインドします。

   

3. Prefabs > SettingsPanelTemplate > Stack Layout 2D で Grid List Box 2D を作成し、SettingPanelListBox と名付けます。

   このリストボックスを使用して、SettingItem を使用して Settings データソースからの設定を表示します。

   

4. Prefabs で SettingPanelListBox を選択し、Settings データソースからアイテムを表示するように設定します。

   • Data Sources から Settings > SettingsPanels > Item > SettingsPanelItem > SettingsItems データオブジェクトを Properties にドラッグし、Items Source プロパティにドロップします。

   • Properties に追加して設定します。

     • Item Template から SettingItem へ

       Item Template プロパティを使用して、Grid List Box ノードがリスト内のアイテムに使用するプレハブテンプレートを設定します。

     • Layout Width を550に

     • Layout Height から 280 まで

     • Cell Width を550に

     • Cell Height から60まで

   

5. SettingsPanel データ駆動型エクスクルーシブアクティビティホストのコンテンツのプレゼンテーションを調整します。

   • SettingsPanelTemplate > Stack Layout 2D で Direction を Y に設定します。

     

   • SettingsPanelTemplate > Stack Layout 2D > PanelName に追加して設定します。

     • Font Family から Roboto へ

     • Font Size から 28 へ

     • Horizontal Alignment から Center へ

     

   • SettingItem > SettingName に追加して設定します。

     • Font Family から Roboto へ

     • Font Size から 28 へ

     • Font Weight から Light へ

     • Layout Width から 220 へ

     • Vertical Alignment から Center へ

     

Activity Browser で Cluster アクティビティホストを選択し、サイドパネルで MainView を Browse に設定すると、Preview で SettingsPanel データ駆動型排他アクティビティホストにおいて、Settings データソースで各パネルに定義された設定を確認できます。

設定項目のUIコントロールを表示する

このセクションでは、Settings データソースでその設定項目に指定されたコントロールを、各設定項目の SettingsPanel に表示する方法を学びます。

設定項目のUIコントロールを表示するには：

1. Library > Property Types で、SettingControlType という名前のプロパティタイプを作成し、Data Type を Text に設定します。

   このプロパティタイプを使用して、SettingsPanel の各設定に使用したいUIコントロールのタイプを設定します。

   

2. SettingsPanel の各設定項目に対してUIコントロールを選択するステートマネージャーを作成します。

   1. Library > State Managers で、SettingControlType という名前のステートマネージャーを作成し、State Group を Control にリネームし、Properties で Controller Property プロパティを SettingControlType に設定します。

      

   2. Library > State Managers > SettingControlType > Control の各コントロールタイプに対して、次のプロパティを設定するステートを作成します。

      ステート (State)	SettingControlType	Prefab View > Prefab Template
      Button	button	ControlButton
      Checkbox	checkbox	ControlCheckbox
      Slider	slider	ControlSlider
      Toggle Button	togglebutton	ControlToggleButton

      これらの状態を使用して、各設定に使用したいUIコントロールを設定します。SettingControlType プロパティの値には、各UIコントロールタイプに対して Settings データソースが使用するのと同じ値を使用します。

      

3. Prefabs > SettingItem で Prefab View 2D を作成し、それに SettingControl という名前を付け、Properties で:

   • 追加と設定:

     • Resources > State Manager から SettingControlType へ

     • Layout Width から 300 へ

     • Layout Height から 70 へ

   • + Add Binding をクリックし、Binding Editor で設定します:

     • Property から Data-DrivenActivities.SettingControlType へ

     • Expression へ

       {DataContext.SettingItem.SettingType}
       

     Save をクリックします。

     この方法では、SettingControlType プロパティの値が SettingType データオブジェクトから取得されます。SettingControlType ステートマネージャーのコントローラープロパティが SettingControlType プロパティであるため、このアプローチを使用して、Settings データソースが含むUIコントロールのプレハブをインスタンス化します。

     

Activity Browser で Cluster アクティビティホストを選択し、サイドパネルで MainView を Browse に設定すると、Preview で SettingsPanel データ駆動型排他アクティビティホストに、Settings データソースで定義されたUIコントロールを持つ各設定項目が表示されます。

データソースでUIコントロールを設定する

このセクションでは、Checkbox、Slider、および Toggle Button UI コントロールを設定して、それらの値を Settings データソースから取得して保存します。これにより、ユーザーが他のアクティビティに移動しても、UI コントロールの値が保持されます。このチュートリアルで使用する XML_data_source データソースは、これらの値をメモリ内にのみ保存します。

データソースでUIコントロールを設定するには:

1. Prefabs で Checkbox プレハブを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。

   • Binding Mode から Two way へ

   • Property から Toggle State へ

   • Expression へ

     {DataContext.SettingItem.SettingValue}
     

   Save をクリックします。

   この方法で、Checkbox は SettingValue データオブジェクトからその状態を取得し、その設定項目のユーザー設定値を SettingValue データオブジェクトに保存します。

   

2. 前のステップを Toggle Button プレハブに対して繰り返します。

   ヒント

   バインディングをコピーするには:

   1. Properties でコピーしたいバインディングを右クリックし、Copy Binding を選択します。

   2. バインディングを使用したいノードを選択し、Properties で Bindings プロパティを右クリックし、Paste Binding(s) を選択します。

   

3. Slider をデータソースで設定するには：

   1. Prefabs で Slider プレハブを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。

      • Property から Maximum Value へ

      • Expression へ

        {DataContext.SettingItem.SettingRange}
        

      Save をクリックします。

      この方法で、Slider は SettingRange データオブジェクトから最大値を取得します。

      

   2. Properties で + Add Binding をクリックし、Binding Editor で設定します。

      • Binding Mode から Two way へ

      • Property から Value へ

      • Expression へ

        {DataContext.SettingItem.SettingValue}
        

      Save をクリックします。

      この方法で、Slider は SettingValue データオブジェクトからその値を取得し、その設定項目の SettingValue データオブジェクトにユーザー設定値を保存します。

      

Preview で、設定項目のUIコントロールの値を変更してそのアクティビティから離れた場合、再びそのアクティビティに戻ると、そのUIコントロールの値は同じままです。

次の作業

このチュートリアルでは、データ駆動型エクスクルーシブアクティビティホストを使用して、データソースからのデータに基づいてアクティビティを生成する方法を学びました。これで、次のことができます。

• Code Behind ワークフローでアクティビティをプログラムする方法を学びます。チュートリアル: C++コードビハインドでアクティビティをプログラムする を参照してください。

• データソースの定義方法を学びます。チュートリアル: データソースからアプリケーションデータを取得する を参照してください。

• List Box の使い方を学びます。チュートリアル: Grid List Box を使用して連絡先リストを作成する を参照してください。

関連項目

Activity Browser の使用方法について詳しく知るには、アクティビティブラウザの使用 をご覧ください。

アクティビティシステムについて詳しく学ぶには、アクティビティ を参照してください。

Data Sources について詳しく知るには、データソース (Data Sources) をご覧ください。

Kanzi ステートマネージャーについて詳しく知るには、ステートマネージャー (State Manager) を参照してください。

バインディングの使用方法について詳しくは、バインディングの使用 および バインディング式リファレンス を参照してください。