From Symbian Developer Community

Recipe
	Amount of time required: 5 minutes Required libraries: N/A Required header files: N/A PlatSec Capabilities: N/A Compatibility: S60 3rd Edition FP2, S60 5th Edition v1.0 Comes with Code: File:LoadFileWidget.wgz

Asynchronous JavaScript and XML (AJAX) is commonly used for data exchange with servers in Web Runtime Widgets. However, the same mechanism can be used to load data files from the widget archive (WGZ). This example demonstrates how.

The key idea is using relative URLs for AJAX calls. Essentially, specifying

 
var ajaxUrl = "world-time.xml";
 

means that Ajax call using this URL will look for world-time.xml in the WGZ archive root. Referring to files down the directory structure is equally easy. For example the following code will load the same file from data directory.

Note This example loads the file asynchronously

 
 
// XMLHttpRequest object
var ajaxRequest;
 
// URL to pull XML from
var ajaxUrl = "data/world-time.xml";
 
// Called when the widget is loaded.
function init()
{
	uiManager = new UIManager();
 
	// Init menu and soft keys
	if ( window.widget ) {
		widget.setNavigationEnabled(false);
        	window.menu.showSoftkeys();
	}
 
	// Issue the original request
	loadFromFile();
}
 
// Issues the AJAX request
function loadFromFile(){
 
	// Send AJAX request
	ajaxRequest = new Ajax();
	ajaxRequest.onreadystatechange = function(){
		ajaxCallBack();
	};
	ajaxRequest.open('GET', ajaxUrl, true);
	ajaxRequest.send(null);	
 
	// Bring up notification so the user knows something is happening
	uiManager.showNotification(-1, "wait", "Loading data...", -1);
}
 
function ajaxCallBack() {
	if (ajaxRequest.readyState == 4 ) {
		// Parse the data
		. . .
	}
}
 

Asynchronous loading is generally preferable because it allows the application to remain responsive while data is loaded. When loading very small files however, it may be simpler to user synchronous loading. Switching to synchronous loading is achieved by modifying the call to ajaxRequest.open to pass in async value false as the third parameter. Here is the full example:

 
// Issues the AJAX request
function loadFromFile(){
 
	// Send AJAX request
	ajaxRequest = new Ajax();
	ajaxRequest.onreadystatechange = function(){
		ajaxCallBack();
	};
	ajaxRequest.open('GET', ajaxUrl, false);
	ajaxRequest.send(null);	
 
	// Data has been loaded, parse it
	var elements = ajaxRequest.responseXML.getElementsByTagName("data");
	. . .
}
 

Full source and installable demo widget is available here : File:LoadFileWidget.wgz.

Comments

Sign in to comment…