Accessing ScriptableType objects of Silverlight from JavaScript

May 28, 2009 at 10:56 pm Leave a comment

 This post describes, how to access the custom objects defined in Silverlight via Javascript. It also shows how to access the content of Silverlight TextBox from Javascript.

 Creating a ScriptableType object in Silverlight Application

The ScriptableType attribute and ScriptableMember attribute defined in the System.Windows.Browser interface is used to make an object available to the client side.

Thus, we will declare a Person class with two properties, FName and LName and implement the INotifyPropertyChanged Interface so that the changes made to these properties can be reflected to all the objects that are accessing it.

Use the below code to define the Person Class.

Imports System.Windows.Browser

<ScriptableType()> _

Public Class Person

    Implements System.ComponentModel.INotifyPropertyChanged

    Public Sub New()

    End Sub

    Private Sub PropertyChangedCaller(ByVal PropertyName As String)

        RaiseEvent PropertyChanged(Me, New ComponentModel.PropertyChangedEventArgs(PropertyName))

    End Sub

    Private _FName As String

    <ScriptableMember()> _

    Public Property FName() As String

        Get

            Return _FName

        End Get

        Set(ByVal value As String)

            _FName = value

            PropertyChangedCaller(“FName”)

        End Set

    End Property

    Private _LName As String

    <ScriptableMember()> _

    Public Property LName() As String

        Get

            Return _LName

        End Get

        Set(ByVal value As String)

            _LName = value

            PropertyChangedCaller(“LName”)

        End Set

    End Property

 

    Public Event PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged

End Class

 

Creating Person Object in XAML and Binding the values to Silverlight TextBox controls

We will now create the object of Person class under the UserControl.Resources, declared above and then bind it to the TextBoxes. Use the following code for the same:

<UserControl.Resources>

<local:Person x:Name=”PersonObject” FName=”FirstName” LName=”LastName” />

</UserControl.Resources>

 

Use the code below to create the grid with text boxes and labels and bind them to above created resources:

<Grid x:Name=”LayoutRoot” Background=”White” DataContext=”{StaticResource PersonObject}”>

<Grid.ColumnDefinitions>

<ColumnDefinition/><ColumnDefinition/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

     <RowDefinition/><RowDefinition/><RowDefinition/>

</Grid.RowDefinitions>

<TextBlock Grid.Column=”0″ Grid.Row=”0″ Text=”First Name:”/>

<TextBlock Grid.Column=”0″ Grid.Row=”1″ Text=”Last Name:”/>

<TextBox Grid.Row=”0″ Grid.Column=”1″ Text=”{Binding FName, Mode=TwoWay}” />

<TextBox Grid.Row=”1″ Grid.Column=”1″ Text=”{Binding LName, Mode=TwoWay}” />

<TextBlock Text=”{Binding FName}” Grid.Row=”2″ Grid.Column=”0″/>

<TextBlock Text=”{Binding LName}” Grid.Row=”2″ Grid.Column=”1″/>

</Grid>

Registering the Person Object

To make the PersonObject available to clientside, we need to register the object, using the Browser.HtmlPage.RegisterScriptableObject. We may do this in the Page_Loaded event of the Silverlight application:

Private Sub Page_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded

‘Access the PersonObject defined under the UserControl.Resources

Dim personObject As Person = Me.Resources(“PersonObject”)

        Browser.HtmlPage.RegisterScriptableObject(“PersonObject”, personObject)

End Sub

 

Accessing the PersonObject from JavaScript

The PersonObject created above is now ready to be accessed from the JavaScript. Create a variable referencing the SilverlightPlugin in the ASPX Page. Next, access the Content of the SilverlightPlugin using the Content property. Finally, access the PersonObject from the Content of the SilverlightPlugin

            var silverlightplugin = $get(“Xaml1”);

            var content = silverlightplugin.content;

            var personObject = content.PersonObject;

 

Using the personObject, we may access it public properties. Thus,

alert(“Name = ” + personObject.FName + ” ” + personObject.LName);

 

will show the current content from the TextBoxes in the Silverlight TextBoxes as displayed below:

Output

Advertisements

Entry filed under: Silverlight. Tags: , , , , , , , , .

Sending Objects from .ASPX page to Silverlight ADO.Net DataServices and Silverlight

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Recent Posts


%d bloggers like this: