Hands-On Lab

Automating Silverlight Web Part Deployment

Lab version:1.0.0

Last updated:9/28/2018

Contents

Overview

Exercise 1: Automating Silverlight application and Silverlight Web Part Deployment

Task 1 – Creating a WSP to Deploy the Silverlight Application

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

Exercise 1 Verification

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

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

Task 2 – Creating a WSP to Deploy the Silverlight Application

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

Exercise 2 Verification

Summary

Overview

Visual Studio 2010 provides the ability to create SharePoint Solution Packages and automate the deployment of Silverlight applications to SharePoint site collections. By using a SharePoint Solution Package you can deploy a Silverlight application and a web page containing a Silverlight Web Part pre-configured to display the Silverlight application. Taking this approach allows you to easily roll out new Silverlight applications to SharePoint sites without the need to create a page, add a Silverlight Web Part to the page, and configure the Silverlight Web Part to display the Silverlight application. This cuts down on the amount of documentation and time needed to deploy Silverlight applications to SharePoint sites. This lab will guide the reader through an exercise which uses the Visual Studio 2010 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.

The Visual Studio 2010 SharePoint Silverlight Web Parts Extension provides two SharePoint Project Items (SPIs) that allow developers to deploy existing or new Silverlight applications in the same fashion as described above. This lab will guide the reader through an exercise that uses the Visual Studio 2010 SharePoint Silverlight Web Parts Extension to deploy an existing Silverlight application to a SharePoint site and deploy it on a web page with the Silverlight Web Part.

Objectives

This lab will demonstrate how you can use Visual Studio to automate the dpeloyment of a Silverlight application to a SharePoint site. To demonstrate this concept the reader will

  • Use Visual Studio 2010 to create a SharePoint Solution Package that deploys a Silverlight application.
  • Use Visual Studio 2010 tocreate a web page that includes a pre-configured Silverlight Web Part to display the Silverlight application.
  • Use Visual Studio 2010 to create a SharePoint Solution Package that deploys the web page with the pre-configured Silverlight Web Part.

System Requirements

You must have the following items to complete this lab:

  • 2010 Information Worker Demonstration and Evaluation Virtual Machine
  • Microsoft Visual Studio 2010

Setup

You must perform the following steps to prepare your computer for this lab...

  1. Download the 2010 Information Worker Demonstration and Evaluation Virtual Machine from and create the Hyper-V image.

Exercises

This Hands-On Lab comprises the following exercises:

  1. Automating Silverlight application and Silverlight Web Part deployment
  2. Automating Silverlight application and Silverlight Web Part deployment with the Visual Studio Silverlight SharePoint Web Parts Extension

Estimated time to complete this lab: 10minutes.

Starting Materials

This Hands-On Lab includes the following starting materials.

  • Visual Studio solutions. The lab provides the following Visual Studio solutions that you can use as starting point for the exercises.

◦<INSTALL>\Labs\AutomatingSilverlightWebPartDeployment\Source\begin\Sample.Silverlight.App.sln: A sample Silverlight application used to demonstrate how the Silverlight Web Part displays Silverlight applications on a SharePoint site.

Exercise 1: Automating Silverlight application and Silverlight Web Part Deployment

In this exercise, you will use Visual Studio 2010 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 – Creating a WSP to Deploy the Silverlight Application

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

  1. Using Visual Studio 2010, open the Sample.Silverlight.App.sln Visual Studio Solution at the following location <INSTALL\Labs\AutomatingSilverlightWebPartDeployment\Source\Before\Sample.Silverlight.App.
  2. In Visual Studio 2010, clickFile> Add > New Project to add a new project. (Figure 1)
  3. In the Installed Templates,selectVisual C# -> SharePoint -> 2010and selectEmpty SharePoint Project.
  4. UnderName:enter SharePoint.Silverlight.Deployment.
  5. In theLocation: textbox enter <INSTALL\Labs\AutomatingSilverlightWebPartDeployment\Source\Beforeand clickOK.

Figure1

