Wednesday, September 29, 2010

How To : Host Silverlight Xap in Blogger

Hositing Silverlight XAP in Blogger... Aah At last succeded.. Yipeee

I was trying to host silverlight application in blogger from the past two weeks and at last succeded today :) as you can see below.



When i first googled, i found this wonderful post of timheuer which explains about cross-domain hositing of silverlight application in detail.

The big question which i had after reading tim's blog post is, where do i host my xap file as i need to set the XAP mime type on the hosting server, I personally do not own any hosting space nor any domain.
In the next moment i started searching for free file hosting providers, which can provide me a direct link for hosted file with file extension so that i can refer to the xap file directly. I tried around 5 different file hosting servers but i couldn't figure out how to set the mime extension type on that perticular server to render my silverlight xap on my blogger blog.

In my 6th attempt to host xap, i have tried with xtreemhost file hosting which has not only provided me with a direct link to the hosted file but also provided access to the .htaccess file where i could add my MIME types.

So here are few things which we need to take care before hosting a silverlight application on to blog:

  • Make sure you have added the EnableHtmlAccess parameter to the object tag in html
    <param name="enableHtmlAccess" value="true" />
  • Make sure you have set ExternalCallersFromCrossDomain to ScriptableOnly in the AppManifest.xml file in silverlight project
    <Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        ExternalCallersFromCrossDomain="ScriptableOnly">
        <Deployment.Parts>
        </Deployment.Parts>
    </Deployment>
    
  • Add the MIME types on the hosting server(if not added already :)).
    On XtreemHost this is how i added the MIME types, In the /htdocs directory i have created a new file with name .htaccess and added the below mentioned two lines in the .htaccess file
    AddType application/x-silverlight-app .xap
    AddType application/xaml+xml .xaml

Here onwards everything should be straight-forward and simple, upload your xap file on to the file hosting server and set the source value in the object tag to the hosted xap file, below is the object tag for the above rendered silverlight application

<script type="text/javascript" src="http://xthkranthi.xtreemhost.com/Silverlight.js"></script>
<div id="silverlightControlHost" Style="height:100px;width:100px;">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">     
<param name="source" value="http://xthkranthi.xtreemhost.com/Test.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<param name="enableHtmlAccess" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">       <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>     </a>      </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>

Done.. That should do it!!!! If nothing went wrong then your silverlight application should be on you blog as mine :).

Hope this helps someone.. comments are always welcome and please let me know if you have any issues in loading silverlight applicaiton on your blog.

5 comments:

  1. Can I use this code during my presentation?

    ReplyDelete
  2. Yep Sure.. Go Ahead. If that presentation is on web then please post a comment with a link to that presentation :)

    ReplyDelete
  3. in my blog it shows only a white square, I dont know why...there should be an exception that I cant catch.

    http://montelof.blogspot.com/2010/10/var-host-httpjosmon10.html

    ReplyDelete
  4. sorry for double post, I wanted to add that the xap file is hosted at
    http://josmon10.100webspace.net/teststackbarTestPage.html
    so as you can see the server is serving xap just ok.
    what could be wrong?

    ReplyDelete
  5. Hey Pepe,

    Did you add the XAP and XAML mime types on the hosting server i.e. 100webspace server? for adding these mime types you need to edit the htaaccess file, just check out whether 100webspace hosting provider provide access to htaaccess file.

    If you have already XAP and XAML mime types on the server then make sure you have set ExternalCallersFromCrossDomain to ScriptableOnly in the AppManifest.xml file while building silverlight project in VS.

    I guess doing this should make your application working.
    As you have mentioned in your double post that the xap file is loading on josmon10.webspace server, in this case the html and xap files are on teh same server so there would be no crossdomain issues and when you are trying to embed teh xap file in blogger post, the xap file becomes an external file to the blogger server which raises the crossdomain issue.

    ReplyDelete