Understanding Silverlight Basics

In this article I will give you an overview of how browser renders Silverlight application and what are the main components that involves during the execution of Silverlight application.

Let’s create sample Silverlight application.  Open the visual studio 2008 IDE.  Go to File->Project and pick Silverlight Application template.

Note:  You need Silverlight SDK installed to be able to create Silverlight application.  Visual Studio 2008 SP1 has Silverlight 3 SDK in it.   If you have VS 2008 RTM, either you need to upgrade to VS 2008 SP1 or install Silverlight 2 SDK separately.

You will see two projects that are created.

1) “SilverlightApplication” project

2) “SilverlightApplication.Web” Web Application:  It’s an ASP.NET web application.  You will see that Visual Studio has generated .html and .aspx page that host Silverlight control.

Let’s look at the files that are created in “SilverlightApplication.Web” web application.

1) SilverlightApplicationTestPage.html: If you open this html page and scroll all the way down, you will see an <object> tag which looks similar to the following.

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/SilverlightApplication.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />

<a href=http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0 style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>

</object>

“data” and “type” attribute in <object> tag represents the Silverlight browser plug-in and MIME type (application/x-silverlight-2).  Browser uses those values to load and instantiate appropriate plug-in.  If browser doesn’t find the Silverlight plug-in installed, it will represent the screen which looks similar to following using the anchor tag wrapped up inside <object> tag and clicking on that will download the Silverlight plug-in.

There are number of parameters and its value specified using <param> tag inside <object> tag.

a) <param name=”source”  value=”ClientBin/SilverlightApplication.xap”/> Source parameter specifies the file path of application that browser plug-in will use to download the application from.  In our case browser will download SilverlightApplication.xap file located in ClientBin folder of web application.

b) <param name=”onerror” value=”onSilverlightError”/> onSilverlightError is the name of the function that will be called when Silverlight plug-in generates a XAML parse error or run-time error at the native code level.

c) <param name=”minRuntimeVersion” value=”3.0.40624.0”/> The value of this parameter represent the version “3.0.40624.0” of Silverlight plug-in required to run the Silverlight application.  If browser doesn’t find the version specified here, it will display the screen to ask user to upgrade it to that version.

d) <param name=”autoUpgrade” value=”true”/> This setting has no effect if you don’t have minRuntimeVersion specified.  If the value is set to true and Silverlight plug-in version earlier than minRuntimeVersion, it will attempt to update automatically.

2) SilverlightApplicationTestPage.aspx: This page contains ASP.NET Silverlight control.  ASP.NET will render the <object> tag that we just saw above in SilverlightApplicationTestPage.html page.

<asp:Silverlight  ID=”Xaml1” runat=”server” Source=”~/ClientBin/SilverlightApplication.xap” MinimumVersion=”3.0.40624.0” Width=”100%” Height=”100%”/>

Note:  You will only be seeing ASP.NET Silverlight control on SilverlightApplicationTestPage.aspx if you have Silverlight 2 SDK installed otherwise content of SilverlightApplicationTestPage.html and SilverlightApplicationTestPage.aspx will be the same.

3) Silverlight.js: You may have noticed that there is a JavaScript file(“Silverlight.js”) reference specified in <head> tag in both SilverlightApplicationTestPage.aspx and SilverlightApplicationTestPage.html page.

<script type=”text/javascript” src=”Silverlight.js”/>

“Silverlight.js” is a Javascript helper file used when adding a Silverlight application to a webpage via Javascript.  It has a number of methods but most important “createObject” and “createObjectEx” that’s being used to instantiate Silverlight.

4) SilverlightApplication.xap: Silverlight application is packaged into this file.  When you build “SilverlightApplication” project, Visual studio generates application package(“SilverlightApplication.xap”) in the ClientBin folder located in “SilverlightApplication.Web” web application.   This .xap file is similar to .zip file.  Don’t believe that?  You can prove that to yourself by renaming it as a .zip file and extracting its content.  You will see following two files in the application package.

a) SilverlightApplication.dll

b) AppManifest.xaml

SilverlightApplication.dll  is the Silverlight application assembly.

AppManifest.xaml is the application manifest file that contains information like what DLLs are present in this package and which DLL contains entry point.   You will see something like the following in AppManifest.xaml file.


<Deployment xmlns=<a href="http://schemas.microsoft.com/client/2007/deployment">http://schemas.microsoft.com/client/2007/deployment</a> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" EntryPointAssembly="SilverlightApplication" EntryPointType="SilverlightApplication.App"

