Monday, November 16, 2009

Connecting JQuery/javascript and Silverlight

I had a requirement to send few parameters to silverlight from aspx
page. One of the option I had was to send the parameters as initparams, but initparams
are visible in the page source. Another one was to send the parameters using
JQuery or simple javascript. To go with approach, there is a problem. The problem is not with writing a javascript but
is to send parameters to the silverlight function or to call a javascript function
from silverlight.
To use JQuery we need to add a small javascript file to your
project. Once it is done the rest of the things become very easy. You can
get the
JQuery file here.

Calling Silverlight function from JQuery functionCalling Silverlight
function from JQuery function

A function in silverlight cannot be understood by a jquery function directly.
But we can always make it understand a silverlight function using a simple
[ScriptableMember] tag which indicates that a particular function or
event is accessible to a javascript function. We can add it on a function or
event in silverlight like this  

   public partial class MainPage : UserControl
      string time;
      publicMainPage( )   
        InitializeComponent( ); 
       HtmlPage.RegisterScriptableObject("MainPage", this);    

     public void GetTime( )
        time = DateTime.Now.ToShortTimeString( );
        time_txt.Text = time;
...and in the aspx page you first need to give an id to your silverlight objcet
tag. In the example I have given the id as SLinteractionXapMarker.
You will have to add the source of the .js file which you downloaded to support
the JQery and make your work easier and efficient. The code with the id and
source of js would look like this..
<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," id="SLinteractionXapMarker" type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="ClientBin/JQuerySLinteraction.xap" />
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
<a href="" style="text-decoration: none">
<img src="" alt="Get Microsoft Silverlight"
style="border-style: none" />
<iframe  id="_sl_historyFrame"  style="visibility: hidden;  height: 0px;  width: 0px;
 border: 0px"></iframe>

now to call the JQuery or to trigger an event we will make a hyperlink, and on click of that we will call the JQuery that will in turn call the silverlight function
. We will write a small script that would be called on this hyperlink's

<script language="javascript" type="text/javascript">          
$(function() { $("#_time").click(callGetTimeFunc); });
function callGetTimeFunc() {
<a id="_time" href="default.aspx">Get Time</a>
Note that the #_time is identifying which hyperlink is clicked. The
SLinteractionXapMarker is identifying
which xap has to be addressed, MainPage
is with which we have registered the scriptable object. We can pass any
parameters as well in this way.
Happy Coding!

Sunday, November 1, 2009

Create a simple DeepZoom sample application

A really great feature added by microsoft to interact with images and create amazing zooming applications is Deep Zoom. In short, Deep Zoom provides the ability to interactively view high-resolution images. You can zoom in and out of images rapidly without affecting the performance of your application. Deep Zoom enables
smooth loading and panning by serving up multi-resolution images and using spring animations. With its help we can create amazing web experience.
Some of the best examples would be hard rock memorablia, Deep Zoom Pix

How to Create the simplest Deep Zoom application
  1. Install Deep Zoom Composer .
  2. After installation create a new project. Go to File -> New project. A new project will be created with a .dzprj extension.
  3. Collect few good quality pictures.
  4. Start importing it in your project by clicking the add image button.
  5. Prepare a storyboard in your mind. By storyboard I mean how you would like your application to react on mouse events.
  6. Start positioning and composing the images by clicking on the compose tab.
  7. Select an image which would serve as your base image. For example, if I want to make an application similar to Google Earth, then I will take the satellite image of the world as my base image.
  8. Drag and drop the base image into the storyboard area and make it  fit to screen.
  9. Add rest of the images on to the base image and reduce their size, till it looks like small yellow lense on your base image.
  10. Add more images and do the same.
  11. Your deep zoom application is ready to be exported!!
  12. Export it and keep zoomin!!!