Appcelerator Titainium Activity Indicator During Json Load - appcelerator

Question

how to give activity indicator while load json??here my code,,
i want to give activity indicator during my apps reading json :)
data will load with 20 section length,,(from json) and when my apps try to read it, i want to give activity indicator that make user not waiting in a blank screen :)
// Create variable "win" to refer to current window
var win = Titanium.UI.currentWindow;
///window startup
///////////
function loadTweets() {
// Empty array "rowData" for our tableview
var rowData = [];
// Create our HTTP Client and name it "loader"
var loader = Ti.Network.createHTTPClient({
onerror : function(e) {
alert('Koneksi Time Out');
},
timeout : 30000
});
// Sets the HTTP request method, and the URL to get data from
loader.open("GET", "http://www.sportku.com/api/get_latest_news/" + win.id);
// Runs the function when the data is ready for us to process
loader.onload = function() {
var tweets = eval('(' + this.responseText + ')');
for(var i = 0; i < tweets.count; i++) {
var tweet = tweets.posts[i].excerpt;
// The tweet message
var user = tweets.posts[i].title;
// The screen name of the user
var avatar = tweets.posts[i].thubmnail;
// The profile image
var url = tweets.posts[i].url;
// Create a row and set its height to auto
var row = Titanium.UI.createTableViewRow({
height : 'auto'
});
// Create the view that will contain the text and avatar
var post_view = Titanium.UI.createView({
height : 'auto',
layout : 'vertical',
top : 5,
right : 5,
bottom : 5,
left : 5
});
// Create image view to hold profile pic
var av_image = Titanium.UI.createImageView({
image : avatar, // the image for the image view
top : 0,
left : 0,
height : 58,
width : 58
});
post_view.add(av_image);
// Create the label to hold the screen name
var user_lbl = Titanium.UI.createLabel({
text : user,
left : 64,
width : 226,
top : -58,
bottom : 2,
height : 44,
textAlign : 'left',
color : 'black',
font : {
fontFamily : 'Arial',
fontWeight : 'bold',
fontSize : 12
}
});
post_view.add(user_lbl);
// Create the label to hold the tweet message
var tweet_lbl = Titanium.UI.createLabel({
text : tweet,
left : 64,
top : 0,
bottom : 2,
height : 'auto',
width : 226,
textAlign : 'left',
font : {
fontSize : 11
}
});
post_view.add(tweet_lbl);
var urls = Titanium.UI.createLabel({
text : url,
});
post_view.add(urls);
// Add the post view to the row
row.add(post_view);
row.hasChild = true;
//row.hasChild=true;
// Give each row a class name
row.className = "item" + i;
// Add row to the rowData array
rowData[i] = row;
post_view.addEventListener('click', function(e) {
var url_output = e.row.children[0].children[3].text;
//alert(url_output);
var webview = Titanium.UI.createWebView({
url : url_output
});
var window = Titanium.UI.createWindow({
backgroundColor : "#fff",
barImage : 'image/navbar.png',
titleImage : 'image/logo.png',
});
window.add(webview);
window.open({
modal : true,
modalTransitionStyle : Ti.UI.iPhone.MODAL_TRANSITION_STYLE_FLIP_HORIZONTAL,
modalStyle : Ti.UI.iPhone.MODAL_TRANSITION_STYLE_FLIP_HORIZONTAL,
});
var buttonImage = [{
image : 'image/share.png',
width : 30,
height : 30
}]
var back = Ti.UI.createButtonBar({
labels : buttonImage,
backgroundColor : 'black',
style : Titanium.UI.iPhone.SystemButtonStyle.BAR
});
back.addEventListener('click', function() {
window.close();
});
window.leftNavButton = back;
});
}
// Create the table view and set its data source to "rowData" array
var tableView = Titanium.UI.createTableView({
data : rowData
});
//Add the table view to the window
win.add(tableView);
};
// Send the HTTP request
loader.send();
}
loadTweets();
i've try to give my code, but always error :),,

Answer 1

What you should do is create the activity indicator before anything else. Activity indicators don't need to be added to a window, you just need to call the show()method, so do that prior to executing the xhr.send() method. than the last line of your onLoad function should execute the indicator.hide() method.