Today, a new term has been coined?RIA, which stands for Rich Internet Applications. To Microsoft, RIA really stands for Rich Interactive Applications. And it is with this in mind that Microsoft recently launched a new technology/product known as Silverlight. Previously known as Windows Presentation Foundation/Everywhere (WPF/E), Microsoft Silverlight is a browser plug-in that enables developers to host Rich Internet Applications (RIA) that feature animation, vector graphics, as well as video playback.
This article will help you get started with Silverlight and hopefully give you a good feel for how Silverlight development works.
The State of Silverlight
The Silverlight runtimes currently support the following browsers:
- Internet Explorer 6/7
- Firefox 1.5/2.0
- Safari 2.0
This article focuses on Silverlight 1.1
Obtaining the Tools
To develop Silverlight applications, you’ll need to obtain the following runtimes/tools:
To view Silverlight applications on your browser, download one or all of the following:
The ASP.NET Futures download contains new controls for ASP.NET that support Silverlight applications.
The easiest way to get started with Silverlight development is to use Visual Studio 2008, currently available for download as Beta 2. You can download Visual Studio 2008 Beta 2 here.
Once you have downloaded and installed Visual Studio 2008 Beta 2, you also need to download the Microsoft Silverlight Tools Alpha Refresh for Visual Studio (July 2007), which is an add-on to Visual Studio 2008 for creating Silverlight applications. Installing it will add the following items to Visual Studio 2008 Beta 2:
- Visual Basic and C# Project templates
- IntelliSense and code generators for XAML
- Debugging of Silverlight applications
- Web reference support
- Integration with Expression Blend
In addition, you can download one or more of the following professional tools to help design your Silverlight applications:
- Expression Blend 2 August Preview: A professional design tool to create user interaction for Silverlight.
- Expression Media Encoder Preview Update: A feature that will be part of Microsoft Expression Media that allows you to create and enhance video.
- Expression Design: A professional illustration and graphic design tool to create Silverlight assets.
Finally, you can download the following SDKs containing documentation and sample code:
- Microsoft Silverlight 1.0 Software Development Kit Release Candidate
- Microsoft Silverlight 1.1 Software Development Kit Alpha Refresh
With all the necessary tools installed, you can now create your first Silverlight application. Launch Visual Studio 2008 and create a new project. In the Project types, select Silverlight and then select the Silverlight Project template (see Figure 1). Name the project OurFirstSilverlightProject.
In the Solution Explorer, click the Show All Files button to reveal all the files that Visual Studio has added for the project. Figure 2 shows the files contained within it.
The following sections explain the basic files contained within a Silverlight project.
HTML pages that host Silverlight controls can also contain other normal HTML elements that make up a web page. When you double-click on the TestPage.html file in Solution Explorer, Visual Studio 2008 will display the page in Split view, a new feature available in Visual Studio 2008. Using the Split view, you can view the HTML code and at the same time preview how it looks in a browser (see Figure 3).
|Figure 3. Test Case: Displaying an HTML page in Split view.|
This file contains the UI for your Silverlight application. Listing 3 shows the default content created by Visual Studio 2008.
Take note here of the x:Class attribute. In Listing 3, it specifies that the code-behind Class name is OurFirstSilverlightProject.Page (OurFirstSilverlightProject is the default root namespace of our project while Page is the class name), and its corresponding assembly is located in ClientBin/OurFirstSilverlightProject.dll.
Visual Studio 2008 provides IntelliSense support for XAML content, which is quite a handy feature if you’re considering writing XAML manually.
This file contains the managed source code of our Silverlight application. The default class name used by Visual Studio 2008 is Page (Listing 4).
The Page.xaml.vb file is where you write your managed code. When a Silverlight application is ready for deployment, only the compiled assembly needs to be deployed. There is no need to deploy the source code.
This is the file provided by Microsoft that creates all the necessary plumbing needed to ensure that the target Web browser is able to run your Silverlight applications. By including this file in your application, the target Web browser will be asked to download the necessary runtime if the Silverlight runtime is not installed (every Silverlight application must include this file). Under the License Agreement, you are not allowed to modify this file. For Web servers that serve multiple Silverlight applications, you can simply put a single copy of this file in one location and set all the pages containing Silverlight content to point to this page.
Building the User Interface Using XAML
As mentioned earlier, Visual Studio 2008 has IntelliSense support for XAML content. While this will make the UI building process much more efficient, unfortunately this preview version of Visual Studio 2008 does not have a viewer for XAML content. That means that every time you code some XAML content, you have to run it in order to see if the look and feel is what you wanted.
The good news is that you can use another tool from Microsoft?Expression Blend?to build the XAML UIs. Microsoft Expression Blend is a professional design tool that allows you to build professional looking UI for Windows application. The latest edition of Blend, Expression Blend 2 August Preview, allows you to create Silverlight-based applications (you can obtain a preview copy from the links provided earlier in the article).
To open the Page.xaml file with Expression Blend 2, right-click on it and select Open in Expression Blend… (see Figure 4).
Expression Blend 2 will launch and you will see an environment somewhat similar to Visual Studio 2008 (see Figure 5).
Let’s now add some controls to the page. First, you’ll create a rounded-corner button on the page that looks like Figure 6). Within this button, you’ll also add a text block so that you can use it to display some information.
First, click on the Canvas control (see Figure 7) and add it to the page. This canvas will act as a container that contains all the controls that make up the button.
To create a border for the button, add a Rectangle control to the page, essentially covering the canvas that you have just added (see Figure 8).
To create the four rounded corners, click on the Direction Selection icon and then select the Rectangle control that you have just added (see Figure 9). Set the properties of the Rectangle control as follows:
- RadiusX – 8
- RadiusY – 8
- StrokeThickness – 3
In addition, you will also set the background color of the rectangle to yellow (see Figure 9 for the exact color).
To display text within the button, you need to add a TextBlock control onto the canvas (see Figure 10). Also, set the font to Comic Sans MS.
To make the button display the current time, you need to update the time every second. To do so, add a Timeline to your XAML file. First, click on the > arrow in the Objects and Timeline group, followed by the + button (see Figure 11).
You will be asked to name the new Timeline. Use the default name of Timeline1 and click OK.
Your XAML file will now look like Figure 12. Save the XAML file.
When you now return to Visual Studio 2008, it will ask you if you want to reload the Page.xaml file as it has been edited outside the source editor. Once you have reloaded the file, you will now see the following XAML content (see Listing 5).
To make the canvas object accessible programmatically, add the x:Name attribute and set it to btnTime, like this:
Note that in Expression Blend 2, you can switch between Design and XAML views (see Figure 13). Unfortunately, there is no IntelliSense support in XAML view.
Writing the Logic Using Visual Basic
With the UI built, it’s time to write the code to make it do something useful?for instance, display the current time in the button.
Double-click the Page.xaml.vb file in Solution Explorer to load it in the code editor.
|Figure 14. Handlers: Creating the event handler for the Completed event.|
In the Page_Loaded() subroutine, add the following bolded lines:
Partial Public Class Page Inherits Canvas Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs) ' Required to initialize variables InitializeComponent() Me.Timeline1.Duration = New Duration(New TimeSpan(0, 0, 1)) Me.Timeline1.Begin() End Sub
In the preceding code, the Timeline1 triggers an event (the Completed event) each second (set through the Duration object). The Timeline object is somewhat similar to the Timer control that Windows developers are familiar with. The Begin() method starts the countdown and one second later the Completed event is fired.
The next step would be to service the Completed event, which you can easily do by first selecting the Timeline1 object from the top of the code editor, and then selecting its corresponding Completed event (see Figure 14).
|Figure 15. Completed: Testing the application in both IE and FireFox.|
Code the Completed event handler as follows:
Private Sub Timeline1_Completed( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Timeline1.Completed Dim textBlk As TextBlock = Me.btnTime.Children(1) textBlk.Text = Now.ToString Me.Timeline1.Begin() End SubEnd Class
Basically, you set the current time by retrieving the TextBlock control embedded within the canvas (btnTime) and setting its Text property. The canvas has two children:
- Children(0): Rectangle control
- Children(1): TextBlock control
After displaying the time, you call the Begin() method to start the countdown again.
That’s it! Press F5 in Visual Studio 2008 and you will see your Silverlight application displayed in Internet Explorer. If you load the sample application in FireFox, it will look and work the same (see Figure 15). The button will update the time every second.
Now that you have your first Silverlight application running, modify it to do some animation so that you can do justice to Silverlight. As an example, let’s modify the button so that it can rotate and update the time simultaneously.
Using the same project, add a new Timeline to the XAML file in Expression Blend 2. After adding the new Timeline, your XAML code should look like this:
In the Page.xaml.vb file, declare a private member variable called degrees:
Partial Public Class Page Inherits Canvas Private degrees As Integer = 0
In the Page_Loaded() subroutine, add a new duration for the second Timeline:
Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs) ' Required to initialize variables InitializeComponent() '---display the clock--- Me.Timeline1.Duration = New Duration(New TimeSpan(0, 0, 1)) Me.Timeline1.Begin() '---rotate the clock--- Me.Timeline2.Duration = New Duration(New TimeSpan(100)) Me.Timeline2.Begin()End Sub
Here, you are setting the Timeline2’s interval to 100 milliseconds (the TimeSpan object constructor is overloaded). Every 100 milliseconds, the Completed event of Timeline2 is fired, and here you call the PerformTransformation() subroutine:
Private Sub Timeline2_Completed( _ ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles Timeline2.Completed PerformTransformation() Me.Timeline2.Begin() End Sub
This subroutine uses the RotateTransform object to perform a transformation on an object. Here, you will use it to rotate the button one degree at a time:
Private Sub PerformTransformation() '---use a RotateTransform object to perform transformation--- Dim rt As New RotateTransform '---define the transformation--- With rt .Angle = degrees .CenterX = 50 .CenterY = 50 End With '---increment the degree of rotation--- degrees += 1 '---transform the button--- btnTime.RenderTransform = rt End Sub
|Figure 16. On the Run: Rotating the button.|
In addition, when the user clicks on the button, the button will be reset to its original position and start rotating again:
Private Sub btnTime_MouseLeftButtonDown( _ ByVal sender As Object, _ ByVal e As System.Windows.Input.MouseEventArgs) _ Handles btnTime.MouseLeftButtonDown degrees = 0 PerformTransformation() End Sub
Figure 16 shows how the button looks when it’s run.
Deploying Silverlight Applications
After your Silverlight application is completed, deploying it is very easy. For a production environment, there is no need to expose the source of your managed code; simply copy the compiled assembly to your web server. For example, you can copy the assembly you just created to see how easy the process is.
First, create a folder in your hard drive, say C:MyFirstSilverlightApp.
Create an HTML page named Default.html and populate it with the following:
Silverlight Project Test Page
As you observe, you can simply copy the content from the TestPage.html (from the Visual Studio 2008 project) and paste it into Default.html. The important elements are highlighted in bold.
By default, the Default.html.js file uses Page.xaml as the UI for your Silverlight application (see Listing 5). Hence, copy the Page.xaml from your Visual Studio 2008 project into the C:MyFirstSilverlightApp folder.
If you look into the content of Page.xaml, you will see that the Silverlight application is expecting to find the compiled assembly in the ClientBin folder. The name of the compiled DLL is OurFirstSilverlightProject.dll:
Hence, in C:MyFirstSilverlightApp, create a new folder named ClientBin and copy the compiled DLL from the ClientBin folder of your Visual Studio 2008 project's folder.
Figure 17 shows the content of the C:MyFirstSilverlightApp folder. As you can see, you do not need to deploy the source code of your VB program, just the assembly.
|Figure 17. Content: What's inside the C:MyFirstSilverlightApp folder.|
You can now configure the C:MyFirstSilverlightApp folder as a virtual directory in IIS. Launch IIS (you can use the inetmgr command), right-click on the Default Web Site link and select New | Virtual Directory…. Give it the alias of Silverlight and specify C:MyFirstSilverlightApp as the location of the folder. That's it!
You can now load the page using this URL: http://localhost/Silverlight/default.html.
You've seen how to create a Silverlight application using Visual studio 2008. You define Silverlight application UIs using XAML, which you can produce with Visual Studio 2008, Expression Blend 2, or manually. Hopefully, you've been inspired to explore Silverlight more deeply.