ステップ3 - Page ノード間をナビゲートするためのコントロールを作成する¶

このステップでは、まず RootPage ノードにヘッダーとフッターを作成し、その後、このチュートリアルの前のステップで作成した Page ノード間をナビゲートするためのボタンを作成します。

Page ノードに追加したコンテンツは、そのツリー内のすべての Page ノードで表示されます。したがって、RootPage ノードにコンテンツを追加すると、その Kanzi アプリケーションのすべての Page ノードでそのコンテンツが表示されます。

ヘッダーとフッターを作成する¶

このセクションでは、アプリケーションのヘッダーとフッターを作成します。

ヘッダーとフッターを作成するには、以下のようにします。

Node Tree Alt を押しながら右クリックで RootPage ノードを作成し、2つの Empty Node 2D ノードを作成します。ノードに Header と Footer という名前を付けます。

これらのノードを使用して、アプリケーション全体で使用するヘッダーとフッターのための背景と構造を設定します。
Node Tree で Header ノードを選択し、Properties で：
- Layout Height プロパティの隣にあるをクリックし、60 に設定します。
  
  特定のノードタイプで頻繁に使用されるプロパティは、Properties 内ででマークされています。をクリックすると、Kanzi Studio がそのプロパティを Node Tree で選択されたノードに追加します。
- Background Brush の隣にあるをクリックして、プロパティを Header ノードに追加します。
  1. Background Brush プロパティで + Color Brush を選択します。
  2. Background Brush プロパティの隣にあるをクリックし、アプリケーション内で Header と Footer の背景として使用したい色を設定します。
Properties ウィンドウから Layout Height と Background Brush プロパティを Node Tree ウィンドウにドラッグし、Footer ノードにドロップして、同じプロパティを Footer ノードに追加して適用します。
Node Tree で Footer ノードを選択し、Properties で Vertical Alignment プロパティを追加し、それを Bottom に設定します。

Kanzi は、異なる値に設定するまでプロパティのデフォルト値を使用します。Vertical Alignment プロパティのデフォルト値は Top です。このため、Header ノードと Footer ノードの両方が、RootPage ノードである親ノードの上部に揃えられます。これは、Footer ノードの Vertical Alignment プロパティの値を Bottom に設定するまで続きます。
In the Node Tree Alt を押しながら右クリック the Header node, select Stack Layout 2D, and from the Assets drag to the Stack Layout 2D node all Icon images.

レイアウトノードを使用して、アプリケーション画面や他のノードに対するノードの位置を決定できます。レイアウトは、プロパティの配置、マージン、レイアウトサイズで構成され、特定のノードに対して定義することも、特定のレイアウトコンテナによって子ノードに課される一般的なルールとして定義することもできます。

アイテムを隣り合わせに配置するには、Stack Layout ノードを使用します。
Node Tree で、Stack Layout 2D ノード内のすべての Icon Image ノードを選択し、Properties の右下隅でをクリックして Add Properties ウィンドウを開きます。Add Properties ウィンドウの左列で、Horizontal Margin プロパティをダブルクリックして、Node Tree で選択したノードに追加します。

Add Properties ウィンドウが開いたときの左側の列には、Node Tree ウィンドウで選択したノードに追加できるプロパティが表示されます。

プロパティを素早く見つけるには、Add Properties ウィンドウの検索ボックスにプロパティ名の数文字を入力します。
すべての Node Tree 内の Icon ノードが選択された状態で、Horizontal Margin プロパティの Right プロパティフィールドの値を10に設定します。

この方法で、ノードの右側に 10 ピクセルのマージンを設定できます。
Node Tree で Stack Layout 2D ノードを選択し、Preview で Node tool を選択し、Align tool の中央の四角をクリックして、Stack Layout 2D を Header ノードの中央に揃えます。

ヒント

Align tool を使用して、Horizontal Alignment および Vertical Alignment プロパティを設定します。

ナビゲーションボタンのためのプレハブを作成する¶

ノードプレハブ（プレハブテンプレート）を使用して、アプリケーションを構築し、一貫性のあるインターフェースを作成します。プレハブを使用すると、アプリケーションの構成要素を作成し、アプリケーションの保守を容易にすることができます。

このセクションでは、アプリケーション内の Page ノード間をナビゲートするためのコントロールとして Footer ノードで使用するトグルボタンのプレハブを作成します。

