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















 
 
 
 
 
 
 