AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=112&pId=-1
Building a Yahoo stock quote ticker
page
by Jason Perry
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 52529/ 48

Summary

This article will take you through a step-by-step guide on how to create a Yahoo Stock Quote Ticker using ASP.Net and Flash Remoting.

This tutorial requires prior knowledge of ASP.Net web services using C# and Flash MX as well as Flash UI component set 2 and Flash Remoting installed.

Yahoo Stock Quote Ticker Overview

The Yahoo Quote Ticker consists of an ASP.Net web service that connects to Yahoo quotes and grabs detailed data on stocks. The application also features a Flash-based user interface that scrolls through each stock using the Flash Ticker component.

This application follows n-tier application design by dividing the application into data, business, and presentation logic. This way a designer can focus on building usable interfaces and leave the structure of the backend to the developers.

Building the Web Service

The first step in developing the Yahoo Quote Engine is creating the web service. The web service will be responsible from grabbing the data from Yahoo and parsing this to create a friendly structure. In this application I'll use ASP.Net with C#, but web services can easily be developed using VB.Net, Java and Code fusion.

We can start our web service by creating a file named YahooQuoteWebService.asmx in the editor of your choice. I'll use DreamWeaver MX.

Once the file is created we'll declare the contents of the file as a web service using C# and also provide the class name with its namespace.

<@ WebService Language="c#" class="outthebox.web.services.YahooQuoteWebService" >

Next, let's build the structure for our web service by defining the namespaces to use, providing a namespace where our web service will sit, and defining our service as a public class that implements the WebService object.


using System.Collections;
using System.Web.Services;
using System.Net;
using System.IO;

namespace outthebox.web.services
{

	[WebService(Namespace="outthebox.web.services")]
	public class YahooQuoteWebService : WebService
	{
	}
}

With our class declared we can implement the one and only method for this web service GetQuote( string ). This method will handle the logic involved in getting our quotes from Yahoo.


[WebMethod(Description="Using stock symbol gets delayed stock information from Yahoo.",EnableSession=false)]
public string[] GetQuote( string symbol )
{
	string url;  //stores url of yahoo quote engine
	string buffer;
	string[] bufferList;
	WebRequest webRequest;
	WebResponse webResponse;
	
	url = "http://quote.yahoo.com/d/quotes.csv?s="+symbol+"&d=t&f=sl1d1t1c1ohgvj1pp2wern";
		
	webRequest = HttpWebRequest.Create( url );
	webResponse = webRequest.GetResponse();
	using( StreamReader sr = new StreamReader( webResponse.GetResponseStream() ) )
	{
		buffer = sr.ReadToEnd();
		sr.Close();
	}

	buffer = buffer.Replace( "\"", "" );
	bufferList = buffer.Split( new char[] {','} );
	return bufferList;
}

The above is a lot of code so I'll take you through the implementation chunk-by-chunk.

First we have to create a connection to Yahoo and grab the quotes. The following code grabs a comma delaminated file from Yahoo using the symbol variable and stores the results in a string variable named buffer.


url = "http://quote.yahoo.com/d/quotes.csv?s=" + symbol + "&d=t&f=sl1d1t1c1ohgvj1pp2wern";

Creates a connection to the url and stores our results in the string buffer array.
webRequest = HttpWebRequest.Create( url );
webResponse = webRequest.GetResponse();
using( StreamReader sr = new StreamReader( webResponse.GetResponseStream() ) )
{
	buffer = sr.ReadToEnd();
	sr.Close();
}

Once we have the results from Yahoo we need to break it up and store the results in a string array. This code calls the string method Split( char[] ) to separate the buffer string into chunks using the comma as the delaminator. The method returns a string[] (string array) with quotes details.


buffer = buffer.Replace( "\"", "" );
bufferList = buffer.Split( new char[] {','} );
return bufferList;

Now that you have a working web service, place it on your web server and go to the address in a web browser. You should see Microsoft's web service page with information on how to access this web service. If you don't see the page make sure ASP.Net is installed properly on your web server and check your code for errors.

Connecting Flash to the Web Service

In order for your flash application to communicate with the web service, you need to install the Flash remoting package from Macromedia. Also, it's very important that you place the flashgateway.dll file (included with Flash remoting for ASP.Net) into your web server's bin folder and make the below changes to your web.config file. These changes will allow Flash to determine what calls are meant for your flash application and call the proper web service. You'll also need to create a blank file named gateway.aspx and place it on your web server. I placed this file in the same location as my web service, but it's up to you.


<httpModules>
     <add name="GatewayController" type="FlashGateway.Controller.GatewayController,flashgateway" />
</httpModules>

To establish the connection to our web service we must include the NetServices.as file. This file, included with Flash remoting, will implement the classes necessary to create a wrapper to our service.

Then we can create a connection to the web server gateway. In your code you will replace the //gateway.aspx and //YahooQuoteWebService.asmx?wsdl with the address of your web server and path to the gateway.aspx and YahooQuoteWebService.asmx files.


#include "NetServices.as"

////////////////////////////////////////////
// Inits Web Service
////////////////////////////////////////////

	//creates connection to ASP.Net web service
	//should never ever  run more than once!!
if( init == null )
{
		//insures this code block is only run once
	init = true;
	
		//sets the gatway will always be this
	NetServices.setDefaultGatewayURL("http:////gateway.aspx");
	gatewayConnnection = NetServices.createGatewayConnection();

		//gets the Yahoo quote service and sets instance
		//uses WSDL to create proxy dll file
	YahooQuoteWebService = gatewayConnnection.getService("http:////YahooQuoteWebService.asmx?wsdl", this);

}

