ステップ 4 - インタラクションを作成する

このステップでは、トリガーとアクションを使用してアプリケーションにインタラクションを作成する方法を学習します。

インタラクションを作成する

トリガーとアクションを使用してインタラクションを作成します。トリガーを使用して、プロパティを特定の値に設定したり、アプリケーションの状態を設定したりするアクションを開始します。

Kanzi Studio では、Node Components ウィンドウでトリガーとアクションを追加して設定します。

Node Components ウィンドウは、Properties ウィンドウと同じグループにあります。

../../_images/add-on-attached-trigger.png

このセクションでは、ボタンを作成し、トリガーとアクションを使用して Log ウィンドウにメッセージを書き込みます。

インタラクションを作成するには、以下のようにします。

  1. Activity Browser ウィンドウの Root Parallel Activity Host の下で add-button をクリックし、Create Activity を選択して、アクティビティとそのプレハブに Navigation という名前を付けます。サイドパネルで InitiallyActive プロパティを有効に設定します。

    このアクティビティでは、アプリケーションのすべての画面に表示するアプリケーションナビゲーションを作成します。

    ../../_images/activity-browser-navigation.png

  2. Prefabs ウィンドウで Navigation プレハブに対して Alt を押しながら右クリック をクリックし、Button 2D を選択して、Next という名前を付けます。

    Kanzi ノードのほとんどは、ノードのレイアウトと機能のみを設定します。これにより、ノードを望む見た目に柔軟にカスタマイズすることができます。

    Navigation アクティビティのプレハブに配置したコンテンツは、アプリケーション全体で表示されます。これは、このアクティビティがアプリケーション画面を表示する Exclusive Activity Host と並列であり、起動時にすでにアクティブになるように設定したためです。

    ../../_images/project-next.png

  3. Preview で 解析オフ をクリックして Analyze モードに入り、アナライズオン を右クリックして Borders of 2D nodes を選択します。

    Preview ウィンドウで Analyze モードを使用して、アプリケーションの構造とパフォーマンスを検査します。

    Borders of 2D nodes は、2Dノードの境界をストライプの線で示します。

    例えば、これにより視覚的な表現を持たない2Dノードを確認することができます。前のステップで作成した Button 2D ノードは、Preview ウィンドウの左上隅にあります。

    ../../_images/preview-debug-border-of-2d.png

  4. Node Tree ウィンドウで Next ノードを選択します。Node Components ウィンドウの Button: Click メッセージトリガーで、Actions に対して Alt を押しながら右クリック をクリックし、Write Log を選択します。

    Write Log アクションを使用して、メッセージを Log ウィンドウに印刷します。

    ../../_images/project-next.png ../../_images/triggers-write-log.png

  5. Write Log アクションで、Log Text プロパティの横にある Enter Operation をクリックし、<Name> を選択します。

    <Name> マクロを使用して、このアクションを含むノードのタイプを Log ウィンドウに出力します。

    ../../_images/write-log-settings.png

  6. メインメニューで Window > Log を選択して、Log ウィンドウを開きます。

    Kanzi は Log ウィンドウにメッセージ、警告、およびエラーを出力します。

    ../../_images/window-log.png ../../_images/log-window.png

Preview ウィンドウで Next Button 2D ノードの領域をクリックすると、Button: Click トリガーが作動し、Write Log アクションが実行されます。このアクションはノードの名前を Log ウィンドウに書き込みます。

../../_images/getting-started-step-4-log.gif

ナビゲーションの作成

このセクションでは、アプリケーションのナビゲーションを作成し、前のセクションで作成したボタンの外観を定義します。

