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

このステップでは、Kanzi Studio プロジェクトでコンテンツを作成および変更する方法を学習します。

コンテンツを作成する¶

Kanzi アプリケーションの構造は、Node Tree ウィンドウと Activity Browser ウィンドウで作成します。このステップでは、Node Tree ウィンドウでコンテンツを作成します。

Node Tree ウィンドウは、Kanzi Studio インターフェイスの左上にあります。

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

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

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

コンテンツを作成するには、以下のようにします。

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

ヒント

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

アプリケーションにテキストを表示するには、Text Block ノードを使用します。
ノードに名前を付け、OK をクリックします。

ノードツリーにノードを作成すると、そのノードを Preview ウィンドウで確認できます。

ヒント

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

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

ヒント

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

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

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

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

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

ノードツリー内でノードを移動するには、Node Tree ウィンドウで以下のいずれかを行います。

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

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

ヒント

任意のツリービューで、アイテムの下にあるすべての要素を展開または折りたたむには、Ctrl を押したままエキスパンダー expander をクリックします。

コンテンツを変更する¶

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

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

コンテンツを変更するには、以下のようにします。

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

ノードアイコンの上にオレンジ色のアイコンが表示されている場合は、そのノードが非表示であることを示します。

ヒント

Preview ウィンドウに、集中して作業したいコンテンツのみを表示したい場合は、ノードを非表示にします。非表示のノードを表示するには、Node Tree ウィンドウでそのノードを選択し、もう一度 Ctrl H キーを押します。
Node Tree ウィンドウで、Text Block 2D ノードを選択します。
Properties ウィンドウで：
1. Horizontal Alignment プロパティの横にあるをクリックして、前のステップで選択したノードにそのプロパティを追加します。
  
  Horizontal Alignment プロパティを使用して、ノードを親ノードに対して水平方向に配置します。
2. Horizontal Alignment プロパティを Center に設定します。
  
  この方法で、Text Block 2D ノードを、Text Block 2D ノードのペアレントノードである RootNode ノードの中央に配置します。
  
  ヒント
  
  プロパティの機能の簡単な説明を確認するには、Properties ウィンドウでそのプロパティの名前にマウスポインタを移動します。
Properties ウィンドウで、次のプロパティを追加して設定します。
- Font Size から30まで
- Vertical Alignment から Center へ
- Text へようこそ、Hello Kanzi!
  
  Text プロパティを使用して、Text Block ノードに表示させたいテキストを設定します。