So far, you have seen how a Silverlight application can reach into the browser to perform navigation and manipulate HTML elements. The one weakness of this approach is that it creates tightly bound code–in other words, a Silverlight application that has hard-coded assumptions about the HTML elements on the current page and their unique IDs. Change these details in the HTML page, and the Silverlight code for interacting with them won’t work anymore.
One alternative that addresses this issue is to allow interaction between code, not elements.
For example, your Silverlight application can update the content of the HTML page by calling a JavaScript method that’s in the page. Essentially, the JavaScript code creates an extra layer of flexibility in between the Silverlight code and HTML content. This way, if the HTML elements on the page are ever changed, the JavaScript method can be updated to match at the same time and the Silverlight application won’t need to be recompiled. The same interaction can work in the reverse direction–for example, you can create JavaScript code that calls a Silverlight method that’s written in managed C# code.
In this article, we’ll learn how Silverlight can fire off JavaScript code,and how JavaScript code can trigger a method in your Silverlight application.
Calling Browser Script from Silverlight
Using the Silverlight classes in the System.Windows.Browser namespace, you can invoke a JavaScript function that’s declared in a script block. This gives you a disciplined, carefully controlled way for Silverlight code to interact with a page.
For example, assume you have this function defined in the <head> section of your HTML page:
<script type="text/javascript">
function changeParagraph(newText) {
var element = document.getElementById("paragraph");
element.innerHTML = newText;
}
</script>
To call this method, you need to use the HtmlWindow.GetProperty() method and pass in the name of the function. You receive a ScriptObject, which you can execute at any time by calling InvokeSelf().
ScriptObject script = (ScriptObject)HtmlPage.Window.GetProperty("changeParagraph");
When you call InvokeSelf(), you pass in all the parameters. The changeParagraph() function requires a single string paragraph, so you can call it like this:
script.InvokeSelf("Changed through JavaScript.");
Calling Silverlight Methods from the Browser
This process is a bit more involved. In order to make it work, you need to take the following steps:
- Create a public method in your Silverlight code that exposes the information or functionality you want the web page to use. You can place the method in your page class or in a separate class. You’ll need to stick to simple data types, like strings, Boolean values, and numbers, unless you want to go through the additional work of serializing your objects to a simpler form.
- Add the ScriptableMember attribute to the declaration of the method that you want to call from JavaScript.
- Add the ScriptableType attribute to the declaration of the class that includes the scriptable method.
- To expose your Silverlight method to JavaScript, call the HtmlPage.RegisterScriptableObject() method.
Provided you take all these steps, your JavaScript code will be able to call your Silverlight method through the <object> element that represents the Silverlight content region. However, to make this task easier, it’s important to give the <object> element a unique ID. By default, Visual Studio creates a test page that assigns a name to the <div> element that contains the <object> element (silverlightControlHost), but it doesn’t give a name to the <object> element inside. Before continuing, you should create a test page that adds this detail, as shown here:
<div id="silverlightControlHost"> <object data="data:application/x-silverlight," type="application/x-silverlight-2-b1" width="400" height="300" id="silverlightControl"> ... </object> <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe> </div>
After you’ve named the Silverlight control, you’re ready to create the scriptable Silverlight method.
To create this example, you need the custom page class shown here. It includes a single scriptable method, which is registered when the page is first created:
[ScriptableType()]
public partial class ScriptableSilverlight: UserControl
{
public ScriptableSilverlight()
{
InitializeComponent();
HtmlPage.RegisterScriptableObject("Page", this);
}
[ScriptableMember()]
public void ChangeText(string newText)
{
lbl.Text = newText;
}
}
When registering a scriptable type, you need to specify a JavaScript object name and pass a reference to the appropriate object. Here, an instance of the ScriptableSilverlight class is registered with the name Page. This tells Silverlight to create a property named Page in the Silverlight control on the JavaScript page. Thus, to call this method, the JavaScript code needs to use the find the Silverlight control, get its content, and then call its Page.ChangeText() method.
Here’s an example of a function that does exactly that:
<script type="text/javascript">
function updateSilverlightText()
{
var control = document.getElementById("silverlightControl");
control.content.Page.ChangeText(
"This TextBlock has been updated through JavaScript.");
}
</script>
You can trigger this JavaScript method at any time. Here’s an example that fires it off when a paragraph is clicked:
<p onclick="updateSilverlightText()">Click here to change the Silverlight TextBlock.</p>
Now, clicking the paragraph triggers the updateSilverlight() JavaScript function, which in turn calls the ChangeText() method that’s a part of your ScriptableSilverlight class.
Example : here
Hope this helps !!!
Jay Ganesh (.j.)
Filed under: WPF / Silverlight
