プレゼンテーション¶
ノードツリー¶
ノードツリーは、コンテンツの構造とその画面上でのレイアウトを定義します。
ノードツリーは、コンテンツを表示するノード(例: Image ノード)とロジックを実装するノード(例: Button 2D ノード)から構成されています。同じノードツリーは2Dおよび3Dノードをサポートし、それらを接続する手段を提供します。
ノードツリー内のノード間の関係は非常に重要であり、いくつかの Kanzi コア技術がどのように機能するかを定義します。レンダリング順序、レイアウト、プロパティとリソースの継承、および入力とメッセージの伝播はすべて、ノードツリー内の親ノードと子ノードの関係に依存しています。
Kanzi は、ノードツリーの一部(例えば、プレハブ)をモジュール化して再利用するためのツールを提供します。
Kanzi で利用可能なノード¶
コンテンツコントロール (Content control) ノード¶
|
Image。 ビットマップ画像を表示するには、Image ノードを使用します。 Image ノードを使用する を参照してください。 |
|
Model。 Kanzi アプリケーションにインポートされたメッシュを表示するには、Model ノードを使用します。 インポートされたメッシュを使用する を参照してください。 |
|
Nine Patch Image。 Nine Patch Image ノードを使用して、Nine Patch Image コンテンツのサイズに応じて拡縮するスケーラブルなボタン背景を作成します。 Nine Patch Image ノードを使用する を参照してください。 |
|
Page。 Page ノードを使用して、アプリケーションのユーザーインターフェースの構造を作成し、Page Host ノードを使用して、Page Host ノードの下で Page ノード間のナビゲーション要求と遷移を管理します。例えば、Kanzi アプリケーションで異なる部分のユーザーインターフェースを作成するために、Page および Page Host ノードを使用できます。例えば、Page Host ノード Home、Media、Navigation、または Settings スクリーンなど、それぞれが独自の Page および Page Host ノードの階層を持っています。 Page ノードと Page Host ノードを使用する を参照してください。 |
|
Text Block 3D と Text Block 2D。 アプリケーションにテキストを表示するには、Text Block ノードを使用します。 Text Block ノードを使用する を参照してください。 |
|
Viewport 3D と Viewport 2D。 Kanzi がコンテンツを投影するレンダーターゲットサーフェスのサイズを設定するには、Viewport ノードを使用します。 Viewport ノード を参照してください。 |
インタラクティブコントロール (Interactivity control) ノード¶
|
Button 3D と Button 2D。 Button ノードを使用して、クリック、タップ、またはキーボードのキーを押すことによるインタラクティブな操作を作成します。 Button ノードを使用する を参照してください。 |
|
Scroll View 3D と Scroll View 2D。 ユーザー入力や物理ベースのアニメーションからスクロールメッセージを生成する領域を定義するには、Scroll View ノードを使用します。 Scroll View ノードを使用する を参照してください。 |
|
Slider 3D と Slider 2D。 最小値と最大値の範囲内で、視覚的なインジケーターを使用してユーザーが数値を変更できるようにするには、Slider ノードを使用します。 Slider ノードを使用する を参照してください。 |
|
Text Box 3D と Text Box 2D。 アプリケーションに一行テキスト入力を追加するには、Text Box ノードを使用します。 Text Box ノードを使用する を参照してください。 |
|
Toggle Button 3D と Toggle Button 2D。 複数のトグル状態を持つことができるボタンを使ったインタラクティブな操作を作成するには、Toggle Button ノードを使用します。 Toggle Button ノードを使用する を参照してください。 |
|
Toggle Button Group 3D と Toggle Button Group 2D。 ユーザーに相互に排他的な複数の選択肢の中から1つだけを選択させるようにするには、Toggle Button Group ノードを使用します。 Toggle Button Group ノードを使用する を参照してください。 |
レイアウトコントロール (Layout control) ノード¶
|
Content Layout 3D と Content Layout 2D Content Layout ノードを使用して、UIコントロール内のコンテンツを単一のアイテムとして表示します。 Content Layout ノードを使用する を参照してください。 |
|
Dock Layout 3D と Dock Layout 2D Dock Layout ノードは、Dock Layout ノードの内枠に沿って互いに相対的な配置を行います。 Dock Layout ノードを使用する を参照してください。 |
|
Empty Node 3D と Empty Node 2D ノードをグループ化するには、Empty Node ノードを使用します。 Empty Node ノードを使用する を参照してください。 |
|
Flow Layout 3D と Flow Layout 2D Flow Layout ノードを使用して、ノードを一列に配置します。行のスペースがなくなると、Flow Layout ノードはその子ノードを新しい行に配置します。 Flow Layout ノードを使用する を参照してください。 |
|
Grid Layout 3D と Grid Layout 2D ノードを格子状に配置するには、Grid Layout ノードを使用します。 Grid Layout ノードを使用する を参照してください。 |
|
Stack Layout 3D と Stack Layout 2D 選択した軸方向にノードを並べて配置するには、Stack Layout ノードを使用します。 Stack Layout ノードを使用する を参照してください。 |
|
Trajectory Layout 3D と Trajectory Layout 2D 設定された軌跡に沿ってアイテムを配置するには、Trajectory Layout ノードを使用します。 Trajectory Layout ノードを使用する を参照してください。 |
コンテナコントロールノード¶
|
Grid List Box 3D と Grid List Box 2D 格子状に配置され、スクロール可能なアイテムのリストを作成するには、Grid List Box ノードを使用します。 Grid List Box ノードを使用する を参照してください。 |
|
Trajectory List Box 3D。 3D空間で軌跡に沿って配置されたスクロール可能なアイテムのリストを作成するには、Trajectory List Box 3D ノードを使用します。 Trajectory List Box 3D ノードを使用する を参照してください。 |
ステージ (Stage) ノード¶
|
Camera。 Use the Camera node to show the content of a Scene in Kanzi Studio Preview and in your Kanzi application. Camera ノードを使用する を参照してください。 |
|
Instantiator。 Instantiator ノードがターゲットとする 3D ノードまたは 3D ノードツリーの見た目だけを複製するには、Instantiator ノードを使用します。 Instantiator ノードを使用する を参照してください。 |
|
Light ノード。 Kanzi アプリケーションの Scene 内にライトを作成するには、ライト (Light) ノードを使用します。 Kanzi には、次のライトノードタイプがあります。
ライトノードを使用する を参照してください。 |
|
Scene。 Kanzi アプリケーションに 3D コンテンツを表示するには、Scene ノードを使用します。 Scene ノードを使用する を参照してください。 |
クラス階層構造¶
基本クラスは Node です。2Dノードの基本クラスは Node2D で、2Dノードを子ノードとして追加することができます。Node3D は3Dノードに対して同様に機能します。Node クラスは子ノードを接続する手段を持っていないため、Node2D、Node3D、および派生クラスがどのタイプのノードを子ノードとして受け入れるかを定義できます。例えば、Viewport 2D は Node2D クラスから派生しているため、2D子ノードを受け入れますが、Scene タイプの子ノードも1つ受け入れます。このようにして、Kanzi は2Dおよび3Dノードを異種のツリーに配置することができます。
木をイテレーションする場合は Visitor または Abstract Child API を使用します。
ビジターAPIについては、
Node::visitまたはNode::visitDescendantsを参照してください。抽象チャイルドAPIについては、
Node::getAbstractChildCountOverride、Node::findAbstractChild、Node::addAbstractChildOverride、およびNode::removeAbstractChildOverrideを参照してください。
各ノードは親ノードにアクセスできます。親ポインタのタイプは Node です。なぜなら、親のタイプは2Dまたは3Dのいずれかである可能性があるからです。