Silverlight instantiation on 2.0

Article
04/03/2008

On my Deep zoom Post, I recommended that for Deep Zoom applications you instantiate the control using Silverlight.js to avoid the Click To Activate.

Some one picked on this and asked why the new default is using OBJECT. Here is what I know (and most of it comes from past emails with Piotr Puszkiewicz).

Using the OBJECT tag has a few advantages:

Customizing the experience is much easier .. All you do is put your install experience inside the object tag. For example, the defult puts an anchor with the GetSilverlight image:

 <object data="data:application/x-silverlight," …> 
<!—This is the isntall experience –-> 
  <a href="https://go.microsoft.com/fwlink/?LinkID=108182" style="text-decoration: none;">
    <img src=https://go.microsoft.com/fwlink/?LinkId=108181 
      alt="Get Microsoft Silverlight" style="border-style: none"/>
  </a>
<!—- end of  install -->
</object>

No javascript dependency. If your page is hosted some where, your might not be allowed to bring javascript but might not have the object tag blocked, so now you can instantiate with no Javascript.
One less file to download – which is a huge deal for high traffic portals and hosters.
Much easier to create the ‘embed’ or send to a friend feature if you are sending an object tag. This one (and #2) are coupled with the fact that XAPs can be loaded across domains.

So why did we default to <OBJECT /> ??

Well, because Click To Activate is going away. IE team announced it and given they said it was in april, we are within 28 days of this happening.. [Should we start a pool?].

For those of us creating samples today, we obviously have a choice for a few more weeks; I will remain partial to silverlight.js; if you want to come, here is how I get my instantiation:

I created a dummy Silverlight 1.0 solution using Blend 2.5 March CTP.

This creates a good default.html that I can reuse.
I then copied the silverlight.js from “\program files\microsoft sdks\silverlight\v2.0\tools\ directory to my new solution.

[I did it mostly because I noticed that was the one updated last and I know the install team put it there]
Now you edit the default.html to:
1. Comment out the <script> include for page.xaml.js
  
  <!-- <script type="text/javascript" src="Page.xaml.js"></script>—>
2. Comment out the var scene = new Page() declaration.
  //var scene = new SLOn.Page();
3. Change the source parameter in createSilverlight call to point to your XAP instead of the XAML file
  
  Silverlight.createObjectEx({
  
  source: "ClientBin/hello.xap",
4. Comment out the onLoad handler, which refers to the scene we removed in #1.
  
  // onLoad: Silverlight.createDelegate(scene, scene.handleLoad),
An optional step that I usually do is change the control’s style so it takes 100%

#silverlightControlHost {

            height: 100%;

            width: 100%;

        }
Another optional step is adding the style for body and html so there is no padding:

html, body {

        height: 100%;

        overflow: auto;

    }

    body {

        padding: 0;

        margin: 0;

    }
If you were doing this for production you would probably also want to tweak the onError handler in createSilverlight..
After that, I copy my default.html and silverlight.js to the web directory where my solution is at, and browse/navigate to it.

You can get my sample default.html and silverlight.js from here.

Disclaimer: this approach is good for developer samples, for a production app please follow the Silverlight Installation Experience Guide.

Silverlight instantiation on 2.0

Additional resources