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

このチュートリアルでは、条件を使用してアプリケーションUIを制御する方法を学びます。Data Trigger の条件が満たされたときにのみアプリケーションが表示するポップアップウィンドウを作成することで、UIを構成するアクティビティのアクティベーション状態を制御する方法を学びます。Data Trigger では、特定のアクティビティをアクティベートするために Apply Activation Action を使用します。

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

データトリガーで条件を設定する際、バインディング式の形式で設定し、その評価結果が True または False になります。

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

このチュートリアルは、アクティビティシステムを扱う基本を理解していることを前提としています。そのための最適なエントリーポイントはチュートリアル: アプリケーションUIの構造です。

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

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

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

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

このプロジェクトの内容と、このようなプロジェクトの作成方法については、チュートリアル: アプリケーションUIの構造を参照してください。
<KanziWorkspace>/Tutorials/Data trigger/Completed ディレクトリにある完成したチュートリアル。

開始プロジェクトの内容¶

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

これらのプレハブ:
- このチュートリアルで使用するUI要素の画像
- このチュートリアルで作成するアクティビティのアクティベーションを制御するために使用するUIコントロール
クラスターの状態を制御および確認するために使用する Datatrigger.ActivityProperty.Cluster.MainView プロパティタイプ。データトリガーでは、このプロパティの値を使用して、アクティビティをアクティブにするかどうかを決定します。

構造を作成する¶

このセクションでは、ポップアップウィンドウの構造を作成します。

構造を作成するには、以下のようにします。

Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Data trigger チュートリアルの横にある Open をクリックし、Start project を選択します。
ポップアップウィンドウが最大化されたときのアクティビティ構造を作成します。
1. Prefabs > MaximizedLeft プレハブで、PopupMaximized という名前の Parallel Activity Host を作成し、MaximizedWidget エクスクルーシブアクティビティホストを PopupMaximized アクティビティホストにドラッグします。
  
  Parallel Activity Host を使用すると、複数のポップアップウィンドウを同時にアクティブにし、現在アクティブなウィジェットの上にポップアップウィンドウを表示することができます。
2. Activity Browser で、PopupMaximized アクティビティホストの下にあるをクリックし、Create Activity を選択して、アクティビティとそのプレハブに PopupIncomingCallMaximized という名前を付けます。
3. Prefabs で、PopupIncomingCallMaximizedImage を PopupIncomingCallMaximized アクティビティにドラッグします。
4. Activity Browser の PopupIncomingCallMaximized アクティビティで、をクリックします。
  
  この方法で、このアクティビティのアクティベーションをシミュレートし、その内容を Preview で確認できます。
5. Prefabs で、MaximizedLeft > PopupMaximized > MaximizedWidget アクティビティホストを選択します。Properties から、Horizontal Padding プロパティを Prefabs > MaximizedLeft > PopupMaximized アクティビティホストにドラッグします。
  
  この方法で、PopupMaximized アクティビティホストのすべてのアクティビティに対してパディングを設定します。
6. Prefabs で、MaximizedWidget アクティビティホストを選択します。Properties で、Horizontal Padding プロパティを削除します。
ポップアップが最小化されたときのアクティビティ構造を作成します。
1. Prefabs > MinimizedLeft プレハブで、PopupMinimized という名前の Parallel Activity Host を作成し、MinimizedWidget アクティビティを PopupMinimized アクティビティホストにドラッグします。
2. Activity Browser の PopupMinimized アクティビティホストで、アクティビティを追加し、それとそのプレハブに PopupIncomingCallMinimized という名前を付けます。
3. Prefabs で、PopupIncomingCallMinimizedImage を PopupIncomingCallMinimized アクティビティにドラッグします。
4. Activity Browser の PopupIncomingCallMinimized アクティビティで、をクリックします。
  
  この方法で、このアクティビティのアクティベーションをシミュレートし、その内容を Preview で確認できます。
5. Prefabs で、MinimizedLeft > PopupMinimized > MinimizedWidget アクティビティホストを選択します。Properties から、Horizontal Padding および Vertical Padding プロパティを Prefabs > MinimizedLeft > PopupMinimized アクティビティホストにドラッグします。
6. Prefabs で、MinimizedWidget アクティビティホストを選択します。Properties で、Horizontal Padding と Vertical Padding プロパティを削除します。

条件を使用して、アクティビティのアクティベーション状態を制御します。¶

