Published: 04 Jul 2007
By: Granville Barnett
Download Sample Code

In this part we will look at Silverlight 1.1 and how it provides a richer platform to build RIAs on.

Introduction

In the first part we looked at ASP.NET AJAX and how we can separate our web applications up more atomically, with regards to presentation, behaviour and data. When we used ASP.NET AJAX, though, we were limited in terms of presentation. Sure we can use the Microsoft AJAX Library and the AJAX Control Toolkit's library to really liven the presentation up, but HTML was never really designed to provide a platform for what we perceive to be an RIA .

There is another common problem with jazzing up the DOM using JavaScript for the behaviour. That is, cross browser support for whatever you are doing. I'm sure you are all aware that browsers tend to have tiny differences in the way they display HTML content and apply CSS to that content.

Silverlight was built from the ground up with presenting rich content in mind, so we get a tonne of neat stuff like vector graphics – which allow our UI's to scale gracefully - animations support, and some great support for text. Another great thing about Silverlight is that .NET developers familiar with WPF can pretty much get up and running with Silverlight immediately, as Silverlight is a subset of WPF.

Note: At the moment Silverlight 1.1 supports Internet Explorer, Firefox (PC) and Safari (Mac). I'm sure other browsers will follow suit in their support for Silverlight.

Why starting with Silverlight 1.1?

As .NET developers, Silverlight 1.1 offers us so much, but more importantly it gives us pretty much everything that we have been using in .NET 2.0 - and stuff that's coming in .NET 3.5, including LINQ.

Many of you will know that Silverlight 1.1 actually came with a slightly slimmer version of the CLR, although only the illogical stuff was cut out. For example, there's no need for the server GC (the Garbage Collector), or COM interop. We benefit from the inclusion of the BCL, support for REST, RSS, SOAP, JSON, and XML. The latter two are also supported in Silverlight 1.0.

A blaring omission in Silverlight 1.0 were controls, the likes of a button control etc. were nowhere to be seen. That's still the case for the current Alpha of Silverlight 1.1 but they will be in the final 1.1 release. We also have the DLR (the Dynamic Language Runtime) bundled in with the Silverlight 1.1 redistributable. At present this consists of IronPython and managed JScript but IronRuby and VBX are on their way too.

Silverlight 1.1 has the makings of something that will change the way we develop for the web in the future.

XAML

Extensible Application Markup Language (XAML) is already familiar to WPF and WF developers.

If you were one of the people learning XAML like crazy when the first Avalon bits were released, then you will feel right at home here, as your skills and knowledge is transferable. In fact, nothing has changed in XAML with regards to Silverlight 1.0 or 1.1.

I already pointed out that Silverlight supports a subset of WPF features. What I neglected to mention is that it also includes WPF's data binding model which is incredibly powerful. I'm not too sure of the roadmap with regards to data binding support in Silverlight, but you can be sure that it is on the TODO list for subsequent releases of Silverlight.

XAML, in the context of Silverlight, is used to describe the UI declaratively. For a grounding on XAML for WPF go check out Rob Eisenberg's article here on DotNetSlackers. Also, please be aware that anything you can do in XAML can be done imperatively using C# or VB.NET.

Programmability using an imperative language

I just want to touch on this a bit to clarify the code behind model, as it differs slightly than that of WPF.

What I'm about to explain is done best using an example. Listing 1 shows a simple XAML file that runs on Silverlight 1.1.

Listing 1: A simple XAML file

There are a few interesting things about this file. The x:Class attribute defines the .dll to pull down to the client (SilverlightProject3.dll) and the class to associate with this XAML file (Page.xaml.cs) and its respective namespace.

Just to clarify, the client downloads the .dll associated with this XAML file. Once downloaded, the runtime looks in the SilverlightProject3 namespace for the class Page. Finally, once the class is found, it is instantiated and the Loaded event is raised. The event handler, Page_Loaded, is declared in the Loaded attribute of the Canvas element.

Figure 1: Running the code in listing 1

One thing I would like to clarify is that, unlike ASP.NET where the code runs on the server; Silverlight 1.1 is run on the client within the respective browser process.

Note: The Silverlight runtime also runs in a sandboxed environment.

Tool support

At the moment we have a few tools that we can use to build Silverlight 1.1 applications. These include:

  • Blend 2 May CTP
  • Silverlight Alpha tools for Orcas

Blend 2 May CTP

Actually this CTP is really impressive. It has comprehensive support for pretty much all the features in Silverlight 1.1 (and 1.0).

