An Introduction to the Silverlight samples in the All-In-One Framework

========================================================================
    SILVERLIGHT APPLICATION : VBSL3HTMLBridge Project Overview
========================================================================

/////////////////////////////////////////////////////////////////////////////
Use:

This project create a group of samples demonstrating the interactivity between
silverlight application and javascript. The sample includes:
    Call Javascript method from managed code
    Handle Html event from managed code
    Call managed code method from javascript
    Handle managed code event from javascript


/////////////////////////////////////////////////////////////////////////////
Prerequisites:

Silverlight 3 Tools for Visual Studio 2008 SP1
http://www.microsoft.com/downloads/details.aspx?familyid=9442b0f2-7465-417a-88f3-5e7b5409e9dd&displaylang=en

Silverilght 3 runtime:
http://silverlight.net/getstarted/


/////////////////////////////////////////////////////////////////////////////
Code Logic:

Sample 1: Call Javascript method from managed code
    1. Write javascript method and put in header of silverlight hosted page.
        function changetext(name) {
            document.getElementById('Text1').value = name;
        }
        
    2. Invoke javascript method in managed code.
        HtmlPage.Window.Invoke("changetext", tb1.Text)

Sample 2: Handle Html event from managed code
    1. Attach html event in MainPage Loaded event handler.
        HtmlPage.Document.GetElementById("Text2").AttachEvent("onkeyup", New EventHandler(AddressOf HtmlKeyUp))
    
    2. Write handler method "HtmlKeyUp".
        Private Sub HtmlKeyUp(ByVal sender As Object, ByVal e As EventArgs)
            Me.tb2.Text = DirectCast(sender, HtmlElement).GetProperty("value").ToString()
        End Sub

Sample 3: Call managed code method from javascript
    1. Write method in MainPage code behind and apply ScriptableMember attribute
        <ScriptableMember()> _
        Public Sub ChangeTB3Text(ByVal text As String)
            tb3.Text = text
        End Sub
        
    2. Register ScriptableObject instance in MainPage Loaded event.
        HtmlPage.RegisterScriptableObject("silverlightPage", Me)

    3. Write javascript event handler for html textbox onchanged event. In handler function, call managed code.
        function ontext3keydown() {
            var text = document.getElementById('Text3').value;
            // calling managed code method
            var silverlight1 = document.getElementById('silverlight1');
            silverlight1.Content.silverlightPage.ChangeTB3Text(text);
        }
    
Sample 4: Handle managed code event from javascript
    1. Write custom EventArgs for transmitting TextBox.Text value.
        Public Class TextEventArgs
            Inherits EventArgs

            Private _text As String

            <ScriptableMember()> _
            Public Property [Text]() As String
                Get
                    Return _text
                End Get
                Set(ByVal value As String)
                    _text = value
                End Set
            End Property
        End Class
        
    2. Write Event in MainPage code behind.
        <ScriptableMember()> _
        Public Event TextChanged As EventHandler(Of TextEventArgs)
    
    3. Fire event when silverlight TextBox.Text changed.
        Private Sub tb4_TextChanged(ByVal sender As Object, ByVal e As TextChangedEventArgs)
            Dim myargs = New TextEventArgs()
            myargs.Text = tb4.Text
            RaiseEvent TextChanged(Me, myargs)
        End Sub
        
    4. Register ScriptableObject instance in MainPage Loaded event.
        HtmlPage.RegisterScriptableObject("silverlightPage", Me)
        
    5. In silverlight hosted html page, attaching Silverlight loaded event.
        <param name="onLoad" value="onSilverlightLoaded" />

    6. In silverlight loaded eventhandler, handle managed code event.
        function onSilverlightLoaded() {
            var silverlight1 = document.getElementById('silverlight1');
            silverlight1.Content.silverlightPage.TextChanged = function(sender, e) {
                document.getElementById('Text4').value = e.Text;
            }
        }        


/////////////////////////////////////////////////////////////////////////////
References:

HTML Bridge: Interaction Between HTML and Managed Code
http://msdn.microsoft.com/en-us/library/cc645076(VS.95).aspx


/////////////////////////////////////////////////////////////////////////////