libro
www.tuyano.com
DashcodeによるiPhone用Webアプリ作成入門

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

作成:2011-05-16 08:55
更新:2011-05-16 08:56

■もっと簡単に作れる? 「ブラウザ」テンプレート」

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

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

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

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


■「ブラウザ」テンプレートの構成

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

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

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

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

2つ目(id = "detailLevel")
dataBoxというコンテナの中に「detailTitle」「detailSubtitle」「detailDescription」という3つのテキストが用意されています。そしてデータのnamedetailTitledetailDescriptionに、locationdetailSubtitleにそれぞれ接続されています。

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


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

※プログラムリストが表示されない場合

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


※関連コンテンツ

「DashcodeによるiPhone用Webアプリ作成入門」に戻る