ネットワーク経由でデータ取得してTableViewに表示する

h5y1m141 commented 9 years ago

課題

[x] こちらのページを参考にプロジェクト設定を行う
[x] こちらのページを参考にWebAPIからデータのみ取得
[x] 取得したQiitaの投稿情報をTableViewを使って画面表示するを参考にWebAPIから情報を取得してその情報をTableView使って表示する

kozasaryosuke commented 9 years ago

深くは理解してませんが、何ができるのかは把握できたと思います。次の課題、お願いします！

h5y1m141 commented 9 years ago

@kozasaryosuke さん、早いですね！

そしたら取得したQiitaの投稿情報をTableViewを使って画面表示するを参考にWebAPIから情報を取得してその情報をTableView使って表示するサンプルコードがあると思うので、それをベースにして

[x] こちらのURLのWebAPIにアクセスした情報をTableView使ってtitleのみ表示するサンプル作る
- 先ほどのQiitaのものはサンプルで解説入れていたのでもしかしたらJSONのデータのアクセス方法がわからないかと思うのでその場合にはこちらが参考になると思います
[x] 上記が出来たら表示する項目にtitleだけではなくdescriptionもTableViewに表示するように修正する
[x] かなり難易度あがりますが、TableViewをクリックした時に画面上には表示されないlinkの情報がalertで表示されるようにする
- こちらを手がかりに考えてみてください

kozasaryosuke commented 9 years ago

2015-01-06 21 42 57

こんな感じで良いのでしょうか？

h5y1m141 commented 9 years ago

@kozasaryosuke さん、

いやー飲み込みが早くって凄いですね(^^)

good

参考までにどのようなソースコードで実現されてるのかソースコードを貼り付けてもらえますか？

今回つくってもらったような処理は実際にアプリを作る時に必要になる処理の1つで、実際のアプリの流れで言うと、以下のような感じになるはずで、今回の作業で3.の箇所まではクリアーしたことになります

アプリ起動時にサーバーと通信してTableView使って情報一覧を表示させる
任意のセルをタッチ
セルをタッチした箇所に紐づく詳細情報へのURLを読み取りそちらのサイトにアクセスする
（今回はまだ作ってないですが）TableViewの一覧情報画面から画面遷移させる
画面遷移先の画面で詳細情報を表示するようにする

kozasaryosuke commented 9 years ago

var xhr,qiitaURL,method,mainTable,win;
mainTable = Ti.UI.createTableView({
  width: 320,
  height:480,
  backgroundColor:"#fff",
  left: 0,
  top: 0
});
win = Ti.UI.createWindow({
  title:'QiitaViewer'
});

qiitaURL = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://rss.itmedia.co.jp/rss/2.0/news_bursts.xml&num=10"; // ①URL変更
method = "GET";
xhr = Ti.Network.createHTTPClient();
xhr.open(method,qiitaURL);
xhr.onload = function(){
  var feeds,i,len,row,rows,textLabel,descriptionLabel;
  if (this.status === 200) {
    feeds = JSON.parse(this.responseText);
    rows = [];
    for (i = 0, len = feeds.responseData.feed.entries.length; i < len; i++) { // ②エントリー数を取得してループさせる
      row = Ti.UI.createTableViewRow({
        width: 'auto',
        height:100,
        borderWidth: 0,
        className:'entry',
        color:"#222",
        myProperty1:feeds.responseData.feed.entries[i].link // ③TableViewRowに対しmyProperty1を割り当てる
      });
      textLabel = Ti.UI.createLabel({
        width:280,
        height:30,
        top:5,
        left:10,
        color:'#222',
        font:{
          fontSize:16,
          fontWeight:'bold'
        },
        text:feeds.responseData.feed.entries[i].title // ④titleまでのパスをたどる
      });
      descriptionLabel = Ti.UI.createLabel({
        width:280,
        height:60,
        top:35,
        left:10,
        color:'#222',
        font:{
          fontSize:10,
          fontWeight:'normal'
        },
        text:feeds.responseData.feed.entries[i].contentSnippet // ⑤contentSnippetまでのパスをたどりdescriptionLabelと名付けたLabelを作成
      });
      row.add(textLabel);
      row.add(descriptionLabel); // ⑥descriptionLabelをTableViewRowに配置
      rows.push(row);
    }
    mainTable.setData(rows);
    win.add(mainTable);
    win.open();

  } else {
    Ti.API.info("error:status code is " + this.status);
  }
};
mainTable.addEventListener('click',function(e) {
    alert(e.rowData.myProperty1); // ⑦クリック時にmyProperty1を表示させる
});
xhr.onerror = function(e) {
  var error;
  error = JSON.parse(this.responseText);
  Ti.API.info(error.error);
};
xhr.timeout = 5000;
xhr.send();

ソースコード貼ります！不要かもしれませんが、追加・変更箇所をコメントしておきました。

kozasaryosuke commented 9 years ago

お褒めの言葉いただき、ありがとうございます！飲み込みが早いのではなくて、教材が良いのだと思いますよ！

h5y1m141 / connextion

ネットワーク経由でデータ取得してTableViewに表示する #8

課題