Posted by: Shantham | March 1, 2008

Silverlight webpart for SharePoint:


In this post, we are going to see integrating the webpart with Silverlight contents on SharePoint Site.

 For that, we need to combine all required java script and Xaml files (used to display the Silverlight content) in to single assembly without any dependent files. It makes sense to embed the Xaml and java script file as a resource and reference it in programming using the WebResource.axd handler mechanism for extracting embedded resources.

 

I list out the following steps to add the Silverlight Content to SharePoint WebPart,

1.      Create a Webpart project and create or add the required java script and Xaml files to the project.

I used three files, are Silverlight.js, Scene.js and Scene.xaml

2.      Set the BuildAction property to “Embedded Resource” in properties window for each java script and Xaml.

This will use to include the files as Resources in an assembly.

 

                     im11.jpg  im2.jpg

 

3.      Add the assembly-level attribute System.Web.UI.WebResource to grant permission for these resources to be served by WebResource.axd and to associate MIME type for the response.

 [assembly: WebResource(“Ktskumar.SLContent.Silverlight.js”, “text/javascript” )]

[assembly: WebResource("Ktskumar.SLContent.Scene.js", "text/javascript")]

[assembly: WebResource(“Ktskumar.SLContent.Scene.xaml”, “text/xml”)]

Ktskumar.SLContent represents the namespace, Now JavaScript and Xaml files are compiled into my assembly as embedded resources.

 

4.      Now, we can use the RegisterClientScriptresource() method of the Page.ClientScriptManagerclass to rendered the page with the referenced files.

 this.Page.ClientScript.RegisterClientScriptResource(GetType(), “Ktskumar.SLContent.Silverlight.js”);

this.Page.ClientScript.RegisterClientScriptResource(GetType(), “Ktskumar.SLContent.Scene.js”);</span

Include the above lines in the PreRender method to register the javascript files for the webpart.

 

5.      Add the following lines to the RenderWebPart method to host the <div> tag and call the Silverlight content to the webpart,

 string strLoad = “Silverlight.createDelegate(scene, scene.handleLoad)”;

output.WriteLine(“<div id='” + this.ClientID + “‘ Style=”Width:500px;Height:200px”>”); 

output.WriteLine(“<script type=’text/javascript’>”);          

output.WriteLine(“if (!window.Silverlight)”);

output.WriteLine(“window.Silverlight = {};”);

output.WriteLine(“Silverlight.createDelegate = function(instance, method) {“);

output.WriteLine(“return function() {“);

output.WriteLine(“return method.apply(instance, arguments);”);

output.WriteLine(“}}”);

output.WriteLine(“var scene = new Scene();”); 

output.WriteLine(“Silverlight.createObjectEx({“); 

output.WriteLine(“source: ‘” + this.Page.ClientScript.GetWebResourceUrl(GetType(), “Ktskumar.SLContent.Scene.xaml”) + “‘,”); 

output.WriteLine(“parentElement: document.getElementById(‘” + this.ClientID+“‘),”);

output.WriteLine(“id: ‘” + this.ClientID + “_ctrl'” + “,”);

output.WriteLine(“properties: {width:’100%’, height:’100%’, version:’1.0′ },”);

output.WriteLine(“events:{ onLoad: “+strLoad+“, onError: null  },”);

output.WriteLine(“context: null”);

output.WriteLine(“});”); 

output.WriteLine(“</script></div>”);

 Now you can install webpart to the SharePoint and see the Silverlight contents present in the SharePoint WebPart.

Coming soon, I will upload the source code for this webpart and more activities to come on Integrating the Silverlight with SharePoint. So always tuneup this blog.

Click here to download the source code for the above example.

 

Read more…

Advertisements

Responses

  1. I noticed that you supplied us with sample code above. I am fairly new to sharepoint and created a silverlight project in C# (Working). Would the above steps still work? And also the sample code you showed, could you update that by also referencing what file those changes should be done within? Thank you for the post….its pointed me in the right direction.

  2. Hi Patel, Thanks for your comment.
    For your Information I uploaded the sample files and given a link in the same post itself.

    For your refernce I given a full link below,
    http://cid-c6404b89971e6efa.skydrive.live.com/self.aspx/Source%20Codes/Ktskumar.SLContent.zip

  3. Hi Kumar,
    Can u please upload the webpart code also. Thank you.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: