上回文中我们构筑好了环境,把做成了基本的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,一定去看看会有很大帮助。
- 大小: 128.1 KB
- 大小: 60 KB
- 大小: 126 KB
分享到:
相关推荐
sublimetext-tita, Tita Titanium Mobile/Alloy sublime text 2插件 这个插件不再主动地维护 ***因为我不再使用 st2/st3 。 有人对 fork 感兴趣并维护它?替代插件:...
Android-titanium_mobile.zip,带有javascript的本地ios、android和windows应用程序,安卓系统是谷歌在2008年设计和制造的。操作系统主要写在爪哇,C和C 的核心组件。它是在linux内核之上构建的,具有安全性优势。
[Packt Publishing] Appcelerator Titanium 移动应用开发教程 (英文版) [Packt Publishing] Creating Mobile Apps with Appcelerator Titanium (E-Book) ☆ 图书概要:☆ Develop fully-featured mobile ...
等等的相关连结,希望能对开发Android应用程式有帮助。如有不完善的地方,欢迎加以补充! !另外如果分类有不妥的地方,或标示部清楚的地方,也欢迎提出! !Android版本分布Android Developers - Dashboards程式码...
贾米钛 这将JavaScript BDD框架带到了Titamium Mobile。 入门 制作目录并获取Jasmine Titanium cd Resources mkdir spec lib vendor cd vendor git clone ... Titanium Mobile 1.7.2或更高
有关此工具的用途的更多信息,请查看:Android编译器指纹技术,使用APKiD检测盗版和恶意Android应用APKiD:适用于Android应用的PEiD安装pip install --upgrade wheel pip wheel --wheel-dir = / tmp / yara-python -...
Titanium官方移动终端开发API文档
UX SDK是一套与产品无关的UI对象,可使用快速跟踪Android应用程序的开发。 另外,请查看的新开放源代码版本。 一体化 通过Maven声明依赖项: < groupId>com.dji</ groupId> < artifactId>dji-uxsdk</ ...
TiInspector, 通过 Chrome DevTools调试 Titanium Mobile 应用程序 #Ti 检查器Ti检查器允许在 Chrome DevTools web界面中调试 Appcelerator Titanium 应用程序。工具通过将命令和消息转换为 Chrome 调试协议和 ...
一切Apache Flink 蒂莫西·斯潘@PaaSDev 侧翼 Apache Flink + Apache Kafka + Apache NiFi 必须跟随人 Flink SQL https://docs.cloudera.com/csa/1.3.0/ssb-overview/topics/csa-ssb-key-features.html https://...
NULL 博文链接:https://rensanning.iteye.com/blog/1315014
TiJSPDF, Titanium Mobile 应用程序的JSPDF插件 TiJSPDFTiJSPDF是用于使用JSPDF库生成pdf并在 Titanium Mobile 应用程序中操作它们的Titanium Mobile 应用程序的一种 JSPDF插件插件。这个插件独立于 Titanium 维护,...
瓦马拉茹反射CMPUT 301作业1回购... -使用处理程序创建较短的Toast -BaseActivity的想法: ://www.mysamplecode.com/2013/04/android-common-menu-options.html -返回主屏幕的菜单项: ://stackoverflow.com/questions
Ti.GoogleMaps是一个开源项目,旨在支持Appcelerator的Titanium Mobile中的Google Maps iOS-SDK。 该模块当前支持以下API: 地图检视 注解 瓷砖覆盖 多边形叠加 折线叠加 圆形叠加 自动补全对话框 聚类 ...
Titanium中文版开发手册(翻译版)
NULL 博文链接:https://topmanopensource.iteye.com/blog/1455044
什么是Titanium Mobile跨平台开发技术? 用Titanium Mobile的优势和劣势? 总是从Hello world开始 准备工作? 通过模板建立默认的应用 模板程序彻底研究 Hello World完成了! Titanium Studio工作环境 本章小结 第二...
var OS_ANDROID = require ( 'titanium-platforms/os/android' ) ; var OS_IOS = require ( 'titanium-platforms/os/ios' ) ; var OS_MOBILEWEB = require ( 'titanium-platforms/os/mobileweb' ) ; var OS_WINDOWS...
钛备份Titanium Backup Pro是目前为最强悍的程序和系统备份工具,需ROOT权限运行。它的程序命名就是一个暗示,钛(元素名Ti),是一种高档的金属,特点是重量轻但是强度大,相当稳固,被广泛应用于航天和航海这些...
未使用CSS分析器 该工具在目录中扫描CSS文件中指定CSS类,从而帮助您查找未使用CSS类。 用法 yarn install npm start -- --cssfile=path/to/cssfile --directory=path/to/folder/with/files 示例输出 $ npm start -...