Information

SilverlightIntrawebPart4

In this last part of the four part series we'll see how to talk back to Silverlight from Intraweb.

As mentioned in part 3, any communication with Silverlight and the page it's hosted on is done via Javascript. When talking back to Silverlight using Intraweb, we can either do it directly on the client side using one of the ScriptEvents properties, such as onClick or use Ajax. By using Ajax, we can use server side data and perform any complex processing before sending any results to Silverlight. To do so, we'll make use of one of the less well-known functionality that Intraweb provides with it's Ajax implementation: the AddJavascriptToExecute method of the CallbackResponse object.

In this example, we want to send the contents of a TIWEdit control to Silverlight when the OnAsyncClick event of a TIWButton is pressed. In the event handler we add the following code:

procedure TIWForm4.IWButton1AsyncClick(Sender: TObject;
  EventParams: TStringList);
var
  code :TStringList;
begin
  code := TStringList.Create;
  try
    code.Add('var sl = document.getElementById("IWSILVERLIGHT1");');
    code.Add('sl.Content.Page.UpdateText("' + IWEdit1.Text + '");');
    WebApplication.CallBackResponse.AddJavaScriptToExecute(code.Text);
  finally
    FreeAndNil(code);
  end;
end;

All we are doing here is call a method called UpdateText that belongs to sl.Content.Page (more on that in a bit), and passing in the contents of IWEdit1.Text. The reason we are doing it like this, even though it's just simple Javascript is so that we can do server side processing if required. The contents of code is passed as a parameter to the CallBackResponse.AddJavascriptToExecute method, which will execute any code passed in when the Ajax response is sent back to the client.

But what is this UpdateText method? Any class in C# can be made an a scriptable object, that is, an object that can be accessed via Javascript. Since our silverlight control is a class, we can make it scriptable. To do so, we need to add some attribute to our code and also register the class as scriptable.

  [ScriptableType]
  public partial class Page : UserControl {
    public Page() {
      InitializeComponent();
    }

So that we don't open up our entire class to Javascript, we can define which methods can be called. To make a method available we decorate it with the ScriptableMember attribute.

    [ScriptableMember]
    public void UpdateText(string text) {
      textUpdate.Text = text;
    }

All this method is doing is updating the text box control with the parameter passed in (which is what we're providing from our Javascript asynchronous call in Intraweb).

The only thing left is to register the page as scriptable, which is done in the App.xaml.cs file of our Silverlight project:

    private void Application_Startup(object sender, StartupEventArgs e) {
      var page = new Page();
      HtmlPage.RegisterScriptableObject("Page", page);
      this.RootVisual = page;
    }

As you can see, working with Silverlight and Intraweb is pretty straight-forward. This demo might have seen a little complex, but that's because I tried to show various things all packed in one.