Revision as of 07:16, 8 February 2012 by hamishwillee (Talk | contribs)

How to create a Country-Info Widget (WRT)

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleCompatibility
Created: raheal_akh (30 Sep 2008)
Last edited: hamishwillee (08 Feb 2012)



Country Specific Information is available for every country of the world. This widget includes information such as country's code, currency name and currency code. This information comes in handy at all times and all user enters in is the country's name. Below is a process diagram.


Creating HTML/Form Elements

<body bgcolor="#ffffff">
<form name="htmlForm" method="POST" action="javascript:formSend();">
Country Name: <input type="text" name="countryNameFld" value="" /><br />
<input type="submit" value="Inquire" /><br /> <br />
<p>Country Name : <b> <span id="countryName"></span></b><br />
Country Code : <b> <span id="countrycode"></span></b><br />
Currency  : <b> <span id="currency"></span></b><br />
Currency Code: <b> <span id="currencyCode"></span></b><br />

CSS - Style Sheet

body {  
#countryName {
font-size: 1.1em;
color: Blue;
#countrycode {
font-size: 1.1em;
color: Blue;
#currency {
font-size: 1.1em;
color: Blue;
#currencyCode {
font-size: 1.1em;
color: Blue;

Java Script

var xmlhttp;
function formSend() {
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Mozilla, etc.
xmlhttp=new XMLHttpRequest();
else if (window.ActiveXObject)
{// code for IE5, IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (xmlhttp!=null)
var httpReq = null;
httpReq = new XMLHttpRequest();
httpReq.open("GET", "http://www.webservicex.net/country.asmx/GetCurrencyByCountry?CountryName="+document.htmlForm.countryNameFld.value, true);
httpReq.onreadystatechange = function()
{//Call a function when the state changes.
if(httpReq.readyState == 4)
var response = httpReq.responseText; //store XML as String
var temp = response.indexOf("Name&gt;"); // Name> Tag '8 Char String'
var temp2 = response.indexOf("&lt;/Name"); // /Name>
var str = response.substr(temp+8,temp2-temp-8);
document.getElementById('countryName').innerHTML = str;
temp = response.indexOf("CountryCode&gt;"); // CountryCode> '15 Char String'
temp2 =response.indexOf("&lt;/CountryCode");
str = response.substr(temp+15,temp2-temp-15);
document.getElementById('countrycode').innerHTML = str;
temp = response.indexOf("Currency&gt;");
temp2 =response.indexOf("&lt;/Currency");
str = response.substr(temp+12,temp2-temp-12);
document.getElementById('currency').innerHTML = str;
temp = response.indexOf("CurrencyCode&gt;");
temp2 =response.indexOf("&lt;/CurrencyCode");
str = response.substr(temp+16,temp2-temp-16);
document.getElementById('currencyCode').innerHTML = str;
alert("Error - Server May be Down" );
alert("Your browser does not support XMLHTTP.");

String manipulation part may seem tricky at first. However, the whole point is to get the encapsulated string between two consecutive XML tags. Firstly, we locate the 'start' and 'end' index for each XML tag. The indexOf() function retrieves index of 1st Character in the look up string, therefore it shall be accounted for in the substr() function. Moreover, subStr() function takes in two arguments (Starting Location, length of chars).

Final Output


Source Code Download

The source code files are available for download: Media:CurrencyWidget.zip


How to Create a Stock Widget using Webservices


--raheal_akh 23:15, 30 September 2008 (EEST) RAHEAL AKHTAR

55 page views in the last 30 days.