Android Touch開發(fā)搜索應用
一 設計相關界面
我們的界面很簡單,只是一個文本輸入框,一個“Search”的檢索按鈕,以及展示檢索結(jié)果的內(nèi)容區(qū)域。下面是相關代碼:
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標題欄,標題欄的內(nèi)容為Sencha Twitter Search。接著使用EXT的Ext.XTemplate設計了一個模版,模版中的內(nèi)容是按照twitter中的格式設計的,即發(fā)微博人的相片、用戶名以及所發(fā)的言論。而resultPanel中是顯示結(jié)果的面板,searchPanel則是輸入檢索條件的面板,其中請注意handler方法,使用query變量獲得了用戶的輸入檢索詞,之后使用get的方法,使用ajax的方式發(fā)送到index.php去處理(本例子中把EXTJS代碼和PHP代碼寫在同一個PHP文件中了,當然也可以分開來編寫,那么的話就使用POST方法了),同時,在success的回調(diào)函數(shù)中,對AJAX調(diào)用返回的結(jié)果進行處理,
其中,使用var obj = Ext.util.JSON.decode(e.responseText),對檢索的結(jié)果JSON格式進行解碼,將返回的JSON格式字符串轉(zhuǎn)變?yōu)镴SON格式的對象,并且用tpl.apply(msg),將解析后的結(jié)果應用到之前的模版tpl中,***要記得使用resultPanel.update(html);更新一下該區(qū)域。
二 PHP獲得twitter內(nèi)容的代碼
在同一個index.php文件中,通過使用get的方法,發(fā)送查詢請求關鍵字到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;
- }
【編輯推薦】