Displaying Twitter Search Result With Sencha Touch

April 15th, 2011 by aditia rahman / 1 Comment  

     

Today I want to take another step in Learning Sencha Touch, if you already browse on all sencha touch official examples there are already have the same twitter search example and that is a better one, but when I try it look like the interface only optimized for tablet.

Sencha Touch Twitter Search

This example only created for smartphone resolution, and very simple single twitter search without pagination or load more function, and to fetch data twitter server here is using PHP.

View Demo | Download Source

(use mobile webkit browser to see demo)

Sencha Touch Code

The Sencha Touch code consist of four panel component one for main component, one for top toolbar, this panel not doing nothing but just showing application title, one for search textfield and button, and the last one for displaying search result

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
        });
    }
});

The result panel using XTemplate to displaying search result, and remember to set the config layout value to ‘fit’ , so it can be scrollable.

PHP Code

The PHP code fetch the search result as a JSON format, this is only using twitter search api, so we don’t need to register for using this api, here is the link to know more about twitter search api, in case you wanna know about other parameter or getting as other format.

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;
}

In PHP code there are a regex function I get from phpfreak to check whether the tweets contain some url, if yes it will change directly to html link element. Last this are the screen example, if you want to see the demo, better using your iphone, android smartphone or using the android emulator, cause I’m not creating condition for desktop browser or tablet.

View Demo | Download Source

Sencha Touch Twitter Search

        submit to reddit Delicious

One Comment Leave a Comment Subscribe RSS

  • Maple says:

    It is really a great and useful piece of information. I am glad that you shared this useful info with us. Please keep us informed like this. Thank you for sharing.

Leave a Comment