Loading Remote JPG images in Android - Appcelerator Titanium

Hi....

When I trying to Load the set of JPG images from json data (remote Images) the following error occurred.

 
Bitmap bounds could not be determined. If bitmap is loaded, it won't be scaled.

but its working fine in iOS. I started the research in INTERNET to fix this problem. Two solutions suggested by most of the people. They are,

1. Disabled FastDev in Android
2. Increase the VM Heap memory size.


but These are not solve my Problem. Finally I found one alternate solution for loading Remote JPG images in Android.

I am creating ImageLoader.js file for loading images....

ImageLoader.js

  
exports.LoadRemoteImage = function (obj,url) {
   var xhr = Titanium.Network.createHTTPClient();

xhr.onload = function()
{
 Ti.API.info('image data='+this.responseData);
 obj.image=this.responseData;
 
};
// open the client
xhr.open('GET',url);

// send the data
xhr.send();
}

For using this you need to pass imageView object and RemoteImageUrl.

app.js

 
var ImageLoader = require('ImageLoader');
var self = Ti.UI.createWindow({
     backgroundColor:'#ffffff',
  navBarHidden: true,
  fullscreen:true,
  layout:'horizontal'
  
 });
 
for(var i=0;i<5;i++) 
 {
var fullImage = Titanium.UI.createImageView({
    left: 10,
    top : 10,
    width : 100,
    height: 100,
    image:''
   });
   self.add (fullImage);
 
 ImageLoader.LoadRemoteImage(fullImage,'http://ic.i.tsatic-cdn.net/1213/105_99/29fce_1213904.jpg');
 
}

Finally my problem is solved..... Now Remote JPG Images Loaded fine in android...

I was created Thumbnail album and FullView album by using this ImageLoader.js

But You cannot pass any other object and can not set as backgroundImage. because when you are trying to load Image through HTTPClient, the image return as blob object. In iOS backgroundImage propert supports blob but not in Android.

Thankyou...........

Album Creation using scroll view and scrollableView in Titanium

Hi......

In this post we are going to create Image Album for both thumbnail and fullview.

Design Goal:

            The list of images are displayed in thumb size which are loaded into scroll view. when user clicks the particular Thumbnail Image the Image is loaded into Fullview mode.


Start to Code:

           1. First create a window object and add a scroll view that should by in  "horizontal' Layout and width is "100%".

            2. Now construct the for loop and Load Images in scrollView.

                          
                            var self = Ti.UI.createWindow({
                             backgroundColor:'#ffffff',
                             navBarHidden: true,
                              fullscreen:true,
                              width:'100%'
                                  
                            });
                           var ThumbAlbum=Ti.UI.createScrollView({
                                  layout:'horizontal',
                                  width:'100%'
                           });
                           self.add(ThumbAlbum);
                           var totalcount=5;
                           for(var i=0;i<totalcount;i++)  
                              {
                                 var thumb = Titanium.UI.createImageView({
                                 left: 10,
                                  top : 10,
                                 width : 100,
                                 height: 100,
                                  imageID:i,
                                  image:''http://ic.i.tsatic-cdn.net/1213/105_99/29fce_1213904.jpg''
                              });
                        ThumbAlbum.add (thumb);
                           }
                          self.open();
                  3. Next write fullImageView code in imageview's click event.

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

                                              var FullView=require("fullviewWindow");

                                               var win=FullView(e.source.imageID,e.source.image,totalcount);

                                                win.open();

                                 });
                     4. Now create fullviewWindow.js file
                            function fullviewWindow (imageID,imageurl,totalcount)
                             {
                               var self = Ti.UI.createWindow({
                             backgroundColor:'#ffffff',
                             navBarHidden: true,
                              fullscreen:true,
                              width:'100%'
                                  
                            });
                         var headerLbl=Ti.UI.createLabel({
                               width:'100%',
                                height:30,
                                backgroundColor:'#000',
                                text:  imageID+' of ' +totalcount
                          });
                        var fullimage = Titanium.UI.createImageView({
                                 left: 0,
                                  top : 30,
                                 width : '100%',
                                 height: '90%',
                                 image:imageurl
                              });
                              self.add(fullimage); 
                              self.open();
                              
                             }
                           module.exports=fullviewWindow;

                   5. Run the Program in Emulator/Simulator
                
Thankyou......
                                 

          

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......