Titanium alloy caching in Android / iOS? Or keeping old views
Can we cache dynamically generated lists or browse until web services are called in the background. I want to achieve something like a FaceBook app. I know it's possible on Android Core, but wanted to try it on Titanium (Android and IOS).
I would explain this even further, I have an application that has a list. Now when I open for the first time it will obviously go to the webservice and create a dynamic list.
Now I close the application and reopen the application. The old list should be visible until the web service provides any data.
source to share
Yes Titan can do it. You should use a global type variable Ti.App.myList
if it is just array / a list / a. If you need to store more complex data such as images or databases, you should use the built-in file system. The Appcelerator website has some really good documentation .
The procedure for you will be as follows:
- Upload your data for the first time
- Save your data your way (global variable, filesystem)
- In the future, the app will start reading your local list / data and displaying it until your sync is successful.
You should consider implementing some variable to check if any update is required to minimize network usage (this saves energy and provides a better user experience if users' internet connection is slow).
if (response.state == "SUCCESS") {
Ti.API.info("Themes successfully checked");
Ti.API.info("RESPONSE TEST: " + response.value);
//Create a map of the layout names(as keys) and the corresponding url (as value).
var newImageMap = {};
for (var key in response.value) {
var url = response.value[key];
var filename = key + ".jpg"; //EDIT your type of the image
newImageMap[filename] = url;
}
if (Ti.App.ImageMap.length > 0) {
//Check for removed layouts
for (var image in Ti.App.imageMap) {
if (image in newImageMap) {
Ti.API.info("The image " + image + " is already in the local map");
//Do nothing
} else {
//Delete the removed layout
Ti.API.info("The image " + image + " is deleted from the local map");
delete Ti.App.imageMap[image];
}
}
//Check for new images
for (var image in newImageMap) {
if (image in Ti.App.imageMap) {
Ti.API.info("The image " + image + " is already in the local map");
//Do nothing
} else {
Ti.API.info("The image " + image + " is put into the local map");
//Put new image in local map
Ti.App.imageMap[image] = newImageMap[image];
}
}
} else {
Ti.App.imageMap = newImageMap;
}
//Check wether the file already exists
for (var key in response.value) {
var url = response.value[key];
var filename = key + ".png"; //EDIT YOUR FILE TYPE
Ti.API.info("URL: " + url);
Ti.API.info("FILENAME: " + filename);
imagesOrder[imagesOrder.length] = filename.match(/\d+/)[0]; //THIS SAVES THE FIRST NUMBER IN YOUR FILENAME AS ID
//Case1: download a new image
var file = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, "/media/" + filename);
if (file.exists()) {
// Do nothing
Titanium.API.info("File " + filename + " exists");
} else {
// Create the HTTP client to download the asset.
var xhr = Ti.Network.createHTTPClient();
xhr.onload = function() {
if (xhr.status == 200) {
// On successful load, take that image file we tried to grab before and
// save the remote image data to it.
Titanium.API.info("Successfully loaded");
file.write(xhr.responseData);
Titanium.API.info(file);
Titanium.API.info(file.getName());
};
};
// Issuing a GET request to the remote URL
xhr.open('GET', url);
// Finally, sending the request out.
xhr.send();
}
}
In addition to this code that needs to be placed in the method for a successful API call, you need a global variable Ti.App.imageMap
to store the keymap and corresponding URLs. I think you need to modify the code a bit to suit your needs and your project, but it should give you a good starting point.
source to share