automating silverlight web part deploymentaz12722.vo.msecnd.net/.../lab.docx · web viewautomating...
TRANSCRIPT
Hands-On LabAutomating Silverlight Web Part Deployment
Lab version: 1.0.0
Last updated: 5/23/2023
CONTENTS
OVERVIEW................................................................................................................................................. 3
EXERCISE 1: AUTOMATING SILVERLIGHT APPLICATION AND SILVERLIGHT WEB PART DEPLOYMENT............................................................................................................................................ 4
Task 1 – Creating a WSP to Deploy the Silverlight Application............................................................4
Task 2 – Deploying and Testing the Silverlight Application and Web Page Pre-configured with the Silverlight Web Part...........................................................................................................................10
Exercise 1 Verification.......................................................................................................................11
EXERCISE 2: AUTOMATING SILVERLIGHT APPLICATION AND SILVERLIGHT WEB PART DEPLOYMENT WITH THE VISUAL STUDIO SILVERLIGHT SHAREPOINT WEB PARTS EXTENSION.................................................................................................................................................................. 12
Task 1 – Installing the Visual Studio 2010 Silverlight SharePoint Web Parts Extension.....................12
Task 2 – Creating a WSP to Deploy the Silverlight Application..........................................................13
Task 3 – Deploying and Testing the Silverlight Application and Web Page Pre-configured with the Silverlight Web Part...........................................................................................................................16
Exercise 2 Verification.......................................................................................................................17
SUMMARY................................................................................................................................................ 18
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 to create 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: 10 minutes.
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, click File >> Add >> New Project to add a new project. (Figure 1)
3. In the Installed Templates, select Visual C# -> SharePoint -> 2010 and select Empty SharePoint Project.
4. Under Name: enter SharePoint.Silverlight.Deployment.
5. In the Location: textbox enter <INSTALL\Labs\AutomatingSilverlightWebPartDeployment\Source\Before and click OK.
Figure 1Create an Empty SharePoint project.
6. In the SharePoint Customization Wizard, enter the URL for your on premise instance of SharePoint 2010 (i.e. http://intranet.contoso.com).
7. Select Deploy as a sandboxed solution and click Finish.
8. Right-click the Sample.Silverlight.App project and choose Add -> New Item.
9. Select Visual C# -> SharePoint -> 2010 -> Module.
10. In the Add New Item dialog, under Name: enter Silverlight and click Add.
11. Include the Silverlight.CSOM project output in the Silverlight.Client.CSOM.
12. In the Solution Explorer, Right-click the Silverlight module and select Properties.
Figure 2TO-DO
13. Click on Project Output References row and click the Ellipse button to open the Project Output References dialog.
14. Click Add and select a new project output reference.
15. Under Members: select the SharePoint.Silverlight.Deployment project.
16. Select the Project Name dropdown under SharePoint.Silverlight.Deployment properties: in the right hand panel select Sample.Silverlight.App.
17. Using the Deployment Type dropdown, select ElementFile.
Figure 3Project Output References
18. Expand the Deployment location row.
19. Delete the value in the Path row.
20. Click OK to exit the dialog.
21. In the Solution Explorer, right click the Sample.txt file and select Delete.
22. Click OK.
23. Double-click the Elements.xml file under the Silverlight module.
24. Add the following code to the Module element.
Xml
Url="_catalogs/masterpage/xaps"
25. Add the following code to the File element.
Xml
Type="GhostableInLibrary"
26. Make sure the XML is exactly as it appears below:
Xml
<?xml version="1.0" encoding="utf-8"?><Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <Module Name="Silverlight" Url="_catalogs/masterpage/xaps"> <File Path="Sample.Silverlight.App.xap" Url="Sample.Silverlight.App.xap" Type="GhostableInLibrary"/> </Module></Elements>
27. 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.
28. Right-click the SharePoint.Silverlight.Deployment SharePoint project and choose Add-> New Item.
29. Select Visual C# -> SharePoint-> 2010 -> Module.
30. Name the module CustomPages.
31. Click Add.
32. In the Solution Explorer, right-click the Sample.txt file and select Delete.
33. Click OK.
Add the TimeEntrySearchPage.aspx included in the student files to the module.
34. Right-click the CustomPages module.
35. Select Add >> Existing Item.
36. Browse to the <INSTALL\Labs\AutomatingSilverlightWebPartDeployment\Source\Before\SilverlightTestPage.aspx file and select it.
37. Click Add.
38. Open the Elements.xml file included in the CustomPages module and replace the content with the following Xml:
Xml
<?xml version="1.0" encoding="utf-8"?><Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <Module Name="CustomPages"> <File Url="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." /> <AllUsersWebPart WebPartOrder="1" WebPartZoneID="Main" ID="SilverlightWebPart"> <
<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>
39. 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.Deployment project and choose Deploy.
2. Once the status bar displays deploy succeeded, open Internet Explorer and navigate to http://intranet.contoso.com/silverlighttestpage.aspx.
3. Verify the Silverlight Web Part displays the Silverlight.Sample.App Silverlight application on the SharePoint page.
Figure 4Silverlight 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 http://intranet.contoso.com/silverlighttestpage.aspx.
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\Before folder, double click the VSIX.SharePoint.Silverlight.vsix file.
Figure 6
Visual Studio Extension Installer
2. Click Install.
Figure 7Visual 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. http://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 8Add 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 9Solution 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 10Project 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 http://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 11Silverlight 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 http://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
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.