Android Touch開發搜尋應用

一 設計相關介面

我們的介面很簡單，只是一個文本輸入框，一個“Search”的檢索按鈕，以及展示檢索結果的內容地區。下面是相關代碼：

java代碼：

 

  
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 class="tweet_data">',   
  
'<div class="tweet_avatar">',   
  
'<img width="30" height="30" src="{profile_image_url}"/>',   
  
'</div>',   
  
'<div class="tweet_content">',   
  
'<a class="user" href="http://twitter.com/{from_user}">{from_user}</a> ',   
  
'{text}',   
  
'</div>',   
  
'<div class="clear"></div>',   
  
'</div>',   
  
'</tpl>',   
  
'</div>'   
  
);   
  
var resultPanel = new Ext.Panel({   
  
layout: 'fit',   
  
style: 'padding-bottom: 10px;',   
  
tpl: tpl   
  
});   
  
var searchPanel = new Ext.Panel({   
  
padding: 10,   
  
layout: {   
  
type: 'hbox',   
  
align: 'stretch'   
  
},   
  
items: [{   
  
flex: 4,   
  
xtype: 'textfield',   
  
style: 'margin-right: 10px;',   
  
id: 'textquery'   
  
},{   
  
flex: 2,   
  
xtype: 'button',   
  
text: 'Search',   
  
handler: function() {   
  
var query = Ext.getCmp("textquery").getValue();   
  
Ext.Ajax.request({   
  
url: 'index.php?act=search&q='+query,   
  
success: function(e) {   
  
var obj = Ext.util.JSON.decode(e.responseText);   
  
var msg = obj.results;   
  
var html = tpl.apply(msg);   
  
resultPanel.update(html);   
  
}   
  
});   
  
}   
  
}]   
  
});   
  
var myPanel = new Ext.Panel({   
  
dockedItems: [topToolbar],   
  
items: [searchPanel, resultPanel],   
  
scroll: 'vertical',   
  
style: 'background: #DDEEF6;',   
  
fullscreen : true   
  
});   
  
}   
  
});  
 

在這裡，首先設定了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代碼：

 

  
if (isset($_GET["act"]) && $_GET["act"] == "search") {   
  
$url = 'http://search.twitter.com/search.json?q='.$_GET["q"];   
  
$content = file_get_contents($url);   
  
$array = json_decode($content);   
  
$data = array();   
  
foreach ($array->results as $var => $value) {   
  
$pattern = '/\b(https?:\/\/[-A-Z0-9+&@#\/%?=~_|$!:,.;]*[A-Z0-9+&@#\/%=~_|$])/i';   
  
preg_match_all($pattern, $value->text, $regs);   
  
$loop = count($regs[0]);   
  
for ($i = 0; $i < $loop; $i++) {   
  
$value->text = str_replace($regs[0][$i], '<a class="outlink" 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;   
  
}  
 

Android環境變數的設定

Android系統重要檔案類型詳解

Android開發之旅：Android架構

Android應用程式開發環境的搭建