Friday 5 October 2012

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



      

Monday 27 August 2012

Appcelerator Titanium Introduction


-->
Creating Titanium Mobile Project
  1. Open Appcelerator Titanium Studio
  2. select or create workspace click ok
  3. File -->New-->Titanium Mobile Project
  4. Give Appname and AppID and click Finish
Basic things should be known…. Before we start

The Titanium Mobile Project folder contains following necessary files. You should be known those files and its purpose.
  1. Resource Folder
    1. Folders for each target platform (eg. Android, iPhone)
    2. App.js
  2. Build.log
  3. CHANGELOG.txt
  4. License
  5. License.txt
  6. Readme
  7. Manifest
  8. Tiapp.xml
Resource Folder

Resource folder contains all of your project resources in specific folders. For example each targeted platform of your mobile apps have separate folders and you can place your source and images on that folders.
App.js

This is “Start Point” of your app. This means it act as Main function of your app (eg. Main() in c, cpp and java). you’re going to put your code here. Start by editing your application's app.js to make your first mobile project using Titanium

Build.log

This file save the log information whenever your build your project in a particular system. And you must delete it before you are deploy into mobile device or try to run in another system.

CHANGELOG.txt

Place your change log text here. This file will be incorporated with your app at package time.

License

copyright 2008-2012 Appcelerator, Inc. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
License.txt
Place your license text here. This file will be incorporated with your app at package time.

Manifest

It contains basic information about your project such as appname, appid, publisher… etc..

Readme

You can put the user instruction about running your project such as pre-requisites and user manual.

Tiapp.xml

This is a configuration file. It have basic configuration information in xml format. You add/remove your own configuration here. Be careful while you’re editing this file it causes error if you do wrong with this file. For example if you think your app only run in landscape not in portrait then you can set it in tiapp.xml. (Don’t worries we will see later how do that).

Now let start the coding…

Wait…. Where you are starting to write code…….? That’s right open app.js file.
app.js file not an empty… it have some predefined coding… In app.js by default they created one tapgroub, two tabs, two windows and two labels. First, you just try to understand those coding. 

Trace the coding:

-->
Tab group is container object that holds an many no of tabs.
Now look at the hierachy of the colntrols...
label added into window
window object added in tab object
tab added into tabgroup...

-->
// this sets the background color of UIView
 
Titanium.UI.setBackgroundColor('#000');

// create tab group

var tabGroup = Titanium.UI.createTabGroup();

//create window object
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});

//create tab object
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1 //add window object to tab here
}); 
 
//create a label object
var label1 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 1',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win1.add(label1); // add label into window
tabGroup.addTab(tab1); // add tabs
tabGroup.open(); // open tab group
similarly we can create and add many tabs in tabgroup. Now the testing time. Run your code.
Run the project in Android Emulator
Go to Run --> run as--> Android Emulator