Geeks With Blogs
Braulio Díez Botella blog

When we develop our silverlight widget the sample page that we use normally is a nice servier side control called asp:Silverlight, that’s quite nice if you use ASP .net 3.5 SP1, but… what if your widget has to run on ASP .net 2.0, or PHP, or a plain HTML page…

Well… the first thing to note down is just that asp:Silverlight control is a nice server side control that is translated into HTML, no more no less. You can as well define directly an OBJECT tag and instantiate the control.

What are the main differences between the asp:Silverlight approach and the OBJECT approach?

-          The Object approach has a little bit more of work to declare it.

-          Both asp:Silverlight and Object have an OnLoad event but the signature of the event have different parameters.

-          The way in which we get the instance of the Silverlight control running is different

So let’s see how this work on a real sample:  sometime ago I developed an open source widget called DB Schema Viewer (http://dbschemaviewer.codeplex.com/), I just need code to instantiate the control on a simple HTML page, and interact with the widget using javascript (e.g. loading a DB Schema or zooming), for this sample we are going to see how to expose the zoom operation to javascript (javascript calling a SL method), and how to instantiate the control in HTML, grab the instance running and call the scriptable SL method from js.

First part exposing SL zoom operation to js

Silverlight code.

We have to set our page class to scriptable:

    [ScriptableType]

    public partial class Page : UserControl, IViewMainPage

 

On the page load or app startup we have to register our plugin instance and give it a name

        private void UserControl_Loaded(object sender, RoutedEventArgs e)

        {

            HtmlPage.RegisterScriptableObject("plDBSchemaViewer", this);

 

Then we have to define the zooming method as script table

   [ScriptableMember]

        public void ExecuteZoomOperation(bool zoomIn)

 

HTML / Javascript Code

We start from the sample HTML page that a Silverlight project create for us and add a new parameter  (OnLoad):

    <div id="silverlightControlHost">

        <object id="plugin" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

                                  <param name="source" value="./DBSchemaViewer.FrontEnd.Main.xap"/>

                                  <param name="onError" value="onSilverlightError" />

                                  <param name="background" value="white" />

                                  <param name="minRuntimeVersion" value="3.0.40624.0" />

                                  <param name="autoUpgrade" value="true" />

                                  <param name="onLoad" value="pluginLoaded" />

                                  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">

                                                  <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>

                                  </a>

                    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>

   </div>

 

This event will be triggered once the Silverlight plugin has been instantiated and the widget is up and running.

In the pluginLoaded method we can get from the parameters an instance to the SL plugin (good to hold it in a member variable) and execute any initial interaction with the plugin:

    // basic initialization plus instantiation

    // this flag will indicate us whether the viewer is ready (downloaded and running)

    var viewer_Loaded = false;

    var slCtl = null; 

    // -- This method is called by the SL application to notify the HTML page that the application

    // has been download and is ready to run and receive commands

    /// Just when the SL ctl is loaded this event is fired

    /// For the ASP .net version

    ///

    //    function pluginLoaded(sender) {    // ASPX version

    //        slCtl = sender.get_element();

    //        alert(slCtl.Content.mySLapp.MyToUpper("Test String"));

    //    }   

    function pluginLoaded(sender, args) {      // HTML version

        viewer_Loaded = true;

        slCtl = sender.getHost();               

    }

 

Now if we want to call from javascript the Silverlight zooming operation we only need to get from SlCtl the plugin instance the we have defined as scriptable in Sl, and call the zooming method:

    function GetPluginInstance() {

        var pluginInstance = null;

         if (viewer_Loaded == true) {

            pluginInstance = slCtl.Content.plDBSchemaViewer;

        }

        return pluginInstance

    } 

    function ZoomIn() {

        var pluginInstance = GetPluginInstance() 

        if (pluginInstance)

            pluginInstance.ExecuteZoomOperation(true);

    }

One last thing, you will need to include the autogenerated Silverlight.js file.

If you need more detailed info:

-          Working sample: http://dbschemaviewer.codeplex.com

-          Detailed info: http://msdn.microsoft.com/en-us/library/cc221414(VS.95).aspx

-          More about javascript and SL interaction: http://www.mostlydevelopers.com/mostlydevelopers/blog/post/2008/08/11/Call-Javascript-Method-from-Silverlight-and-Vice-Versa.aspx

Now you are prepared to intregrate your SL widget on any web technology (at the end everything is ported to plain HTML and Javascript  J).

Posted on Tuesday, August 11, 2009 11:22 PM | Back to top


Comments on this post: Interacting with Silverlight widgets on ASP .net 2.0, PHP, …

# re: Interacting with Silverlight widgets on ASP .net 2.0, PHP, …
Requesting Gravatar...
now this is quite interesting and fairly easy to follow... are there any downloadable widgets that act the same but is already established?
Left by folk on Apr 16, 2010 3:10 AM

# re: Interacting with Silverlight widgets on ASP .net 2.0, PHP, …
Requesting Gravatar...
Will check I have the sample somewhere in my harddisk and upload it to my skydrive.
Left by Braulio on Apr 16, 2010 12:45 PM

Your comment:
 (will show your gravatar)


Copyright © Braulio Díez Botella | Powered by: GeeksWithBlogs.net