This is a follow-up to a question raised on Twitter.
@BlackBerryDev is it possible to read a csv file from a server in a webworks app?? Please help..
I put together the following sample which is successfully retrieving a sample CSV hosted at:
http://labs.adobe.com/technologies/spry/data/photo
Before getting into the brunt of it, if you encounter any issues or have any questions, by all means feel free to post here.
Let's dive in. The code sample is as follows.
config.xml
<?xml version="1.0" encoding="UTF-8"?> <widget xmlns="http://www.w3.org/ns/widgets" version="1.0.10.857" > <name>Sandbox</name> <author>Oros</author> <content src="index.html"/> <access uri="*" subdomains="true" /> </widget>
I white-listed all URLs in the <access> element, but this can be fine-tuned to specific addresses.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sandbox</title>
<script type="text/javascript">
function log (text) {
document.getElementById("contents").innerHTML = document.getElementById("contents").innerHTML + "<br />" + text;
}
function ready() {
log("Ready.");
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
log("State: " + xmlhttp.readyState + ", Status: " + xmlhttp.status);
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
log("CSV Content:");
log(xmlhttp.responseText);
}
};
log("Open.");
xmlhttp.open("GET", "http://labs.adobe.com/technologies/spry/data/photos.csv", true);
log("Send.");
xmlhttp.send();
log("Sent.");
window.removeEventListener('DOMContentLoaded', ready, false);
}
window.addEventListener('DOMContentLoaded', ready, false);
</script>
</head>
<body>
<div id="contents">Loading.</div>
</body>
</html>
The <body> consists of one <div> that will hold the contents of the CSV. Initially its displayed text is Loading... which should be replaced once the contents are retrieved.
To retrieve the contents, I registered an event listener for the DOMContentLoaded event. Once triggered, the ready function will initiate.
Within ready, I create a new XMLHttpRequest object and set a function to capture the onreadystatechange event. Specifically, I am looking for:
- readystate = 4; and
- status = 200
Essentially, these two mean that everything went okay and, if so, we retrieve the responseText and populate our <div> with the content.
Before sending the request, we also set a few parameters, specifically:
- We are using a GET, not a POST.
- The URL (i.e. CSV) to retrieve.
- true to indicate an asynchronous call; thus requiring the monitor of the onreadystatechange event.
We then send the request and remove our DOMContentLoaded listener to free up some resources. This sample was put together based on the XMLHttpRequest documentation here:
http://www.w3schools.com/ajax/ajax_xmlhttprequest_
Finally, I did add some on-screen logging to allow the monitoring of what is happening:
I tested this out in Ripple, as well as a these simulators:
- 9780 running 6.0.0.534
- 9000 running 5.0.0.900 (Rogers build.)
I also had an MDS-CS simulator running at the time.
Erik Oros
BlackBerry Development Advisor