ナビゲーションボタン用のプレハブを作成するには、以下のようにします。

Prefabs ウィンドウの右下隅でをクリックし、Toggle Button 2D プレハブを作成し、Toggle Button 2D で:
1. Stack Layout 2D ノードを作成します。
2. Assets から Stack Layout 2D ノードに Menu 画像をドラッグします。
3. Stack Layout 2D ノード内に Text Block 2D ノードを作成します。
Prefabs で、Toggle Button 2D プレハブをダブルクリックして、そのプレハブのみを別のタブで Preview で開きます。

プレハブを Preview で開くと、Kanzi Studio がメインメニューの下にタブとして表示されます。プレハブを使用するコンテキストの影響を受けずにプレハブを表示および調整したい場合は、Preview でプレハブを開いてください。
Prefabs で、Toggle Button 2D > Stack Layout 2D > Text Block 2D ノードを選択し、Properties で Text プロパティの横にあるをクリックします。これにより、プレハブの各インスタンスに異なるテキストを表示することができます。

ノードプレハブは、それぞれが独自のプロパティを持つノードのツリーを含むことができます。プロジェクト内でプレハブまたはそのインスタンスのいずれかのノードを編集すると、そのプレハブのすべてのインスタンスでそれらのノードが変更されます。プレハブのプロパティ値をオーバーライドすることで、プレハブの各インスタンスに独自のプロパティ値を持たせることができます。例えば、住所録エントリのプレハブを作成する際には、各住所録エントリに異なる名前、番号、写真を表示したいと考えます。

をクリックすると、Kanzi Studio はそのプロパティからカスタムプロパティを作成し、それをそのプレハブのルートノードに追加し、そのプレハブのルートノード内のプロパティに ##Template バインディングを作成します。

このようにして、プレハブインスタンスのルートに、Text Block 2D ノードに表示させたいテキストを設定できます。
Text Block 2D が選択されている状態で、Preview で Node tool を使用し、Align tool の中央の四角をクリックして、Text Block 2D を Stack Layout 2D ノードの中心に揃えます。
メインメニューの Screen タブをクリックして、Preview でアプリケーション全体を表示します。
Node Tree で Footer ノードを選択します。
1. Toggle Button Group 2D ノードを作成します。
  
  ユーザーに相互に排他的な複数の選択肢の中から1つだけを選択させるようにするには、Toggle Button Group ノードを使用します。
  
  トグルボタングループ内の各トグルボタンの動作はラジオボタンと似ています。つまり、一度に 1 つのトグルボタンのみをアクティブにできます。
2. Toggle Button Group 2D ノード内に Stack Layout 2D ノードを作成します。
3. Prefabs から3つの Toggle Button 2D プレハブを Node Tree にドラッグし、Footer > Toggle Button Group 2D > Stack Layout 2D ノードにドロップします。
  
  プレハブを Prefabs から Node Tree 内の任意のノードにドラッグすると、Kanzi Studio はそのプレハブのインスタンスを、プレハブをドロップしたノードツリーに作成します。
4. 各 Toggle Button 2D プレハブインスタンスを選択し、F2 を押して、それらに Navigation、Car、および Media と名前を付けます。
5. 各 Toggle Button 2D プレハブインスタンスを選択し、Properties で FirstApplication.ToggleButton2D.Text プロパティの値を Navigation、Car、および Media に追加して設定します。
Footer > Toggle Button Group 2D > Stack Layout 2D ノード内の各 Toggle Button 2D プレハブインスタンスに対して：
1. Node Components Alt を押しながら右クリック Triggers で、Message Trigger > Toggle Button > Toggled On を選択して、そのトリガーを追加します。
  
  トリガーとアクションを使用してインタラクションを作成します。トリガーを使用して、プロパティを特定の値に設定したり、アプリケーションの状態を設定したりするアクションを開始します。
2. Node Components Alt を押しながら右クリックでトリガーを設定し、Dispatch Message Action > Page > Navigate to Page を選択します。
3. Page: Navigate to Page アクションで、Target Item プロパティを、アプリケーションをナビゲートしたい Page ノードに設定します。
  
  例えば、Navigation トグルボタンでアクションを Page ノード Navigation に移動するように設定します。
4. Preview で、をクリックして Interact モードに入ります。
  
  Interact モードでは、デバイス上で行うように Preview ウィンドウでアプリケーションと対話できます。