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.

Basic files and referenced libraries of Silverlight project. The XAML page can be opened directly in Expression Blend

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:

Canvas.Left="136" Canvas.Top="56">

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()

Installing Silverlight Tools adds the VB and C# templates for the Silverlight project. A message also mentions Silverlight assembly uses WPF/E

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.

In Blend the design and XAML view can be seen through Split option. Properties can be set for Rectangle control in Appearence pane. To add Timeline object to Rectangle control, follow steps 1, 2, and 3, as illustrated in the visual

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.

The SilverLightDemo App running on Mozilla Firefox as well as Internet Explorer having Silverlight runtimes

With this we have successfully created a Silverlight application using VS

2008 and designed its interface using Expression Blend 2.