Archive

Archive for August 11, 2010

Deploying a Silverlight application to SharePoint 2010

August 11, 2010 7 comments

image

Overview 

In this posting I hope to provide you with an guide on how to deploy a Silverlight application to SharePoint 2010. I’ll deploy this as a sandbox solution but will point out where you might do things a little differently if you want to deploy as a file based solution to the 14 Hive.

To use the deployed Silverlight app. you could go ahead and use the new Silverlight web part. Great for testing but to make things easier for the user you could also wrap this up in a deployable web part. I’ll outline how you can achieve this within the same solution too.

Creating the Visual Studio 2010 Solution and projects.

In the following steps I’ll create an empty SharePoint solution in Visual Studio 2010. I’ll add Silverlight project to the solution then create some SharePoint Items to handle the deployment of the XAP file and also the wrapper web part.

1. Create a new empty SharePoint solution.

image

2. Select the appropriate type of solution. In this case I am keeping the solution as a ‘Sandbox’ solution.

image

3. Add the Silverlight application to the solution. In this case I’m create a new Silverlight application. From the menus select File – Add – New Project. Choose the appropriate Silverlight template then click ok, and click ok on the following dialog to create the test app (If required).

image

4.As you probably know all you need to run the Silverlight application is the .XAP file which is the created at compile time. Therefore this is all you need to deploy from your Silverlight project to the SharePoint solution. In this example I have created a sandbox solution so will create a SharePoint Module to upload the XAP file into the SharePoint content database.  (If you want to deploy this a standard solution (ie non-sandbox) then you can create a mapping to a 14 Hive folder and deploy the file there)

In this step I add a SharePoint project item ‘Module’ to the SharePoint solution. Right click on the SharePoint project and select ‘Add new item’

image

The created module provides you with a sample.txt file and an elements xml file. Any file you drop into this folder will be automatically included in the elements.xml file and therefore shall  be uploaded into SharePoint. Go ahead and delete the sample.txt file.

5. Next you want a post build script to run on your Silverlight project to copy over the XAP file from the appropriate bin directory (Debug or Release, based on you compile options). You need to initially build the silverlight application to see the XAP file. By default the bin directory is hidden so click the ‘show all files’ icon highlighted in the solution explorer and locate the bin\debug directory. There you can see the XAP file.

image

Right click the Silverlight application and locate the post-build events box within the build events tab and key in something like the following.

copy “$(TargetDir)SilverlightApplication.xap” “$(SolutionDir)SilverlightWebPartSample\SilverlightFile”

Couple points to note here. Wrap your file paths in quotes, I found some issues with long file paths, spaces etc. Also the $(TargetDir) and $(SolutionDir) both post fix a backslash so you don’t need to supply one.

Once you have done this go ahead an compile the Silverlight project once more. Then look at the SharePoint project and in particular the ‘SilverlightFile’ module. If you are ‘showing all files’ you should see the SilverlightApplication.xap file.  You need to right click this file now and select ‘include’ If you then look at the elements.xml file within this module you will see Visual Studio has automatically added a reference to this file now. Neat and also eliminates any typos in this xml file :)

image

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="SilverlightFile">
  <File Path="SilverlightFile\SilverlightApplication.xap" Url="SilverlightFile/SilverlightApplication.xap" />
</Module>
</Elements>

6. You need to play around with the build order to ensure your Silverlight application builds first then its post build event will copy the XAP file to your SharePoint project. Obviously you don’t want this the wrong way around as your SharePoint solution will never get the current XAP file for deployment.

You can modify the build order by right clicking the Solution and selecting ‘Build Dependencies’ From here select the SharePoint project and make sure its dependent on the Silverlight application. Click ok then check this by right clicking the solution once more and this time select dependency order.

image

image

Creating a web part to display the associated Silverlight application

