40歳からのキャリアチェンジ

20代はエンジニア・PM、30代はWeb系エンジニア向けのキャリアアドバイザー。40代の今はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連あたり

035-iPhone側のページング処理考える前に記事一覧→記事詳細表示の実装を行う

Titanium Mobile javascript

記事一覧から、記事詳細情報を表示する

Sinatraで生成したJSONをxhrで読み込み→TableViewで記事一覧生成→clickイベントで、記事詳細情報に画面遷移までやっと出来た！
twitterより

とtwitterでつぶやいたように下記のような画面遷移する処理までは出来てました

記事一覧表示

記事の詳細情報表示

ソースの見通しが悪くなってきたのでスタイル情報は別ファイル管理

Ti.UI.createLabelのパラメータを通常

var content = Ti.UI.createLabel(
 {
    //略
 }
);
var title = Ti.UI.createLabel(
 {
    //略
 }
);

という感じで設定するかと思いますが、見た目の部分の処理と、バックエンドの処理と混在するのが気持ち悪いので個人的に最近とても参考にしているひげろぐさんの書かれているこのエントリを参考にしてLabelのパラメータは外部ファイルで別管理する方法にしました。

//labelなどのスタイルを定義したファイルを読み込み
Ti.include("styles.js");
var win = Ti.UI.currentWindow;
var data = [];
var tableView = Ti.UI.createTableView({
  data:data
});

var Blogger = function(blogger){
  this.blogger = blogger;
  this.httpclient = Titanium.Network.createHTTPClient();
};

Blogger.prototype = {
  get:function(){
    var self = this;
    var url =  "http://localhost:4567/api/" + this.blogger + ".json";
    self.httpclient.open('GET',url);
    self.httpclient.onload = function(){
      var entries = JSON.parse(this.responseText);
      self.entries = entries;
            var _data = [];
      for(var i=0;i<5;i++){
	var entry =  entries[i];
	var row = Ti.UI.createTableViewRow({
	  hasChild:true,
	  data:entry,
	  height:80
	});
	// 記事の詳細情報を表示
	row.addEventListener('click', function(e){
	  var title = e.rowData.data.title;
	  var html_body = e.rowData.data.html_body;
	  var permalink = e.rowData.data.permalink;
	  var win = Titanium.UI.createWindow({

	  });
  	  var webView =  Ti.UI.createWebView();
	  webView.html = '<html><body>' + html_body + '</body></html>';
	  win.add(webView);
	  Titanium.UI.currentTab.open(win,{animated:true});

	});
	var title = Ti.UI.createLabel(styles["titleLabel"]);
	title.text = entry.title,
	row.add(title);
	var content = Ti.UI.createLabel(styles["contentLabel"]);
	content.text = entry.html_body.replace(/<\/?[^>]+>/gi, "");
	row.add(content);
	_data.push(row);
      }
      tableView.setData(_data);

    };
    self.httpclient.send();
  }
}
var blogger = new Blogger('hibi');
blogger.get();

ページング処理実装もですが、onload以下の処理の見通しが悪いので正直これはどうにかしたい・・