データ駆動型エクスクルーシブアクティビティホスト

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

../../_images/data-driven-exclusive-activity-host.gif

Data-Driven Exclusive Activity Host は、その子アクティビティのうち一つだけをアクティブにすることができます。Data-Driven Exclusive Activity Host の子アクティビティの一つがアクティブな場合、そのアクティビティホストの他のすべてのアクティビティは非アクティブになります。例えば、アプリケーション内でビューを切り替えるために Data-Driven Exclusive Activity Host を使用することができます。

チュートリアルを完了して、Data-Driven Exclusive Activity Host の使用方法を学びます。チュートリアル: データソースからUIを生成する を参照してください。

../../_images/settingspanel-uicontrols.gif

データソースを使用してアクティビティを作成する

データソースを使用してアクティビティを作成するには:

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

    データソースの使用方法について学ぶには、データソースを使用する と チュートリアル: データソースからアプリケーションデータを取得する を参照してください。

    例：

    1. Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Data source チュートリアルの横にある ダウンロード をクリックします。

    2. Library で Kanzi Engine Plugins を右クリックし、Import Kanzi Engine Plugin を選択して、<KanziWorkspace>/Tutorials/Data sources/Completed/Application/lib/Win64/GL_vs2022_Release_DLL/XML_data_source.dll をインポートします。

      ../../_images/import-kanzi-engine-plugin.png

    3. Window メインメニューで Data Sources を選択して、Data Sources ウィンドウを開きます。

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

      ../../_images/window-data-sources.png

    4. Data Sources ウィンドウで、Create Data Source をクリックし、このデータソースの名前を入力して、OK をクリックしてデータソースを作成します。

      ../../_images/create-data-source.png ../../_images/create-data-source-settings.png

    5. Data Sources ウィンドウで、先ほど作成したデータソースの隣にある クイック編集 をクリックし、XML Data Source File プロパティをXMLファイルをデータソースとして使用するように設定します。

      ../../_images/data-sources-settings.png

      例えば、このデータをXMLファイルとして保存し、そのファイルをデータソースとして使用します。

      <Settings type="list">
    <items>
        <Menu>
            <Name type="string">WINDOWS</Name>
            <Settings type="list">
                <items>
                    <Setting>
                        <Name type="string">Front left</Name>
                    </Setting>
                    <Setting>
                        <Name type="string">Front right</Name>
                    </Setting>
                    <Setting>
                        <Name type="string">Back left</Name>
                    </Setting>
                    <Setting>
                        <Name type="string">Back right</Name>
                    </Setting>
                </items>
            </Settings>
        </Menu>
        <Menu>
            <Name type="string">MIRRORS</Name>
            <Settings type="list">
                <items>
                    <Setting>
                        <Name type="string">Rearview</Name>
                    </Setting>
                    <Setting>
                        <Name type="string">Side left</Name>
                    </Setting>
                    <Setting>
                        <Name type="string">Side right</Name>
                    </Setting>
                </items>
            </Settings>
        </Menu>
        <Menu>
            <Name type="string">LIGHTS</Name>
            <Settings type="list">
                <items>
                    <Setting>
                        <Name type="string">Ceiling</Name>
                    </Setting>
                    <Setting>
                        <Name type="string">Back left</Name>
                    </Setting>
                    <Setting>
                        <Name type="string">Back right</Name>
                    </Setting>
                </items>
            </Settings>
        </Menu>
        <Menu>
            <Name type="string">SEATS</Name>
            <Settings type="list">
                <items>
                    <Setting>
                        <Name type="string">Heating left</Name>
                    </Setting>
                    <Setting>
                        <Name type="string">Heating right</Name>
                    </Setting>
                    <Setting>
                        <Name type="string">Back left</Name>
                    </Setting>
                    <Setting>
                        <Name type="string">Back right</Name>
                    </Setting>
                </items>
            </Settings>
        </Menu>
    </items>
