PageRenderTime 9ms CodeModel.GetById 2ms app.highlight 2ms RepoModel.GetById 2ms app.codeStats 0ms

/Visual Studio 2008/CSSL3HTMLBridge/CSSL3HTMLBridge/ReadMe.txt

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