Getting Started with Adobe After Effects - Part 6: Motion Blur


Upload Image Close it
Select File

Browse by Tags · View All
SQL Server 119
#SQLServer 88
Oracle 70
#SQL SERVER 35
BRH 31
SQL Server 2012 29
denali 23
#TSQL 19
TSQL 19
C# 15

Archive · View All
October 2011 31
November 2011 30
September 2011 30
August 2011 18
December 2011 15
July 2011 13
June 2011 8
May 2012 4
April 2012 3
January 2010 3

Invoke Silverlight Methods through Javascript

Apr 15 2012 3:42AM by Niladri Biswas   

Introduction

In this article, I will show how to invoke Silverlight methods from javascript. We will learn this by performing a simple calculator example with some basic arithmetical functionalities being expose.

What we need to perform the experiment?

Well for doing this experiment, what we need is the following

  1. VS 2010
  2. Asp.net
  3. Silverlight
  4. System.Web.Silverlight.dll(If your system does not have this, you can download from here or any where else if you found a link)

N.B.System.Web.Silverlight.dll in not part of the SDK since Silverlight 3

What is the importance of System.Web.Silverlight.dll?

It provides the ASP.NET Silverlight server control that was designed to make it easier to create the object tag needed to describe the silverlight plug-in.Since this server-side control was removed since Silverlight SDK 3,so we have to build the object tag by ourself.

Steps to perform the experiment

Step 1:

Open the VS2010 and File->New->Project->Silverlight(Choose from installed templates) and choose Silverlight Applications.Give a proper name to the Application and click on OK button

In the next screen "New Silverlight Application" that appears, keep everything as it is and click on the OK button

Two projects will be created in the solution explorer - one for Silverlight by the name "SL_JS_Experiment" and the other for is WebApplication by "SL_JS_Experiment.Web".

Step 2:

Next, add a reference to System.Web.Silverlight.dll to the web project which is "SL_JS_Experiment.Web" here

Step 3:

We will now add the basic maths function (Add, Subtract,Multiply, Divide) in the Silverlight code behind which is "MainPage.xaml.cs" file.

First we need to add System.Windows.Browser.HtmlPage.RegisterScriptableObject(string scriptKey, object instance) in the Silverlight page constructor

.
public MainPage()
{
	InitializeComponent();
	System.Windows.Browser.HtmlPage.RegisterScriptableObject("SilverlightMethods", this);  
}

The RegisterScriptableObject method registers a managed object for scriptable access by JavaScript code.

Step 4:

Once done, next for every function that we will write, we need to decorate that with the [ScriptableMember] attribute.This attribute indicates that a specific property, method, or event is accessible to JavaScript callers.It resides in System.Windows.Browser namespace.

[ScriptableMember]
public int Addition(int first, int second)
{
	return (first + second);
}

[ScriptableMember]
public int Subtraction(int first, int second)
{
	return (first - second);
}

[ScriptableMember]
public int Multiplication(int first, int second)
{
	return (first * second);
}

[ScriptableMember]
public int Division(int first, int second)
{
	return (first / second);
}

The complete code is as under

using System.Windows.Browser;
using System.Windows.Controls;

namespace SL_JS_Experiment
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            System.Windows.Browser.HtmlPage.RegisterScriptableObject("SilverlightMethods", this); 
        }

        [ScriptableMember]
        public int Addition(int first, int second)
        {
            return (first + second);
        }

        [ScriptableMember]
        public int Subtraction(int first, int second)
        {
            return (first - second);
        }

        [ScriptableMember]
        public int Multiplication(int first, int second)
        {
            return (first * second);
        }

        [ScriptableMember]
        public int Division(int first, int second)
        {
            return (first / second);
        }
    }
}

Step 5:

Now add new aspx page in the web-application project(SL_JS_Experiment.Web) and call it as "Test.aspx"

Step 6:

