PageRenderTime 23ms CodeModel.GetById 16ms app.highlight 3ms RepoModel.GetById 1ms app.codeStats 0ms

/Visual Studio 2008/CSSL3HTMLBridge/ReadMe.txt

#
Plain Text | 109 lines | 83 code | 26 blank | 0 comment | 0 complexity | 8626db5dd467b9b4fa1383b71a14e208 MD5 | raw file
  1========================================================================
  2    SILVERLIGHT APPLICATION : CSSL3HTMLBridge Project Overview
  3========================================================================
  4
  5/////////////////////////////////////////////////////////////////////////////
  6Use:
  7
  8This project create a group of samples demonstrating the interactivity between
  9silverlight application and javascript. The sample includes:
 10    Call Javascript method from managed code
 11    Handle Html event from managed code
 12    Call managed code method from javascript
 13    Handle managed code event from javascript
 14
 15
 16/////////////////////////////////////////////////////////////////////////////
 17Prerequisites:
 18
 19Silverlight 3 Tools for Visual Studio 2008 SP1
 20http://www.microsoft.com/downloads/details.aspx?familyid=9442b0f2-7465-417a-88f3-5e7b5409e9dd&displaylang=en
 21
 22Silverilght 3 runtime:
 23http://silverlight.net/getstarted/
 24
 25
 26/////////////////////////////////////////////////////////////////////////////
 27Code Logic:
 28
 29Sample 1: Call Javascript method from managed code
 30    1. Write javascript method and put in header of silverlight hosted page.
 31        function changetext(name) {
 32            document.getElementById('Text1').value = name;
 33        }
 34        
 35    2. Invoke javascript method in managed code.
 36        HtmlPage.Window.Invoke("changetext", tb1.Text);
 37
 38Sample 2: Handle Html event from managed code
 39    1. Attach html event in MainPage Loaded event handler.
 40        HtmlPage.Document.GetElementById("Text2").AttachEvent("onkeyup", new EventHandler(HtmlKeyUp));
 41    
 42    2. Write handler method "HtmlKeyUp".
 43        private void HtmlKeyUp(object sender, EventArgs e)
 44        {
 45                var value = ((HtmlElement)sender).GetProperty("value");
 46                tb2.Text = value.ToString();
 47        }
 48
 49Sample 3: Call managed code method from javascript
 50    1. Write method in MainPage code behind and apply ScriptableMember attribute
 51        [ScriptableMember]
 52        public void ChangeTB3Text(string text)
 53        {
 54            tb3.Text = text;
 55        }
 56        
 57    2. Register ScriptableObject instance in MainPage Loaded event.
 58        HtmlPage.RegisterScriptableObject("silverlightPage", this);
 59
 60    3. Write javascript event handler for html textbox onchanged event. In handler function, call managed code.
 61        function ontext3keydown() {
 62            var text = document.getElementById('Text3').value;
 63            // calling managed code method
 64            var silverlight1 = document.getElementById('silverlight1');
 65            silverlight1.Content.silverlightPage.ChangeTB3Text(text);
 66        }
 67    
 68Sample 4: Handle managed code event from javascript
 69    1. Write custom EventArgs for transmitting TextBox.Text value.
 70        public class TextEventArgs : EventArgs
 71        {
 72            [ScriptableMember]
 73            public string Text { set; get; }
 74        }
 75        
 76    2. Write Event in MainPage code behind.
 77        [ScriptableMember]
 78        public event EventHandler<TextEventArgs> TextChanged;
 79    
 80    3. Fire event when silverlight TextBox.Text changed.
 81        void tb4_TextChanged(object sender, TextChangedEventArgs e)
 82        {
 83            if (TextChanged != null)
 84                TextChanged(this, new TextEventArgs { Text = tb4.Text });
 85        }
 86
 87    4. Register ScriptableObject instance in MainPage Loaded event.
 88        HtmlPage.RegisterScriptableObject("silverlightPage", this);
 89        
 90    5. In silverlight hosted html page, attaching Silverlight loaded event.
 91        <param name="onLoad" value="onSilverlightLoaded" />
 92
 93    6. In silverlight loaded eventhandler, handle managed code event.
 94        function onSilverlightLoaded() {
 95            var silverlight1 = document.getElementById('silverlight1');
 96            silverlight1.Content.silverlightPage.TextChanged = function(sender, e) {
 97                document.getElementById('Text4').value = e.Text;
 98            }
 99        }        
100
101
102/////////////////////////////////////////////////////////////////////////////
103References:
104
105HTML Bridge: Interaction Between HTML and Managed Code
106http://msdn.microsoft.com/en-us/library/cc645076(VS.95).aspx
107
108
109/////////////////////////////////////////////////////////////////////////////