RuntimeVersion="3.0.40624.0">

<Deployment.Parts>

<AssemblyPart x:Name="SilverlightApplication" Source="SilverlightApplication.dll" />

</Deployment.Parts>

</Deployment>

Silverlight CLR (Silverlight CLR? Raise this question in your mind?  I will explain that in a while) reads this file to load the assembly “SilverlightApplication” (specified in EntryPointAssembly attribute) located in SilverlightApp.dll(specified in <Deployment.Parts>) and create an instance of “SilverlightApplication.App” class (specified in EntryPointType attribute).

I think we got enough information about the files that gets created in Silverlight web application.  Now let’s look at the execution cycle of a Silverlight application and role of those components in it.

Here is the step by step execution……

1) Client (user) requests a web page SilverlightApplicationTestPage.html(or SilverlightApplicationTestPage.aspx)  Let’s assume that test page stored somewhere on a web server.

2) The SilverlightApplicationTestPage.html page gets downloaded from the web server to the client and browser starts rendering the html page.

3) While rendering SilverlightApplicationTestPage.html page, browser sees <object> tag and it knows what to do with it.  Browser uses the value of type attribute of object tag and figure out what plug-in needs to load.  In our case the value of type attribute is application/x-silverlight-2.  This is the MIME type which maps to npctrl.dll located in C:Program FilesMicrosoft Silverlight3.0.40624.0.  There is a registry entry named AgControl.AgControl.3.0 that associates with that MIME type.    The MIME type “application/x-silverlight-2” is used for Silverlight 2 and all subsequent versions.

4) Once the plug-in has been loaded, it starts up Silverlight common language runtime and after that it starts downloading SilverlightApplication.xap file from server.

If you may have noticed, I have mentioned Silverlight Common Language Runtime.  Yes it is.  Coreclr or Silverlight CLR is the Silverlight version of the CLR that runs inside the Silverlight plug-in.  Coreclr.dll is located in C:Program FilesMicrosoft Silverlight3.0.40624.0 that’s the Silverlight CLR implementation.   Coreclr is similar to the desktop version of the CLR but it’s much smaller and has only the features to manage Silverlight application in a browser environment.

(Diagram from MSDN article)

As you are seeing in above diagram, Silverlight control runs in a managed environment (Silverlight CLR).  Silverlight CLR runs within the context of browser plug-in.  And browser plug-in runs inside the context of a browser.

5) Once the SilverilghtApplication.xap file is downloaded, the Coreclr instantiates entry point type instance (in our case its “SilverlightApplication.App”) and fires up Application.Startup event.

The Application_Startup event is responsible to display user interface.  Once the UI is loaded, other events occurs based on user’s actions.

Unhandled application errors can be handled in Application_UnHandledException event (like Application_OnError event in ASP.NET web application)

Application_Exit event gets fired just before the application is released from the memory (like Application_End event in ASP.NET web application).

Well I am done here.  In summary, browser plug-in and Silverlight CLR(that’s running on client’s machine) are the main components that play a bigger role executing native .Net Silverlight application on client’s browser.

Posted in Microsoft Technology
5 comments on “Understanding Silverlight Basics
  1. Bidyadhar Patra says:

    Good article. Explains Silverlight application cycle neatly. One question though. What about any refernced assemblies to the application. Are they available in SilverilghtApplication.xap and are they downloaded as well?

  2. Sai Krishna says:

    Answering to Bidyadhar Patra’s question: xap file contains all the referenced assemblies.

  3. Shailesh says:

    Thanks Sai Krishna for providing answer. It’s been busy from my side so didn’t get a chance to reply to many of my reader’s question.

    @Patra, Yes you are right all of the referenced(third party) assemblies would be included in .xap package. And if you are wondering about the .net assembly, that would be installed as a part of silverlight plug-in.

  4. Durga Prasad says:

    It is good.One question is how can we give security for our xap file as it can be extracted.

  5. Rahul Bandopadhyaya says:

    this blog is really helpful to get the first hand understanding of silverlight

1 Pings/Trackbacks for "Understanding Silverlight Basics"
  1. Understanding Silverlight Basics | Broken Code…

    […]IncrementalGet and IncrementalBuild in Team Build 2008 | Broken Code on IncrementalGet and IncrementalBuild in Team Build 2008 · Windows Host File | Broken Code on Windows Host File; Anonymous on ASP.NET color converter tool …[…]…

Ads