使用Sencha Touch框架开发Twitter搜索应用
目前,Android和iphone两大主流手机的应用开发吸引了大批开发人员的眼光。而开发人员最期望的是能尽可能运用旧有的技术知识,去设计这些新的应用,因此出现了不少专为方便开发者设计的各类框架,比如有jQuery Mobile和Sencha Touch,PhoneGap等,这些框架大都使用如Jquery,Ext,Javascript,HTML5等已有的技术,能让掌握这些技术的开发者使用它们尽快地转移到开发移动应用中去。本文将介绍的是其中的Sencha Touch框架,它依托的是著名的Ext JS技术,用起来十分方便。Sencha Touch的项目地址是www.sencha.com/products/touch/,它实际上是EXT JS组织把EXT JS和jqTouch和raphael库重新整合的框架,也是第一个支持HTML5标准的移动开发框架。
本文的阅读对象为对EXT JS框架有一定基础认识的读者,当然如果读者了解jqTouch的初步入门更好,入门的文章可以参考
<<移动开发者必备工具:开源jqTouch初探>>
(http://tech.it168.com/a2011/0107/1147/000001147855.shtml)及
<<Build mobile web applications with Sencha Touch>>
(http://www.ibm.com/developerworks/web/library/wa-senchatouch/)
在本文中,将设计一个允许用户输入检索关键词,对twitter上的内容进行检索的小应用,其中调用的是Twitter的公开API RESTful接口,对返回的JSON格式进行解析处理。
下面我们开始动手设计:
一 设计相关界面
我们的界面很简单,只是一个文本输入框,一个“Search”的检索按钮,以及展示检索结果的内容区域。下面是相关代码:
Ext.setup({
onReady: function() {
var topToolbar = new Ext.Toolbar({
dock : 'top',
ui: 'dark',
title: 'Sencha Twitter Search'
});
var tpl = new Ext.XTemplate(
'<div id="tweet_container">',
'<tpl for=".">',
'<div height="30" src="{profile_image_url}"/>',
'</div>',
'<div href="http://twitter.com/{from_user}">{from_user}</a> ',
'{text}',
'</div>',
'<div href="'.$regs[0][$i].'">'.$regs[0][$i].'</a>', $value->text);
}
$data[] = array(
"profile_image_url" => $value->profile_image_url,
"from_user" => $value->from_user,
"text" => $value->text
);
}
$out = array(
"success" => true,
"results" => $data
);
echo json_encode($out);
exit;
}
在上面的代码中,通过发送关键词到http://search.twitter.com/search.json?q=这个地址,并使用file_get_contents函数获得搜索的结果的内容,再用json_decode将其转变为JSON对象数组的形式,并且使用一个正则表达式,把包含该关键字的所有URL都筛选出来,并且生成HTML形式的链接。最后的out数组中,包含了success,即成功返回的标志,以及results变量,包含检索的结果,最后已JSON字符串格式返回。
代码下载:http://www.box.net/shared/fep0g6lhdr 1 楼 shansheng 2011-05-30 兄弟,搞个不要爬墙的网盘啊