Exercise 2: Automating Silverlight application and Silverlight Web Part Deployment with the Visual Studio Silverlight SharePoint Web Parts Extension

In this exercise, you will use Visual Studio 2010 Silverlight SharePoint Web Parts extension to create a SharePoint Solution Package that deploys a Silverlight application and a web page that includes a pre-configured Silverlight Web Part to display the Silverlight application.

Task 1 – Installing the Visual Studio 2010 Silverlight SharePoint Web Parts Extension

In this task, you will install the Visual Studio 2010 Silverlight SharePoint Web Parts Extension.

1. In the <INSTALL>\Labs\AutomatingSilverlightWebPartDeployment\Source\Before folder, double click the VSIX.SharePoint.Silverlight.vsix file.

   Figure 6

   Visual Studio Extension Installer

2. Click Install.

   Figure 7

   Visual Studio Extension Installer – Installation Completed

3. Click Close.

Task 2 – Creating a WSP to Deploy the Silverlight Application

In this task, you will use the Visual Studio SharePoint Silverlight Web Parts Extension to create a SharePoint Solution Package that deploys a Silverlight application to a SharePoint 2010 site collection.

1. Open Visual Studio 2010.
2. In the Visual Studio 2010, click File>> New >> Project to create a new project.
3. In the Installed Templates, select Visual C# >> SharePoint >> 2010 and select Empty SharePoint Project.
4. Under Name:, enter SP.SL.Existing.Deployment.
5. In the Location: textbox enter <INSTALL>\Labs\AutomatingSilverlightWebPartDeployment\Source\Before and click OK.
6. In the SharePoint Customization Wizard, enter the URL for your on premise instance of SharePoint 2010 (i.e. https://intranet.contoso.com).
7. Select Deploy as a sandboxed solution and click Finish.
8. In the Visual Studio 2010, click File>> Add >> Existing Project to add an existing project.
9. Browse to the <INSTALL>\Labs\AutomatingSilverlightWebPartDeployment\Source\Before\Sample.Silverlight.App folder and select the Sample.Silverlight.App.csproj file.
10. Click Open.
11. In the Solution Explorer, right-click the SP.SL.Existing.Deployment project and select Add >> New Item.

12. In the Installed Templates, select Visual C# >> SharePoint >> 2010 and select Silverlight Web Part.

    Figure 8

    Add new item

13. Click Add.

    Note:

    The Silverlight Web Part SharePoint Project Item automatically recognizes the Sample.Silverlight.App project and creates modules to deploy a web page with the Silverlight Web Part on it to display the Sample.Silverlight.App Silverlight application. It also creates a feature to package the assets and deploy them to a SharePoint site. Notice all the new elements in the Solution Explorer shown below.
    Figure 9

    Solution Explorer

    The next step is to set the Project Output References for the Site Assets Module that deploys the Silverlight application.

14. In the Solution Explorer, right-click the Site Assets Module and select Properties.
15. Click on Project Output References row and click the Ellipse button to open the Project Output References dialog.
16. In the Members listbox, select Sample.Silverlight.App.
17. Click Remove.
18. Click Add to create a new project output reference.
19. Under Members:, select the SP.SL.Existing.Deployment project.
20. Select the Project Name dropdown under SP.SL.Existing.Deployment properties: in the right hand panel select Sample.Silverlight.App.

21. Using the Deployment Type dropdown, select ElementFile.

    Figure 10

    Project Output References

22. Click OK to exit the dialog.

Task 3 – Deploying and Testing the Silverlight Application and Web Page Pre-configured with the Silverlight Web Part

In this task, you will test the deployment of the Silverlight application and web page.

1. In the Solution Explorer, right-click the SP.SL.Existing.Deployment project and choose Deploy.
2. Once the status bar displays deploy succeeded, open Internet Explorer and navigate to https://intranet.contoso.com/SitePages/Sample.Silverlight.AppWebPartPage.aspx.

3. Verify the Silverlight Web Part displays the Silverlight.Sample.App Silverlight application on the SharePoint page.

   Figure 11

   Silverlight Web Part

Exercise 2 Verification

In order to verify that you have correctly performed all steps of exercise 2, proceed as follows:

Verification 1

In this verification, you will browse to the SharePoint page where you added the Silverlight Editor Web Part to validate it displays the Silverlight.Sample.App Silverlight application that is running on the web site hosted by Visual Studio 2010.

1. Open Internet Explorer and navigate to https://intranet.contoso.com/SitePages/Sample.Silverlight.AppWebPartPage.aspx.

2. Verify the Silverlight Web Part displays the Silverlight.Sample.App Silverlight application on the SharePoint page.

   Figure 12

   Silverlight Web Part