We need to develop call back functions and wrappers for our web service methods. When we call the GetQuote( string ) method on our web service, Flash will connect to the service and send the response back to _Result( result ) or _Status( error ). If a error occurs while trying to connect to the service, the _Status( error ) call back will be used, otherwise _Result( result ) will be called with the data from the service in the result object. Our result object is an array of strings so we can access this array like we would any Flash array object. NOTE: For a full list of result objects supported by Flash, see the Flash Remoting documentation.


////////////////////////////////////////////
// Call Back Function Wrappers
////////////////////////////////////////////

	//gets quote data from web service
function GetQuote( symbol )
{
	YahooQuoteWebService.GetQuote( symbol );	
	trace( "getting " + symbol + " from yahoo quote web service" );
}


////////////////////////////////////////////
// Call Back Functions
////////////////////////////////////////////

	//call back function for GetQuote method
function GetQuote_Result( result )
{
	buffer = result[ 0 ] + " " + result[ 1 ] + " " + result[ 4 ];
	trace( buffer );
}

	//call back function tracks status of GetQuote method
function GetQuote_Status( error )
{
	trace( error.details );
}

After building our call back functions we can test our application by inserting the below lines of code at into our Action Script. This code will get the symbol, current value, and change data for Microsoft and display it in your trace window.


GetQuote( "MSFT" );
Stop();
Creating the Flash Ticker Component

Now that the logic to grab our quotes is in place, we need to build the actual ticker. To do this you must install Flash UI Components 2 from Macromedia and drag and drop the Ticker object into the main movie clip.

Next select your new ticker object and select the parameters tab on the properties bar. This will let us make the below customizations for the desired look and feel.

  • Speed = 15
  • Spacing = 20
  • Orientation = Horizontal
  • Scroll Direction = Decremental
  • Frame Width = 0
  • Highlight Color = #000066

You should also create a box with color #000066 behind the ticker for our background and reset the document size to 325 * 25. When done your ticker should look like the one below.

With the look down, let's remove the test code on the main movie clip, GetQuote( "MSFT" ), and replace it with the below code. This will allow us to enter as many stock quotes as we like at once.


////////////////////////////////////////////
// variables
////////////////////////////////////////////

quoteArray = new Array( "MSFT", "COKE", "SUNW", "MACR", "AAPL", "CTL", "AMD", "INTC", "DELL", "CSCO", "YHOO");
stop();

Next, let's change the instance name of our ticker to stockTicker and insert this code into the stockTicker movie clip. This code will loop through the quoteArray array and insert each quote into our ticker when it loads.


	//sets interval for timer
onClipEvent( load )
{
		//sets first set of stocks
	_root.quoteArray.sort();
	for( quotes in _root.quoteArray )
	{
		_root.GetQuote( _root.quoteArray[quotes] );
	}
	
	this.setDataAllWidth( 0 );
	this.sortItemsBy( "text", "ASC" );
}

We're almost done, but first we need to change our GetQuote_Result( result ) call back function to add the quotes into the stockTicker. The stockTicker.addItem method takes a string or TextFormat object and places it into the ticker.


	//call back function for GetQuote method
function GetQuote_Result( result )
{
	buffer = result[ 0 ] + " " + result[ 1 ] + " " +result[ 4 ];
	stockTicker.addItem( { text:buffer, textColor:0xFFFFFF, background:false, bold:true, size:10 } );
}

Test the application and watch the stocks scroll.

Auto-Updating the Flash Ticker

We could stop here, but why not make our ticker auto update? We know that the Yahoo stock data is updated every 20 minutes so let's make our stock ticker check how long its been running and update itself using that interval.

Luckily, Flash has included the getTimer() method, which allows us to get the time in milliseconds our application has been running. With this we can set the current time on the timer and set an interval equal to 20 minutes or (20 * 60000). Now using the ClipEvent( enterFrame ) call back function we can determine if the ticker has been running for 20 minutes and, if so, update the stocks. For those who don't know, the ClipEvent( enterFrame ) is constantly called during the life time of an Flash Application, making it a good place for constant data checks.

To implement the timer, make the following code changes to the stockTicker movie clip.


	//sets interval for timer
onClipEvent( load )
{
	var current = getTimer();
	var interval = (20 * 60000);  //every 10 minutes syncs stock data
	
		//sets first set of stocks
	this.removeAll();
	_root.quoteArray.sort();
	for( quotes in _root.quoteArray )
	{
		_root.GetQuote( _root.quoteArray[quotes] );
	}
	
	this.setDataAllWidth( 0 );
	this.sortItemsBy( "text", "ASC" );
}

	//checks to see if timer has elapsed
onClipEvent( enterFrame )
{
			//time has elapsed
	if( (current + interval) <= getTimer() )
	{
		current = getTimer();

			//gets new data fro stocks
		this.removeAll();
		_root.quoteArray.sort();		
		for( quotes in _root.quoteArray )
		{
			_root.GetQuote( _root.quoteArray[quotes] );
		}

		this.setDataAllWidth( 0 );
		this.sortItemsBy( "text", "ASC" );
	}
}
Conclusion

Conclusion

As you can imagine, this is only the tip of the iceberg. The possibilities of combining the power of ASP.Net for data and business logic with the rich real time interface of Flash can make the most complex web applications simple to use. If you have any questions or comments feel free to contact me at jason@jasonmperry.com and also download the source files here.


Product Spotlight
Product Spotlight 

©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-04-19 8:37:17 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search