Créer un projet Silverlight

On débutera le tutoriel avec la création d'un projet pour une application Web, tournant dans un navigateur, et qui nécessite le plug-in Silverlight.

1) Installer le SDK

Le SDK de Silverlight comporte un tutoriel en anglais et une documentation. Le première étape consistera à le télécharger et l'installer. Voir les instructions sur la fiche Silverlight et la page de téléchargements.
Une fois qu'il est installé, les navigateurs peuvent afficher des pages web dotées d'une interface graphique riche.

2) Créer un répertoire

Par exemple c:\demo, ou sera placé votre projet.

3) Copier le script

Vous trouverez le script d'initialisation sur le chemin suivant:

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

Copiez le dans le répertoire que vous venez de créer. Ce script vérifie que le système supporte XAML.
Eventuellement vous pouvez prendre la version localisée en français dans le sous -répertoire "localized".

4) Créer une page Web.

Pour pouvez utiliser l'exemple SampleHTMLpage.html dans le répertoire Quickstarts\quickstart\samples\, mais n'importe quelle page, créée par LibreOffice par exemple, peut convenir. L'exemple fourni ici s'appelle mapage.html.

5) Insérer le script

Le script est inséré dans la page Web avec la ligne suivante, placée entre les balises <head> et </head>:

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

Cela a déja été fait dans le fichier mapage.html qui est lié ci-dessus.

Vous pouvez aussi ajouter déjà une ligne pour votre propre script:

<script type="text/javascript" src="monscript.js"></script>

6) Créer un objet ActiveX

Le programme XAML est inséré dans la page en tant que contrôle ActiveX. Pour cela il faut un conteneur, généralement une balise <div>, et un code d'initialisation. On peut en fait créer plusieurs contrôles, donc plusieurs couples conteneur/initialiseur.
Pratiquement on crée le contrôle ActiveX en ajoutant une ligne dans la page Web, entre les balises <body> et </body>:

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

7) Configurer l'objet ActiveX dans createSilverlight.js

Insérer le code ci-dessous après la ligne précédente.

<script type="text/javascript">

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

</script>

Description des composantes:

Silverlight.createObject(): Crée le contrôle ActiveX Silverlight.
monxaml.xaml: C'est le nom du fichier source contenant le code XAML. Vous pouvez bien sûr changer ce nom.
parentElement: Le nom dans le modèle objet document (dans la page) du contrôle à créer pour pouvoir y accéder avec les fonctions du DOM.
monControleID: Identifieur unique du contrôle> ActiveX créé.
width:300: Largeur du contrôle, suivie par la hauteur.
inplaceInstallPrompt:false: Indique si l'on affiche un message lorsqu'une mauvaise version est détectée. "false" pour le mode silencieux, "true" pour afficher les messages.
background:#D6D6D6: Couleur de fond avec une séquence de troix codes RVB en hexadécimal.
isWinsdowless:false: Indique si on affiche le contrôle sans fenêtre. S'il y a une fenêtre, assigner "false" sinon "true".
framerate:30: Nombre d'affichages par seconde.
version:"1.0": Numéro de la version de Silverlight. Ce manuel utilse la version 1.0.
onerror:null: Nom du gestionnaire d'évènement d'erreur, ou null si on n'en utilise pas.
onload:null: Nom du gestionnaire d'évènement déclenché au chargement ou null s'il n'y en a pas.
null: Nom d'un gestionnaire d'évènement pour le contexte.

8) Créer le fichier source XAML

C'est un simple fichier de texte, dont le nom, on l'a vu ci-dessus sera monxaml.xaml.
A moins que vous n'ayez utilisé un nom différent en paramètre d'initialisation...

La structure d'un fichier XAML pour Silverlight est la suivante:

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
...
</Canvas>

Vous avez maintenant les fichiers suivants:

mapage.html
Silverlight.js
monscript.js (optionel)
monxaml.xaml

Votre projet Silverlight XAML est complet. il reste à ajouter du code et ce sera l'étape suivante.