Silverlight 1.0, Comment insérer deux applications Silverlight au sein d’une page HTML ?

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 :

Silverlight, plusieurs application au sein d'une même page

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/

Publié mercredi 28 novembre 2007 16:17 par guillaume
Classé sous , , , , ,
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 :

Commentaires


Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01