リストとデータソース (8/8)

ここではリストとデータビュー、そしてStackLayoutを使って簡単なデータ表示のシステムを作りましたが、実を言えば、これとほとんど同じものをもっと簡単に作ることができるのです。

Dashcodeに用意されている「ブラウザ」テンプレートを使うと、ほとんど同じものが自動的に作られます（更にタイトルバーや戻るボタンも綺麗に作られるので、こっちのほうがはるかに便利？）。新規プロジェクト作成のシートで「ブラウザ」を選べば、このテンプレートを使って新しくプロジェクトを作ることができます。

ただし、データソースは自動的にダミーデータとなるものが生成されるので、それをもとに自分なりにアレンジしなければいけません。つまり、リストとデータソースの基本的な仕組みがわかっていないと、なかなか使いこなせないのです。

そこで、まずはそれらを自分で作ってみて、その基本的な仕組みについて理解していった、というわけです。ここまで理解できれば、あとは「ブラウザ」テンプレートでプロジェクトを作っても、その使い方はすぐにわかることでしょう。



ブラウザテンプレートでは、初期状態でStackLayoutと２つのビュー、そしてデータソース用のスクリプトファイルなどが生成されます。それぞれ以下のようになっています。

・データソース
「sampleData.js」というスクリプトファイルが用意され、そこにJSONデータが記述されています。このJSONデータでは、「name」「location」という２つの項目からなるデータがダミーとして用意されています。

・StackLayout
２つのビューが用意されています。それぞれ以下のような構造となっています。

１つ目（id = "listLevel"）
内部にリストが１つ用意されています（id = "list"）。このリストのdataArrayプロパティに、データソースのitemsが接続されています。また、nameがリストのラベルに相当するrowTitleのtext属性に接続されています。

２つ目（id = "detailLevel"）
dataBoxというコンテナの中に「detailTitle」「detailSubtitle」「detailDescription」という３つのテキストが用意されています。そしてデータのnameがdetailTitleとdetailDescriptionに、locationがdetailSubtitleにそれぞれ接続されています。

・ヘッダー
この他に、画面の一番上にヘッダーを用意してあります。そしてそこに、リストに戻るボタンが用意されています。


――既にリストとデータソースの基本が分かっていれば、カスタマイズの仕方はだいたいわかるでしょう。それぞれでテンプレートをもとにいろいろと表示やデータをカスタマイズしてみると、ブラウザテンプレートの使い方はすぐにわかりますよ！

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。