The previous steps would allow you to go-ahead an build and deploy the solution to SharePoint. At which point you could use the out of the box Silverlight web part but in the following steps I’ll create a simple web part which automatically displays the Silverlight application. Once deployed you can then select the web part and drop it onto your page.

1. using the existing solution outlined in the previous section select’ Add new item’ within the SharePoint solution. And add a new c# web part (Not a visual web part, this wont work as a sandbox solution anyway) And give it a name. I have been creative here and named it SilverlightApplicationWebPart

image

Solution Explorer…

image

2.  We basically want this web part to render out some HTML which will instruct the browser to load the Silverlight application. Luckily the HTML has already been written for us in the supporting Silverlight test web app. Just open up the HTML file and copy the <object> html code.

image

3. Once you have this code copied open up with webpart code page and add the following code.

namespace CFB.lab.SilverlightWebPartSample.SilverlightApplicaitonWebPart
{
    [ToolboxItemAttribute(false)]
    public class SilverlightApplicaitonWebPart : WebPart
    {

        protected override void Render(HtmlTextWriter writer)
        {
            string x =                                                                                                                           "+
            "     <param name='source' value='ClientBin/SilverlightApplication.xap'/>                                                            "+
            "     <param name='onError' value='onSilverlightError' />                                                                            "+
            "     <param name='background' value='white' />                                                                                      "+
            "   <object data='data:application/x-silverlight-2,' type='application/x-silverlight-2' width='100%' height='100%'>                  "+
            "     <param name='minRuntimeVersion' value='4.0.50401.0' />                                                                         "+
            "     <param name='autoUpgrade' 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>              ";                                                                                                          

            writer.Write(x);
            base.Render(writer);

        }
    }
}

Note : You need to change the first line of the HTML as the silverlight app will no longer exists in the ClientBin. This should now read…

            ”     <param name=’source’ value=’SilverlightFile/SilverlightApplication.xap’/>    “

The ‘SilverlightFile’ corresponds to the module name you gave within the SharePoint project.

When you copy the HTML over just highlight the code and do a quick find and replace of the double quotes to single quotes. Then build this out as a string.

If you really want to save time you could use the new multi-line edit in VS2010 just hold the Alt key while selecting the space on the screen where you want to add multiple lines of the same content…

image

Note: If your Silverlight needs any init parameters you can easily add them here. For example you may require some query string parameters. You can get this from the web part and add dynamically add them to your string. Here is an example of injecting a querystring value

   public class SilverlightApplicaitonWebPart : WebPart    {                protected override void Render(HtmlTextWriter writer)        {            string YOURVALUE = "";            if (Context.Request.QueryString["yourvalue"] != null) YOURVALUE = Context.Request.QueryString["yourvalue"].ToUpper();

            string x =                                                                                                                           "+     "     <param name='source' value='ClientBin/SilverlightApplication.xap'/>                                                            "+     "     <param name='onError' value='onSilverlightError' />                                                                            "+     "     <param name='background' value='white' />                                                                                      "+            "   <object data='data:application/x-silverlight-2,' type='application/x-silverlight-2' width='100%' height='100%'>                  "+     "     <param name='minRuntimeVersion' value='4.0.50401.0' />                                                                         "+     "     <param name='autoUpgrade' value='true' />                                                                                      "+            "     <param name='initParams' value='YOURKEY="+YOURVALUE+ "' />" +     "     <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>              ";                                                                                                                                                                                                                                                                       writer.Write(x);            base.Render(writer);                  }    }

4. OK so now you are good to build. Providing you have no build errors, right-click the SharePoint project and select ‘Deploy’

5. To test the web part, edit a page within the SharePoint site and locate the published web part. Once its added to the page it should load up the appropriate silverlight app. My example has gone for an innovative ‘Hello SharePoint from Silverlight’ message. My creativity knows no bounds.

Editing the page – select the published web part to add then click Add…image

image

Hope this is of some help, happy coding :)

Follow

Get every new post delivered to your Inbox.