ThingWorxのCollectionの使い方


#はじめに
PTCが提供しているThingWorxアプリケーション開発のCollection Widgetを紹介します。
Collection Widgetは、 Mashup Parametersを使用して、ベースMashupを複数回複製し、Infotableのデータの行に関連付けます。
このガイドの手順に従って、CollectionのベースMashupの動的作成に役立てれば幸いです。

#前提と準備
環境と準備については、[基本作成の記事](https://qiita.com/mikamimajime/items/67540b08aac7fe052513)を参考してください。

#[ステップ１：データモデルを作成する](http://...)
コレクションウィジェットはサービスを使用してビジュアルコンテンツを動的に定義します。
コレクションウィジェットがアクセスできるようにするには、データは表形式（Datatable、Infotable、外部データベース接続など）である必要があります。
このステップでは、テーブルの列を定義するためのDatashapeを作成します。

1. ThingWorx Composerの[Browse]タブでは、 モデリング>データシェイプ 、+ [ 新規 ] をクリックします。
2. 「 名前 」フィールドに「 CollectionDS 」と入力し、上部の「 フィールド定義」をクリックします。
3.[ +追加]をクリックして、index(String)とCollectionHeight(Integer)のFieldを追加します。
4. 上部にある[ 保存 ]をクリックします 。
![CollectionDS.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415816/cae38427-7ce7-949a-7fd3-370dc66fa893.png)

#[ステップ２：コントローラーを作成する](http://...)
コレクションウィジェットが表形式（Datatable、Infotable、外部データベース接続など）のデータを表示するためにはデータをセットある必要があります。
このステップでは、Datashapeにデータを格納するサービスを作成します。

1. ThingWorx Composerの[Browse]タブでは、 モデリング>Thing 、+ [ 新規 ] をクリックします。
2. 「 名前 」フィールドに「 UIControl 」、Base Thing TemplateにGeneric Thingを選択し、上部の「 サービス 」をクリックします。
3. [ +追加 ]をクリックして、Nameに「 QueryCollectionList 」と入力し、OutputをINFOTABLE、Datashapeを「 CollectionDS 」と選択します。
4. 「 CollectionHeight(Integer) 」のデータを格納し、「 CollectionDS 」を渡すスクリプトを作成します。
5. 上部にある[ 保存 ]をクリックします 。
![uicontrol.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415816/da053b33-fdcc-3b7c-e8c5-233d10d0addd.png)


#[ステップ３：マッシュアップを作成する](http://...)
データを表示するためにMashupを作成して構成する必要があります。
Collection Widgetを使用するMashupと、コレクションのMashup Parametersに指定する、ベースMashup（Image Widgetを含む）を作成します。

###Collection Widget用のMashup作成
1. ThingWorx Composerの[Browse]タブで、 VISUALIZATION>マッシュアップ 、+ [ 新規 ] をクリックします。
2. レイアウトオプションからResponsiveを選択し、OKをクリックします。
3. 「 名前」フィールドに「 CollectionMash 」と入力し、保存する。
![collectionmash.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415816/b428222a-74ad-5f8e-1747-421bb2004f40.png)

###Collection Widgetのベース用のMashup作成
1. 1~3の手順で「 CollectionSubMash 」を作成する。
2. Panelウィジェットを中央のCanvas領域にドラッグアンドドロップします。
3. ImageウィジェットをPanelの上にドラッグアンドドロップし、画像ファイル、座標と幅を指定します。
4. 上部にある[ 保存 ]をクリックします 。
![collectionsub.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415816/af6a3f40-7b61-2f77-2f1a-8f569ada099d.png)

#[ステップ４：コレクションウィジェットを使用する](http://...)
Infotableプロパティ （ Datashapeによって定義された列）に格納されたデータを、Collection Widgetを作成して、マッシュアップにすべてのデータ行に表示します 。
コレクションウィジェットのCellHeightFieldに設定された高さに従って、コレクションの各データ行の縦幅が動的に変更されます。

###コレクションウィジェット作成
1. Layoutウィジェットを中央のCanvas領域にドラッグアンドドロップし、Verticalと1Rowを選択して作成します。
2. Collectionウィジェットを中央のCanvas領域にドラッグアンドドロップします。
![CollectionSet.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415816/405db9c5-05cd-7d8e-1cf2-078f298fe58c.png)

###コレクション用のデータ追加
ステップ２で作成したサービスから起動時読み込まれるようにMashup Loadedをチェックし、データの方に追加します。
![Service.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415816/8cf238b4-c9b0-2883-8bbb-0d93d451b0a6.png)


###コレクション用のデータ設定
Collectionウィジェットとデータの関連付け、Mashup、All Data、UIDField、CellHeightFieldを設定します。
![CollectionSet2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415816/28ce49cb-db04-f73e-57b5-15feba792026.png)

###コレクションウィジェット表示
上部にある[ 保存 ]をクリックした後、[ ViewMashup ]をタップします。コレクションの高さが設定の通り表示されます。
![result.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415816/d8b63af1-6c47-5a23-c534-212f2d7aa4f0.png)

#終わりに
ありがとうございます！ Collection UIについて、以下の方法を学びました。

- データを表示するためのベースマッシュアップを作成する
- データを格納するためのサービスを作成する
- 複数行のデータを表示するコレクションウィジェットを含める
- コレクションウィジェットのHeightを動的に表示する

Collection UIのデザインと基本的な使い方については下記のその他リソースをご参考下さい。

#その他リソース
- Collection作成: 
https://developer.thingworx.com/ja/resources/guides/collection-widget-how-to/
- Collectionデザイン: 
https://tpg-twxdevzone.s3.amazonaws.com/files/media/Webinars/Videos/Reimagine%20your%20Application%20UI%20with%20Collection%20and%20CSS.mp4