使用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 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>&nbsp;',
                        '{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进行查询，代码如下：
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)
    {
        // adding url
        $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;
}
  在上面的代码中，通过发送关键词到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  

兄弟，搞个不要爬墙的网盘啊