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

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

トリガーやアクションを使用したインタラクティブな操作を作成する

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

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

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

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

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

トリガーやアクションを使用したインタラクティブな操作を作成するには、以下のようにします。

  1. In the Node Tree window Alt を押しながら右クリック the RootPage node, select Button 2D, and name it Next.

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

    RootPage ノードに配置するコンテンツは、アプリケーション全体で表示されます。例えば、アプリケーション全体でトップレベルのナビゲーションを表示したい場合は、RootPage ノードに作成してください。

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

  2. Preview で image0 をクリックして Analyze モードに入り、image1 を右クリックして Borders of 2D nodes を選択します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Preview ウィンドウツールを使用してナビゲーションボタンを作成する

前のセクションで作成したボタンの見た目を定義し、このボタンをアプリケーションのナビゲーションボタンとして使用できるようにアクションを追加します。

Preview ウィンドウツールを使用してナビゲーションボタンを作成するには、

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

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

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

  2. Properties ウィンドウで Image プロパティを Arrow 画像に設定します。

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

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

  3. Preview ウィンドウで Next ボタンを配置します。

    1. Preview ウィンドウで Node tool ノードツール を使用し、矢印の Image ノードを右クリックして、コンテキストメニューで Select > Next を選択して Next ノードを選択します。

      Preview ウィンドウは、Edit モードまたは Interact モードのいずれかにすることができます。

      • Edit モードでは、Preview ウィンドウを使用してプロジェクト内のコンテンツを編集できます。Preview ウィンドウツール preview-node-tool グリッドツール テキストツール image3 イメージ4 (image4) イメージ5 (image5) のいずれかを選択して、Edit モードに入ります。

      • Interact モードでは、デバイス上でのように Preview ウィンドウでアプリケーションと対話できます。Preview ツールを使用しているときに Interact モードに切り替えるには、Preview ウィンドウで インタラクト (Interact) をクリックします。

      ../../_images/project-next-image.png ../../_images/preview-node-tool-select-next.png

    2. Node tool ノードツール 配置ツール 整列 (align) で、中央右の四角をクリックして、ノードを右側および RootPage ノード（親ノード）の中央に配置します。

      ../../_images/preview-node-tool-align.png

  4. Node Components Alt を押しながら右クリック で Button: Click トリガーを行い、Dispatch Message Action > Page Host > Navigate to Next を選択します。

    このアクションで設定したノードの次の Page または Page Host ノードに進むには、Navigate to Next アクションを使用します。

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

  5. Navigate to Next アクションで Target Item を RootPage ノードに設定します。

    Button: Click トリガーがこのアクションを実行すると、アクションは RootPage ノードの次の Page ノードに移動します。

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

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

    Next ノードを複製して修正し、RootPage ノードの前の Page ノードに移動するボタンを作成します。

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

  7. Node Tree ウィンドウで F2 キーを押して、ノードの名前を Previous に変更します。

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

  8. Preview ウィンドウで Node tool ノードツール を使用して Previous ボタンを配置します。

    • Node tool ノードツール 配置ツール 整列 (align) で、中央左の四角をクリックして、ノードを RootPage ノード（親ノード）の左と中央に配置します。

      ../../_images/preview-node-tool-align-previous.png

    • Preview ウィンドウで、マウスポインターをノードハンドルの外側に移動し、ノードを180度回転させて左を向くようにします。

      ヒント

      Node tool ノード (Node) を使用する場合、ノード ノードツールリサイズ をリサイズするには、ノードハンドルの中心にマウスポインターを移動し、ノード ノードツール回転 を回転させるには、ハンドルの外側に移動します。回転する際には、Shift キーを押し続けると、ノードを45度刻みで回転させることができます。

      ../../_images/preview-node-tool-align-previous-rotate.png

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

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

  10. Node Components Alt を押しながら右クリック で Button: Click トリガーを使用し、Dispatch Message Action > Page Host > Navigate to Previous を選択し、Navigate to Previous アクションで Target Item を RootPage ノードに設定します。

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

  11. Preview ウィンドウで イメージ8 (image8) と イメージ9 (image9) をクリックして、Edit モードと Analyze モードを終了します。

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

Preview ウィンドウで Next ボタンと Previous ボタンをクリックすると、これらのボタンの Button: Click トリガーが発動し、Navigate to Next アクションと Navigate to Previous アクションを使用して、RootPage ノードの次と前の Page チャイルドノードに移動します。

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

Previous step Next step

関連項目

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

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

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

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