Simple tweets search app using Titanium

Hi...

In this post we are going to see simple tweets search app using Titanium appcelerator.


Design goal:

  Search the tweets based on name and list the results in Table view with tweets photo, name/title, description and posted date. when clicking the particular row the detailed information will be displayed in new window.

Start the Implementation:
       1.   create new titanium mobile project and start to edit the app.js (OR)          create new .js file in your existing mobile project.

       2.    create TextField and one Button with title 'Search' on the top of the window.

       3.   Now write the code in Search button's click event.

              3a. Twitter provides the api url for search the tweets.
     
                      var url = "http://search.twitter.com/search.json?q=" + stext.value;
               
                       here, stext.value is the TextField value.
             
               4b. Now create httpClientRequest object to send the request.

                        var xhr = Ti.Network.createHTTPClient({
                            onload: function () {
                                                              json = JSON.parse(this.responseText);
                                                              loadData(json);
                                                            },
                            onerror: function (e) { alert('ERROR');},
                             timeout: 5000
                          }); 
                        xhr.open("GET", url);
                        xhr.send();
                  4c. Write the definition for function loadData(json)
                            function loadData(json)
                              {
                                   if (json.results.length < 10) count = json.results.length;
                                    else count = 10;
                                   for (i = 0; i < count; i++) {
                                     tweets = json.results[i];
                                     row = Ti.UI.createTableViewRow({
                                     height: 'auto',
                                     hasChild: true,
                                     url: 'resultwindow.js',
                                     iurl: tweets.profile_image_url,
                                      iname: tweets.from_user,
                                     itext: tweets.text,
                                     idate: tweets.created_at,
                                     id: tweets.from_user_id_str
                                     });


                                   var image = Titanium.UI.createImageView({
                                     image: tweets.profile_image_url,
                                     top: 5,
                                     left: 5,
                                     height: 60,
                                     width: 60
                                    });
                                   nameLabel = Ti.UI.createLabel({
                                  text: tweets.from_user,
                                   font: {
                                   fontSize: '12dp',
                                   fontWeight: 'bold'

                                   },
                                  height: 'auto',
                                  left: 70,
                                  top: 0,
                                  color: '#f00',
                                  touchEnabled: false
                                  });

                               textLabel = Ti.UI.createLabel({
                               text: tweets.text,
                              font: {
                                 fontSize: '8dp'
                                },
                    height: 'auto',
                    left: 80,
                    top: '15dp',
                    color: '#00f',
                    touchEnabled: false
                });

                nickLabel = Ti.UI.createLabel({
                    text: '"' + tweets.created_at + '"',
                    font: {
                         fontSize: '8dp',
                        textAlign: 'right'
                    },
                    height: 'auto',
                    right: 0,
                    bottom: '2dp',
                    color: '#999',
                    touchEnabled: false
                });

                row.add(image);
                row.add(nameLabel);
                row.add(textLabel);
                row.add(nickLabel);

                tableData.push(row);
            }

            table.setData(tableData);
             } 

     4d. Write code for Table Click event

              table.addEventListener('click', function (e) {

        if (e.rowData.url) {

            var win1 = Titanium.UI.createWindow({
                //title:e.rowData.nameLabel.value,

                url: e.rowData.url,
                //navbarHidden: false,
                modal: true, // 'back' goes to previous window but no OptionMenu
                iurl: e.rowData.iurl,
                iname: e.rowData.iname,
                itext: e.rowData.itext,
                idate: e.rowData.idate,
                id: e.rowData.id
            });

            win1.open();
        }

            });


 5. Display the data in resultwindow.js as you like to display.
    sample code for getting data from win object in resultwindow.js
    var win = Ti.UI.currentWindow;  //you should write this line at first in resultwindow.js
     var iname=win.iname;

6. Go to Runas and select android Emulator
 

Thank you......