Android Touch开发搜索应用

移动开发 Android
在本文中,将设计一个允许用户输入检索关键词,对twitter上的内容进行检索的小应用,其中调用的是Twitter的公开API RESTful接口,对返回的JSON格式进行解析处理。

一 设计相关界面

我们的界面很简单,只是一个文本输入框,一个“Search”的检索按钮,以及展示检索结果的内容区域。下面是相关代码:

java代码:

  1. Ext.setup({   
  2. onReady: function() {   
  3. var topToolbar = new Ext.Toolbar({   
  4. dock : 'top',   
  5. ui: 'dark',   
  6. title: 'Sencha Twitter Search'   
  7. });   
  8. var tpl = new Ext.XTemplate(   
  9. '<div id="tweet_container">',   
  10. '<tpl for=".">',   
  11. '<div class="tweet_data">',   
  12. '<div class="tweet_avatar">',   
  13. '<img width="30" height="30" src="{profile_image_url}"/>',   
  14. '</div>',   
  15. '<div class="tweet_content">',   
  16. '<a class="user" href="http://twitter.com/{from_user}">{from_user}</a> ',   
  17. '{text}',   
  18. '</div>',   
  19. '<div class="clear"></div>',   
  20. '</div>',   
  21. '</tpl>',   
  22. '</div>'   
  23. );   
  24. var resultPanel = new Ext.Panel({   
  25. layout: 'fit',   
  26. style: 'padding-bottom: 10px;',   
  27. tpl: tpl   
  28. });   
  29. var searchPanel = new Ext.Panel({   
  30. padding: 10,   
  31. layout: {   
  32. type: 'hbox',   
  33. align: 'stretch'   
  34. },   
  35. items: [{   
  36. flex: 4,   
  37. xtype: 'textfield',   
  38. style: 'margin-right: 10px;',   
  39. id: 'textquery'   
  40. },{   
  41. flex: 2,   
  42. xtype: 'button',   
  43. text: 'Search',   
  44. handler: function() {   
  45. var query = Ext.getCmp("textquery").getValue();   
  46. Ext.Ajax.request({   
  47. url: 'index.php?act=search&q='+query,   
  48. success: function(e) {   
  49. var obj = Ext.util.JSON.decode(e.responseText);   
  50. var msg = obj.results;   
  51. var html = tpl.apply(msg);   
  52. resultPanel.update(html);   
  53. }   
  54. });   
  55. }   
  56. }]   
  57. });   
  58. var myPanel = new Ext.Panel({   
  59. dockedItems: [topToolbar],   
  60. items: [searchPanel, resultPanel],   
  61. scroll: 'vertical',   
  62. style: 'background: #DDEEF6;',   
  63. fullscreen : true   
  64. });   
  65. }   
  66. });  

 在这里,首先设置了topToolbar标题栏,标题栏的内容为Sencha Twitter Search。接着使用EXT的Ext.XTemplate设计了一个模版,模版中的内容是按照twitter中的格式设计的,即发微博人的相片、用户名以及所发的言论。而resultPanel中是显示结果的面板,searchPanel则是输入检索条件的面板,其中请注意handler方法,使用query变量获得了用户的输入检索词,之后使用get的方法,使用ajax的方式发送到index.php去处理(本例子中把EXTJS代码和PHP代码写在同一个PHP文件中了,当然也可以分开来编写,那么的话就使用POST方法了),同时,在success的回调函数中,对AJAX调用返回的结果进行处理,

其中,使用var obj = Ext.util.JSON.decode(e.responseText),对检索的结果JSON格式进行解码,将返回的JSON格式字符串转变为JSON格式的对象,并且用tpl.apply(msg),将解析后的结果应用到之前的模版tpl中,***要记得使用resultPanel.update(html);更新一下该区域。

二  PHP获得twitter内容的代码

在同一个index.php文件中,通过使用get的方法,发送查询请求关键字到twitter公开的API进行查询,代码如下:

java代码:

  1. if (isset($_GET["act"]) && $_GET["act"] == "search") {   
  2. $url = 'http://search.twitter.com/search.json?q='.$_GET["q"];   
  3. $content = file_get_contents($url);   
  4. $array = json_decode($content);   
  5. $data = array();   
  6. foreach ($array->results as $var => $value) {   
  7. $pattern = '/\b(https?:\/\/[-A-Z0-9+&@#\/%?=~_|$!:,.;]*[A-Z0-9+&@#\/%=~_|$])/i';   
  8. preg_match_all($pattern, $value->text, $regs);   
  9. $loop = count($regs[0]);   
  10. for ($i = 0; $i < $loop; $i++) {   
  11. $value->text = str_replace($regs[0][$i], '<a class="outlink" href="'.$regs[0][$i].'">'.$regs[0][$i].'</a>', $value->text);   
  12. }   
  13. $data[] = array(   
  14. "profile_image_url" => $value->profile_image_url,   
  15. "from_user" => $value->from_user,   
  16. "text" => $value->text   
  17. );   
  18. }   
  19. $out = array(   
  20. "success" => true,   
  21. "results" => $data   
  22. );   
  23. echo json_encode($out);   
  24. exit;   
  25. }  

【编辑推荐】

Android环境变量的设置

Android系统重要文件类型详解

Android开发之旅:Android架构

Android应用程序开发环境的搭建

责任编辑:zhaolei 来源: 网络转载
相关推荐

2011-09-02 16:42:51

Sencha ToucWeb应用

2012-01-10 14:10:26

Sencha Touc

2011-07-26 10:21:25

Sencha Touc

2011-07-26 10:44:15

Sencha Touc

2011-09-05 10:49:14

Sencha ToucjQuery MobiHTML5

2011-12-22 20:36:41

Kindle Fire

2012-08-06 09:52:03

Android搜索功能

2012-07-30 09:41:04

Android搜索功能

2011-09-01 10:09:04

2011-09-02 15:18:49

Sencha Touc

2011-07-25 16:21:22

Sencha touc

2013-12-08 21:33:31

谷歌移动搜索应用内搜索

2011-06-15 16:11:51

UIKitCocoa TouchiOS

2012-02-27 10:06:27

AdobePhotoshop

2013-04-24 11:15:56

Android开发Touch事件传递机制

2011-12-20 15:59:28

2017-12-26 13:10:38

技术Android应用

2013-05-21 09:54:39

Web前端

2011-09-05 11:23:26

EclipseSencha Touc框架

2011-09-05 10:27:02

Sencha Touc手机应用Android
点赞
收藏

51CTO技术栈公众号