</Settings>

    6. データソースの隣の Data Sources で、リロードデータソース をクリックします。

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

      ../../_images/data-sources-create.png ../../_images/data-sources-settings-data-source.png

  2. Data-Driven Exclusive Activity Host がリストデータソースからアクティビティを生成するためのテンプレートを作成します。

    例：

    1. Prefabs で、create-prefab をクリックし、Activity 2D を選択します。Activity 2D プレハブで、Text Block 2D ノードと Grid List Box 2D ノードを持つ Stack Layout 2D ノードを作成します。

      ../../_images/ddeah-activity-prefab.png

    2. Prefabs で、create-prefab をクリックし、Empty Node 2D を選択します。Empty Node 2D プレハブで Text Block 2D ノードを作成します。

      Activity 2D プレハブの Grid List Box 2D ノードは、このプレハブを使用してデータソースからのメニューの内容を表示します。

      ../../_images/ddeah-activity-prefab-empty-node.png

    3. Activity 2D プレハブの Prefabs で、Text Block 2D ノードを選択します。Data Sources から、Settings > Item > Menu > Name データオブジェクトを Properties にドラッグし、Text プロパティにドロップします。

      この方法で、Text Block 2D ノードを設定メニューの名前を Settings > Item > Menu > Name リストデータオブジェクトから表示するように設定します。

      ../../_images/ddeah-activity-text-block.png ../../_images/data-sources-menu-name.png ../../_images/ddeah-activity-text-block-text-binding.png

    4. Activity 2D プレハブの Prefabs で、Grid List Box 2D ノードを選択します。Data Sources から Settings > Item > Menu > Settings リストデータオブジェクトを Properties にドラッグし、Items Source プロパティにドロップします。

      この方法で、Grid List Box 2D ノードを設定メニューにアイテムを表示するように設定し、Settings > Item > Menu > Settings リストデータオブジェクトから取得します。

      ../../_images/ddeah-activity-grid-list-box.png ../../_images/data-sources-menu-settings.png ../../_images/ddeah-activity-grid-list-box-items-source-binding.png

    5. Activity 2D プレハブの Prefabs で、Grid List Box 2D ノードを選択します。Properties で追加して設定します。

      • Cell Width を200に

      • Cell Height から 40 まで

      • Layout Width 200

      • Layout Height から 200 まで

      • Item Template から Empty Node 2D プレハブへ

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

      Grid List Box の使い方を学ぶには、Grid List Box ノードを使用する と チュートリアル: Grid List Box を使用して連絡先リストを作成する を参照してください。

      ../../_images/ddeah-activity-grid-list-box-properties.png

    6. Empty Node 2D プレハブの Prefabs で、Text Block 2D ノードを選択します。Data Sources から Settings > Item > Menu > Settings > Item > Setting > Name データオブジェクトを Properties にドラッグし、Text プロパティにドロップします。

      この方法で、Text Block 2D ノードを設定メニューの各項目を Settings > Item > Menu > Settings リストデータオブジェクトから表示するように設定します。

      ../../_images/ddeah-empty-node-text-block.png ../../_images/data-sources-menu-settings-setting-name.png ../../_images/ddeah-empty-node-text-block-text-property.png

  3. Data-Driven Exclusive Activity Host を作成して設定する:

    1. Activity Browser で、add-button をクリックし、Data-Driven Exclusive Activity Host ノードを作成します。

      Kanzi Studio は、Screen ノードの下に Data-Driven Exclusive Activity Host ノードを作成します。

      ../../_images/activity-browser-create-root-ddeah.png ../../_images/node-tree-root-ddeah.png

    2. Node Tree で、作成した Data-Driven Exclusive Activity Host ノードを選択します。Properties で、Data Context > Data Context プロパティをプロジェクトで作成したデータソースに追加して設定します。

      ../../_images/node-tree-root-ddeah.png ../../_images/properties-ddeah.png

    3. Node Tree で、Data-Driven Exclusive Activity Host を選択します。Properties で + Add Binding をクリックし、Binding Editor で設定します。

      • Property から Activity Source へ

      • Data-Driven Exclusive Activity Host がアクティビティを作成するために使用するデータオブジェクトに Expression を設定します。

        たとえば、Expression を設定して

        {DataContext.Settings}

      Save をクリックします。

      ../../_images/binding-editor-ddeah.png

    4. Properties に追加して設定します。

      • 以前に作成した Activity 2D プレハブに Activity Template を追加します。

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

      • このデータ駆動型排他アクティビティホストがアクティブになるときに、Data-Driven Exclusive Activity Host がアクティビティを作成するために使用するリストデータオブジェクト内のアイテムに Active Activity Index を設定します。

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

      ../../_images/properties-ddeah-activity-template.png ../../_images/preview-create-ddeah-complete.png

