×
Namespaces

Variants
Actions

How to Create a Stock Widget using Webservices

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleCompatibility
Platform(s):
Symbian
Article
Created: raheal_akh (13 Sep 2008)
Last edited: hamishwillee (10 Oct 2012)

Contents

Introduction

We are going to fetch Stock Symbol information from a Webservice and display it on the screen in this article. Figure 1.0 is the activity diagram for the widget.

Diagram.png Figure 1.0

Creating HTML/Form Elements

<body bgcolor="#ffffff">
<form name="htmlForm" method="POST" action="javascript:formSend();">
Enter Stock Symbol:<br />
<input type="text" name="sendField" value="" /><br />
<input type="submit" value="Send" /><br />
<br />
Stock Details:<br />
<p><b>Name: </b><span id="name"></span><br />
<b>Current: </b><span id="current"></span><br />
<b>Change: </b><span id="change"></span><br />
</body>

Creation of the Form is straight forward. However, the important thing to notice is usage of <Span> tag instead of <Div> tag. Every <Span> tag is assigned an ID. We will use this ID to place the data later.The <Span> tag and <div> tag serves the same purpose only that <Div> tag adds a line break whereas <Span> tag puts the results on the same line which is our requirement for this widget.

CSS - Style Sheet

body {
background-color: rgb(0, 120, 0);
}
 
 
#name {
font-size: 0.8em;
color: Black;
}
 
#current {
font-size: 0.8em;
color: Black;
}
 
#change {
font-size: 0.8em;
color: Black;
}

Accessing Webservice and Retrieving Data (Javascript)

var xmlhttp;
function formSend() {
xmlhttp=null;
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/stockquote.asmx/GetQuote?symbol="+document.htmlForm.sendField.value, true);
httpReq.send(null);
 
httpReq.onreadystatechange = function()
{//Call a function when the state changes.
if(httpReq.readyState == 4)
{
if(httpReq.status==200)
{
//Server response - responseXML -> XML, responseText -> Text
var response = httpReq.responseText;
//String manipulation
var temp = response.indexOf("Symbol&gt;"); //location of <Symbol>
var temp2 = response.indexOf("&lt;/Symbol"); //Location of </Symbol>
var str = response.substr(temp+10,temp2-temp-10);//<Symbol>?</Symbol>
document.getElementById('name').innerHTML = str;
 
temp = response.indexOf("Last&gt;"); //Location of <Last>
temp2 =response.indexOf("&lt;/Last"); //Location of </Last>
str = response.substr(temp+8,temp2-temp-8); //<Last>?</Last>
document.getElementById('current').innerHTML = str;
 
temp = response.indexOf("Change&gt;"); //Location of <Change>
temp2 =response.indexOf("&lt;/Change"); //Location of </Change>
str = response.substr(temp+10,temp2-temp-10); //<Change>?</Change>
document.getElementById('change').innerHTML = str;
}
else
{
alert("Error - Server May be Down" );
}
}
}
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}

XMLHttpREquest (XHR) is an API that can be used by JavaScript and other web browser scripting languages to transfer XML and other text data between a web server and a browser. Though it can do synchronous fetches, it is almost always asynchronous, due to the greater UI responsiveness. Besides XML, XMLHttpRequest can be used to fetch data in other formats such as HTML, JSON or Plain text. For demonstration purpose data is retrieved as Plain text to show string manipulation capabilities in Javascript.

ID in the document.GetElementById('ID').innerHTML is used for placement of information in specific place within HTML. We use <span> ID for data placement.

Final Output

Finaloutput.jpg

Source Code Download

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

This page was last modified on 10 October 2012, at 06:05.
41 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×