#45 - Comunicazione tra oggetti Silverlight nella stessa pagina

di Alessio Leoncini, in Silverlight 2.0, 23 aprile 2009

Archiviato in: Silverlight, Silverlight 2.0, XAML

In Silverlight 2.0 è possibile mettere in comunicazione più oggetti della pagina appoggiandosi a specifiche funzioni Javascript definite nell'HTML.

La prima attività è definire nell'oggetto Silverlight che "riceve" la comunicazione un metodo che possa essere chiamato da una funzione Javascript:

public partial class Page3 : UserControl 
{ 
   public Page3() 
   { 
      InitializeComponent(); 
 
      HtmlPage.RegisterScriptableObject("SLObject1", this); 
   } 
 
   [ScriptableMember] 
   public void SetTextBlock1Text(string txt) 
   { 
      TextBlock1.Text = txt; 
   } 
}

Con il metodo RegisterScriptableObject si procede alla registrazione dell'UserControl come parte accessibile del DOM della pagina; decorando il metodo SetTextBlock1Text con l'attributo [ScriptableMember] si espone tale metodo ad essere chiamato da una funzione Javascript nella pagina:

<script type="text/javascript"> 
    function SetTextBlock1Text(txt) { 
        var silverlightControlHost1 = document.getElementById("silverlightControlHost1"); 
        silverlightControlHost1.Content.SLObject1.SetTextBlock1Text(txt); 
    } 
</script> 
</head> 
<body> 
    <div id="div1"> 
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" 
            width="400" height="300" id="silverlightControlHost1"> 
            <param name="source" value="ClientBin/SilverlightApplication1.xap" /> 
            <param name="background" value="green" /> 
        </object> 
    </div> 
    <div id="div2"> 
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="400" height="300"> 
            <param name="source" value="ClientBin/SilverlightApplication2.xap" /> 
            <param name="background" value="red" /> 
        </object> 
    </div> 
</body> 
</html>

Successivamente si predispone l'oggetto Silverlight "chiamante" ad invocare tale funzione SetTextBlock1Text attraverso il metodo Invoke della classe HtmlPage.Window:

private void Button_Click(object sender, RoutedEventArgs e) 
{ 
   Button button = sender as Button; 
   string txt = String.Format("{0} è stato cliccato", button.Content); 
   HtmlPage.Window.Invoke("SetTextBlock1Text", new string[] { txt }); 
}

Lo snippet è molto semplice: alla pressione di un Button viene passato come parametro alla funzione un testo corrispondente al nome dell'oggetto premuto, la funzione Javascript recupera l'istanza dell'oggetto a cui inviare l'informazione e la passa come parametro della specifica funzione "managed", precedentemente predisposta attraverso l'attributo [ScriptableMember].

Prendendo spunto da questo esempio è possibile costruire un piccolo modello di comunicazione maggiormente flessibile che possa estendersi anche a più oggetti contemporaneamente.