このセクションでは、Data Trigger を Apply Activation Action と共に使用して、Data Trigger の条件が満たされたときに Activity のアクティベーション状態を制御する方法を学びます。

アクティビティのアクティベーション状態を制御するために条件を使用するには:

アクティビティの状態を設定するために使用するプロパティタイプを作成します。
1. Library > Property Types > Datatrigger > ActivityProperty で、Alt を押しながら右クリックを選択し、Property Type を選択します。New Property Type で、ウィンドウを設定します:
  - Name から Datatrigger.ActivityProperty.IncomingCall へ
  - Category から Controller Properties へ
  - Data Type から Boolean へ
2. Node Tree で、Cluster ノードを選択します。Properties で、Controller Properties > Datatrigger.ActivityProperty.IncomingCall プロパティを追加します。
  
  Datatrigger.ActivityProperty.IncomingCall プロパティを Cluster アクティビティホストに追加するのは、このノードから IncomingCall アクティビティのアクティベーション状態を制御したいからです。
条件に基づいてアクティビティのアクティベーション状態を制御する Data Trigger を作成します。
1. Node Tree で、Cluster ノードを選択します。Node Components で、Alt を押しながら右クリック Triggers を行い、Data Trigger を選択し、PopupIncomingCallMaximized と名付けます。
2. Data Trigger で、Condition Expression の中で、をクリックし、Properties ウィンドウを選択し、Datatrigger.ActivityProperty.Cluster.MainView と Datatrigger.ActivityProperty.IncomingCall プロパティを Expression フィールドにドラッグし、式を編集します。
```
{@./Datatrigger.ActivityProperty.Cluster.MainView}==0 && {@./Datatrigger.ActivityProperty.IncomingCall}==true
```
  データトリガー内の条件式は、True または False のいずれかに評価されなければなりません。
  
  Save をクリックします。
  
  この方法で、Data Trigger を設定して、これらの条件が満たされたときにのみ適用されるデータトリガー内で Apply Action を保持します。
  - Datatrigger.ActivityProperty.Cluster.MainView は Drive （列挙値 0）に設定されています。
  - Datatrigger.ActivityProperty.IncomingCall は有効です（ブール値 True）。
  次のステップで Apply Activation Action を追加します。
アクティビティをアクティベートおよびディアクティベートする Apply Activation Action を作成します。
1. PopupIncomingCallMaximized データトリガーで、Alt を押しながら右クリック Actions を選択し、Apply Activation Action を選択します。
2. Activity Browser で、PopupIncomingCallMaximized アクティビティを右クリックし、Copy Activation Path を選択します。
3. Node Tree で、Cluster ノードを選択します。Node Components の Apply Activation Action で、次を設定します。
  - Activity Host Path から < Relative > および . へ
  - Activity Activation Path を Activity Browser からコピーしたパスにし、パスの先頭から Cluster/ を削除します。
  Activity Activation Path プロパティで設定したアクティビティへのパスは、Activity Host Path プロパティで設定したアクティビティホストノードに対して相対的です。
  
  データトリガーと適用アクティベーションアクションは、データトリガーの条件が満たされている限り、このアクティビティをアクティブに保ちます。
  
  Activity Browser は、Activity Host がアイコンを持つ Data Trigger を持っていることを示します。
Cluster アクティビティホストを設定して、クラスターが Browse モードであり、Datatrigger.ActivityProperty.IncomingCall が有効になっているときに PopupIncomingCallMinimized アクティビティをアクティブにします。
1. Node Components で、PopupIncomingCallMaximized データトリガーを右クリックし、Duplicate を選択して、データトリガーの名前を PopupIncomingCallMinimized に変更します。
2. Condition Expression で、式を編集して
```
{@./Datatrigger.ActivityProperty.Cluster.MainView}==1 && {@./Datatrigger.ActivityProperty.IncomingCall}==true
```
  Apply をクリックします。
3. Activity Browser で、PopupIncomingCallMinimized アクティビティを右クリックし、Copy Activation Path を選択します。PopupIncomingCallMinimized データトリガー Apply Activation Action で、コピーしたパスを貼り付け、パスの先頭から Cluster/ を削除します。
IncomingCall アクティビティのアクティベーションを制御するUI要素を作成します。
1. Prefabs で、PopupControl プレハブを MainGauge プレハブにドラッグします。
  
  PopupControl プレハブには、ポップアップアクティビティのアクティベーションを制御するために使用できるトグルボタンが含まれています。
