ステップ3 - ユーザーインターフェース構造を作成する¶
このステップでは、Kanzi アプリケーションのユーザーインターフェースの構造を作成するために Pages ウィンドウを使用し、その後 Asset Packages および Assets ウィンドウを使用してアプリケーションにコンテンツを追加する方法を学びます。
Pages ウィンドウでユーザーインターフェース構造を作成する¶
Page ノードと Page Host ノードを使用して、アプリケーション内のユーザーインターフェースの異なる部分を作成します。これらのノードは、アプリケーションの一部や、アプリケーション内の全体のアプリケーションを含むことができます。
Kanzi Studio で Page ノードと Page Host ノードを操作する最も効率的な方法は、Pages ウィンドウです。Pages ウィンドウを使用して:
Page ノードと Page Host ノードを使用してアプリケーション構造を作成します。
アプリケーションの異なる部分を移動するには、Page ノードまたは Page Host ノードをクリックします。
アプリケーションの Page および Page Host の構造を視覚化します。
Pages ウィンドウは、Prefabs ウィンドウと Properties ウィンドウの下にあります。
Pages ウィンドウでユーザーインターフェース構造を作成するには、
Pages ウィンドウでマウスポインタを RootPage の上に移動し、
を3回クリックして、RootPage ノードの下に3つの Page ノードを作成します。Pages ウィンドウで Page ノードをクリックすると、Kanzi Studio が Push トランジションを使用してその Page ノードに遷移します。作成したばかりの Page ノードにはコンテンツがないため、Preview でクリックしても視覚的な効果はありません。
Pages ウィンドウでノードを作成すると、Node Tree ウィンドウでも同じノードを確認できます。
アクション
ショートカット
パン
マウスの中央ボタンをクリックしてドラッグします。
Space キーを押し、左マウスボタンをクリックしてドラッグします。
ズーム
マウスホイールを回します。
Shift キーと Alt キーを押し、左マウスボタンをクリックしてドラッグします。
Pages ウィンドウで、前のステップで作成した Page ノードの名前をそれぞれダブルクリックして、名前を変更します。例えば、ノードに Home、Car、Media と名付けます。
ヒント
Pages ウィンドウで Page または Page Host ノードをダブルクリックすると、Kanzi Studio がそのノードとそのツリーを別の Preview ウィンドウタブで開きます。アプリケーションの構造が複雑になると、これによりアプリケーションの特定の部分のみを表示して作業することができます。
Asset Packages ウィンドウでファクトリーコンテンツを使用します。¶
Kanzi Studio には、アプリケーションに追加できる2Dおよび3Dアセットが付属しています。このファクトリーコンテンツは、アイデアを示すためのアセット作成に時間を費やすことなくプロトタイプを作成するのに最適です。
Asset Packages ウィンドウでファクトリーコンテンツを使用するには、
Asset Packages ウィンドウで Factory Content アセットソースを選択します。Asset Packages ウィンドウは Preview ウィンドウの下にあります。
Asset Packages ウィンドウから Car を Pages ウィンドウにドラッグし、Car Page ノードにドロップします。Pages ウィンドウ内のノードにコンテンツをドロップすると、Kanzi Studio はそのノードにドロップしたコンテンツを追加します。
前のステップを繰り返し、Cover Flow をドラッグして Media ノードにドロップします。
Node Tree ウィンドウで Image と Text Block 2D ノードを選択し、それらを Home Page ノードにドラッグします。
Node Tree ウィンドウで Image ノードを選択し、Ctrl H キーを押して Image ノードを表示します。
Node Tree ウィンドウで RootPage ノードを選択し、Properties ウィンドウで Default Subpage プロパティを Home ノードに設定します。
Default Subpage プロパティを設定することで、Kanzi に対して、この Page Host がアクティブになったときにどの Page または Page Host ノードをアクティブにするかを指示します。
Pages ウィンドウで Page または Page Host ノードをクリックすると、Kanzi Studio がそのノードに遷移します。これにより、ボタンなどのインタラクション要素を作成せずに、Kanzi アプリケーションのユーザーインターフェースの構造とフローを試すことができます。このチュートリアルの次のステップでは、ユーザーインターフェースにボタンを追加します。
Assets ウィンドウにコンテンツをインポートする¶
このセクションでは、他のツールで作成したコンテンツを Kanzi Studio プロジェクトにインポートし、そのコンテンツを Kanzi アプリケーションで使用する方法を学びます。
コンテンツをプロジェクトにインポートすると、Kanzi Studio はインポートされたコンテンツをプロジェクトディレクトリにコピーし、必要に応じて Library ウィンドウでそのコンテンツからプロジェクトで使用できる Kanzi リソースを作成します。例えば、png 画像をインポートすると、Kanzi Studio は Single Texture リソースを作成し、その画像をプロジェクトで使用できるようにします。
Assets ウィンドウでプロジェクトにコンテンツをインポートして表示できます。このウィンドウは Preview ウィンドウの下にあります。または、メインメニューで File > Import を選択し、インポートしたいコンテンツの種類を選択します。
Assets ウィンドウでコンテンツをインポートするには：
Assets ウィンドウで、Import Assets をクリックし、インポートしたいコンテンツを選択して、Open をクリックします。例えば、
<KanziWorkspace>/Tutorials/Getting started/Assetsに移動して、すべてのコンテンツをインポートします。Kanzi Studio は、インポートされたコンテンツをプロジェクトディレクトリにコピーします。これにより、Library ウィンドウの Resource Files および Library ウィンドウでそのコンテンツから Kanzi リソースを作成し、プロジェクトでインポートされたコンテンツを使用できるようになります。
Pages ウィンドウで Home Page ノードをクリックして、その Page ノードに移動します。
Node Tree ウィンドウで Image ノードを選択し、Properties ウィンドウで Image プロパティを Road テクスチャに設定します。
Properties ウィンドウで、次のプロパティを追加して設定します。
Horizontal Alignment から Stretch へ
Vertical Alignment から Stretch へ
Content Stretch から Uniform to fill へ
Content Stretch プロパティを使用して、このノードのサイズを変更せずにノード内のコンテンツをどのようにストレッチするかを設定します。
Pages エディターで Page ノードをクリックすると、Preview ウィンドウにクリックした Page ノードの内容が表示されます。
関連項目¶
Kanzi Studio ファクトリーコンテンツの詳細については、ファクトリーコンテンツ (Factory Content) のアセット を参照してください。
Kanzi Studio にアセットをインポートする方法について詳しくは、インポートしています をご覧ください。