ステップ1 - 連絡先リストを作成し、データソースから連絡先を取得する

このチュートリアルのこのステップでは、まず連絡先リストとして使用する Grid List Box ノードを作成します。次に、Grid List Box をデータソースから連絡先データを受け取るように設定します。

チュートリアルを入手する

チュートリアルを入手するには、Kanzi Studio の Quick Start ウィンドウで Examples をクリックします。List box チュートリアルの横にある ダウンロード をクリックします。

Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。

  • <KanziWorkspace>/Tutorials/List box/Start/Tool_project ディレクトリにあるチュートリアルの開始地点のプロジェクト。

  • <KanziWorkspace>/Tutorials/List box/Completed ディレクトリ内の完成済みチュートリアル。

開始プロジェクトの内容

スタートポイントとなるプロジェクトには、このチュートリアルを完了するのに必要なコンテンツが含まれています。

  • Container ノードは、連絡先リストの背景を設定します。

    ../../_images/background-node.png ../../_images/background-in-preview.png

  • ContactItem プレハブは、各連絡先エントリの初期レイアウトを定義します。

    • ContactPhoto ノードは、連絡先の写真を表示します。

    • ContactName ノードは、連絡先の名前を表示します。

    ContactItem ノードは Prefabs ウィンドウで見つけることができます。

    ../../_images/contactitem-prefab.png

  • XML data source データソースプラグインは、XMLファイルから連絡先エントリのデータを取得するために使用します。このプラグインは、このチュートリアルの連絡先エントリのデータソースとして ContactsList.xml ファイルを使用します。ContactsList.xml ファイルは Application/bin ディレクトリにあります。

    Data Sources ウィンドウを表示するには、Kanzi Studio メインメニューで Window > Data Sources を選択します。

    ../../_images/library-kanzi-engine-plugins-myxmldatasource.png ../../_images/data-source.png

Grid List Box ノードを作成する

このセクションでは、連絡先のリストを表示するために使用する Grid List Box ノードを作成します。

Grid List Box ノードを作成するには：

  1. Kanzi Studio Quick Start ウィンドウで、Examples をクリックします。List box チュートリアルの横にある Open をクリックし、Start project を選択します。

  2. Node Tree Alt を押しながら右クリック の RootPage > Container ノードで、Grid List Box 2D を選択し、ContactsList と名付けます。

    ../../_images/create-grid-list-box-2d1.png ../../_images/contactslist-node.png

  3. Node Tree で ContactsList ノードを選択し、Properties で Item Template プロパティを追加し、それを ContactItem に設定します。

    Item Template プロパティを使用して、Grid List Box ノードがリスト内のアイテムに使用するプレハブテンプレートを設定します。

    ../../_images/set-item-template.png

データソースから List Box アイテムを取得する

このセクションでは、前のセクションで作成した ContactsList を埋めるためにデータソースを使用します。

Kanzi では、List Box ノードが仮想化を使用して、アプリケーションのメモリ消費を管理できるようにします。仮想化を使用することで、List Box ノードは、表示されているアイテムと Keep Alive Item Count プロパティで設定したアイテム数のみをメモリに保持します。ユーザーが List Box ノードをスクロールすると、そのノードは新しいアイテムをロードし、メモリに保持する必要がなくなったアイテムを削除します。

List Box ノードにアイテムを手動で追加することもできますが、その方法は少量の静的アイテムを持つリストやプロトタイピング時にのみ使用してください。List Box ノードに可変数のアイテムを表示するには、常にデータソースを使用して List Box ノードを埋めるようにしてください。