2. Prefabs で、PopupControl > IncomingCall ノードを選択します。Properties で、+ Add Binding をクリックし、Binding Editor で設定します。
  - Binding Mode から Two way へ
  - Property から Toggle State へ
  - Expression へ
```
{#Cluster/Datatrigger.ActivityProperty.IncomingCall}
```
  Save をクリックします。
  
  このバインディングにより、IncomingCall トグルボタンは Cluster アクティビティホスト内の Datatrigger.ActivityProperty.IncomingCall プロパティの値を取得および設定できます。この方法で、トグルボタンは IncomingCall アクティビティの状態を制御します。

ヒント

アプリケーション開発中に、Activity Browser サイドパネルでこれらの Data Trigger ツールを使用します。

ツール	ディスクリプション (Description)
	Data Trigger がどこにあるか、そしてその Data Trigger のソースとターゲットのアクティビティがどこにあるかを示します。
	Data Trigger を適用したときの状態をシミュレートします。これにより、アプリケーション内のプロパティ値を変更することなく、データトリガーの条件が満たされたときにアプリケーションの状態を確認することができます。
	選択された Data Trigger を Node Components ウィンドウに表示します。

ツール

ディスクリプション (Description)

Data Trigger がどこにあるか、そしてその Data Trigger のソースとターゲットのアクティビティがどこにあるかを示します。

Data Trigger を適用したときの状態をシミュレートします。

これにより、アプリケーション内のプロパティ値を変更することなく、データトリガーの条件が満たされたときにアプリケーションの状態を確認することができます。

選択された Data Trigger を Node Components ウィンドウに表示します。

IncomingCall ポップアップのアクティベーション状態を次の方法で制御できるようになりました。

Preview で、トグルボタンをクリックします。
Activity Browser で、Cluster アクティビティホストを選択し、サイドパネルで IncomingCall プロパティを設定します。

../../_images/popupincomingcallmaximized.gif

追加のポップアップウィンドウを作成する¶

新しいメッセージ通知のためのポップアップウィンドウを作成し、その通知を Data Trigger で制御するには、以下の違いを除いて上記の手順を繰り返します。

Activity Browser に、次のアクティビティを追加します。
- PopupMaximized に、プレハブが PopupNewMessageMaximizedImage を使用する Activity という名前の PopupNewMessageMaximized を追加します。
- PopupMinimized に、プレハブが PopupNewMessageMinimizedImage を使用する Activity という名前の PopupNewMessageMinimized を追加します。
アクティベーション状態を制御するには、Datatrigger.ActivityProperty.NewMessage という名前のコントローラーブール型プロパティを作成し、それを Cluster アクティビティホストに追加します。
Cluster アクティビティホストの Node Components で、PopupIncomingCallMaximized データトリガーを複製し、PopupNewMessageMaximized に名前を変更して、次の操作を行います。
- Expression を設定
```
{@./Datatrigger.ActivityProperty.Cluster.MainView}==0 && {@./Datatrigger.ActivityProperty.NewMessage}==true
```
  Apply をクリックします。
- Apply Activation Action で、Activity Activation Path プロパティを PopupNewMessageMaximized アクティビティのアクティベーションパスに設定します。
Cluster アクティビティホスト内の Node Components で、PopupNewMessageMaximized データトリガーを複製し、PopupNewMessageMinimized に名前を変更して、次の操作を行います。
- Condition Expression を設定
```
{@./Datatrigger.ActivityProperty.Cluster.MainView}==1 && {@./Datatrigger.ActivityProperty.NewMessage}==true
```
  Apply をクリックします。
- Apply Activation Action で、Activity Activation Path プロパティを PopupNewMessageMinimized アクティビティのアクティベーションパスに設定します。
Prefabs で、PopupControl > NewMessage ノードを選択します。Properties で、+ Add Binding をクリックし、Binding Editor で設定します:
- Binding Mode から Two way へ
- Property から Toggle State へ
- Expression へ
```
{#Cluster/Datatrigger.ActivityProperty.NewMessage}
```
Save をクリックします。

このバインディングにより、NewMessage トグルボタンは Cluster アクティビティホストの Datatrigger.ActivityProperty.NewMessage プロパティの値を取得および設定できます。この方法で、トグルボタンは NewMessage アクティビティの状態を制御します。
Activity Browser で、PopupIncomingCallMaximized アクティビティを選択し、サイドパネルで Priority を1に設定します。

