Download Sample Projects (31.34 kb)
This article will demonstrate how you can set up communication between two silverlight applications on the same page. I will try to outline the steps that you will need to follow to develop silverlight applications that can provide hooks for other silverlight or javscript on the page to communicate with it. So if you have two silverlight applications that expose these hooks then javascript functions on the page can become a bridge between the two or more applications to facilitate communication. So what we need to do is expose our silverlight application's properties, methods or events to be exposed to javascript on the page.
How to make a class accessible by javascript?
This is as simple as specifying ScriptableType attribute on a class. What this means is that all public properties, methods and events exposed by that class accessible by javascript. But what if you don't want to expose all public properties, methods and events exposed but only want selective ones exposed. In that case you can put ScriptableMember attribute on those selective properties or members or events. The following code snippet shows how this is accomplished in the code.
[ScriptableType]
public partial class Page : UserControl
{..}
public partial class Page : UserControl
{
[ScriptableMember]
public string Speak(string ctx, string message)
{..}
}
Next step is to register the class with Silverlight framework to make it accessible by JavaScript.
public Page()
{
InitializeComponent();
HtmlPage.RegisterScriptableObject("Communicator", this);
}
First parameter is name by which the class will be recognanized by JavaScript. You will notice that I used that name as "Communicator" instead of actual class name "Page". This feature allows you to use alias name for the class. Second parameter is instance of the class that needs to be registered.
How to talk to javscript from silverlight application?
Silverlight framework facilitates communication to javascript on page through HtmlPage.Window.Invoke method. You call this method from application to call any javascript method. First argument to this function is name of JavaScript function and second pramater is array of arguments that method can expect. Following code shows a JavaScript method on page and how it is being called from Silverlight application.
JavaScript Code:
<script type="text/javascript">
function SpeakWithB(ctx, msg) {
var pluginB = document.getElementById("SpeakerBPlugin");
pluginB.content.Communicator.Speak(ctx, msg);
}
</script>
Silverlight Code:
private void Talk_Click(object sender, RoutedEventArgs e)
{
if (!string.IsNullOrEmpty(this.MessageText.Text))
{
HtmlPage.Window.Invoke("SpeakWithB",
new object[] { Guid.NewGuid().ToString("N"), MessageText.Text });
MessageText.Text = "";
}
}
How to talk to Silverlight from JavaScript?
From the code above you can see that in JavaScript function, you get an instance of Silverlight plugin object. Silverlight exposes the registered class through Content proprty of HTML DOM element for the plugin. Then you can call the method exposed by Silverlight class.
Samples Project
Attached sample project demonstrates these concepts. There are 2 silverlight applications on the page that communicate to each other. Try it yourself.
