ステップ2 - アプリケーション構造を作成する¶
このステップでは、Page ノードと Pages ウィンドウを使用してアプリケーションの構造を作成します。また、Brushes を使用して2Dノードの背景を塗る方法も学びます。
Page ノードを作成する¶
このセクションでは、Pages ウィンドウを使用して、アプリケーションの異なる部分を表す3つの Page ノードを作成します。
Page ノードを使用して、アプリケーションのユーザーインターフェースの構造を作成し、Page Host ノードを使用して、Page Host ノードの下で Page ノード間のナビゲーション要求と遷移を管理します。例えば、Kanzi アプリケーションで異なる部分のユーザーインターフェースを作成するために、Page および Page Host ノードを使用できます。例えば、Page Host ノード Home、Media、Navigation、または Settings スクリーンなど、それぞれが独自の Page および Page Host ノードの階層を持っています。
本ステップ及び次のステップでは、ここで作成する Page ノードにコンテンツを追加します。
Page ノードを作成するには：
Library ウィンドウと Dictionaries ウィンドウの隣にある Pages ウィンドウを選択します。
Pages ウィンドウで RootPage ノードの下にある
をクリックして、Page ノードを作成します。RootPage ノードに Page チャイルドノードを3つ作成します。Pages ウィンドウで Page ノードを追加すると、Node Tree ウィンドウの Kanzi Studio にこれらのノードのノードツリー内の位置が表示されます。Pages ウィンドウで Page ノードをクリックすると、Kanzi Studio が Push トランジションを使用してその Page ノードに遷移します。作成したばかりの Page ノードにはコンテンツがないため、Preview でクリックしても視覚的な効果はありません。
アクション
ショートカット
パン
マウスの中央ボタンをクリックしてドラッグします。
Space キーを押し、左マウスボタンをクリックしてドラッグします。
ズーム
マウスホイールを回します。
Shift キーと Alt キーを押し、左マウスボタンをクリックしてドラッグします。
Pages で、Page ノードの名前をダブルクリックし、新しい名前を入力して、Enter を押します。
例えば、3つのノードを Navigation、Car、Media と呼びます。
Node Tree で RootPage ノードを選択し、Properties で Default Subpage プロパティを Page ノード Navigation に設定します。
Page Host ノードをアクティブにして Default Subpage プロパティを設定すると、Kanzi が選択された Page ノードをアクティブにします。例えば、Navigation ノードを RootPage ノードのデフォルトのサブページとして設定すると、アプリケーションを開始したときに Kanzi が Navigation ノードを表示します。
Page ノードの背景を設定します。¶
2D ノードの背景を設定するにはブラシを使用します。Kanzi では、デフォルトで、すべての 2D ノードは透明な背景を持っています。
Kanzi では、次のブラシを使用できます。
Color Brush を使用して、2D ノードを単色で塗りつぶします。
Texture Brush を使用して、2Dノードにテクスチャを貼ります。
2Dノードをマテリアルで塗りつぶすには、Material Brush を使用します。
Kanzi Studio プロジェクトを作成すると、デフォルトで Texture Brush が DefaultBackground と呼ばれ、RootPage ノードの背景を描画します。
Page ノードの背景を設定するには、
Node Tree で Page ノード Car を選択します。
Properties で、Background Brush の隣にある
をクリックして、そのプロパティを Car ノードに追加します。
Background Brush プロパティを DefaultBackground ブラシに設定します。
Pages では、Background Brush プロパティに設定したブラシを確認できます。
Properties から Background Brush プロパティを Car ノードの Node Tree ウィンドウにドラッグし、Media ノードにドロップします。
Properties からプロパティをドラッグして Node Tree のノードにドロップすると、Kanzi Studio はそのプロパティとその値をそのノードに追加します。
Pages ウィンドウで Car ノードと Media ノードを表示すると、Background Brush プロパティで設定した背景が表示されていることがわかります。
Page ノード Navigation と Car にコンテンツを追加します。¶
このセクションでは、Page ノード Navigation と Car にコンテンツを追加します。
Page ノードにコンテンツを追加するには：
Assets ウィンドウから NavigationMockup.png 画像を Pages ウィンドウにドラッグし、Navigation Page ノードにドロップします。
Kanzi Studio は、Assets からドラッグした画像を使用する Image ノードを自動的に作成し、画像をドロップした Page ノードに Image ノードを追加します。
ヒント
Assets ウィンドウでは、プロジェクト内のコンテンツを検索および閲覧できます。
検索ボックスに探しているアイテム名に含まれる単語を入力します。
ボタンをクリックすると、特定のタイプのコンテンツのみが表示されます。
Node Tree Alt を押しながら右クリック で Car ノードを選択し、Viewport 2D を選択します。
Viewport 2D ノードは、Image や Button 2D のような2Dノードと、3Dノードである Scene の両方をレンダリングできます。
Kanzi Studio プロジェクトを作成すると、そのプロジェクトには Viewport 2D ノードが含まれており、Scene には Camera と Directional Light が含まれています。
ヒント
Node Tree ウィンドウのノードまたは Library ウィンドウのリソースを Alt を押しながら右クリック すると、ノードとリソースの作成メニューに直接アクセスできます。ノードまたはリソースを右クリックしただけの場合は、コンテキストメニューで Create を選択すると作成メニューにアクセスできます。
Prefabs ウィンドウから Car プレハブを Node Tree ウィンドウにドラッグし、Page ノード Car で新しく作成した Viewport 2D ノードにドロップします。
Prefabs ウィンドウからプレハブをドラッグすると、Kanzi Studio はそのプレハブのインスタンスをノードツリーのプレハブをドロップしたノードに作成します。
Page ノード間の遷移¶
Pages で Page または Page Host ノードをクリックすると、Preview でトランジションが表示されます。ただし、アプリケーション内のノード間をトランジションするには、Navigate to アクションのいずれかを使用してトリガーを設定する必要があります。
デフォルトで、Kanzi はその Page ノードに移動したり離れたりする際に Push トランジションを使用します。Pages ウィンドウの Transitions エディターを使用してトランジションをカスタマイズできます。
このチュートリアルの次のステップでは、Navigate to Page アクションを使用して Page ノード間を移動するボタンを作成します。
関連項目¶
Page ノードの使用方法に関する詳細については、Page ノードと Page Host ノードを使用する を参照してください。
Brushes の操作について詳しく知るには、ブラシの使用 をご覧ください。