Build rich web apps with Silverlight

Innovations like JavaScript, AJAX, Flash, etc improved user's experience of Web apps. They've also given developers a lot of freedom to be creative. Now they have something new to look forward to. Microsoft has recently launched a cross platform, cross browser .NET plug-in to enable developers create Rich Internet Applications (RIAs) that play animations, graphics, and even video.

Silverlight is based on Windows Presentation Foundation/Everywhere (WPF/E) and is aimed to compete with Adobe Flash and presentation components of AJAX. The recent release of Silverlight version 1.1 incorporates .NET Common Language Runtime (CLR), so that Silverlight applications can support application logic written using any .NET language. This built-in CLR support was not available with version 1.0, owing to which application logic had to be written using JavaScript.

In this article we will focus on developing Silverlight applications using Visual Studio 2008 (Orcas) and Expression Blend 2. We will use VS 2008 Beta 2 to develop the application and Expression Blend 2 to design it.

Gathering Required Tools
To develop Silverlight applications, you need to first do some basic configurations for VS 2008. Install Silverlight runtime and ASP.NET Futures, wherein the latter contains controls for ASP.NET to support Silverlight applications. An add-on tool, Silverlight Tools, is also required by VS 2008 Beta 2. The three tools required for Silverlight application development are available on this month's DVD. The exact names are as follows: -

• Silverlight 1.1 Alpha Refresh for Windows
• Microsoft ASP.NET Futures (version July 2007)
• Microsoft Silverlight Tools Alpha for Visual Studio 2008 Beta 2

Installing Silverlight tools provides the integration of VS 2008 with Expression Blend, which allows concurrent development and synchronization of the application's design interface and its logic. Apart from this it also provides project templates for Visual Basic and C#, along with IntelliSense and code generators for XAML. The Expression Blend 2 (September Preview) setup can be picked from the Nov'07 DVD.

Getting Started
Once all the required tools have been installed, we can start creating Silverlight application using VS 2008. Launch VS 2008 and create a new project. In the New Project window, under Project Type pane, select Silverlight and under Template pane, select Silverlight Project template, name the project as 'SilverLightDemo,' and click OK. The project gets created with all the necessary references and foundation files required for Silverlight project. Among the basic files in the project folder, Page.xaml contains the application's user interface and Page.xaml.vb manages source code for the application. TestPage.html contains Silverlight control and reference to Silverlight.js, which is a JavaScript file to ensure the client browser has necessary Silverlight runtime installed to run the application. In the absence of Silverlight runtime, the script asks the client browser to download the appropriate runtime. HTML pages, used to host Silverlight apps, can contain other HTML elements and tags to make up the web page.

In our demo application we will build a clock component on an HTML page to display time and date. To design the interface for the application, open the Page.xaml file with Expression Blend 2. From the VS 2008 interface you can directly initiate to open an XAML file in Blend, right-click on Page.xaml file, and select 'Open in Expression blend' option. In the Expression Blend environment first add the Canvas control that will act as container for all the added controls. On this canvas create a button using Rectangle control and change the RadiusX and RadiusY properties to render a rounded shape to the rectangle. Likewise add TextBlocks on the button that will be used to display time and date.

Now, to make this button display time, we need to update it every second. For doing this we add a Timeline control: click on the > arrow in the Objects and Timeline pane. On the following window, click on + button to add the new StoryBoard and in the next popup window select Timeline control and click OK. Save the Page.xaml file and revert to Visual Studio interface, where it will ask you to re-load the Page.xaml to keep the changes made by the source editor. Now to make the canvas object accessible to the application logic, add the x:Name attribute and set it to showTime in the Page.xaml file. The following code snippet shows that:

Adding Application Logic
After designing the interface for the clock, we will add program logic to the application to display time using Visual Basic. From the Solution Explorer double-click on Page.xaml.vb file to open it in code editor. And in the Page_Loaded() subroutine add the following code lines:

Me.Timeline1.Duration = New Duration(New TimeSpan(0, 0, 1))
Me.Timeline1.Begin()

This Timeline1 object is from the XAML file that was added to the rectangle control. This object triggers a Completed event every second that has been set through the Duration object. Now to add code for the Completed event we will select Timeline1 object from the code editor and select its corresponding Completed event. For the Completed event handler we will add code that will take the hours, minutes, seconds, and dates from the current time and display them on the respective TextBlock controls. The following code snippet shows that:

Dim hours As TextBlock = Me.showTime.Children(1)
Dim mins As TextBlock = Me.showTime.Children(2)
Dim second As TextBlock = Me.showTime.Children(3)
Dim showdate As TextBlock = Me.showTime.Children(4)
hours.Text = Now.Hour.ToString
mins.Text = Now.Minute.ToString
second.Text = Now.Second.ToString
showdate.Text = "Date : " + Now.Day.ToString + " / " + Now.Month.ToString + " / " + Now.Year.ToString
Me.Timeline1.Begin()

To test the SilverLightDemo app, press F5 or select Debug > Start Debugging option. The application will open in your default browser and the clock starts displaying the current time of the client system. Now let's see how to deploy this Silverlight application on IIS.

Deployment on IIS
After creating the SilverLightDemo app, we can now deploy the same on IIS very easily. First create a base folder for deploying your application, say C:\SilverLightApp. Copy the TestPage.html from your SilverLightDemo project directory and paste it onto this base folder and rename it to Default.html. We also need to copy the Silverlight.js and Page.xaml files to the base folder. As the TestPage.html is used to refer to TestPage.html.js file, we will copy it also onto the base folder. The Page.xaml file shows that the Silverlight application is expecting compiled assembly to be found in ClientBin folder. So we will paste the SilverLightDemo.dll, the compiled assembly for the project SilverLightDemo, from the project directory to the ClientBin folder under base directory. Now we can use this base folder to act as virtual directory in IIS. Start IIS and under Web Sites option, right click on Default Web Site and then select New > Virtual Directory. Set the alias for the virtual directory as Silverlight and browse to the base folder location and then click Finish. Now with the URL http://localhost/Silverlight/Default.html we can load the page containing the Silverlight
application.

With this we have successfully created a Silverlight application using VS 2008 and designed its interface using Expression Blend 2.