Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on


  • Be the first to comment

  • Be the first to like this


  1. 1. Silverlight 2 "Tricks with the browser" Mike Taulty Developer & Platform Group Microsoft Ltd [email_address] (/
  2. 2. The shape of the session
  3. 3. Where we are up to
  4. 4. Mixed Content in the Browser HTML Silverlight
  5. 5. Mixed Content in the Browser <head/> <body> <div id=“foo”> <input type=“button” value=“Click Me”/> </div> </body> <UserControl> <Grid x:Name=“myGrid”> <Button Content=“Click Me”/> </Grid> </UserControl>
  6. 6. Mixed Content in the Browser Browser Sandbox JavaScript Runtime .NET Core CLR HTML Page DOM <body> <object id=“silverlightPlugIn1” type=&quot;application/x-silverlight-2&quot;> <param name=&quot;source&quot; value=&quot;myApp.xap&quot;/> </object> </body> Silverlight Plug-In HTML Bridge CLR App Domain Application .NET Code Silverlight UI DOM
  7. 7. Where we are up to
  8. 8. Controlling the Silverlight Plug-In It’s an object tag; All Properties/Events on the Plug-In Subset that are initialisation only Subset that are post-initialisation only <object> JavaScript .NET
  9. 9. Controlling the Silverlight Plug-In It’s an object tag; Standard HTML Object Tag Parameters type tabIndex data id, style, etc. width culture height uiculture altHtml Recommended approach is not to use this but to set inner HTML of object tag Relevant for loading of satellite assemblies
  10. 10. Controlling the Silverlight Plug-In Display Parameters <ul><li>Background </li></ul><ul><ul><li>Relevant if not obscured by other content </li></ul></ul><ul><li>Windowless </li></ul><ul><ul><li>Only relevant on Windows </li></ul></ul><ul><ul><li>Enables HTML overlay with transparency </li></ul></ul>
  11. 11. Controlling the Silverlight Plug-In HTML Interop Parameters <ul><li>AllowHtmlPopupWindow </li></ul><ul><ul><li>Controls HtmlPage.PopupWindow </li></ul></ul><ul><li>EnableHtmlAccess </li></ul><ul><ul><li>Controls whether Silverlight (.NET) code can access the browser and HTML DOM </li></ul></ul>
  12. 12. Controlling the Silverlight Plug-In Debugging/Analysis Parameters <ul><li>EnableRedrawRegions </li></ul><ul><ul><li>Visually highlight which areas are being re-painted </li></ul></ul>
  13. 13. Controlling the Silverlight Plug-In Plugin Parameters <ul><li>AutoUpgrade & MinRuntimeVersion </li></ul><ul><ul><li>Only make sense together </li></ul></ul><ul><li>IsLoaded </li></ul><ul><ul><li>After XAML has loaded but before OnLoad event </li></ul></ul>
  14. 14. Controlling the Silverlight Plug-In Application Parameters <ul><li>SplashScreenSource </li></ul><ul><ul><li>Points to a piece of stand-alone XAML backed only by JavaScript </li></ul></ul><ul><ul><li>Possibly better to avoid and factor your XAP to get .NET code on the screen quickly </li></ul></ul>
  15. 15. The less obvious parameters <ul><li>NB: Some other parameters we’ll revisit later </li></ul>
  16. 16. Controlling the Plug-In
  17. 17. Where we are up to
  18. 18. .NET code against the plug-in
  19. 19. .NET code against the browser
  20. 20. .NET against the browser
  21. 21. Where we are up to
  22. 22. HTML UI from .NET <head/> <body> <div id=“foo”> <input type=“button” value=“Click Me”/> </div> </body> void Foo() { // Grab HTML & Play With It } <ul><li>Access existing elements </li></ul><ul><ul><li>Add/Remove/Change properties </li></ul></ul><ul><ul><li>Handle events </li></ul></ul><ul><li>Add/Remove elements </li></ul>
  23. 23. HTML UI from .NET
  24. 24. HTML UI from .NET
  25. 25. Where we are up to
  26. 26. JavaScript and .NET code JavaScript .NET Marshalling Boundary .NET Code JavaScript Code <ul><li>Create instances </li></ul><ul><li>Call methods </li></ul><ul><li>Access properties </li></ul><ul><li>Call delegates </li></ul><ul><li>Handle events </li></ul><ul><li>Pass parameters </li></ul><ul><li>Receive return values </li></ul><ul><li>Handle exceptions </li></ul>
  27. 27. Marshalling JavaScript .NET NB: Special case for Date <-> DateTime which is really marshalling a browser object Marshalling Boundary string number boolean String “ Integers” Guid Boolean “ Floats” <ul><li>Marshalled by value </li></ul><ul><li>Look at source type </li></ul><ul><li>Look at destination type </li></ul><ul><li>Perform “natural” conversions </li></ul>
  28. 28. Marshalling JavaScript .NET NB: Not all methods on ScriptObject shown here Marshalling Boundary object window document element <ul><li>Marshalled by reference </li></ul>
  29. 29. Marshalling JavaScript .NET Marshalling Boundary browser object object <ul><li>Marshalled by reference </li></ul>Exposed Properties Exposed Methods Exposed Events
  30. 30. There’s more to this 
  31. 31. Tour of .NET <-> JavaScript
  32. 32. Controlling Access <ul><li>enableHtmlAccess </li></ul><ul><ul><li><object/> tag property </li></ul></ul><ul><ul><li>Silverlight code -> HTML Browser/DOM </li></ul></ul><ul><ul><li>Default: false for x-domain, true for same-domain </li></ul></ul><ul><li>ExternalCallersFromCrossDomain </li></ul><ul><ul><li>Application manifest setting (in the XAP) </li></ul></ul><ul><ul><li>JavaScript code -> Silverlight code/XAML DOM </li></ul></ul><ul><ul><li>Default: NoAccess for x-domain, true for same-domain </li></ul></ul>
  33. 33. Where we are up to
  34. 34. XAML UI from JavaScript <head> <script type=“text/javascript”> function CreateXaml() { } </script> <body> </body> <ul><li>Access existing elements </li></ul><ul><ul><li>Add/Remove/Change properties </li></ul></ul><ul><ul><li>Handle events </li></ul></ul><ul><li>Add/Remove XAML content </li></ul><UserControl> <Grid x:Name=“myGrid”> <Button Content=“Click Me”/> </Grid> </UserControl>
  35. 35. XAML UI from JavaScript <ul><li>Somewhat of a legacy from Silverlight 1.0 </li></ul><ul><li>Limitations around </li></ul><ul><ul><li>Objects that can be programmed against </li></ul></ul><ul><ul><li>XAML that can be used to create objects </li></ul></ul><ul><li>Key methods </li></ul><ul><ul><li>plugin.content.findName() </li></ul></ul><ul><ul><li>plugin.content.createFromXaml() </li></ul></ul><ul><li>Generally – avoid unless no other option </li></ul>
  36. 36. XAML UI from JavaScript
  37. 37. Resources <ul><li>The one-stop-shop </li></ul><ul><ul><li> </li></ul></ul><ul><li>The best blog post on the topic </li></ul><ul><ul><li>Wilco Bauwer on Silverlight Interop </li></ul></ul><ul><li>The somewhat obfuscated MSDN docs </li></ul><ul><ul><li>JavaScript API for Silverlight </li></ul></ul><ul><ul><li>HTML Bridge: Interaction between HTML and .NET </li></ul></ul>
  38. 38. Silverlight 2 &quot;Tricks with the browser&quot; Mike Taulty Developer & Platform Group Microsoft Ltd [email_address] (/
  39. 39. © 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.