Advertisement

integrating html and silverlight

in part 1 of my baseball example concept, i discussed how i was able to re-use some SVG vector art in XAML.  in that screencast i used an SVG file and a PDF file.  it set the stage for the remaining part of my samples here.  to recap, my goal is to show: using vector files for XAML (done), integrating that XAML and html functionality (here) and then to show a "game play" view of the vector art, extracting just the field information.

in this part 2 of that goal, i set out to recreate a different user experience for the ticket purchase process of the online site for the baseball team.  right now at the dbacks seating/pricing site, they provide a chart and a color match html table.  there is some "zoom" functionality (really it is just image swapping) to get a closer look at the sections.  to me, i wanted to see a simpler implementation -- don't make me think.  when i choose the infield section, clearly show me where that is -- if i can't decipher the colors very well, then i might not understand where the section is.  this is, of course, a very simple sample, but one that can easily demonstrate how easy it is to work with silverlight and html from a DOM perspective.

you see, once the silverlight plugin is loaded, it is a part of the page DOM.  because of this, other elements can dig into it, manipulate XAML, execute storyboards, etc. -- and vice versa...the silverlight plugin can alter html on the same page.  it actually is quite simple, but i've received some questions on it, so i thought i'd whip this quick sample together.  please subscribe to the podcast feed on the left to get the previous screencast and future ones as well.

i hope it helps.  if it doesn't, let me know or let me know how to refine a better sample.  leave a comment in the blogs.

part 3 will be (maybe) the final part of this sample, demonstrating a "game view" using the same imported vector data, real-time data from SQL server, asp.net ajax integration...it's wicked cool and i can't wait to post it!

  1. Gravatar
    10/4/2007 1:12 AM | # re: integrating html and silverlight
    This is great. I love the integration between html and silverlight and the possibilities are only limited by your imagination.

    One question - I read around and I see that it is possible to get circular references so that it is important to implement a dispose pattern. Now for what you have done so far in this sample I do not see a need to do this, but if you are going to be dynamically creating and destroying objects and wiring event handlers it will become so. Nikhil Kothari in his Script# project has implemented such a pattern which appears to make use of an application object to manage the lifetime of objects. How hard do you think it would be to implement such a framework oneself for just javascript projects (which do not have to use ASP.NET and Nikhil's Scriptlet control) - are you aware whether anybody has plans to release such a framework? Or am I missing something glaringly obvious?

    Thanks,
    Rob
  2. 10/4/2007 7:05 AM | # re: integrating html and silverlight
    rob: agreed, if you are creating dynamic xaml fragments and inserting them into the dom, you'd want a dispose pattern (assuming you'll be disposing them at some point). as such, this is of course a sample only and not all best practices are implemented :-)
  3. 2/10/2009 10:13 PM | # re: integrating html and silverlight
    Hi Tim,

    Could you point me to the part 3 of your baseball example? (There's no easy way of linking them...)

    The first part link (also in the content above) for anyone interested is:
    timheuer.com/.../...g-to-xaml-for-silverlight.aspx

    Thanks
    Leon
  4. 2/11/2009 10:16 AM | # re: integrating html and silverlight
    Leon unfortunately me and Rob never finished part 3 fully :-( -- other projects got in the way -- we had a working prototype that used Ajax calls to get real-time data and execute storyboards to simulate playback animating an object 'running the bases' and watching a ball get hit to the outfield, etc. I don't think Rob has his prototype anymore, but if we dig it up, I'll post it here.

 
Please add 3 and 7 and type the answer here:
First time here? You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting! (hide this)