Data-Driven Exclusive Activity Host がデータソースから作成するアクティビティをアクティブ化し、ナビゲートする方法については、アクティビティのアクティベーション を参照してください。

データ駆動型エクスクルーシブアクティビティホストでのアクティビティの永続性の制御

デフォルトでは、アクティビティを非アクティブ化すると、Kanzi はそのアクティビティをノードツリーからデタッチし、アクティビティインスタンスを削除します。

Keep Activity Alive プロパティを使用すると、Kanzi がアクティビティを非アクティブ化したときのそのアクティビティの永続性を制御できます。

アクティビティの永続性を制御するには、Activity Browser または Prefabs で、永続性を制御したいアクティビティを選択します。Properties で、Keep Activity Alive プロパティを追加し、次のように設定します。

  • Detach and Destroy。Kanzi はアクティビティをノードツリーからデタッチし、アクティビティインスタンスを削除します。これがデフォルト値です。

  • Hide and Disable。Kanzi はアクティビティを破棄する代わりに、非表示にして無効にします。アクティビティを再びアクティブ化すると、Kanzi は非表示のアクティビティを復元し、同じアクティビティを表示します。このアクティビティの仮想化を無効にしても、このノードは非アクティブ化前と同じステートのままです。

    これにより、アクティビティを再びアクティブ化するときにアクティビティのインスタンス化を省略できます。

../../_images/properties-keep-alive.png

アクティビティのアクティベーション

アクティビティをアクティブにすると、Kanzi:

  1. プレハブを使用してアクティビティノードを作成します。

  2. アクティビティノードをノードツリーにアタッチします。

  3. アクティビティを表示します。

  4. アクティビティホストがキーのフォーカスを持ち、異なる設定がされていない場合、キーのフォーカスをアクティビティに設定します。アクティビティをアクティブ化する際にフォーカスを設定するかどうかを制御する。

以下の操作を行うことができます。

ヒント

アクティビティのアクティベーションをシミュレートするには、Activity Browser で Data-Driven Exclusive Activity Host を選択し、サイドパネルで Active Activity Index プロパティの値を調整します。

Active Activity Index プロパティを使用して、データ駆動型排他アクティビティホストにリストデータオブジェクト内で作成したいアイテムを指定します。

Activity Browser で Active Activity Index プロパティの値を設定すると、このプロパティのランタイム値が変更されます。Preview またはアプリケーションを再起動すると、データ駆動型エクスクルーシブアクティビティホストは、Properties またはトリガーとアクションで設定した Active Activity Index プロパティの値を読み取ります。

../../_images/ab-activityitemindex.png

どのアクティビティがアクティブであるかを見つける

Data-Driven Exclusive Activity Host でどのアクティビティがアクティブであるかを確認するには、その Data-Driven Exclusive Activity Host の Active Activity Index の値を確認してください。

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

次または前のアクティビティをアクティブ化する

データ駆動型エクスクルーシブアクティビティホスト内のアクティビティ間でナビゲーションを作成したい場合は、Navigate To Next Activity または Navigate To Previous Activity アクションを使用してください。

