ステップ2 - コンテンツを作成および修正する¶

このステップでは、Kanzi Studio プロジェクトでコンテンツを作成するために Node Tree ウィンドウを使用し、コンテンツを修正するために Properties ウィンドウを使用する方法を学びます。

Node Tree ウィンドウでコンテンツを作成する¶

Kanzi アプリケーションの構造は、Node Tree ウィンドウで作成します。Node Tree ウィンドウは、Kanzi Studio インターフェースの左上にあります。

Node Tree ウィンドウでは、Screen にアプリケーションのノードツリーが含まれています。デバイスで Kanzi アプリケーションを起動すると、ノードツリー内のすべてのノードが Kanzi によってデバイスのメモリーにロードされます。

ノードツリーは、コンテンツを表示するノード（例: Image ノード）とロジックを実装するノード（例: Button 2D ノード）から構成されています。同じノードツリーは2Dおよび3Dノードをサポートし、それらを接続する手段を提供します。

Kanzi Studio でプロジェクトを作業する際、Preview ウィンドウでノードツリーの内容を確認できます。

Node Tree ウィンドウでコンテンツを作成するには：

Node Tree ウィンドウで、Alt を押しながら右クリック RootPage ノードを選択し、Text Block 2D を選択します。

ヒント

Alt キーを押しながらアイテムを右クリックすると、選択したコンテキストで作成できるアイテムの種類を表示する作成メニューにアクセスできます。

アプリケーションにテキストを表示するには、Text Block ノードを使用します。
ノードに名前を付けて、OK をクリックします。ノードツリーでノードを作成した後、そのノードは Preview ウィンドウに表示されます。このウィンドウは Properties ウィンドウの隣にあります。

ヒント

ノードの名前を変更したい場合は、Node Tree ウィンドウでそれを選択し、F2 キーを押して新しい名前を入力します。
Node Tree ウィンドウで Alt を押しながら右クリック RootPage ノードを選択し、Image を選択します。

ビットマップ画像を表示するには、Image ノードを使用します。
Node Tree ウィンドウで Viewport 2D ノードを削除します。

ヒント

アプリケーションの特定の状態で表示する必要があるノードのみを、ノードツリーの中に残してください。こうすることで、アプリケーションが必要以上のリソースを使用しないようにすることができます。

ノードツリーでノードを移動する¶

ノードツリー内のノード間の関係は非常に重要であり、いくつかの Kanzi コア技術がどのように機能するかを定義します。レンダリング順序、レイアウト、プロパティとリソースの継承、および入力とメッセージの伝播はすべて、ノードツリー内の親ノードと子ノードの関係に依存しています。

例えば、ノードツリー内のノードの位置は、Kanzi がアプリケーションのコンテンツをどのようにレンダリングするかを定義します。Kanzi はペインターのアルゴリズムを使用してコンテンツをレンダリングします。つまり、ノードツリー内の最後のノードを他のすべてのノードの上にレンダリングします。

前のセクションでは、まず RootPage ノード内に Text Block 2D ノードを作成し、次に Image ノードを作成しました。ノードツリーで Image ノードは Text Block 2D ノードの後にあり、両方のノードが RootPage ノードの左上隅に配置されているため、Image ノードが Text Block 2D ノードを覆い隠しています。

ノードツリー内でノードを移動するには、以下のようにします。

Node Tree ウィンドウでノードをドラッグし、ノードツリーの新しい位置にドロップします。
Node Tree ウィンドウでノードを選択し、Ctrl キーを押しながら、↑ キーと ↓ キーを使用してノードツリー内でノードを上下に移動します。

例えば、Image ノードを選択し、Text Block 2D ノードの上に移動します。

Properties ウィンドウのコンテンツを変更する¶

プロパティは、Kanzi アプリケーション内のコンテンツの特性を定義します。Properties ウィンドウでプロパティを追加、削除、および変更できます。

Properties ウィンドウは、Node Tree ウィンドウの右側にあります。

Properties ウィンドウのコンテンツを変更するには、

Node Tree ウィンドウで Image ノードを選択し、Ctrl H キーを押して Preview ウィンドウでノードを非表示にします。

ノードアイコンの上に描かれたオレンジ色のアイコンは、ノードが非表示であることを示します。

ヒント

Preview ウィンドウでフォーカスしたいコンテンツのみを表示したい場合は、ノードを非表示にします。非表示のノードを表示するには、Node Tree ウィンドウでそれを選択し、再度 Ctrl H キーを押します。
Node Tree ウィンドウで、Text Block 2D ノードを選択します。
Properties ウィンドウで：
1. Horizontal Alignment プロパティの横にあるをクリックすると、前のステップで選択したノードにそのプロパティが追加されます。
  
  Horizontal Alignment プロパティを使用して、ノードを親ノードに対して水平方向に配置します。
2. Set the Horizontal Alignment property to Center. This way you place the Text Block 2D node to the center of the RootPage node, which is the parent node of the Text Block 2D node.
  
  ヒント
  
  プロパティの機能の簡単な説明を確認するには、Properties ウィンドウでそのプロパティの名前にマウスポインタを移動します。
Properties ウィンドウで、次のプロパティを追加して設定します。
- Font Size から30まで
- Vertical Alignment から Center へ
- Text へようこそ、Hello Kanzi!
  
  Text プロパティを使用して、Text Block ノードに表示させたいテキストを設定します。