データソースから List Box アイテムを取得するには：

  1. Node Tree で ContactsList ノードを選択し、Properties で Data Context プロパティを追加し、それを XML data source に設定します。

    Data Context プロパティを設定することで、アプリケーションがどのデータソースからデータを受け取るかを指定します。

    ../../_images/contactslist-node.png ../../_images/data-context-property.png

  2. メインメニューで Window > Data Sources を選択します。

    Data Sources ウィンドウを使用して、プロジェクト内のデータソースを管理します。

    ../../_images/window-data-sources1.png ../../_images/data-source.png

  3. Node Tree で ContactsList ノードを選択し、Data Sources ウィンドウから XML data source > contacts データオブジェクトを Properties の Items Source プロパティにドラッグします。

    Items Source プロパティは、ノードが表示するアイテムのデータを提供するソースを設定します。

    ../../_images/contacts-list-item.png ../../_images/drag-to-items-source.png ../../_images/items-source.png ../../_images/contactslist-items-source.png

  4. Prefabs で ContactItem > ContactPhoto ノードを選択し、Data Sources ウィンドウから XML data source > contacts > Item > contact > photo データオブジェクトを Properties の Image プロパティにドラッグします。

    このデータオブジェクトは、連絡先リスト内の各連絡先アイテムの写真を提供します。

    データオブジェクトを単一フィールドを持つプロパティにドラッグすると、Kanzi Studio はそのプロパティの値をドラッグしたデータオブジェクトにバインドするバインディングを作成します。

    ContactPhoto ノードの Image プロパティの値は、現在 XML data source photo データオブジェクトから取得されています。

    ../../_images/contactphoto-node.png ../../_images/photo-data.png ../../_images/image-binding.png

  5. 前のステップを ContactItem > ContactName ノードに対して繰り返し、XML data source > contacts > Item > contact > name データオブジェクトを Text プロパティにドラッグします。

    このデータオブジェクトは、連絡先リスト内の各連絡先アイテムの名前を提供します。

    ../../_images/contactname-node.png ../../_images/name-data.png ../../_images/text-binding.png

ContactsList ノードは、XML data source データソースを使用して、ContactsList.xml から連絡先アイテムの写真と名前を受け取ります。Preview では、連絡先データを確認できます。

../../_images/contacts-in-preview.png

Grid List Box ノードのレイアウトを設定します。

このセクションでは、ContactsList ノードのレイアウトとリストアイテムのサイズを設定して、アプリケーション内のコンテンツを表示します。

リストボックスコンテンツのレイアウトを定義するには、Node Tree で ContactsList ノードを選択し、Properties で以下を追加および設定します。

  • Cell Width から 400 まで

  • Cell Height から45まで

    各アイテムに予約された領域は、Grid List Box ノードで設定します。アイテムがセルに収まらない場合、ノードはそれらをクリップします。

  • Layout Width から 400 へ

  • Layout Height を 360 に

    Grid List Box ノード内のアイテムが表示される領域を設定します。Grid List Box ノード内のすべてのアイテムがこの領域に収まらない場合、ノードは収まらないアイテムをクリップします。ユーザーは Grid List Box ノードをスクロールしてすべてのアイテムにアクセスできます。

  • Horizontal Alignment から Center へ

    この方法で、ContactsList ノードを Container ノードの中心に水平に配置します。

../../_images/contactslist-properties.png

Preview は、リストボックスとそのアイテムの更新されたレイアウトを表示します。連絡先リスト内の連絡先の名前を変更するには、テキストエディタで ContactsList.xml ファイル内の値を変更し、ContactsList.xml ファイルを保存します。

../../_images/aligned-list-in-preview.png

選択したアイテムを Grid List Box ノードの中心に移動するように設定します。

このセクションでは、選択したアイテムを Grid List Box ノードの中央に移動するように設定します。

Grid List Box をノードの中央に選択したアイテムをスクロールするように設定するには、Node Tree で ContactsList ノードを選択し、Properties で Selection Behavior プロパティを追加し、それを Bring Center に設定します。

../../_images/contactslist-node.png ../../_images/selection-behavior1.png

Preview でリストアイテムをクリックすると、List Box がそのアイテムをノードの中央に持ってきます。

../../_images/list-box-step-1.gif

Introduction Next step

関連項目

List Box ノードについて詳しく知るには、リストボックス (List Box) ノード を参照してください。

Grid List Box ノードについて詳しく知るには、Grid List Box ノードを使用する を参照してください。

データソースについて詳しくは、チュートリアル: データソースからアプリケーションデータを取得する および データソースを使用する を参照してください。