For 2-3 days i have been playing around with Silverlight 2 to figure out if I can use this slick piece of
new technology into our existing web application. As a proof of concept i needed to create a prototype that would be
able to use data from our exiting ASP.Net and Java web services and display it in cool way. Well, it did not turn out to be
a bad expereince at all and after few road blocks or learning curves i was able to do what i wanted to accomplish. This artcile
is my expereince with creation of Silverlight control that consumes an ASP.Net web service and calls it periodically using
a timer. Yes timer, i had to throw in some fun stuff for me as well.
Silverlight Tools
To get started with Silverlight 2 development you are going to need to install the following development tools on your machine.
- Visual Studio 2008 (prefered) but you can use Visual Studio 2005 as well.
- Silverlight 2 Development tools. If you have already installed Silverlight 2 runtime and SDK installed on your machine,
you will have to uninstall it otherwise VS2008 and other tools with not install. The installation with keep promptin you to
remove those first.
- Expression Blend. You do not need this for starters. But if you are interested in doing some cool graphics and
generate XAML for you, then this will be tool of choice.
Get Started With Application
After you have installed Silverlight plugin for visual studio, you will see new project types added into your user interface
when you for creating new project. Select "Silverlight Application" project and you will have the boiler plate projects, pages and
code files created for you.
You will see 2 projects have been created for you in the solution tree. One will test web application and other will be
project that contains Silverlight control that you are going to build.
Lets XAML
Control user interface layout is done using XAML. Current Beta 1 version of add-in does not allow you to drag and drop
Silverlight controls into design area. But you can do that in XAML view. In my control i needed to display an item's name,
description and price in a vertical stacked form. So my XAML layout for the control looks like following.
<UserControl x:Class="SilverSpice.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="240" Height="320">
<Grid x:Name="LayoutRoot">
<StackPanel Orientation="Vertical">
<Border Background="Blue" CornerRadius="10">
<TextBlock x:Name="ItemName" Foreground="White"
Text="Item Name" FontWeight="Bold"
HorizontalAlignment="Center" />
</Border>
<TextBlock x:Name="ItemDescription" Foreground="Black"
Text="Description" TextWrapping="Wrap" />
<Border Background="BlanchedAlmond" CornerRadius="10">
<TextBlock x:Name="ItemPrice" Foreground="Red"
Text="Price" FontWeight="Bold"
HorizontalAlignment="Right" />
</Border>
</StackPanel>
</Grid>
</UserControl>
Referencing Web Service
Right click on "Reference" node in project's tree view and select "Add Service Reference" option. In the
wizard specify location of ASMX file of your web service. Reference to web services will get added to
your project.
Calling Web Service
Calling web service in Silverlight is slightly different. First all web service requests are asynchronous, so
that means you will have register an event to handle completion of the request. Second, the call to web service
are made throgh SOAP client. You do not have to worry about all the details of constructing bindings etc. When
you added reference to ASMX file using wizard, Reference.cs file was created for you which has the
ncessary code to make simple request to your web service. Following code snippet shows what I did in
my control to call web service.
private KitchenNetMenuService.KitchenNetMenuSoapClient _wsClient =
new SilverSpice.KitchenNetMenuService.KitchenNetMenuSoapClient();
private void CreateMenuService()
{
// Add event handler for ws call completion.
this._wsClient.GetMenuItemsCompleted +=
new EventHandler<KitchenNetMenuService.GetMenuItemsCompletedEventArgs>
(GetMenuItemsCompleted);
}
protected void GetMenuItemsCompleted
(object sender, KitchenNetMenuService.GetMenuItemsCompletedEventArgs e)
{
try
{
_menuItems = (SilverSpice.KitchenNetMenuService.MenuItem[]) e.Result;
GetRandonMenuItem();
RenderControl();
if (null == _wsCallTimer)
{
CreateTimer();
}
}
catch(Exception ex)
{
this._errorMessage += ex.Message;
this._errorMessage += ex.StackTrace;
}
}
Creating Timer In Silverlight
Next thing i want to add to my control is ability to rotate display
of menu items at specified interval. Create a System.Windows.Threading.DispatchTimer object
and set the interval at which timer will tick and call the tick event handler. In the following code I have
set the timer to tick every 5 seconds.
private void CreateTimer()
{
_wsCallTimer = new System.Windows.Threading.DispatcherTimer();
_wsCallTimer.Interval = new TimeSpan(0, 0, 0, 0, 5000);
_wsCallTimer.Tick += new EventHandler(GetNewMenuItem);
_wsCallTimer.Start();
}
Compile and Deploy
When you compile a Silverlight application, it generates .xap file that gets streamed down to
client browser. To test the control i started an ASP.Net web application from scratch. Add reference to
System.Web.Silverlight assembly in your application. And then on the page register
tag to use Silverlight control.
<%@ Register Assembly="System.Web.Silverlight"
Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>
Now you can put the control on the page as shown below.
<asp:ScriptManager ID="ctlScriptManager" runat="server"></asp:ScriptManager>
<asp:Silverlight ID="ctlSilverSpiceMenu" runat="server" Source="~/SLControls/SilverSpice.xap" Version="2.0" Width="100%" Height="500" />
You will have to include ScriptManage control on your page because it is required for
asp:Silverlight control to work. If you do not include ScriptManager control
on the page, you will end up with following run time exception.
The control with ID 'ctlSilverSpiceMenu' requires a ScriptManager on the page.
The ScriptManager must appear before any controls that need it.
Now copy .xap file created from your Silverlight application under your web application. And speicfy the location
of that file in Source attribute of Silverlight control. Tada! You are done!
Gotcha
Like any other new technologies in Beta stage, Silverlight also has some quirks that you
need to be aware of. Following is list of some URLs that you should view to get some details on these issues.