次または前のアクティビティをアクティブにするには:

  1. Data-Driven Exclusive Activity Host を作成して設定します。データソースを使用してアクティビティを作成する を参照してください。

    ../../_images/preview-create-ddeah-complete.png

  2. データソースから Data-Driven Exclusive Activity Host が作成する次と前のアクティビティをアクティブにするために使用したいトリガーを持つノードを作成します。

    例えば、Button ノードを作成し、Button: Click トリガーを使用します。

    ../../_images/node-tree-ddeah-previous.png ../../_images/node-components-button-click1.png

  3. Node Tree で、前のステップで作成したノードの1つを選択します。Node Components > Triggers で、アクティブにしたい Activity をトリガーするために使用するトリガーを Alt を押しながら右クリック し、Navigate To Next Activity または Navigate To Previous Activity アクションを選択し、アクションセットで:

    • Target Item から、ナビゲートしたいアクティビティ間の Data-Driven Exclusive Activity Host ノードへ。

    • （オプション） 最初または最後のアクティビティに到達した後にトリガーを発動して最初または最後のアクティビティをアクティブにするには、Data-Driven Exclusive Activity Host 内で Loop Activity プロパティを有効に設定します。

    ../../_images/node-components-navigate-to-previous-activity.png ../../_images/node-components-navigate-to-previous-activity-configure.png

アクティビティをアクティブにするには、Preview で作成したボタンをクリックします。

../../_images/preview-ddeah-previous-loop.gif

プロパティ設定アクションでアクティビティをアクティブ化する

データ駆動型エクスクルーシブアクティビティホストがアクティビティを作成するリストデータオブジェクト内のデータオブジェクトの位置がわかっている場合、Set Property アクションを持つトリガーを使用します。

アクションでアクティビティをアクティブ化するには:

  1. Data-Driven Exclusive Activity Host を作成して設定します。データソースを使用してアクティビティを作成する を参照してください。

    ../../_images/preview-create-ddeah-complete.png

  2. データソースから Data-Driven Exclusive Activity Host が作成する次と前のアクティビティをアクティブにするために使用したいトリガーを持つノードを作成します。

    例えば、Button ノードを作成し、Button: Click トリガーを使用します。

    ../../_images/node-tree-ddeah-windows.png ../../_images/node-components-button-click1.png

  3. Node Tree で、前のステップで作成したノードの1つを選択します。Node Components > Triggers で、アクティブにしたい Activity をトリガーする Alt を押しながら右クリック を選択し、Set Property アクションを選択して設定します。

    • アクティビティをアクティブにしたい Data-Driven Exclusive Activity Host に Target Item します。

    • Target Property から Active Activity Index へ

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

    • データ駆動型排他アクティビティホストの Active Activity Index プロパティの値として使用したいソースに Value From を設定します。

      • Fixed value が静的な値を使用する。

        Fixed Value プロパティで、値を設定します。

      • Message argument がメッセージから値を取得する。

        Message Argument プロパティと Message Argument Field プロパティで、値が取得されるメッセージ引数を設定します。

      • Property がプロパティから値を取得する。

        Source Item、Source Property、および Source Property Field プロパティで、値が取得されるノードとプロパティを設定します。

      例えば、Value From を Fixed value に設定し、Fixed Value プロパティを 0 に設定します。

      この方法では、トリガーが作動すると、データ駆動型排他アクティビティホストは、使用するデータソースの最初のデータオブジェクトからアクティビティを作成します。

    ../../_images/add-set-property.png ../../_images/node-components-set-property-ddeah.png

アクティビティをアクティブにするには、Preview で作成したボタンをクリックします。

../../_images/preview-ddeah-set-property.gif

プロパティ適用アクションでアクティビティをアクティブ化する

