Use a Visual Studio 2010 SharePoint Project to Deploy and Debug a Silverlight Application.

Overview

Silverlight and other RIA technologies are becoming a more desirable platform for delivering technology solutions, it has also become essential that we know how to develop these solutions, debug them and integrate these technologies into our other standard development processes.

 

Assumptions

This Post assumes:

- You have an Existing SharePoint environment that has a Team Site provisioned

- That you have an existing VS Solution that contains a Silverlight application project.

- That you will be deploying your Silverlight Application to the Masterpage Gallery. NOTE: This may not always be the best destination for your Silverlight Applications. Information on deciding where to deploy your applications will be covered in another post.

 

Summary of Steps

 

This Post includes the following steps:

• Step 1: Create Your SharePoint Project. In this step, you add a SharePoint project to your VS Solution and add the appropriate project items.
• Step 2: Configure Your SharePoint Project: In this step you will configure the items added in Step 1 with the appropriate information and settings to complete the implementation
• Step 3: Configure your Silverlight Project for Debugging In this step you will add a test page and configure the Silverlight application to use this page for f5 debugging of the Silverlight application

Step 1: Build Your SharePoint Project

Add a SharePoint 2010 Project to your existing Visual Studio Solution by right-clicking the solution item and selecting Add > New Project…From the Add New Project window, under SharePoint > 2010, select Empty SharePoint Project. Enter a name and then OK. When prompted select Farm Solution.

 

Note: This project will deploy your Silverlight Application to the SharePoint MasterPage gallery. Provisioning your Silverlight Application to this location prevents it from working successfully as Sandboxed Solution. The Silverlight Application could alternatively be provisioned to a custom Document Library that would allow it to be packaged as a Sandboxed Solution.

 

To this solution add the following SharePoint 2010 project items:

1.    A Module named "Silverlight" – Delete the Sample.txt file that is automatically added

2.    A Module named "Pages" – Delete the Sample.txt file that is automatically added

 

Step 2: Configure Your SharePoint Project

 

Right-click the Module named Silverlight and select Properties. From the Properties window, find the Project Output References property and select the ellipsis . In the Project Output Reference Window, select the Add button. For the new Item, find the Project Name property and select the Silverlight Application project from the Drop Down list. For the Deployment Type drop down, select ElementFile.

 

Select OK to close the window. Now we must make some minor modifications to the Elements.xml file. Modify the Elements.xml to look like the following (make sure and update the file names with your specific names)

Next we will add a custom page that will be deployed to SharePoint and automatically provision a Silverlight WebPart to host your Silverlight Application. To do this, right-click the module named Pages and select Add > Existing Item…Browse to the following location :

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\SiteTemplates\sts\

 

Note: A Page from any other Site Template could also be added in the same fashion

 

Select the default.aspx page. This will make a copy of the default page used for the Team Site Template and add it to your SharePoint solution. Next we will need to modify the Elements.xml to provision the page to the SitePages library, give the page a friendly name and make it ghostable in the library. Modify the Elements.xml file for the Pages module as shown below:

 

Next we need to add some provisioning markup to the <File> tag that will automatically provision a Silverlight webpart to the page. Add the following markup to the <File> tag :

<AllUsersWebPart WebPartOrder="1" WebPartZoneID="Left" ID="SilverlightExternalService">

<![CDATA[ <webParts>

<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">

<metaData>

<type name="Microsoft.SharePoint.WebPartPages.SilverlightWebPart, Microsoft.SharePoint, Version=14.0.0.0,

Culture=neutral, PublicKeyToken=71e9bce111e9429c" />

<importErrorMessage>Cannot import this Web Part.</importErrorMessage>

</metaData>

<data>

<properties>

<property name="HelpUrl" type="string" />

<property name="AllowClose" type="bool">True</property>

<property name="ExportMode" type="exportmode">All</property>

<property name="Hidden" type="bool">False</property>

<property name="AllowEdit" type="bool">True</property>

<property name="Direction" type="direction">NotSet</property>

<property name="TitleIconImageUrl" type="string" />

<property name="AllowConnect" type="bool">True</property>

<property name="HelpMode" type="helpmode">Modal</property>

<property name="CustomProperties" type="string" null="true" />

<property name="AllowHide" type="bool">True</property>

<property name="Description" type="string">A web part to display a Silverlight application.</property>

<property name="CatalogIconImageUrl" type="string" />

<property name="MinRuntimeVersion" type="string" null="true" />

<property name="ApplicationXml" type="string" />

<property name="AllowMinimize" type="bool">True</property>

<property name="AllowZoneChange" type="bool">True</property>

<property name="CustomInitParameters" type="string" null="true" />

<property name="Height" type="unit">650px</property>

<property name="ChromeType" type="chrometype">Default</property>

<property name="Width" type="unit">800px</property>

<property name="Title" type="string">Silverlight Web Part</property>

<property name="ChromeState" type="chromestate">Normal</property>

<property name="TitleUrl" type="string" />

<property name="Url" type="string">~site/_catalogs/masterpage/SilverlightApp.xap</property>

<property name="WindowlessMode" type="bool">True</property>

</properties>

</data>

</webPart>

</webParts> ]]>

</AllUsersWebPart>

 

Pay special attention to the highlighted areas. You will need to ensure the Url Property is pointed to the Silverlight application for your implementation. Also , the Height and width should be set to match the dimensions of your Silverlight application.

 

Step 3: Configure your Silverlight Project for Debugging

 

Finally we will configure your SharePoint project to allow for Silverlight debugging.

On the SharePoint project, right-click the project and select Properties. From Property pages, select the SharePoint tab. At the bottom of the SharePoint tab, find and select the check box labeled Enable Silverlight debugging (instead of Script debugging).

Save and close the properties window.

 

Finally, select the SharePoint project and hit F5 to the SharePoint Solution and enable and attach the debugger. Simply place some break points in your Silverlight application and once the SharePoint site loads, simply browse to the page containing your Silverlight webpart and application.

 

reference:http://blogs.rbaconsulting.com/Lists/Posts/Post.aspx?ID=27