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

TitaniumMobile勉強記

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

047-各エントリの画面遷移について考える

画面イメージについての考え

BylineのようなGoogleReaderクライアントのような画面遷移出来るようなUIをどうにか実現できない考えています。

  1. アプリケーション起動時にはエントリ一覧を表示(※下記画面キャプチャ1)
  2. エントリのタイトルをクリックすると、そのエントリの詳細が読めるような画面に遷移
  3. ナビゲーションバーに「前のエントリ」「次のエントリ」というボタンを配置しておき、これをクリックすることで該当のエントリに遷移する(※下記画面キャプチャ2)

Bylineのようなアプリの場合には、画面フリックによって、エントリ間の画面遷移が直感的にできるようになってますが、最初そのやり方にチャレンジしようと思ったのですが、うまいやり方が思いつかず断念しました。


※画面キャプチャ1
iOSシミュレータ
※画面キャプチャ2
iOSシミュレータ

実装に関して

これまでTitanium.UI.xxxxについて扱ってこなかったので、恥ずかしながらナビゲーションバーにボタン配置するやり方がわかりませんでした。
こんな時はググらず、基本中の基本である@donayamaさん作のwikiを参照してすぐにやり方がわかりました。

ボタンクリック時のイベントハンドラの処理で実装しないといけないことがいくつかありそうなのでそれについてまとめておきます。

  1. 一番新しい/一番古いエントリかどうか判定した上で、適切なボタンを配置
  2. ボタンクリックで、前のエントリ/次のエントリ情報を取得
  3. 取得されたエントリ情報をWebView.htmlの値にセットして、エントリ情報を書き換え。同時にナビゲーションバーに配置したボタンも必要に応じてセットしなおす。

現時点でのソース

まだまだ完全ではないですが、ベースとなるソースをとりあえず載せておきます

CreateTableView = function(){  //省略};
CreateTableView.prototype = {
  init:function(){
    //省略
  },
  makeRow:function(json){
    var self = this;
    var _row = [];
    var _json = eval(json);
    var len = _json.length;
    for(var i=0;i<len;i++){
      var row = Ti.UI.createTableViewRow({
	hasChild:true,
	data:_json[i],
	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><head><title>' + title + '</title></head>'
	  + '<body><h1>' + title + '</h1><hr />'
	  + html_body
	  + '</body></html>';
	win.add(webView);
	// 次のエントリや前のエントリに遷移する処理
	var event = 'click!!!';
	var buttonBar = Titanium.UI.createButtonBar({
	  style:Titanium.UI.iPhone.SystemButtonStyle.BAR
	});
	if(e.index===0){
	  buttonBar.labels= ['次のエントリ'];
	  buttonBar.addEventListener('click', function(e){
	    webView.html = 'next entry';
	  });
	}else{
	  buttonBar.labels= ['前のエントリ', '次のエントリ'];
	  buttonBar.addEventListener('click', function(e){
	    webView.html = 'next and before entry';
	  });
	}
	win.setTitleControl(buttonBar);

	Titanium.UI.currentTab.open(win,{animated:true});
    //以下略
  }
};