データ駆動型排他アクティビティホストがアクティビティを作成するリストデータオブジェクト内のデータオブジェクトの位置がわかっている場合、条件が満たされたときにアクティビティを作成できます。これを行うには、Apply Property Action を使用した Data Trigger を使用します。

例えば、このアプローチを使用して、警告を表示する条件が満たされた場合にのみ警告を表示するアクティビティを作成してアクティブ化します。

Data Trigger を使用する場合、Data Trigger のアクションは他のトリガーのアクションよりも優先されることに注意してください。

条件が満たされたときにアクティビティをアクティブにするには:

  1. Data-Driven Exclusive Activity Host を作成して設定します。データソースを使用してアクティビティを作成する を参照してください。

    ../../_images/preview-create-ddeah-complete.png

  2. どのアクティビティがアクティブであるかを制御するために使用するデータオブジェクトを作成します。

    1. テキストエディタで、Data-Driven Exclusive Activity Host がアクティビティを作成するために使用する Settings.xml ファイルに追加します。

      <Active>
    <Setting type="int">0</Setting>
</Active>

    2. データソースの隣の Data Sources で、リロードデータソース をクリックします。

      ../../_images/data-sources-condition.png

  3. 条件を設定するには:

    1. Node Tree で、条件を設定したいノードを作成または選択します。Node Components で、Alt を押しながら右クリック Triggers を行い、Data Trigger を選択します。

      例えば、アクティビティをアクティブにしたい Data-Driven Exclusive Activity Host では、Data Trigger を作成します。

      ../../_images/apply-activation-create-data-trigger.png

    2. Data Trigger で、条件を設定します。

      例えば、データソースから得られる値と期待される値を比較する式を作成します。

      {DataContext.Active.Setting}==0
      ../../_images/node-components-data-trigger-condition.png

  4. Node Components > Triggers の中で、前のステップで作成した Alt を押しながら右クリック Data Trigger を選択し、Apply Property Action を選択して、アクションセットで:

    • アクティビティをアクティブにしたい Data-Driven Exclusive Activity Host に Target Item します。

    • Target Property から Active Activity Index へ

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

    • データ駆動型排他アクティビティホストの Active Activity Index プロパティの値として使用したいソースに Value From を設定します。

      • Fixed value が静的な値を使用する。

        Fixed Value プロパティで、値を設定します。

      • Message argument がメッセージから値を取得する。

        Message Argument プロパティと Message Argument Field プロパティで、値が取得されるメッセージ引数を設定します。

      • Property がプロパティから値を取得する。

        Source Item、Source Property、および Source Property Field プロパティで、値が取得されるノードとプロパティを設定します。

      例えば、Value From を Fixed value に設定し、Fixed Value プロパティを 0 に設定します。

      Expression が True に評価される間、Data Trigger は Apply Property Action に適用された値を Active Activity Index プロパティに保持します。この方法で、データ駆動型エクスクルーシブアクティビティホストは、そのインデックスでリストデータオブジェクトからアクティビティを作成し、アクティブ化します。

    ../../_images/node-components-data-trigger-create-apply-property.png ../../_images/node-components-data-trigger-apply-property-0.png

  5. （オプション） 追加のアクティビティの条件を作成するために、前の2つのステップを繰り返します。

    ../../_images/node-components-data-trigger-apply-property-1.png ../../_images/node-components-data-trigger-apply-property-2.png ../../_images/node-components-data-trigger-apply-property-3.png

どのアクティビティがアクティブであるかを設定するには、テキストエディタでこの手順で追加した Active > Setting データオブジェクトの値を編集し、ファイルを保存します。Data Trigger 条件式で比較する値に対してデータオブジェクトの値を設定します。

../../_images/preview-ddeah-apply-property.gif

APIでアクティビティを使用する

詳細については、Activity2D、Activity3D、DataDrivenExclusiveActivityHost2D、および DataDrivenExclusiveActivityHost3D クラスを参照してください。

関連項目

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

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

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