ステップ 1 - アプリケーション構造を作成する¶

このチュートリアルのこのステップでは、学びます:

Activity ノードのさまざまなタイプについて
Activity Browser を使用して、Activity ノードを持つアプリケーションの構造を作成する方法
State Manager を使用して Activity ノードのアクティベーション状態を制御する方法

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

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

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

<KanziWorkspace>/Tutorials/Activity/Start/Tool_project ディレクトリにある、チュートリアルの開始地点となるプロジェクト。
<KanziWorkspace>/Tutorials/Activity/Completed ディレクトリにある、完成したチュートリアル。

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

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

Prefabs には以下が含まれます:
- このチュートリアルで使用するUI要素の画像
- アクティビティのアクティベーションを制御するために使用するUIコントロール
Library には、アプリケーションで使用するブラシが含まれています。

アプリケーション構造を作成する¶

このセクションでは、Activity Browser とさまざまなタイプの Activity ノードを使用してアプリケーションの構造を作成する方法を学びます。

Activity Browser を使用して、アクティビティとアクティビティホストを作成および検査し、アクティビティのアクティベーションをシミュレートします。Activity Browser は、アプリケーション内のアクティビティのすべての可能なUI状態を表示します。

アプリケーション構造を作成するには、以下のようにします。

Kanzi Studio で、<KanziWorkspace>/Tutorials/Activity/Start/Tool_project/Activity.proj.kzm Kanzi Studio プロジェクトを開きます。
Node Tree で、RootNode ノードを右クリックし、Delete を選択します。

アプリケーションの構造はアクティビティホストとアクティビティを使用して作成するため、RootNode ノードを削除します。

ルート Activity Host ノードを作成して設定します。

Activity Browser で、 create-root をクリックし、Create Root Parallel Activity Host 2D を選択し、ノードに Cluster という名前を付けます。

Kanzi Studio は、Node Tree の Screen ノードの下に Parallel Activity Host ノードを作成します。Activity Browser では、Parallel Activity Hostsは紫色です。

Activity Host は、その子アクティビティがアクティブになる条件を定義します。Parallel Activity Host は、複数の子アクティビティを同時にアクティブにすることができます。この機能により、アプリケーションのトップレベルノードに最も適したタイプのアクティビティホストとなることがよくあります。

Activity Browser は、複数のプロジェクトを含む Kanzi Studio ソリューションを含め、アプリケーションのすべての可能なUI状態を表示します。アプリケーション内のUI状態を作成、検査、および操作するには、Activity Browser を使用します。

ヒント

Activity Browser ウィンドウでパンおよびズームするには、次のショートカットを使用します。

アクション	ショートカット
パン	マウスの中央ボタンをクリックしてドラッグします。 `Space` キーを押し、左マウスボタンをクリックしてドラッグします。
ズーム	マウスホイールを回します。 `Shift` キーと `Alt` キーを押し、左マウスボタンをクリックしてドラッグします。

Properties に追加して設定します。
- Background Brush から Background へ
- Layout Width を1920に
- Layout Height を 720 に
  
  Cluster ノードが Screen ノードと同じサイズになるように、Layout Width プロパティと Layout Height プロパティを設定します。
すべてのアクティビティおよびアクティビティホストノードは Content Layouts です。デフォルトで、Content Layout ノードのサイズはその子ノードのサイズによって決まります。

クラスターUIにヘッダーを追加します。
1. Activity Browser で、Cluster アクティビティホストの下にあるをクリックし、Create Activity を選択し、アクティビティとそのプレハブに Header という名前を付けます。
  
  Activity Browser のすべてのアクティビティにはプレハブがあります。Activity Browser で Activity を追加する際には、既存のプレハブを選択するか、アクティビティ用のプレハブを作成します。選択できるプレハブは、Activity ノードタイプのものに限られます。
  
  Activity Browser に追加するアクティビティは、アプリケーションノードツリーのノードではありません。それらは、これらのアクティビティをアクティブにしたときに Kanzi が作成する構造のビジュアライゼーションに過ぎません。
  
  アクティビティをアクティブにすると、Kanzi:
  1. プレハブを使用してアクティビティノードを作成します。
  2. アクティビティノードをノードツリーにアタッチします。
  3. アクティビティを表示します。
  4. アクティビティホストがキーのフォーカスを持ち、異なる設定がされていない場合、キーのフォーカスをアクティビティに設定します。アクティビティをアクティブ化する際にフォーカスを設定するかどうかを制御する。
  ヒント
  
  Activity Browser で、アクティビティツリーを Activity Browser ウィンドウのサイズに合わせたい場合は、右上隅のをクリックします。
2. Activity Browser で、Header アクティビティを選択し、サイドパネルで InitiallyActive プロパティを有効に設定します。
  
  この方法で、アクティビティホストがアクティブなときにアクティビティをアクティブに設定します。これを示すために、Activity Browser はそのようなすべてのアクティビティに対してアイコンを表示します。
3. Prefabs で、HeaderImage プレハブを Header プレハブにドラッグします。
  
  アクティビティプレハブに追加するノードは、アクティビティがそのプレハブを使用しているときに表示され、ユーザーがそれらと対話することができます。
4. Prefabs で、Header プレハブを選択し、Properties で追加して設定します。
  - Layout Width を1920に
  - Layout Height を 720 に
前の手順を繰り返して、クラスターUIにテールテールを追加しますが、アクティビティに Telltales という名前を付け、TelltalesImage プレハブを使用します。
クラスターUIにメインゲージを追加します。
1. Activity Browser で、Cluster アクティビティホストの下にアクティビティを追加し、それとそのプレハブに GaugeView という名前を付け、InitiallyActive プロパティを有効に設定します。
  
  このアクティビティを使用して、メインゲージとクラスターウィジェットを表示します。ウィジェットは、このチュートリアルの次のステップで追加します。