この方法で、PopupIncomingCallMaximized アクティビティの優先度を PopupNewMessageMaximized アクティビティの優先度よりも高く設定します。優先度が高いアクティビティが上に表示されます。
PopupIncomingCallMinimized アクティビティに対して、上記の手順を繰り返します。

NewMessage ポップアップのアクティベーション状態を次の方法で制御できるようになりました。

Preview で、トグルボタンをクリックします。
Activity Browser で、Cluster アクティビティホストを選択し、サイドパネルで NewMessage プロパティを設定します。

次の作業¶

このチュートリアルでは、条件式を使用してアクティビティのアクティベーション状態を制御する方法を学びました。アプリケーションは、Data Trigger の条件が満たされた場合にのみポップアップウィンドウを表示します。

Data Triggers と Apply Activation Actions の使用を練習し続けるために、チュートリアル全体を繰り返して、クラスターUIの右側エリアにポップアップウィンドウの構造を作成することができます。以下はその構造を作成するためのいくつかの有用なヒントです。

Prefabs で：
1. MaximizedRight アクティビティで、PopupMaximized という名前の Parallel Activity Host を作成し、MaximizedWidget アクティビティホストを PopupMaximized アクティビティホストにドラッグします。
2. MaximizedWidget アクティビティホストから、Horizontal Padding プロパティを PopupMaximized アクティビティホストにドラッグします。MaximizedWidget アクティビティから Horizontal Padding プロパティを削除します。
前のステップを MinimizedRight アクティビティに対して繰り返しますが、Parallel Activity Host を PopupMinimized と名付け、Horizontal Padding と Vertical Padding プロパティをドラッグします。MinimizedWidget アクティビティホストから Horizontal Padding と Vertical Padding プロパティを削除します。
Activity Browser で：
- PopupMaximized アクティビティホストで、アクティビティを作成します。
  - PopupAccidentAheadMaximized
  - PopupBatteryLowMaximized
- PopupMinimized アクティビティホストで、アクティビティを作成します。
  - PopupAccidentAheadMinimized
  - PopupBatteryLowMinimized
Prefabs で、ドラッグします。
- PopupAccidentAheadMaximizedImage から PopupAccidentAheadMaximized へ
- PopupAccidentAheadMinimizedImage から PopupAccidentAheadMinimized へ
- PopupBatteryLowMaximizedImage から PopupBatteryLowMaximized へ
- PopupBatteryLowMinimizedImage から PopupBatteryLowMinimized へ
Library > Property Types > Datatrigger > ActivityProperty で、Datatrigger.ActivityProperty.AccidentAhead と Datatrigger.ActivityProperty.BatteryLow プロパティタイプを作成し、設定します。
- Category から Controller Properties へ
- Data Type から Boolean へ
Cluster アクティビティホストに Datatrigger.ActivityProperty.AccidentAhead および Datatrigger.ActivityProperty.BatteryLow プロパティタイプを追加します。
Node Components で、既存の Data Trigger を複製し、次のように設定します。
- Name から PopupAccidentAheadMaximized へ
- Condition Expression へ
```
{@./Datatrigger.ActivityProperty.Cluster.MainView}==0 && {@./Datatrigger.ActivityProperty.AccidentAhead}==true
```
  Apply をクリックします。
- Activity Activation Path を PopupAccidentAheadMaximized アクティビティのパスに
前のステップを PopupAccidentAheadMinimized、PopupBatteryLowMaximized、および PopupBatteryLowMinimized に対して繰り返しますが、対応するデータトリガーがアクティブにする関連する名前、式、およびアクティビティを設定します。
Prefabs で、PopupControl > BatteryLow ノードを選択します。Properties で、+ Add Binding をクリックし、Binding Editor で設定します。
- Binding Mode から Two way へ
- Property から Toggle State へ
- Expression へ
```
{#Cluster/Datatrigger.ActivityProperty.BatteryLow}
```
Save をクリックします。
前のステップを PopupControl > AccidentAhead ノードに対して繰り返しますが、バインディング式を次のように設定します:
```
{#Cluster/Datatrigger.ActivityProperty.AccidentAhead}
```

完成したチュートリアルプロジェクトには、左側と右側のエリアの両方で Cluster アクティビティホストから制御できるポップアップウィンドウ機能があります。完成した Kanzi Studio プロジェクトは、<KanziWorkspace>/Tutorials/Data trigger/Completed ディレクトリにあります。