Pages

Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

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.

Sunday, August 29, 2010

How To : Publish Code Snippets in Blog in 3 Steps

Most of my posts in my blog are related to .NET technology, as i am a .NET developer. One of the most frequent question for a developer who has just started to blog is "How to publish code snippet in blog". I too had the same question and after googling a bit and found couple of articles which i found useful, i just want to gather all useful stuff togather as explained below.

Login to your Blogger Account and Click on Design link and Click on Edit HTML, which is highlighted in the image shown below.





Now follow these simple 3 steps to publish code snippets in blogger:

  1. Search for "/head" in the HTML template and paste the below script tags above that. [Note]: Check "Expand Widget Templates" if search result is not found


    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/>
    
  2. Search for "/body" and Paste the below javascript code above "/body"


    
    
  3. Paste the below CSS code before "]]></b:skin>" in your HTML Template


    .dp-highlighter
    {
     font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
     font-size: 12px;
     background-color: #E7E5DC;
     width: 99%;
     overflow: auto;
     margin: 18px 0 18px 0 !important;
     padding-top: 1px; /* adds a little border on top when controls are hidden */
    }
    
    /* clear styles */
    .dp-highlighter ol,
    .dp-highlighter ol li,
    .dp-highlighter ol li span 
    {
     margin: 0;
     padding: 0;
     border: none;
    }
    
    .dp-highlighter a,
    .dp-highlighter a:hover
    {
     background: none;
     border: none;
     padding: 0;
     margin: 0;
    }
    
    .dp-highlighter .bar
    {
     padding-left: 45px;
    }
    
    .dp-highlighter.collapsed .bar,
    .dp-highlighter.nogutter .bar
    {
     padding-left: 0px;
    }
    
    .dp-highlighter ol
    {
     list-style: decimal; /* for ie */
     background-color: #fff;
     margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
     padding: 0px;
     color: #5C5C5C;
    }
    
    .dp-highlighter.nogutter ol,
    .dp-highlighter.nogutter ol li
    {
     list-style: none !important;
     margin-left: 0px !important;
    }
    
    .dp-highlighter ol li,
    .dp-highlighter .columns div
    {
     list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
     list-style-position: outside !important;
     border-left: 3px solid #6CE26C;
     background-color: #F8F8F8;
     color: #5C5C5C;
     padding: 0 3px 0 10px !important;
     margin: 0 !important;
     line-height: 14px;
    }
    
    .dp-highlighter.nogutter ol li,
    .dp-highlighter.nogutter .columns div
    {
     border: 0;
    }
    
    .dp-highlighter .columns
    {
     background-color: #F8F8F8;
     color: gray;
     overflow: hidden;
     width: 100%;
    }
    
    .dp-highlighter .columns div
    {
     padding-bottom: 5px;
    }
    
    .dp-highlighter ol li.alt
    {
     background-color: #FFF;
     color: inherit;
    }
    
    .dp-highlighter ol li span
    {
     color: black;
     background-color: inherit;
    }
    
    /* Adjust some properties when collapsed */
    
    .dp-highlighter.collapsed ol
    {
     margin: 0px;
    }
    
    .dp-highlighter.collapsed ol li
    {
     display: none;
    }
    
    /* Additional modifications when in print-view */
    
    .dp-highlighter.printing
    {
     border: none;
    }
    
    .dp-highlighter.printing .tools
    {
     display: none !important;
    }
    
    .dp-highlighter.printing li
    {
     display: list-item !important;
    }
    
    /* Styles for the tools */
    
    .dp-highlighter .tools
    {
     padding: 3px 8px 3px 10px;
     font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
     color: silver;
     background-color: #f8f8f8;
     padding-bottom: 10px;
     border-left: 3px solid #6CE26C;
    }
    
    .dp-highlighter.nogutter .tools
    {
     border-left: 0;
    }
    
    .dp-highlighter.collapsed .tools
    {
     border-bottom: 0;
    }
    
    .dp-highlighter .tools a
    {
     font-size: 9px;
     color: #a0a0a0;
     background-color: inherit;
     text-decoration: none;
     margin-right: 10px;
    }
    
    .dp-highlighter .tools a:hover
    {
     color: red;
     background-color: inherit;
     text-decoration: underline;
    }
    
    /* About dialog styles */
    
    .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
    .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
    .dp-about td { padding: 10px; vertical-align: top; }
    .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
    .dp-about .title { color: red; background-color: inherit; font-weight: bold; }
    .dp-about .para { margin: 0 0 4px 0; }
    .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
    .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
    
    /* Language specific styles */
    
    .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
    .dp-highlighter .string { color: blue; background-color: inherit; }
    .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
    .dp-highlighter .preprocessor { color: gray; background-color: inherit; }
    

Done!!!! :) Those were the changes to be made in the HTML Template and now you can start posting your source code in blogger as shown below:
While writing a post, select "Edit HTML" to write the blog post in html mode and wrap your source code snippet with a pre tag and add name="code" and class="<your source code language>", after wrapping your source code it should look like something below
<pre name="code" class="csharp">
//your source code goes here
</pre>

Here is the list of supported languages, shamelessly copied from here:

LanguageAliases
C++cppcc++
C#c#c-sharpcsharp
CSScss
Delphidelphipascal
Javajava
Java Scriptjsjscriptjavascript
PHPphp
Pythonpypython
Rubyrbrubyrailsror
Sqlsql
VBvbvb.net
XML/HTMLxmlhtmlxhtmlxslt

Hope this helps someone :)

References/Useful Links:
http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html
http://pleasemakeanote.blogspot.com/2008/06/posting-source-code-in-blogger.html