Au cours des articles « Silverlight, Le « TOUT » Silverlight est-il une solution ? Qu’en est-il de l’approche par Composant HTML ? » et « Silverlight, Enrichissez vos formulaires ! » vous aurez noté que j’encourage l’utilisation de la technologie Silverlight 1.0 via composant. Après avoir lu ces deux articles, je suppose que vous vous êtes lancé dans le développement de composant Silverlight… non ? Et bien moi si… et je suis tout de suite tombé sur une problématique purement pratique… Comment insérer deux applications Silverlight ou composant Silverlight au sein d’une même page HTML ? Expression Blend ne permettant pas de réaliser ce type de manipulation, je vais vous proposer une solution au travers de ce post.
Point de vue théorique et sémantique
Une application Silverlight est embarquée dans une page HTML via une balise <OBJECT>. Cette balise <OBJECT> permet de référencer le plug-in Silverlight au sein de votre page en lui précisant quelques paramètres tels que, la source du fichier XAML, la couleur de fond, le mode d’affichage et j’en passe. Théoriquement, il suffit donc de dupliquer la balise <OBJECT> pour créer une seconde application Silverlight dans votre page, comme suit :
<html>
<body>
<object width="400" height="300" id="SilverlightControl1"
type="application/x-silverlight">
<param name="source" value="Page.xaml" />
</object>
<object width="400" height="300" id="SilverlightControl2"
type="application/x-silverlight">
<param name="source" value="Page.xaml" />
</object>
</body>
</html>
Cependant, cette façon d’inclure votre application Silverlight dans votre page HTML fait abstinence de toute la partie « Fallback » (silverlight.js), c'est-à-dire entre autre, de toute la gestion du versioning du plugin Silverlight au sens logiciel du terme. Chose qui n’est donc pas préconisée.
Point de vue pratique :
En pratique il va donc falloir intégrer de manière proprement les deux balises <OBJECT> Silverlight au sein de votre page avec la gestion des Fallbacks et la gestion des évènements de chaque application.
Au même titre que le fait le logiciel Expression Blend pour une seule animation je vais vous proposer une solution utilisant les fichiers Silverlight.JS & CreateSilverlight.JS remanié. Pour cela rien de tel qu’un exemple concret !
Nous allons mettre en place une page HTML classique avec dans le corps de ce document deux bandeaux publicitaires Silverlight distincts :
Voici le nouvel appel de la fonction createSilverlight au sein de la page HTML :
<html><body>
…<div id="SLSponsor" class="sponsor">
<script type="text/javascript">
createSilverlight('Sponsor.xaml', new Sponsor.Page(), 'SLSponsor');
</script>
</div>…
</body></html>
Voici le nouveau fichier CreateSilverlight.JS et la function “createSilverlight” remaniée :
function createSilverlight(xaml_page, sl_scene, parent_element)
{
Silverlight.createObjectEx({
source: xaml_page,
parentElement: document.getElementById(parent_element),
id: "SLControl_" + parent_element,
properties: {
width: "100%",
height: "100%",
version: "1.0"
},
events: {
onLoad: Silverlight.createDelegate(sl_scene, sl_scene.handleLoad)
}
});
}
Vous l'aurez donc compris il suffit ni plus ni moins que de customiser la fonction CreateSilverlight. L’intégralité du projet est disponible en téléchargement et est très facilement modifiable, n’hésitez donc pas à le télécharger et faire vous-mêmes vos propres composants. Le projet est compatible Expression Blend 2 September Preview.
Contrairement aux ASP.NET Futures et le contrôle XAML, je tiens à préciser que cette solution n’est aucunement dépendante du serveur d’hébergement et est donc compatible avec les applications de type PHP, JAVA, .NET...
Guillaume André - http://www.wygwam.com/
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