Create an Empty SharePoint project.

  1. In the SharePoint Customization Wizard, enter theURL for your on premise instance of SharePoint 2010 (i.e.
  2. SelectDeploy as a sandboxed solutionand clickFinish.
  3. Right-click the Sample.Silverlight.Appproject and chooseAdd -> New Item.
  4. SelectVisual C# -> SharePoint -> 2010 -> Module.
  5. In the Add New Item dialog, under Name: enter Silverlightand clickAdd.
  1. Include the Silverlight.CSOM project output in the Silverlight.Client.CSOM.
  2. In the Solution Explorer, Right-click the Silverlight module and selectProperties.

Figure 2

TO-DO

  1. Click on Project Output References row and click theEllipse button to open the Project Output References dialog.
  2. ClickAdd and select a new project output reference.
  3. UnderMembers: select the SharePoint.Silverlight.Deployment project.
  4. Select the Project Namedropdown underSharePoint.Silverlight.Deploymentproperties: in the right hand panel selectSample.Silverlight.App.
  5. Using theDeployment Typedropdown, selectElementFile.

Figure 3

Project Output References

  1. Expand theDeployment location row.
  2. Deletethe value in the Path row.
  3. ClickOK to exit the dialog.
  4. In the Solution Explorer, right click the Sample.txt file and select Delete.
  5. Click OK.
  6. Double-click the Elements.xml file under the Silverlight module.
  7. Add the following code to the Module element.

Xml

Url="_catalogs/masterpage/xaps"

  1. Add the following code to the File element.

Xml

Type="GhostableInLibrary"

  1. Make sure the XML is exactly as it appears below:

Xml

<?xmlversion="1.0" encoding="utf-8"?>

Elementsxmlns="

<Module Name="Silverlight" Url="_catalogs/masterpage/xaps">

<File Path="Sample.Silverlight.App.xap"

Url="Sample.Silverlight.App.xap"

Type="GhostableInLibrary"/>

</Module>

</Elements

  1. Save the Elements.xml file.

Add a module to deploy a custom ASPX page that includes a Silverlight Web Part configured to display the new Silverlight application.

  1. Right-click the SharePoint.Silverlight.DeploymentSharePoint project and chooseAdd-> New Item.
  2. SelectVisual C# -> SharePoint-> 2010 -> Module.
  3. Name the module CustomPages.
  4. ClickAdd.
  5. In the Solution Explorer, right-click the Sample.txt file and select Delete.
  6. Click OK.

Add the TimeEntrySearchPage.aspx included in the student files to the module.

  1. Right-click the CustomPages module.
  2. Select Add > Existing Item.
  3. Browse to the <INSTALL\Labs\AutomatingSilverlightWebPartDeployment\Source\Before\SilverlightTestPage.aspx file and select it.
  4. Click Add.
  5. Open the Elements.xml file included in the CustomPages module and replace the content with the following Xml:

Xml

<?xmlversion="1.0" encoding="utf-8"?>

Elementsxmlns="

ModuleName="CustomPages">

<FileUrl="SilverlightTestPage.aspx" Path="CustomPages\SilverlightTestPage.aspx" Type="Ghostable" >

<Property Name="Title" Value="Silverlight Test Page" />

<Property Name="Description" Value="Test Page to demonstrate how to deploy a web page with the Silverlight Web Part preconfigured to display a Silverlight application." />

<AllUsersWebPartWebPartOrder="1" WebPartZoneID="Main" ID="SilverlightWebPart">

<![CDATA[ <webParts

<webPartxmlns="

<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">250px</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/xaps/Sample.Silverlight.App.xap</property>

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

</properties>

</data>

</webPart

</webParts]]>

</AllUsersWebPart

</File

</Module

</Elements

  1. Save the Elements.xml file.

Task 2–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 SharePoint.Silverlight.Deploymentproject and choose Deploy.
  2. Once the status bar displays deploy succeeded, open Internet Explorer and navigate to .
  3. Verify the Silverlight Web Part displays the Silverlight.Sample.App Silverlight application on the SharePoint page.

Figure 4

Silverlight Web Part

Exercise 1 Verification

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

Verification 1

In this verification, you will browse to the SharePoint page where you added the Content 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 .
  2. Verify the Silverlight Web Part displays the Silverlight.Sample.App Silverlight application on the SharePoint page.

Figure 5

Silverlight Web Part

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.

Note: Before beginning this exercise, close all open instances of Visual Studio 2010.

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

Figure 6

Visual Studio Extension Installer

  1. Click Install.

Figure 7

Visual Studio Extension Installer – Installation Completed

  1. 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, clickFile> New Project to create a new project.
  3. In the Installed Templates,select Visual C# > SharePoint > 2010 and selectEmpty SharePoint Project.
  4. Under Name:,enter SP.SL.Existing.Deployment.
  5. In the Location: textbox enter<INSTALL>\Labs\AutomatingSilverlightWebPartDeployment\Source\Before and clickOK.
  6. In the SharePoint Customization Wizard, enter theURL for your on premise instance of SharePoint 2010 (i.e.
  7. Select Deploy as a sandboxed solution and clickFinish.
  8. In the Visual Studio 2010, clickFileAdd> Existing Project to add an existing project.
  9. Browse to the <INSTALL>\Labs\AutomatingSilverlightWebPartDeployment\Source\Before\Sample.Silverlight.App folderand select the Sample.Silverlight.App.csprojfile.
  10. Click Open.
  11. In the Solution Explorer, right-click the SP.SL.Existing.Deploymentproject and select Add > New Item.
  12. In the Installed Templates,select Visual C# > SharePoint > 2010 and selectSilverlight Web Part.

Figure 8

Add new item

  1. 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.

  1. In the Solution Explorer, right-click the Site Assets Module and select Properties.
  2. Click on Project Output References row and click theEllipse button to open the Project Output References dialog.
  3. In the Memberslistbox, select Sample.Silverlight.App.
  4. Click Remove.
  5. Click Add to create a new project output reference.
  6. Under Members:, select the SP.SL.Existing.Deploymentproject.
  7. Select the Project Name dropdown under SP.SL.Existing.Deploymentproperties: in the right hand panel select Sample.Silverlight.App.
  8. Using the Deployment Type dropdown, select ElementFile.

Figure 10

Project Output References

  1. 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.Deploymentproject and choose Deploy.
  2. Once the status bar displays deploy succeeded, open Internet Explorer and navigate to .
  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 exercise2, 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 .
  2. Verify the Silverlight Web Part displays the Silverlight.Sample.App Silverlight application on the SharePoint page.

Figure 12

Silverlight Web Part

Summary

In this lab you have seen how use Visual Studio 2010 to automate the deployment of a Silverlight applicaton to a web page in a SharePoint site collection. You have also seen how to use the Visual Studion SharePoint Silverlight Web Parts Extensions to deploy an existing Silverlight application.