How to Create a Stock Widget using Webservices
From Forum Nokia Wiki
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.
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>"); //location of <Symbol> var temp2 = response.indexOf("</Symbol"); //Location of </Symbol> var str = response.substr(temp+10,temp2-temp-10);//<Symbol>?</Symbol> document.getElementById('name').innerHTML = str; temp = response.indexOf("Last>"); //Location of <Last> temp2 =response.indexOf("</Last"); //Location of </Last> str = response.substr(temp+8,temp2-temp-8); //<Last>?</Last> document.getElementById('current').innerHTML = str; temp = response.indexOf("Change>"); //Location of <Change> temp2 =response.indexOf("</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
Source Code Download
The source code files are available for download: Media:StockWidget.zip
Author
--NINJA 14:56, 13 September 2008 (EEST) RAHEAL AKHTAR
Related Discussions
| Thread | Thread Starter | Forum | Replies | Last Post |
|---|---|---|---|---|
| Editor & text fields | basarim | General Symbian C++ | 0 | 2004-02-19 10:20 |
| Beta: S60 WRT Plug-in for Aptana | uptian | WRT Widget Development | 15 | 2008-11-23 21:03 |
| Developing GUI Front End for MIDP 2.0 | earamsey | Mobile Java General | 0 | 2005-08-16 19:00 |
| Please use this thread to give your feedback about Mobile Web Server. | iketo | Mobile Web Server | 21 | 2008-08-20 11:19 |
| Location based services in widgets | EvgeniyA | WRT Widget Development | 1 | 2008-04-11 08:50 |
