Here is the solution which I promised to give in one of my older posts titled Javascripting silverlight.I delayed because this post needs some prerequisites which I discussed in the below posts.
Inter silverlight communication or cross Silverlight plugin communication means just interaction between 2 or more plugins hosted in same web page.To achieve this we have to write a javascript layer which controls the flow of communication.
It means each plug in will talk to javascript layer if they want to communication to other plug in.The javascript layer is responsible for the routing of these communications.
For 2 way communication we need to make the Page class as Scriptable.The Page class should have methods decorated with ScriptableMember which talk to javascript.
Sample
Lets take the case of Sliders.Our Silverlight page have a slider and there are 2 instances of Plug in the same web page.Our aim is to sync Sliders in these plugins.
Silverlight side
On slider's ValueChanged event handler we tells Javascript to adjust the slider in plugins.The reverse ie setting slider value on valuechange of other plug in is done in some other method which is marked as ScriptableMember.
[ScriptableType]
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
HtmlPage.RegisterScriptableObject("mainpage", this);
}
private void sldr_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
HtmlPage.Window.Invoke("ValueChanged", sldr.Value);
}
[ScriptableMember]
public void SetValue(double d)
{
sldr.Value = d;
}
Javascript side
Here we will accept the value provided by plugin and pass the same to all the plugins by getting their references
<head runat="server">
<title>Test Page For SilverlightApplication1</title>
<script language="javascript">
function ValueChanged(value)
{
var Host1 = document.getElementById("Xaml1");
var Host2 = document.getElementById("Xaml2");
Host1.content.mainpage.SetValue(value);
Host2.content.mainpage.SetValue(value);
}
function clicked()
{
var name=document.getElementById("txt");
var val=parseFloat(name.value);
if(val!=null){
ValueChanged(val);
}
}
</script>
</head>
<body style="height:300;margin:0;">
<form id="form1" runat="server" style="height:300;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height:300;">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" Version="2.0" Width="300" Height="300" />
</div>
<br /> <hr />
<marquee> <a href="#">HTML area</a></marquee>
<hr />
<input type="text" id="txt" value="50" />
<button onclick="clicked()">Change value</button>
<div style="height:300;">
<asp:Silverlight ID="Xaml2" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" Version="2.0" Width="300" Height="300" />
</div>
</form>
</body>
Sample available here
2 comments:
Joy, This is very helpful. Thanks for posting. -B
Happy to hear that my post helped you.Looking for more comments from you...
Post a Comment