做成一个什么样的应用
首先,先确定一下要做的应用的大体结构。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
刚才往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
需要注意的是稍微代码的顺序有点儿改变。
从上往下我们开始说说。
首先,使用空数组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,一定去看看会有很大帮助。