リストとデータソース (8/8)
作成:2011-05-16 08:55
更新:2011-05-16 08:56
更新: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がリストのラベルに相当するrowTitleのtext属性に接続されています。
2つ目(id = "detailLevel")
dataBoxというコンテナの中に「detailTitle」「detailSubtitle」「detailDescription」という3つのテキストが用意されています。そしてデータのnameがdetailTitleとdetailDescriptionに、locationがdetailSubtitleにそれぞれ接続されています。
・ヘッダー
この他に、画面の一番上にヘッダーを用意してあります。そしてそこに、リストに戻るボタンが用意されています。
――既にリストとデータソースの基本が分かっていれば、カスタマイズの仕方はだいたいわかるでしょう。それぞれでテンプレートをもとにいろいろと表示やデータをカスタマイズしてみると、ブラウザテンプレートの使い方はすぐにわかりますよ!
Dashcodeに用意されている「ブラウザ」テンプレートを使うと、ほとんど同じものが自動的に作られます(更にタイトルバーや戻るボタンも綺麗に作られるので、こっちのほうがはるかに便利?)。新規プロジェクト作成のシートで「ブラウザ」を選べば、このテンプレートを使って新しくプロジェクトを作ることができます。
ただし、データソースは自動的にダミーデータとなるものが生成されるので、それをもとに自分なりにアレンジしなければいけません。つまり、リストとデータソースの基本的な仕組みがわかっていないと、なかなか使いこなせないのです。
そこで、まずはそれらを自分で作ってみて、その基本的な仕組みについて理解していった、というわけです。ここまで理解できれば、あとは「ブラウザ」テンプレートでプロジェクトを作っても、その使い方はすぐにわかることでしょう。
■「ブラウザ」テンプレートの構成
ブラウザテンプレートでは、初期状態でStackLayoutと2つのビュー、そしてデータソース用のスクリプトファイルなどが生成されます。それぞれ以下のようになっています。
・データソース
「sampleData.js」というスクリプトファイルが用意され、そこにJSONデータが記述されています。このJSONデータでは、「name」「location」という2つの項目からなるデータがダミーとして用意されています。
・StackLayout
2つのビューが用意されています。それぞれ以下のような構造となっています。
1つ目(id = "listLevel")
内部にリストが1つ用意されています(id = "list")。このリストのdataArrayプロパティに、データソースのitemsが接続されています。また、nameがリストのラベルに相当するrowTitleのtext属性に接続されています。
2つ目(id = "detailLevel")
dataBoxというコンテナの中に「detailTitle」「detailSubtitle」「detailDescription」という3つのテキストが用意されています。そしてデータのnameがdetailTitleとdetailDescriptionに、locationがdetailSubtitleにそれぞれ接続されています。
・ヘッダー
この他に、画面の一番上にヘッダーを用意してあります。そしてそこに、リストに戻るボタンが用意されています。
――既にリストとデータソースの基本が分かっていれば、カスタマイズの仕方はだいたいわかるでしょう。それぞれでテンプレートをもとにいろいろと表示やデータをカスタマイズしてみると、ブラウザテンプレートの使い方はすぐにわかりますよ!
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
※関連コンテンツ
「DashcodeによるiPhone用Webアプリ作成入門」に戻る