読者です 読者をやめる 読者になる 読者になる

TitaniumMobile勉強記

Web系エンジニア向けのキャリアアドバイザーやってましたが現在はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連(Node.js、Titanium)あたり

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

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

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以下の処理の見通しが悪いので正直これはどうにかしたい・・