In our Update the Silverlight toolkit(AutoCompleteBox) With the HTML DOM value post, we talked about the interacting between the Silverlight application and html DOM. It's about using the Silverlight to access the DOM. Today we are going to discuss using the DOM to access the Silverlight.
In the post Using the Silverlight toolkit build a online TreeView, we had a demo application to demo a buddy list tree using the Silverlight toolkit.Today we will wrote a more complex application to update the online and offline buddy members.
To make thing more difficult, we limited the require to get the buddy info from the html element which is out side of the Silverlight application.
Before we started, we need to introduce a new concept called Bridge Pattern , and we need to know a trick attribute "ScriptableMember()".
The Silverlight code will be like
1: [ScriptableMember()]
2: public void AddOnline(string name)
3: {
4: TreeViewItem onlineItem = (TreeViewItem)treeview.Items[0];
5: TreeViewItem buddy1 = new TreeViewItem();
6: buddy1.Header = name;
7: onlineItem.Items.Add(buddy1);
8: int count = onlineItem.Items.Count;
9: onlineItem.Header = string.Format("online({0})", count);
10: }
11: [ScriptableMember()]
12: public void AddOffline(string name)
13: {
14: TreeViewItem offlineItem = (TreeViewItem)treeview.Items[1];
15: TreeViewItem offlineContact = new TreeViewItem();
16: offlineContact.Header = name;
17: offlineItem.Items.Add(offlineContact);
18: int count = offlineItem.Items.Count;
19: offlineItem.Header = string.Format("offline({0})", count);
20: }
21: public Page()
22: {
23: InitializeComponent();
24: TreeViewItem onlineItem = new TreeViewItem();
25: onlineItem.Header = "Online(0)";
26: treeview.Items.Add(onlineItem);
27: AddOnline("Robert1");
28: AddOnline("Robert2");
29: TreeViewItem offlineItem = new TreeViewItem();
30: offlineItem.Header = "Offline(0)";
31: treeview.Items.Add(offlineItem);
32: AddOffline("Roboo1");
33: }
You should notice that the AddOnline and AddOffline methods were marked by the attribute [ScriptableMember()]
Another trick will be how can we get the Silverlight object in the DOM script which will be the JavaScript in most case.
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/ToolboxTest.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" OnPluginLoaded="silverLightLoaded" />
As you can see, there is one OnPluginLoaded even and we will register this event by using the JavaScript function
1: var silverlight = null;
2:
3: function silverLightLoaded(sender) {
4: silverlight = sender.get_element();
5:
6: }
The full html source will like
1: <head runat="server">
2: <title>ToolboxTest</title>
3: <script type="text/javascript" language="javascript">
4: var silverlight = null;
5:
6: function silverLightLoaded(sender) {
7: silverlight = sender.get_element();
8:
9: }
10:
11: function Button1_onclick() {
12:
13: var value = document.getElementById("DataSource").value;
14: silverlight.Content.BuddyList.AddOnline(value);
15:
16: }
17: </script>
18: </head>
19: <body style="height:100%;margin:0;">
20: <form id="form1" runat="server" style="height:100%;">
21: <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
22: <div style="height:100%;">
23: <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/ToolboxTest.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" OnPluginLoaded="silverLightLoaded" />
24: </div>
25: <input type="text" id="DataSource" name="DataSource" />
26: <input type=button value="See" onclick="Button1_onclick()" />
27: </form>
28: </body>
29: </html>
If you want to run this code, nothing will happen! The reason is the Javascript does not have a way to access the content inside the Silverlight now. So there is one line of code need to be added.
At the end of the Page load event at Silverlight, we should register a object for the outside to be referenced.