Titanium Mobileですごくシンプルなxml readerを作ってみた

2011/10/25

Titanium Mobile を最近触り始めたので、スキルアップとともにアプリができる過程を残していきます。

前提

開発環境は、こんな感じ

mac book air
Titanium Studio

ちなみに構築手順はこちらがまとまってます。

最初の課題

twitter APIからjsonを読み込んで一覧で表示、というシンプルなアプリはphpmatsuriのワークショップで、すでに動いてましたので、xml読み込みverを作ってみました。

xmlの対象はこのブログのfeedです。

ハマりどころ

xmlのDOM操作も多少苦戦しましたが、何よりデバッグの分かりにくさに苦労しました。

どうも、onload()による遅延ロードに起因して、デバッグがすべて表示されないようです。

デバッグするタイミングが注意ですが、それは下の開発tipsに書いてます。

完成ソース

デフォルトのapp.jsからいじってますので、その名残が多少あります。

// 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:'Tab 1',
    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)
		{
			row.add(Titanium.UI.createLabel({
            text: title.item(0).text,
            top: 0,
            left: 0,
            right: 0,
            height: 'auto',
            bottom: 8
        }));
		datas.push(row);
		}
	}
    var tableView2 = Titanium.UI.createTableView({data:datas});
	win1.add(tableView2);
};
http.send();

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

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

// open tab group
tabGroup.open();

開発tips

開発時に気づいた点などです。

デバッグ箇所に注意

今回のようにhttp.onload()がある場合、デバッグをonload()内で実施すると、確実に見れるような気がします。

ネットワークによる遅延でonload内の処理が遅れて処理される場合が多いのが、その理由かな、と思ってます。

バリバリコンパイルは、iOSで

マシンスペックにもよりますが、Androidのエミュレータや実機でのコンパイルは非常に時間がかかります。

なので、最初はiOSによるコンパイルが効率的です。

ただし、以前の勉強会で聞いたのですが、Androidの方がぶつかる問題が多いらしいので、最初にAndroidで作成し、それからiOS調整するほうがいいという情報もあります。

そこで、私は、ひとまずiOSで進めて、１機能が出来たら一度androidでも実行する、というフローで開発してます。

次の課題

今回は一覧でタイトルを表示しているだけなので、クリックしたら、本文が見れるようにするのを課題とします。