Titanium mobile 自分のrss reader とりあえず完成！

2011/10/29

前々回でrssを読み込んで一覧表示をし、前回なんとか一覧→詳細の画面遷移はできたので、ちゃんとデータの受け渡しをして、多少まともなアプリにしてみます。

画面遷移時のデータの引き渡し方法

一覧→詳細と遷移する際に、tapした記事の本文を表示させないといけません。

そこでポイントはapp.jsのここ。（プログラム全体は記事の最後に貼ってます。）

if (Ti.Platform.name == "android") {
			var win = Titanium.UI.createWindow({
				url:"detail.js",
				title:e.rowData.text,
				body:e.rowData.body
			});
		} else {
			var win = Titanium.UI.createWindow({
				url:"detail.js",
				title:e.rowData.text,
				body:e.rowData.body,
				backgroundColor:'#fff',
				barColor:'#111'

			});
		}

Platformによる分岐がありますが、大事なのはbody:e.rowData.bodyのところ。

windowオブジェクトのプロパティとして新たにbodyというのを作りそこに、値をセットします。e.rowData.bodyは

datas.push({title:title.item(0).text, test:'detail.js', body:description.item(0).text});
（・・・中略・・・）
    var tableview = Titanium.UI.createTableView({data:datas});

このようにtableviewに値をセットする際にbodyプロパティにxmlから取得したデータをセットしています。

そして詳細画面（detail.js）で

var win = Ti.UI.currentWindow;
（・・・中略・・・）
var detail = Ti.UI.createLabel({
//	backgroundColor:'#336699',
	borderRadius:10,
	width:300,
	height:'auto',
	top:10,
	text : win.body
});

このような形でcurrentWindowで現在のwindowを取得し、そのbodyをlabelのtextにセットしています。

これで詳細画面のlabelのtextに、xmlで取得した本文（descriptionタグ）が表示されます。

画面のスクロール

ところがこのままだと、本文が画面いっぱい埋まってはみ出してしまう場合がありました。

で、感覚的にスクロールしてくれるかと思いきや、画面は動かず。。。。

てことでサンプルのKitchen sinkを見てみると、example/scroll_views_tabs.js に

var scrollView2 = Titanium.UI.createScrollView({
	contentWidth:75,
	contentHeight:500,
	top:70,
	height:200,
	width:75,
	borderRadius:10,
	backgroundColor:'#13386c'
});

こんなものを発見。実際画面もスクロールしていたので、これを参考にしました。

var win = Ti.UI.currentWindow;

var scrollView = Titanium.UI.createScrollView({
	 contentWidth:'auto',
	 contentHeight:'auto',
	 top:0,
	 showVerticalScrollIndicator:true,
});

var detail = Ti.UI.createLabel({
	borderRadius:10,
	width:300,
	height:'auto',
	top:10,
	text : win.body
});

scrollView.add(detail);

win.add(scrollView);

これがdetail.jsの全貌ですが、前回との違いは、window( label() ) だったのが、window( scroll( label() ) ) という関係になって、scrollが間に噛んだようなイメージです。

全体

では、app.jsも全部貼っておきます。これで皆さんのスマホでも僕のrssが見れるはずw

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
    title:'Pblo Simple Reader',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

var http = Titanium.Network.createHTTPClient();
http.open("GET", "http://blog.playispeace.com/feed/");
http.onload = function() {
	var doc = this.responseXML.documentElement;
	var items = doc.getElementsByTagName("item");
	var datas = [];
	for (var c=0;c 0)
		{
			datas.push({title:title.item(0).text, test:'detail.js', body:description.item(0).text});
		}
	}
    var tableview = Titanium.UI.createTableView({data:datas});
	tableview.addEventListener('click', function(e)
	{
	if (e.rowData.test)
	{
		if (Ti.Platform.name == "android") {
			var win = Titanium.UI.createWindow({
				url:"detail.js",
				title:e.rowData.text,
				body:e.rowData.body
			});
		} else {
			var win = Titanium.UI.createWindow({
				url:"detail.js",
				title:e.rowData.text,
				body:e.rowData.body,
				backgroundColor:'#fff',
				barColor:'#111'

			});
		}
				tab1.open(win,{animated:true});
		}
	});
	win1.add(tableview);
};
http.send();

http.onerror = function(){
	alert("network error");
};

//
//  add tabs
//
tabGroup.addTab(tab1);

// open tab group
tabGroup.open();

pblo rss readerの完成

一応アプリは作れました！やった！

でもまだまだ改善したいですね。デザインとか、あとせめてロゴと開始の画像はw

次からの本格的なアプリでは、その辺もきっちりやっていこうと思います。