Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Dialogue JavaScript / Silverlight

[new:30/5/2010]Depuis la version 2.0 de Silverlight et sa programmation en C# (ou VB.net) j’avoue ne plus jamais m’être intéressé à JavaScript dans ce contexte. Je déteste JavaScript comme Jean Yanne détestait les départementales (le sketch du permis de conduire), c’est pas forcément très technique (quoi que…), c’est plutôt “tripesque”, une sorte d’allergie. Mais parfois dialoguer entre une application Silverlight et la page qui l’accueille peut s’avérer très utile !

Ne soyons donc pas sectaires et sachons utiliser JavaScript quand il a un réel intérêt.

Appeler et se faire appeler

Une application Silverlight n’est pas forcément une grosse application monolithique, cela peut être, aussi, un gadget, un menu, une partie d’une application HTML ou ASP.NET. On peut améliorer grandement un site existant avec des morceaux de Silverlight sans pour autant refaire tout le site ! Et dans ce cas il peut s’avérer essentiel d’envoyer au plugin des informations en provenance de la page hôte ou bien l’inverse, agir sur la page hôte depuis l’application Silverlight.

Attention : ne pas confondre avec le Local Messaging

Le dialogue entre deux plugins Silverlight sur une même page utilise un autre procédé, le “Local Messaging”, une sorte de canal de communication entre les différents plugins posés sur une page hôte. Solution qui peut s’ajouter à celle que nous voyons aujourd’hui. Nous verrons cette forme spéciale de communication dans un autre billet.

Pour l’instant ce qui nous intéresse c’est de faire communiquer un plugin Silverlight avec la page hôte, et dans les deux sens.

Appeler Silverlight depuis JavaScript

Pour qu’une classe Silverlight puisse être invoquée depuis JavaScript il faut qu’elle décide de se rendre visible, et même qu’elle déclare quelles méthodes seront visibles. C’est un schéma de sécurisé classique, sans déclaration volontaire du code Silverlight JavaScript ne verra rien.

Les étapes à réaliser sont les suivantes :

  • Dans le constructeur de l’application Silverlight il faut faire un appel à RegisterScriptableObject(). Cet appel autorise le dialogue entre JavaScript et l’application en même temps qu’il créé un nom par lequel le plugin SL sera visible.
  • Toute méthode qui doit pouvoir être appelée de l’extérieur doit être marquée par l’attribut ScriptableMember.
  • Depuis JavaScript il est maintenant possible d’accéder directement aux membres visibles de la classe SL au travers du DOM. Nous verrons l’exemple de code plus bas.

Appeler JavaScript depuis Silverlight

Dans ce sens là les choses plus simples puisque SL peut appeler n’importe quel code JavaScript de la page hôte en utilisant HtmlPage.Windows.Invoke().

Code Exemple

J’ai l’habitude d’intégrer les petits exemples Silverlight directement dans le billet mais ici il faudrait intégrer la page Html hôte qui intègre elle-même l’exemple SL. Rien d’impossible mais la structure du blog ne le permet pas directement. Si vous voulez voir fonctionner l’exemple il faudra télécharger le projet (en fin de billet)…

Pour simplifier nous allons mettre en place une sorte de boucle : l’application Silverlight va envoyer un texte à la page HTML en invoquant un code JavaScript de cette dernière et ce code JS va utiliser la communication avec le plugin pour retourner en écho le même texte.

image

Ci-dessus l’application Silverlight. On saisira un texte dans le champ supérieur, on l’enverra à la page HTML en cliquant sur le bouton, et en retour on recevra de la page le message dans la zone inférieure (avec une petite transformation au passage pour se prouver que cela fonctionne).

Scénario filmé

Pour comprendre la cinématique voir notre scénario en quelques images :

1 – L’application est lancée, la page ASP.NET est affichée avec notre plugin.

image

2 – On saisit un texte et on clique sur le bouton Go!

image

3 – On valide la dialogue ouvert par la fonction JavaScript qui va maintenant modifier et retourner la chaîne à l’application SL :

image

Le code de la classe Silverlight

   1: namespace SLJSDemo
   2: {
   3:     public partial class MainPage : UserControl
   4:     {
   5:         public MainPage()
   6:         {
   7:             InitializeComponent();
   8:  
   9:             HtmlPage.RegisterScriptableObject("PageSL",this);
  10:         }
  11:  
  12:         [ScriptableMember]
  13:         public void UpdateMessage(string message)
  14:         {
  15:             textBox2.Text = message;
  16:         }
  17:  
  18:         // envoi du message à JavaScript
  19:         private void button1_Click(object sender, RoutedEventArgs e)
  20:         {
  21:             HtmlPage.Window.Invoke("SilverlightToJavaScript", textBox1.Text);
  22:         }
  23:     }
  24: }

 

Le code JavaScript de la page ASP.NET

   1: <script type="text/javascript">
   2:     function SilverlightToJavaScript(msg) {
   3:         alert("Message venant de Silverlight: " + msg);
   4:         var control = document.getElementById("silverlightControl");
   5:         control.Content.PageSL.UpdateMessage(msg+" (From JS!)");
   6:     }    
   7: </script>

Ce code a été placé dans la balise <HEAD> de la page. Il faut aussi noter qu’a été ajouté un “id” à la balise <OBJECT> du plugin Silverlight pour donner un nom à ce dernier (utilisé dans le code ci-dessus “silverlightControl”).

Quant au code Xaml, deux Textbox et un bouton c’est pas trop compliqué à comprendre…

Le projet complet (attention c’est du VS 2010, Framework 4.0 et SL 4.0 !) :

Stay tuned pour d’autres astuces !

blog comments powered by Disqus