We need to register the "System.Web.Silverlight.dll" assembly in our web page.Henceforth, let us add the below line of code on top of the aspx page

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>

Step 7:

Now let us complete the design.Write the below code inside the body tag

    <form id="form1" runat="server">
    <asp:ScriptManager ID="scriptManager" runat="server" />
    <asp:Silverlight Height="100px" ID="slCtrl" runat="server" Source="~/ClientBin/SL_JS_Experiment.xap"
        Width="100px">
    </asp:Silverlight>
    <table>

    <!-- For Input -->
        <tr>
            <td>
               Enter First Value: <input id="textValue1" type="text" />
            </td>
            <td>
                
            </td>
            <td>
               Enter Second Value: <input id="textValue2" type="text" />
            </td>
            <td>
                =
            </td>
            <td>
                <input id="textResult" type="text" readonly="readonly" />
            </td>
         </tr>

        <!-- For Operations -->
         <tr>
            <td>
                <input id="btnAdd" type="button" value="Add" onclick="javascript:CallSLFunction('+');" />            
                <input id="btnSubtract" type="button" value="Subtract" onclick="javascript:CallSLFunction('-');" />            
                <input id="btnMultiply" type="button" value="Multiply" onclick="javascript:CallSLFunction('*');" />            
                <input id="btnDivide" type="button" value="Divide" onclick="javascript:CallSLFunction('/');" />
            </td>            
        </tr>
    </table>
    </form>

The "SL_JS_Experiment.xap" file is found in the ClientBin folder

N.B.~A detail about xap file can be found from here

The code is pretty simple to understand. We have two input text-box controls where we will provide the input values and a result text-box(which is read-only) where the output will be presented.

Also we have 4 buttons that are invoking the "CallSLFunction" function that accepts one argument as operator.

Step 8:

Now we will implement the "CallSLFunction" javascript function that is as under

function CallSLFunction(operator) 
{
	//variable that stores reference of the asp:Silverlight control
	var slCtrl = document.getElementById('slCtrl'); 

	//variable that will store the result
	var result = 0;

	if (null != slCtrl) {

		var firstInputValue = document.getElementById('textValue1').value;
		var secondInputValue = document.getElementById('textValue2').value;

		switch (operator) {
			case '+':
				result = slCtrl.Content.SilverlightMethods.Addition(firstInputValue, secondInputValue);
				break;
			case '-':
				result = slCtrl.Content.SilverlightMethods.Subtraction(firstInputValue, secondInputValue);
				break;
			case '*':
				result = slCtrl.Content.SilverlightMethods.Multiplication(firstInputValue, secondInputValue);
				break;
			case '/':
				result = slCtrl.Content.SilverlightMethods.Division(firstInputValue, secondInputValue);
				break;
			default:
				alert("So such operation available");
		}

		//display the result
		document.getElementById('textResult').value = result 
	}
}

Again, it is a simple code where we are invoking the silverlight function based on the operator being passed as argument.

But the point of interest is how we are invoking the Silverlight function!Well, we are doing so by calling "ScriptKey" of the RegisterScriptableObject function of Silverlight

Step 9:

So now we are all set.Build the solution.Make the web project (SL_JS_Experiment.Web) as the start-up project and "Test.aspx" as start page. Run the application

Conclusion

So we have learn as how to invoke silver light function from java script.Hope this article will be helpful as a reference.

Zip file is attached

Tags: javascript, silverlight,


Niladri Biswas
7 · 21% · 6720
3
 
0
Lifesaver
 
0
Refreshed
 
0
Learned
 
0
Incorrect



Submit

Your Comment


Sign Up or Login to post a comment.

"Invoke Silverlight Methods through Javascript" rated 5 out of 5 by 3 readers
Invoke Silverlight Methods through Javascript , 5.0 out of 5 based on 3 ratings
    Copyright © Rivera Informatic Private Ltd Contact us      Privacy Policy      Terms of use      Report Abuse      Advertising      [ZULU1097]