Integrating Silverlight with HTML
Now that we know how the Silverlight application model works, let's see how Silverlight interacts and integrates with HTML to actually display the application to the user.
There are two ways to add a Silverlight application to your HTML page as follows:
Using the
objecttagUsing the JavaScript helper files
Using the object tag
The object tag method is the easiest way to add a Silverlight application to your page. Using this method, you won't need to use any external JavaScript files for adding a Silverlight application to your page. This method is also supported by all the browsers that are supported by Silverlight. A basic Silverlight object tag will look as follows:
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value=" MyCoolApp.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="4.0.60310.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID= 149156&v=4.0.60310.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border- style:none"/> </a> </object>
The object tag has four mandatory attributes as follows:
data:While not used by most browsers in the context of Silverlight, it is recommended by Microsoft to have the value of this attribute set to"data:application/x-silverlight-2,"to prevent decreased performance in some browsers. You can think of this attribute as a sort of MIME type.type:This attribute actually represents the MIME type. It identifies theobjecttag as a Silverlight object, which will cause the browser to initiate the Silverlight plugin in order to render the object.widthandheight:They specify the width and height of the Silverlight application. You can specify the measurements in pixels or percentages.
Inside the object tag we have several param entries, as listed in the following table:
|
Name |
Description |
Required |
Default |
|---|---|---|---|
|
|
This specifies the URI to the XAP file. It can be a relative or absolute URI. |
Yes |
None |
|
|
This specifies a JavaScript function to call when an error occurs while loading the Silverlight application. |
No |
None |
|
|
This specifies the background color for the |
No |
|
|
|
This specifies the earliest Silverlight version required to run the application. |
No |
Currently installed version |
|
|
This specifies whether or not to automatically update to the specified version in the |
No |
|
|
|
This specifies user-defined initialization parameters using comma-separated key-value pairs, for example, UserName=JohnnyT |
No |
None |
There are many more parameters you can use with your Silverlight object tag, and you can read more about them at Microsoft's MSDN web page—http://msdn.microsoft.com/en-us/library/cc838259(v=vs.95).aspx.
If the browser fails to render the Silverlight application, it will fall back to the content inside of the object tag. The default content of a Silverlight object tag will look like the following screenshot:
 |
You can always change the content of the object tag to your liking by simply removing all the content the object tag currently has (remember, don't delete the param entries!) and writing your own HTML code instead.
Using the JavaScript helper files
If you need greater control on the object tag or the installing/upgrading process, you can use the JavaScript method.
The JavaScript method makes use of a helper file called Silverlight.js, which can be found in the Tools directory under the Silverlight SDK folder usually located at C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Tools.
Once referenced, the Silverlight.js file creates a class called Silverlight, which will provide you with different methods and properties related to Silverlight, such as Silverlight.CreateObject, Silverlight.IsInstalled, and more.
Adding Silverlight using JavaScript is out of the scope of this book, but you can find all the information you need for it on MSDN at http://msdn.microsoft.com/en-us/library/cc265155(v=vs.95).aspx.
Silverlight's interaction with JavaScript certainly doesn't end here. In Chapter 6, Interacting with the Host Platform, we will discuss many features of Silverlight-JavaScript-HTML integration, such as calling a JavaScript method from Silverlight, calling a Silverlight method from JavaScript, manipulating the Document Object Model (DOM) from Silverlight, accessing cookies, and more.
As you might recall, we have mentioned earlier in this chapter that Silverlight isn't limited to running inside the browser anymore. This new concept, called out-of-browser applications, was introduced back in Silverlight 3 and got heavily enhanced in Silverlight 4, so introducing it now would be the perfect way to finish off this chapter.