2. Activity Browser で、GaugeView アクティビティに Parallel Activity Host を追加し、GaugeViewActivityHost と名付けます。
  
  この Parallel Activity Host を使用すると、メインゲージとウィジェットの状態を表示し、個別に制御することができます。
3. Activity Browser で、GaugeViewActivityHost アクティビティホストに MainGauge アクティビティを追加し、その InitiallyActive プロパティを有効に設定します。
  
  このアクティビティを使用して、クラスターの中央にメインゲージを表示します。
4. Prefabs で、MainGaugeImage プレハブを MainGauge プレハブにドラッグします。
5. Prefabs で、MainGauge プレハブを選択し、Properties で追加して設定します。
  - Layout Width を1920に
  - Layout Height を 720 に

ステートマネージャーでアクティビティを制御する¶

このセクションでは、ステートマネージャーを使用してアクティビティノードを制御する方法を学びます。

ステートマネージャーでアクティビティを制御するには:

Node Tree で、Cluster ノードを Alt を押しながら右クリックし、Alias を選択します。

Kanzi Studio は、最も近いノードのリソースディクショナリにエイリアスを作成します。このプロジェクトでは、リソースディクショナリを持つ最も近いノードは Screen ノードです。

Alias を使用して、Kanzi ノードへの一貫したアクセスを得ることができます。エイリアスを使用して、Kanzi Studio 内および Kanzi Engine API を使用してノードにアクセスすることができます。
Activity Browser で、Cluster アクティビティホストを右クリックし、Create Activity Property > Enum を選択して、Cluster.MainView と名付けます。

Kanzi Studio はアクティビティプロパティプロパティタイプを作成し、それを Cluster ノードに追加します。

このプロパティタイプを使用して、クラスターの状態を制御します。

各アクティビティごとに、そのアクティビティに特有のプロパティを定義できます。このタイプのプロパティはアクティビティプロパティと呼ばれ、これらのプロパティの値は Kanzi アプリケーションのステートマシンとロジックを実装します。アクティビティプロパティは、アクティビティが仮想であってもこれらのプロパティの値を Kanzi が保持できるようにします。Kanzi がアクティビティを仮想化すると、そのアクティビティのプロパティをシリアライズし、Kanzi がそのアクティビティを非仮想化すると、そのアクティビティの状態をデシリアライズしてプロパティの値を復元します。

Activity Browser で、アクティビティプロパティの値を変更すると、そのプロパティのランタイム値が設定されます。
Library > Property Types で、Activity > ActivityProperty > Cluster > MainView プロパティを選択し、Properties で Enumeration Options を編集して、プロパティに次の列挙キーと値を持たせます。
- Drive を 0 に
- Browse を 1 に
ヒント

Properties からカスタムプロパティタイプに素早くアクセスするには、カスタムプロパティタイプを右クリックし、Select in Library を選択します。
Drive と Browse の状態を切り替えるために使用するステートマネージャーを作成します。
1. Library > State Managers で、Drive と Browse のステートを持つ、Cluster という名前のステートマネージャーを作成します。
2. Library > State Managers から、Cluster ステートマネージャーを Node Tree にドラッグし、Cluster ノードにドロップします。
  
  この方法で、Cluster ステートマネージャーを Cluster ノードに追加します。ステートマネージャーをノードにドロップすると、Kanzi Studio は Resources > State Manager プロパティを追加し、ドロップしたステートマネージャーに設定します。
3. Library > State Managers > Cluster ステートマネージャーで、State Group を選択し、Properties で Controller Property を Activity.ActivityProperty.Cluster.MainView プロパティに設定します。
  
  このステートマネージャーを制御するには、Activity.ActivityProperty.Cluster.MainView プロパティを使用します。
4. Library > State Managers > Cluster ステートマネージャーで、Browse ステートを選択し、Properties で Activity.ActivityProperty.Cluster.MainView プロパティを Browse に設定します。
  
  Drive ステートでは、コントローラープロパティの値はすでに Drive に設定されています。
5. Drive ステートで、State Object を作成し、MainGauge と名付け、Properties に追加して設定します。
  - Target Object Path に
    #Cluster/GaugeView/GaugeViewActivityHost/MainGauge/MainGaugeImage
    以前に作成した Cluster エイリアスと、Cluster ノードからこの状態で制御したいコンテンツへのパスを使用します。
  - Transform 2D > Render Transformation
    
    このプロパティのデフォルト値を使用するのは、Drive 状態でゲージを初期位置に保持したいからです。
6. 前のステップで作成した MainGauge State Object をコピーし、それを Browse ステートに貼り付け、Render Transformation プロパティ Translation X プロパティフィールドを-565に設定します。
  
  この方法で、Browse ステートのゲージをクラスタUIの左側に配置します。
Cluster の状態を制御するUI要素を作成します。
1. Prefabs で、MainViewSwitcher トグルボタンプレハブを Header プレハブにドラッグします。
2. Prefabs で、MainViewSwitcher プレハブを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
  - Binding Mode から Two way へ
  - Property から Toggle State へ
  - Expression へ
```
{#Cluster/Activity.ActivityProperty.Cluster.MainView}
```
  Save をクリックします。
  
  このバインディングにより、MainViewSwitcher トグルボタンは Cluster アクティビティホストの Activity.ActivityProperty.Cluster.MainView プロパティの値を取得および設定できます。この方法で、トグルボタンは Cluster アクティビティホストの状態を制御します。
  
  ヒント
  
  プロパティを右クリックして Create Binding を選択すると、そのプロパティのバインディングの作成を開始できます。
  
  この方法では、プロパティが自動的に Binding Editor に追加されます。