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