Creating a Silverlight project for the Web

We are beginning this tutorial by the creation of a project for a Web application, running in a navigator, and who requires the Silverlight plug-in, plus the SDK for us, the programmers.

1) Installing the SDK

The Silverlight SDK comprises a tutorial and a documentation. The first stage will consist to download it and install it. See the instructions on the Silverlight card.
Once the runtinme installed on your computer, the browsers are able to display web pages with a rich interface.

2) Creating a directory

For example c:\demo, where your project will be placed.

3) Copying the script

You will find the script of initialization in the following directory:

Program Files/Microsoft Silverlight 1.0 SDK/Tools/Silverlight.js/Silverlight.js

Copy it in the directory that you have just created. This script checks that the system supports XAML.

4) Creating a Web page.

You can use the SampleHTML.html example page in the same directory as aghost.js, but any page created by Open Office for example can be appropriate.

5) Adding a script

The standard script must be inserted in the Web page with the following line, placed between the <head> and </head> tags:

<script type= "text/Javascript" src= "Silverlight.js" ></script>

You can also add a line for your own script:

<script type= "text/Javascript " src= "myscript.js" ></script>

6) Creating a ActiveX object

A XAML Program is inserted in the page as a ActiveX control. To insert the control, a container is required, generally a <div> tag, and a code of initialization. It is possible to add several controls, thus several couples container/initialiser.
Practically one creates a ActiveX control by adding a line in the Web page, between the tags <body> and </body>: 

<! -- Where the Silverlight plugin will go-->
<div id="myControl"> </div>

7) Configuring the ActiveX object

Insert the code below after the preceding line.

<script type="text/javascript">

var parentElement = document.getElementById ("myControl"); 

 Silverlight.createObject(
     "myxaml.xaml", 
     parentElement, 
     "myObjectID", 
    { 
         width:'300', 
         height:'300', 
         inplaceInstallPrompt:false,
         background:'#D6D6D6', 
         isWindowless:'false', 
         framerate:'24', 
         version:'0.9' 
    },
   {
        onError:null, 
       onLoad:null 
    },
    null 
 );

Description of each statement:

Silverlight.createObject()
Create the ActiveX Silverlight control.
myxaml.xaml
It is the name of the source file containing the XAML code. You can of course change this name.
parentElement
Name for Document Object Model in the page for the object created, that allow to access it in JavaScript with DOM's functions.
myControl
Identifier of the element in which the control will be inserted, it is the preceding div.
Generally, it is a <div>. If you give another name to this container, change it here too.
myObjectID
The identifier of the control to be created.
width:"300"
Width of control, followed by the height.
inplaceInstallPrompt:false
Flag to displaying a message when a bad version is detected.
background:#D6D6D6
Background color.
isWinsdowless:false
Control displayed without a window, when false. If a window is opened, set to "true".
framerate:30
Number of displays per second.
version:"1.0"
Version number for the plugin used at development.
onerror:null
Name of error event handler or null if none.
onload:null
Name of loading event hangler or null if none.
null
Name of the function for error processing, null if there is no suchfunction, its name otherwise.
agControl
Create a variable for the ActiveX control, which makes it possible to reference the names of XAML elements and to interface it with JavaScript code.

8) Creating the XAML source file

It is a simple text file, whose name is given as argument above, myxaml.xaml.
Unless you use a different name as parameter in the initialization.

You have the following files now:

Your XAML project for Silverlight is complete. it remains to add code and it will be in the next steps.