This simple tutorial will illustrate how to embed a Silverlight application (.xap file) in SharePoint (WSS 3 or MOSS 2007) using a Content Editor web part.
Many thanks to my friend Hassan-Mia Salie for his contributions.
Prerequisites:
Silverlight 3.0 Client
SharePoint (WSS3 or MOSS)
A Working Silverlight application (.xap file)
(to see how to create a simple silverlight app check out this tutorial)
Lets Go:
Locate the web application folder of your SharePoint application.
Should be: C:\inetpub\wwwroot\wss\VirtualDirectories\1000\ ,where "1000" is the number of your SharePoint Web App IIS port.
Create a new “ClientBin” folder in the web application folder.
Open you SharePoint Web which exist within the same web application.
Edit a Page and add a CEWP.
Select to modify the shared web part and open the “Source Editor...”
Paste the following code.
(please note the name of your silverlight file - the file I used was called MySilverLightApp.xap.)
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/MySilverLightApp.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="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
Change the width and height from % to values.
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="400" height="400">
<param name="source" value="ClientBin/MySilverLightApp.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
</object>
Save the CEWP and refresh the page.... you will see you Silverlight app in SharePoint.
Enjoy !!
0 comments:
Post a Comment