Page ノードと Page Host ノードを使用する¶
注釈
Activity ノードと Activity Host ノードは、アプリケーション内でユーザーがナビゲートできるUIを作成することを可能にします。そのため、Page ノードと Page Host ノードの機能を置き換えます。アクティビティ を参照してください。
Page ノードを使用して、アプリケーションのユーザーインターフェースの構造を作成し、Page Host ノードを使用して、Page Host ノードの下で Page ノード間のナビゲーション要求と遷移を管理します。例えば、Kanzi アプリケーションで異なる部分のユーザーインターフェースを作成するために、Page および Page Host ノードを使用できます。例えば、Page Host ノード Home、Media、Navigation、または Settings スクリーンなど、それぞれが独自の Page および Page Host ノードの階層を持っています。
Page Host ノードをネストして、アプリケーションユーザーインターフェースの構造を作成できます。例えば、Page Host ノードを使用して、アプリケーションユーザーインターフェースのルートレベルのナビゲーションを管理し、Home、Media、Navigation、Settings 間の遷移を行うことができます。そして、そのノードに子 Page Host ノードを追加し、それぞれが独自の Page ノードの階層を管理します。例えば、Media Page Host ノードの Page ノードです。
Page ノードと Page Host ノードのアクティベーション¶
Page ノードがアクティブな場合、そのすべての祖先 Page および Page Host ノードもアクティブになります。Page または Page Host ノードがアクティブな場合、そのすべてのコンテンツと、すべての祖先 Page および Page Host ノードのコンテンツが表示され、ユーザーはそれと対話できます。単純なユースケースでは、階層内の Page ノードが1つだけアクティブです。しかし、階層内で複数の Page または Page Host ノードを同時にアクティブにすることで、複雑な構造を構築できます。これを達成するには、自動的にアクティブにしたいすべての Page および Page Host ノードで Keep Active プロパティを有効にします。そのようなノードは、親 Page または Page Host ノードがアクティブになると自動的にアクティブになります。
アクティベーショントラッキング¶
Page Host ノードは、そのスコープ内で現在アクティブな Page または Page Host ノードを追跡します。Page Host ノードをアクティブにすると、その Page Host ノードはスコープ内で現在アクティブな Page または Page Host ノードを自動的にアクティブにします。これにより、Page Host ノードは、非アクティブ化される前の状態に戻すために、アクティブ化中にその状態を記憶して復元することができます。
Page ノードと Page Host ノードを使用してアプリケーション構造を作成する¶
Pages ウィンドウを使用して、アプリケーションの構造を作成および管理します。
Pages ウィンドウを使用してアプリケーション構造を作成するには：
Pages ウィンドウでマウスポインターを RootPage に移動し、
を2回クリックして、RootPage ノードの下に2つの Page ノードを作成します。Pages で Page ノードを作成すると、Node Tree でも同じ Page ノードを見ることができます。
ヒント
Pages ウィンドウでパンおよびズームするには、次のショートカットを使用します。
アクション
ショートカット
パン
マウスの中央ボタンをクリックしてドラッグします。
Space キーを押し、左マウスボタンをクリックしてドラッグします。
ズーム
マウスホイールを回します。
Shift キーと Alt キーを押し、左マウスボタンをクリックしてドラッグします。
Pages で、前のステップで作成した Page ノードの名前をダブルクリックし、Applications と Settings に名前を変更します。
Pages で、Applications および Settings ノードを右クリックし、Convert to Page Host を選択します。
Page Host ノードを使用して、他の Page Host および Page ノードをグループ化します。Page ノードと Page Host ノードの主な違いは、Page Host ノードがそのツリー内でナビゲーションリクエストと遷移を管理することです。
Pages でマウスポインターを Page Host ノード Applications に移動し、そのノードの下部で
を3回クリックして、Applications ノードの下に3つの子 Page ノードを作成し、それらに Home、Media、および Car と名前を付けます。これらの各 Page ノードは、それぞれのアプリケーションのコンテンツを保持しています。このチュートリアルではプロトタイピングの目的で、これらのアプリケーションの画像のみを追加します。しかし、アプリケーションをプロトタイプフェーズから開発フェーズに移行する際には、プレースホルダをこれらのアプリケーションのコンテンツに置き換えてください。
ヒント
アプリケーション内の Page ノードと Page Host ノードの全体構造を確認するには、Pages ウィンドウで
をクリックします。
Assets で、各 Page ノードに表示するコンテンツをインポートします。
インポートしたコンテンツを Assets から Pages ウィンドウにドラッグします。
たとえば、以下をドラッグします。
Home_Page テクスチャを Home ノードに
Media_Page テクスチャを Media ノードに
Car_Page テクスチャを Car ノードに
Assets から Pages 内の Page ノードまたは Page Host ノードにイメージをドロップすると、Kanzi Studio はドロップしたイメージを使用する Image ノードを作成します。
ヒント
Pages ウィンドウで任意の Page または Page Host ノードをクリックすると、Kanzi がそのノードに遷移し、Preview で遷移を確認できます。
Pages で各 Page をクリックします。Preview では、Page ノード間の Push の遷移を見ることができます。
ヒント
Preview で選択した Page または Page Host ノードの内容のみを表示したい場合は、そのノードを Pages でダブルクリックすると、Kanzi Studio が Preview 内の独自のタブでそれを開きます。
Page ノードと Page Host ノードの外観を設定する¶
2D ノードの外観を設定するには:
2Dノードを単色、テクスチャ、またはマテリアルで塗りつぶすことができます。2Dノードの外観の調整 を参照してください。
2Dノードにポストプロセッシングエフェクトを適用できます。2Dノードのエフェクト を参照してください。
2Dノードを3つの軸すべてで回転させて、3Dのパースペクティブ効果を作成できます。2Dノードに3Dパースペクティブ効果を作成する を参照してください。
2Dノードにカスタムレンダリングを適用して、ポストプロセッシングエフェクトを作成できます。2Dノードにカスタムレンダリングを適用する を参照してください。
2Dノードをピクセルパーフェクトとしてレンダリングできます。ピクセルパーフェクトな2Dノードのレンダリング を参照してください。
APIで Page ノードと Page Host ノードを使用する¶
選択した Page ノードに移行するには：
// Look up child page in the scope of Page host.
PageSharedPtr subPage = host->lookupNode<Page>(path);
// Request animated transition to given page.
subPage->navigate();
選択した Page ノードに即座に移行するには：
// Make immediate transition, without playing an animation.
subPage->navigate(true);
現在アクティブな Page または Page Host の子孫ノードを取得するには:
// Retrieve currently active subpage.
PageSharedPtr currentSubPage = host->getDefaultChild();
現在の Page ノードから次の Page ノードに Page Host ノードを遷移させるには、
// Request animated transition from currently active page to next subpage.
PageHost::NavigateNextMessageArguments args;
host->dispatchMessage(PageHost::NavigateNextMessage, args);
Page プロパティタイプとメッセージ¶
Page ノードで利用可能なプロパティタイプとメッセージのリストについては、Page を参照してください。
Page Host プロパティタイプとメッセージ¶
Page Host ノードで利用可能なプロパティタイプとメッセージのリストについては、Page Host を参照してください。