Blend is targeted for designers, so you can imagine that if you want to make anything pretty then this is the tool for you. Being developers, we somehow have attained the ability to make anything look bad...but this tool helps!

Download

Silverlight Alpha tools for Orcas

Unlike Blend, this is developer focused. As you might expect, we can't see anything within the IDE. Thus, you should get used to build your project to see what it looks like; or you could fire up an instance of Blend and switch between the two, which is quite effective. I'm sure on the way is a setup similar to the one we have in WPF, where you can have a split screen for code and design views.

With this extension to Visual Studio Orcas Beta 1, we get Intellisense for XAML within the IDE (as you might expect given we have it for WPF!). We also benefit from the code behind language support, regardless of whether you are a C# or a VB.NET developer.

Download

ASP.NET support for Silverlight 1.1

Many times you will actually want to have your Silverlight application referenced within an ASP.NET application. At present, you can't do this easily using ASP.NET 2.0.

Before I go any further, there is another prerequisite you will need to run the following samples: the ASP.NET Futures May 2007 CTP. This CTP of the next version of ASP.NET includes a Xaml control that allows us to easily reference XAML files within our ASP.NET page. This particular feature relies on the Microsoft Ajax Library, so you will also need to drop a ScriptManager control onto your page.

Note: The entire source for these demos is included in the downloadable code.

My scenario is setup in the following way. First, I've created a Silverlight 1.1 project within Visual Studio Orcas Beta 1. Then, I've added a Web Application Project to that project, which is now my start up project. I want to use that code we looked at earlier in an ASP.NET page in this new project. Fortunately, Visual Studio Orcas allows me to add a reference to a Silverlight project. Therefore, when I build my web application, it will build the Silverlight project and include the revised binaries and XAML files into my Web Application Project.

Figure 2: Adding a reference to the Silverlight project

Once you have selected the “Add Silverlight Link” you will get the option to choose a Silverlight project within scope, as shown in Figure 3.

Figure 3: Referencing a Silverlight project

Now, if you look at the Web Application project, you will have a new ClientBin directory that is where the referenced Silverlight projects' .dll is located. In the root folder, you will also have any added XAML files. In my case, I have the Page.xaml file.

Figure 4: New folders/files added to the Web Application project

To finish up, let's go ahead and add a web form to our project. Within that page, let's go ahead and register the assembly Microsoft.Web.Preview and the Microsoft.Web.Preview.UI.Controls namespace, which contains all of the future ASP.NET controls.

With the reference in place we can go ahead and use the Xaml control as shown in listing 2.

Listing 2: Using the new Xaml control

If we go ahead, run the Web Application project and then browse to our page, we will see the Silverlight application that we created earlier.

Figure 5: Viewing our Silverlight application courtesy of ASP.NET Futures

Summary

This second part was really a ramping up session to get you used to the features we will be using in subsequent parts of this series. Please go ahead and create a sample application or two using Silverlight 1.1, get used to XAML and exercise with ASP.NET and Silverlight too.

References

Developing RIAs: Part 1

About Granville Barnett

Granville (http://gbarnett.org) is a PhD candidate at Durham University within the Department of Computer Science.

This author has published 32 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


JavaScript with ASP.NET 2.0 Pages - Part 1
ASP.NET 2.0 has made quite a few enhancements over ASP.NET 1.x in terms of handling common client-si...
ASP.NET ComboBox
The ASP.NET ComboBox is an attempt to try and enhance some of the features of the Normal ASP.NET Dro...
Upload multiple files using the HtmlInputFile control
In this article, Haissam Abdul Malak will explain how to upload multiple files using several file up...
JavaScript with ASP.NET 2.0 Pages - Part 2
ASP.NET provides a number of ways of working with client-side script. This article explores the usag...
Using WebParts in ASP.Net 2.0
This article describes various aspects of using webparts in asp.net 2.0.

You might also be interested in the following related blog posts


GiveCamps Get a new Sponsor read more
Foxit PDF Previewer update read more
Announcing the WebsiteSpark Program read more
More On The CodePlex Foundation read more
The Underground at PDC read more
Introducing SharePoint 2010 Training at U2U read more
My History of Visual Studio (Part 6) read more
Scenarios for WS-Passive and OpenID read more
BeginDialOut with Office Communicator Clients read more
DotNetNuke Fusion Results for Q3 read more
Top
 
 
 

Discussion


Subject Author Date
placeholder Pls Provide a Good Example Kazi Manzur Rashid 7/11/2007 6:05 PM
Pls Provide a Good Example Granville Barnett 7/12/2007 4:06 AM

Please login to rate or to leave a comment.

Product Spotlight