Scienario:
I have a window, and I am fetching data remotely over a http protocol. What is the best way in titanium to prevent the window displaying the data prematurely.
In many mobile apps, they get around this problem by having a load indicator , everytime you open a window, how can you do this in titanium?
$.window.addEventListener('load',function(){
..
//some text
..
});
I have tried this, but I am not sure what to do next, as my async methods are fired outside of it. So not sure if this will have any affect.
thanks
Translating this from jquery:
$.ajaxSetup({
beforeSend: function() {
// show loading overlay gif
$("#Loading").show();
},
complete: function() {
// hide loading overlay gif
$("#Loading").hide();
}
});
$.ajax({
type: "GET",
url: url,
data: param = "",
contentType: "application/json; charset=utf-8",
success: doSomething,
error: errorFunction
});
};
Ajax setup means every time I fire an Ajax request, an loading overlay will appear on the screen until the response is received. How can I achieve the same thing in titanium?
Update:
Is this a good way to do it?
Albums.JS
function getAlbumCovers() {
//first check to see if profile pics already exist in user model
//create a collection
var usersCollection = Alloy.Collections.user;
facebookModule.requestWithGraphPath('me/albums', {
fields : 'id,name,cover_photo,count,created_time'
}, 'GET', function(graphResp) {
//show view indicator before data is fetched
$.view_indicator.visible = true;
if (graphResp.success) {
if (graphResp.result) {
var rows = [];
var data = JSON.parse(graphResp.result).data;
for (x in data) {
Ti.API.debug(JSON.stringify(data[x]));
if (data[x].name == "Profile Pictures") {
var row = Titanium.UI.createTableViewRow({
width : '100%',
height : 'auto'
});
var image = Titanium.UI.createImageView({
image : "https://graph.facebook.com/" + (data[x].cover_photo || 0) + "/picture?access_token=" + Ti.Facebook.accessToken,
top : 0,
left : 0,
width : 100,
height : 100
});
var title = Titanium.UI.createLabel({
text : String.format("%s (%d)", data[x].name, data[x].count),
top : 0,
left : 110,
width : 'auto',
height : 'auto'
});
row.add(image);
row.add(title);
rows.push(row);
} else {
break;
}
}
//set table rows
$.tableview.setData(rows);
//end
}
$.view_indicator.visible = false;
} else {
if (e.error) {
alert(e.error);
} else {
alert("Unkown result");
}
}
});
}
Albums.XML
<Alloy>
<Window id="win" backgroundColor="white">
<LeftNavButton>
<Button id="lbtn" onClick="rightButtonClicked" />
</LeftNavButton>
<RightNavButton>
<Button id="btnRight" onClick="rightButtonClicked" />
</RightNavButton>
<View id = "view_indicator">
<ActivityIndicator id="ind" />
</View>
<TableView id="tableview"></TableView>
</Window>
</Alloy>
App.tss
//overlay
//loading overlay to cover full screen
"#view_indicator": {
backgroundColor : '#000',
opacity : 0.6,
width : '100%',
height : '100%',
borderRadius : 5,
zIndex: 20,
visible : false
},
"#ind": {
style : Ti.UI.iPhone.ActivityIndicatorStyle.BIG,
visible : true
},
In this instance I have made a call to Facebook api, and placed $.view_indicator.visible = true;
just before if (graphResp.success) {
function. The loading overlay is removed once if (graphResp.success) {
is hit.
The idea is, the end user has to wait for the table to be populated before seeing the tableview.
I am not sure if this is the correct way of doing this. Could someone confirm, cheers.