Friday, September 25, 2009

How To: Integrating Silverlight User Control with SharePoint WebPart (MOSS 2007)

Silverlight with MOSS 2007
Developing a webpart may be very simple. Likewise, Developing a Silverlight application also will be very simple. But, If you are going to integrate both areas, that will be difficult little. Here, I am going to tell you that what are necessary steps that needs to be followed, while integrating the MOSS & SILVERLIGHT.

OK. See the steps below. (I assumes that you are familier with creating SharePoint webpart & creating sivlerlight Web applications.)

1. Whenever you are creating Silverlight applications, you can see a "Silverlight.js" file in your "Web" folder. For example, if your application name is "HelloWorld", your visual studio will create another folder with the name of "HelloWorld_web" or "HelloWorldWeb". Within this folder, you can see a file "SilverLight.js". Copy this file and paste it into "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033". (Note: you should paste that file, only into this folder. Else, you will get an error".

2.  Create an Silverlight application and generate a XAP file.

3. Go to "c:\Inetpub\wwwroot\wss\VirtualDirectories\7070" and create a folder named "ClientBin" and give permission to Read & Write (for everyone). 

4. Go to IIS 

5. Go to Your SharePoint portal and make the "ClientBin" folder as a Virtual Directory.

6. Copy the Silverlight Application DLL & XAP file into this ClientBin folder.

7. Modify the Web.Config file to integrate the Silverlight. You can download a sample web.config file in the "download" section of http://www.codeplex.com/SL4SP

8. Create a Webpart. You can use WSPBuilder to create a Webpart. You can download a WSPBuilder from http://www.codeplex.com/wspbuilder

9. Add 2 references in WSP Project (System.Web.Extensions & System.Web.Silverlight)

10. In the WebpartCode, you must inherit the below 2 namespaces.
a. using System.Web.UI.SilverlightControls;
b. using System.Web.UI.WebControls;

11. Write a code to call the XAP file within the "CreateChildControls" method like. 
Silverlight sl = new Silverlight(); 
sl.ID = "MYSL"; 
sl.Source = "/ClientBin/SenSLMOSS.xap"; 
sl.Height = Unit.Pixel(420); 
sl.Width = Unit.Pixel(420); 
this.Controls.Add(sl);

12. "ScriptManager" code also should be placed inside the WebPart code. See the sample code below and this code should be inside the "OnLoad" method, like,

  protected override void OnLoad(EventArgs e) 
{
 if (!_error) 
try
 { 
base.OnLoad(e); 
ScriptManager sm = ScriptManager.GetCurrent(this.Page); 
if (sm == null) 
sm = new ScriptManager(); 
Controls.AddAt(0, sm); 
this.EnsureChildControls(); 
}
 catch (Exception ex) 
HandleException(ex); 
}


13.  Add & Deploy the WSP Webpart using stsadm command. 
(stsam -o addsolution -filename "C:\SLMOSSWebPart.wsp")

14. Create a "WebPart page and insert this webpart into that newly created page.

15. You will see an amazing SilverLight Page.

Thats  it...

No comments:

Post a Comment