使用Titanium Mobile开发iPhone/Android应用（02）- 使用Titanium开发Twitter客户端

上回文中我们构筑好了环境，把做成了基本的Project，从这篇开始我们将试图开发一个实际的应用。分为多篇我们做一个Twitter的客户端，网络相关，图片的使用等，来体验一下Titanium的便利之处吧。

做成一个什么样的应用

首先，先确定一下要做的应用的大体结构。Twitter应用是iPhone所有应用中很优秀的应用。一方面，使用Twitter来连接到自己的Web产品中，也需要一个符合自己的自定义应用。所以，我们的目标是一步一步地做一个类似于Twitter那样的，并且是易扩展的的应用。



页面结构来说基本就是这样的一个应用。

关于TableView

要做一个Twitter应用，首先必须就是表示出来TimeLine。所谓TimeLine就是用户头像，用户名，备注内容，时间等，以时间排序的一览。我们这回先简单地把它表示在TableView的一览中。跟iPhone开发者使用的UITableView相同的控件。



那么我们就尽早开始做一个TableView吧，上次做成的那个Project的Resources/app.js中，像一下这样改变一下代码：

Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup({});
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
    window:win1 
}); 

//删除label1相关的代码
//追加代码 开始
var tableView = Ti.UI.createTableView({
    data:[]
});
win1.add(tableView);
//追加代码 结束

win1.hideTabBar();
tabGroup.addTab(tab1);  
tabGroup.open();

删除了不要的代码后，实质上只是追加了4行代码。只是这样的话，就画了一个空的TableView。暂时先返回到Titanium页面，启动模拟题，实际运行一下看看效果。代码很多，所以也不用太多的说明，需要注意的是Titanium对象可以省略为Ti。

往TableView中追加表示的数据

表示一个空的表格是没什么用，下一步我们继续往TableView中添加数据。从Twitter取TimeLine之前我们先试着追加一些假的数据。

在刚才追加代码的地方，按一下代码修改：

var tab1 = Titanium.UI.createTab({
    window:win1 
}); 

//删除label1相关代码
//从这里开始修改

var timeline = [{text:'Comment1'},{text:'Comment2'},{text:'Comment3'}];//假数据
var data = [];
for (var i=0;i<timeline.length;i++) {
    var tweet = timeline[i];
    var row = Ti.UI.createTableViewRow();
    var commentLabel = Ti.UI.createLabel();
    commentLabel.text = tweet.text;
    row.add(commentLabel);
    data.push(row);
}
var tableView = Ti.UI.createTableView({
    data:data
});

//修改结束
win1.add(tableView);

刚才往Ti.UI.createTableView传递的参数是一个空数组的对象。然而在实际中，想表示数据得换，就得往TableViewRow对象中放置数组。因此，上边的例子中，我们做了一个假数据的数组，然后数组的每个元素都做成一个TableViewRow（参看for循环代码）。

使用实际的数据

假数据实在没啥意思，我们从Twitter获取实际的TimeLine数据。利用HTTP获取数据，将要用到Titanium.Network.Client对象。

var tab1 = Titanium.UI.createTab({
    window:win1 
}); 

var data = [];
var tableView = Ti.UI.createTableView({
    data:data
});

function updateTimeline (timeline) {
    var currentData = [];
    for (var i=0;i<timeline.length;i++) {
        var tweet = timeline[i];
        var row = Ti.UI.createTableViewRow();
        var commentLabel = Ti.UI.createLabel();
        commentLabel.text = tweet.text;
        row.add(commentLabel);
        currentData.push(row);
    }
    tableView.setData(currentData);
}

var xhr = Ti.Network.createHTTPClient();
var user = 'rensanning';
var url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=" + user;
xhr.open('GET', url);
xhr.onload = function() {
    var timeline = JSON.parse(this.responseText);
    updateTimeline(timeline);
};
xhr.send();

win1.add(tableView);

需要注意的是稍微代码的顺序有点儿改变。

从上往下我们开始说说。

首先，使用空数组data做成一个空的TableView。Ti.Network.HTTPClient是异步处理，所以TableView做成的时候还没能从Twitter获取到数据。

然后，定义更细TableView的数据函数uptdataTimeline。前边已经做了一个例子，做成TableViewRow跟前边的for循环代码是相同的。最后利用tableView.setData()更新TableView的数据很重要。

之后，Ti.Network.createHTTPClient()以后是网络连接的主要部分。

对于生成的Ti.Netowerk.HTTPClient对象，使用open方法，指定HTTP的方法，对象URL然后取得完成后，在xhr.onload中设置调用设置的回调函数。

这里this.responseText就是取得的数据，作为JSON串来解析。Titanium中JSON的 解析器在一开始就封装好了，不是eval而是必须使用JSON解析器。



改变后的代码运行后，上边页面那样user指定的用户TimeLine就能够被表示出来可以拿自己的用户ID试试。

总结

用Titanium.UI.TableView来表示表格的方法，介绍了使用Titanium.Network.HTTPClient访问网络获取数据。只是表示的自己的Tweet还不是很实用。然而我不是已经体验了很简单的就能利用网络做一个应用了嘛。

下一回中，可能会有一些很长的代码里子被分割到多个文件中，打算讲讲怎么怎么表示出稍微好看的TimeLine。

这篇中介绍的Titanium各个对象的详细内容可以参考Appcelerator的APIReference，一定去看看会有很大帮助。