 |
Platforms, Frameworks & Libraries »
Windows Presentation Foundation »
General
Intermediate
Sample Application to Integrate Silverlight and ASP.NET AJAXBy Randar PuustThe following is an example of an interesting way to integrate Silverlight and ASP.NET AJAX. The idea is to periodically pull information via ASP.NET AJAX, which is queued up and retrieved by Silverlight. |
Javascript, XML, C# 2.0Vista, .NET 3.0, ASP.NET, Visual Studio, XAML, WPF, WebForms, Ajax, Dev
|
|
Advanced Search |
|
|
|
||||||||||||||||
Silverlight (formerly codenamed Windows Presentation Framework Everywhere) will allow developers to create richer web applications than ever before. We will see a new wave of web based applications that are not only highly usable, but also very visually appealing. Web pages will be able to take advantage of flexible media playback, animation and vector graphic drawing. It will be especially useful on web applications that have a small number of pages, but are used heavily. For example, somebody working in a call center or a broker who is buying and selling stocks all day. This is the reason I chose a stock ticker tape application as my sample. It could be embedded into an existing web page, but provides a better looking ticker than the HTML <MARQUEE> tag could ever hope to achieve.
To make it valuable to users, there needs to be a way to efficiently pull information from corporate servers over the Internet. The latest version of Silverlight supports the CLR, giving access to web services, but there are times where you may not want to use managed code. In this case, you need to use a client side script solution, such as JavaScript. This article will discuss integrating Silverlight (home page) with ASP.NET AJAX (Exposing Web Services to Client Script in ASP.NET AJAX) to create a rich client/server-like application, but through a standard browser.
I should mention that there are other ways of create the same visual experience that this sample provides, but I wanted to use a fairly simple example that people have seen before and to focus on the blending of the two technologies. There will be an ASP.NET AJAX UpdatePanel which is continuously getting new stock information while a Silverlight StoryBoard is presenting the information it retrieves. The key benefits of this solution are:
Originally my goal was to write an article about calling web services using managed code called from Silverlight. When I wrote the first version of this article, Silverlight didn't support managed code. Because of this limitation, I decided to write an article about ASP.NET AJAX integration. In the future, I may write an article that discusses using web services from Silverlight as a comparison of the two techniques.
There are three high level concepts that will make it easier to understand the code.
To give the illusion of continuous motion, the application moves two TextBlocks, which are only partially visible because they are outside the boundary of the Silverlight control. Once it reaches the end, the information from tickerText2 is copied into tickerText1. Then, tickerText2 is updated with new information and the animation is restarted. Theoretically, there isn't any reason we couldn't use a larger number of TextBlocks, but two seems to work well for this example.
ASP.NET AJAX will automatically generate a JavaScript proxy for any web services you register using the <asp:ServiceReference> tag. When the page loads, we use the data returned from this web service to populate the XAML TextBlock with some initial data.
Note: The following diagrams are UML Sequence diagrams. It describes different objects and the messages between them. See the Wikipedia article for a quick overview if needed.
(click to view larger image)
Because there is no guarantee that we will always get data back in time with AJAX, the application uses a ASP.NET TextBox as a queue, which is running within an UpdatePanel. ASP.NET AJAX continuously updates it, while Silverlight periodically pulls data off the queue.
(click to view larger image)
The following are a list of the files that I have created or modified in this sample.
The following is the code that will instantiate the Silverlight plug in. If it has not been installed, it will prompt the user to download and install it.
//contains calls to silverlight.js, example below loads TickerTape.xaml
function createSilverlight()
{
Silverlight.createObjectEx({
source: "TickerTape.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "500",
height: "25",
version: "0.95",
background: "#00000000",
isWindowless: false,
enableHtmlAccess: true },
events: {}
});
}
This is the page that the client will see. It uses both Silverlight to represent the stock ticker and ASP.NET AJAX to retrieve the information from the server. There is a textbox, which is used as a queue. The ASP.NET AJAX code will fill the queue with stock data, which is then pulled off by the JavaScript that populates the Silverlight controls.
The following ASP.NET AJAX code does a few important tasks. By adding the <asp:ScriptManager> control, we have access to the functionality provided by ASP.NET AJAX. This needs to appear on any page that plans to use the controls provided by ASP.NET AJAX. The code also registers the StockUpdate.asmx web service that is called from some JavaScript when the page is first loaded up.
<!-- AJAX code -->
<asp:ScriptManager runat="server" ID="scriptManager">
<Services>
<asp:ServiceReference Path="StockUpdate.asmx" />
</Services>
</asp:ScriptManager>
The following code will periodically call the server side code using AJAX enabled assembly which will populate the NewStockQueue textbox.
<asp:UpdatePanel ID="StockPanel" runat="server">
<ContentTemplate>
<asp:Timer ID="RefreshTimer" runat="server" Interval="3000"
OnTick="RefreshTimer_Tick"> </asp:Timer>
<asp:TextBox ID="NewStockQueue" runat="server" Width="500">
</asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
The XAML is run by the Silverlight plug in. It will show the ticker tape as it scrolls around the screen. The following are two TextBlocks that will contain the stock market data.
<!-- These contain the stock market information that are visible to
the client. -->
<TextBlock x:Name="tickerText1" Canvas.Top="3" FontSize="12"
Foreground="Yellow" FontFamily="Arial Black" Text="" />
<TextBlock x:Name="tickerText2" Canvas.Top="3" FontSize="12"
Foreground="Yellow" FontFamily="Arial Black" Text="" />
A StoryBoard will move the TextBlocks to the left, until they reach the edge of the visible area. Then it will call the RefreshTicker code, which copies the data from tickerText2 into tickerText1, update tickerText2 with new data from the queue and restart the animation.
<!-- This storyboard will animate the text boxes below,
moving them to the left until they hit the end.
Then it will restart, giving the appearance of continuously moving
information-->
<Storyboard x:Name="tickerAnimation" Completed="RefreshTicker" >
<DoubleAnimation x:Name="animationText1"
Storyboard.TargetName="tickerText1"
Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0"
Duration="0:0:16" From="1" To="-550" />
<DoubleAnimation x:Name="animationText2"
Storyboard.TargetName="tickerText2"
Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0"
Duration="0:0:16" From="550" To="0" />
</Storyboard>
This is a very simple web service, that provides access to the MarketManager class. In order to call the web service from JavaScript, ASP.NET AJAX will automatically generate a web proxy, as long as it is declared within a <asp:ServiceReference> tag, as well as the following changes are made to the code behind.
After adding a reference to the System.Web.Extensions assembly in the GAC, add a reference to ASP.NET AJAX namespace.
// This is the ASP.NET AJAX reference we need
using System.Web.Script.Services;
We also have to add a ScriptService attribute to the class.
[WebService(Namespace = "http://randar.name/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class StockUpdate : System.Web.Services.WebService
This is a completely fake class that returns random stocks, along with some information such as prices and trends.
This is the default web.config when you use the "ASP.NET AJAX-Enabled Web Application" template in Visual Studio 2005.
Silverlight enables the creation of rich, visually stunning, and interactive experiences that can run on multiple browsers. But a pretty application without data is just a screensaver. There needs to be a way to efficiently and quickly pull data from the server and present it. ASP.NET AJAX is one of many ways it can be done, but it is definitely one of the best ways to create a highly usable web application.
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 8 Aug 2007 Editor: Genevieve Sovereign |
Copyright 2007 by Randar Puust Everything else Copyright © CodeProject, 1999-2009 Web20 | Advertise on the Code Project |
So I can’t really give a valid side by side comparison. I definitely do think that WPF/E is a shot across the bow of Adobe and it will be interesting to see how things play out.
Can you link me to a page which discusses this issue please?