ナビゲーションを作成するには：

  1. Node Tree ウィンドウで、Application Screens ノードを Alt を押しながら右クリック し、Alias を選択します。

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

    このエイリアスを使用して Application Screens アクティビティホストにアクセスし、そのアクティビティのアクティベーションステートを操作します。これにより、アプリケーションのナビゲーションを作成できます。

    Alias を使用して、Kanzi ノードへの一貫したアクセスを得ることができます。エイリアスを使用して、Kanzi Studio 内および Kanzi Engine API を使用してノードにアクセスすることができます。

    ../../_images/node-tree-application-screens-alias.png ../../_images/dictionaries-application-screens.png

  2. Prefabs で、Next ノードを Alt を押しながら右クリック し、Image を選択します。

    この Image ノードを使用して、ボタンの外観とサイズを定義します。

    ../../_images/project-next-image.png

  3. Properties ウィンドウで、Image プロパティを Arrow イメージに設定します。

    ノードを Button 2D ノードに追加すると、デフォルトで Button 2D ノードはその子ノードのサイズを継承します。

    ../../_images/properties-image-arrow.png

  4. Prefabs ウィンドウで、Next ノードを選択します。Properties ウィンドウで、次のプロパティを追加して設定します。

    • Horizontal Alignment から Right へ

    • Vertical Alignment から Center へ

    これにより、ノードをアプリケーションスクリーンの右中央に揃えます。

    ../../_images/prefabs-next.png ../../_images/properties-next.png ../../_images/preview-next.png

  5. Node Components ウィンドウで、Button: Click トリガーを Alt を押しながら右クリック し、Dispatch Message Action > Exclusive Activity Host > Navigate to Next Activity を選択します。

    Navigate to Next Activity アクションを使用すると、このアクションで設定した Exclusive Activity Host ノード内の次の Activity に移動します。

    ../../_images/triggers-navigate-to-next.png

  6. Navigate to Next Activity アクションで、次のように設定します。

    • Target Item を Relative と #Application Screens に

    • Loop Activity を有効にする

    Button: Click トリガーがこのアクションを実行すると、アクションは Application Screens アクティビティホスト内の次のアクティビティに移動します。最後のアクティビティに到達すると、アクションは最初のアクティビティに移動します。

    ../../_images/navigate-to-next-settings.png

  7. Prefabs ウィンドウで Next ノードを選択し、Ctrl D キーを押してノードを複製します。

    Next ノードを複製して変更し、Application Screens 内の前のアクティビティに移動するボタンを作成します。

    ../../_images/project-duplicate-next.png

  8. F2 キーを押して、ノードの名前を Previous に変更します。

    ../../_images/project-previous.png

  9. Properties ウィンドウで、次のプロパティを追加して設定します。

    • Horizontal Alignment を Left に

    • Transform 2D > Render Transformation Origin プロパティの X と Y フィールドを 0.5 に

    • Transform 2D > Render Transformation プロパティの Rotation フィールドを 180 に

    ../../_images/properties-previous.png

  10. Node Components ウィンドウで、Navigate to Next Activity アクションを右クリックし、Delete を選択します。

    ../../_images/triggers-remove-action.png

  11. Node Components で、Button: Click トリガーを Alt を押しながら右クリック し、Dispatch Message Action > Exclusive Activity Host > Navigate to Previous Activity を選択して、Navigate to Previous アクションで次のように設定します。

    • Target Item を Relative と #Application Screens に

    • Loop Activity を有効にする

    ../../_images/triggers-navigate-to-previous.png ../../_images/navigate-to-previous-settings.png

  12. Preview ウィンドウで アナライズオン をクリックして、Analyze モードを終了します。

    ../../_images/preview-exit-edit-debug-modes.png

Preview ウィンドウで Next ボタンと Previous ボタンをクリックすると、これらのボタンの Button: Click トリガーが作動し、Navigate to Next Activity アクションと Navigate to Previous Activity アクションによって Application Screens アクティビティホストの次と前の Activity に移動します。

../../_images/getting-started-step-4.gif

前のステップ 次のステップ

関連項目

ボタンの作成の詳細については、チュートリアル: ボタンを作成する を完了してください。

Write Log アクションについて詳しく知るには、Write Log アクションを使用する を参照してください。

トリガーとアクションの詳細については、トリガー (Triggers) を参照してください。

Preview ウィンドウツールの詳細については、Preview でアプリケーションを編集する を参照してください。