`
rensanning
  • 浏览: 3553386 次
  • 性别: Icon_minigender_1
  • 来自: 大连
博客专栏
Efef1dba-f7dd-3931-8a61-8e1c76c3e39f
使用Titanium Mo...
浏览量:38236
Bbab2146-6e1d-3c50-acd6-c8bae29e307d
Cordova 3.x入门...
浏览量:607654
C08766e7-8a33-3f9b-9155-654af05c3484
常用Java开源Libra...
浏览量:682845
77063fb3-0ee7-3bfa-9c72-2a0234ebf83e
搭建 CentOS 6 服...
浏览量:89577
E40e5e76-1f3b-398e-b6a6-dc9cfbb38156
Spring Boot 入...
浏览量:402165
Abe39461-b089-344f-99fa-cdfbddea0e18
基于Spring Secu...
浏览量:69772
66a41a70-fdf0-3dc9-aa31-19b7e8b24672
MQTT入门
浏览量:91866
社区版块
存档分类
最新评论

使用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,一定去看看会有很大帮助。
  • 大小: 128.1 KB
  • 大小: 60 KB
  • 大小: 126 KB
2
0
分享到:
评论

相关推荐

    Titanium中Httpclient访问REST 服务

    Titanium是一款JavaScript开发的开源移动应用框架,它允许开发者使用JavaScript编写原生iOS和Android应用。在Titanium中,我们可以通过HTTPClient模块来发送HTTP请求,与RESTful Web服务进行通信。REST...

    sublimetext-tita, Tita Titanium Mobile/Alloy sublime text 2插件.zip

    sublimetext-tita, Tita Titanium Mobile/Alloy sublime text 2插件 这个插件不再主动地维护 ***因为我不再使用 st2/st3 。 有人对 fork 感兴趣并维护它?替代插件:...

    Titanium Mobile API

    Titanium Mobile API 是一款由 Appcelerator 公司提供的用于跨平台移动应用开发的强大工具包。该工具允许开发者使用 JavaScript 编写应用程序,并通过一套统一的 API 接口访问原生移动设备功能,如 GPS 定位、摄像头...

    TITANIUM智能手机应用开发教程

    ### TITANIUM智能手机应用开发教程知识点概览 #### 一、TITANIUM系统简介与特点 **TITANIUM系统**是一种基于云的移动应用程序开发平台,它支持跨平台开发,允许开发者使用JavaScript来编写原生移动应用程序。...

    Android-titanium_mobile.zip

    Android-titanium_mobile.zip,带有javascript的本地ios、android和windows应用程序,安卓系统是谷歌在2008年设计和制造的。操作系统主要写在爪哇,C和C 的核心组件。它是在linux内核之上构建的,具有安全性优势。

    Titanium Mobile SDK 3.1.0 Apidoc 离线版

    Titanium Mobile SDK 3.1.0 是一个用于构建原生移动应用的开发工具,尤其针对iOS和Android平台。这个版本的Apidoc是开发者的重要参考资料,它包含了完整的API文档,帮助开发者理解并使用Titanium框架的各种功能。...

    TitaniumMobile开发跨平台iOS和Android应用

    Titanium Mobile是一种跨平台的移动应用开发框架,它允许开发者使用JavaScript、HTML和CSS来构建高性能的原生应用程序。该框架由Appcelerator公司开发,并支持iOS、Android以及其他多个操作系统。 #### 为什么要...

    Titanium使用JavaScript来开发原生iOSAndroid和Windows应用

    Titanium是一个开源的移动开发框架,它允许开发者使用JavaScript语言来构建原生的iOS、Android以及Windows应用程序。这个框架的核心理念是提供一个跨平台的解决方案,让开发者可以用一种语言编写代码,然后在多个...

    Titanium中文版开发手册

    Titanium是一个开源的JavaScript平台,允许开发者使用JavaScript、HTML和CSS来构建原生的iOS、Android和Windows应用。这份翻译版的手册覆盖了Alloy框架的多个核心概念,为开发者提供了一个全面的参考。 1. **Alloy...

    [Titanium] Appcelerator Titanium 移动应用开发教程 (英文版)

    [Packt Publishing] Appcelerator Titanium 移动应用开发教程 (英文版) [Packt Publishing] Creating Mobile Apps with Appcelerator Titanium (E-Book) ☆ 图书概要:☆ Develop fully-featured mobile ...

    Titanium plugin开发初探

    在移动应用开发领域,Titanium 是一个流行的选择,它允许开发者使用 JavaScript 来构建原生的 iOS 和 Android 应用。Titanium 的核心理念是通过跨平台的 JavaScript API 提供与原生功能的无缝对接,而插件开发则是这...

    使用Titanium来开发“Path”的一些创新UI布局 - 左右菜单

    在移动应用开发领域,Tiitanium 是一个强大的框架,它允许开发者使用 JavaScript 来构建原生的 iOS 和 Android 应用。这篇博客“使用Titanium来开发“Path”的一些创新UI布局 - 左右菜单”可能探讨了如何利用 ...

    前端开源库-node-titanium-sdk

    总之,`node-titanium-sdk`是前端开发者进入跨平台移动应用开发领域的强大工具,结合Node.js的生态系统,它提供了一条高效的开发路径,让开发者可以用熟悉的JavaScript技术创建高性能、多平台的应用。

    Titanium开发者平台介绍

    - **无需Java或Objective-C**:传统的移动应用开发通常需要使用Java(针对Android)或Objective-C/Swift(针对iOS)。而Titanium打破了这一限制,开发者可以用自己熟悉的语言进行开发,同时保持接近原生性能的表现。...

    Android-Development-Tools:主要是收集了各式各样的Android开发工具、函式库、参考文件...等等的相关连结

    等等的相关连结,希望能对开发Android应用程式有帮助。如有不完善的地方,欢迎加以补充! !另外如果分类有不妥的地方,或标示部清楚的地方,也欢迎提出! !Android版本分布Android Developers - Dashboards程式码...

    jasmine-titanium:Jasmine Spec框架与Appcelerator Titanium Mobile的集成

    贾米钛 这将JavaScript BDD框架带到了Titamium Mobile。 入门 制作目录并获取Jasmine Titanium cd Resources mkdir spec lib vendor cd vendor git clone ... Titanium Mobile 1.7.2或更高

Global site tag (gtag.js) - Google Analytics