Hands-On LabUsing The Custom Silverlight Web Part

Lab version: 1.0.0

Last updated: 5/20/2023

CONTENTS

OVERVIEW................................................................................................................................................. 3

EXERCISE 1: USING THE CUSTOM SILVERLIGHT WEB PART.............................................................4Task 1 – Installing the Visual Studio 2010 Silverlight SharePoint Web Parts Extension.......................5

Task 2 – Creating a Silverlight Application and the Supporting Assets to Deploy it.............................6

Task 3 – Deploying and Test the Silverlight Application and Web Page Pre-configured with the Custom Silverlight Web Part..............................................................................................................14

SUMMARY................................................................................................................................................ 16

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 a SharePoint Project Item (SPI) called the Silverlight Custom Web Part that allows developers to create and deploy a new Silverlight application to a SharePoint sites. This lab will guide the reader through an exercise that uses the Silverlight Custom Web Part to create a Silverlight application, deploy it to a SharePoint site, and display it on a web page with the Silverlight Web Part.

Objectives

This lab will demonstrate how you can use the Silverlight Custom Web Part to create a Silverlight application and deploy it to a SharePoint site and display it on a web page with the Silverlight Web Part. To demonstrate this concept the reader will

Use the Silverlight Custom Web Part to create a Silverlight application.

Use the Silverlight Custom Web Part to create a SharePoint Solution Package that deploys the Silverlight application.

Use Silverlight Custom Web Part to create a web page that includes a pre-configured Silverlight Web Part to display the Silverlight application.

Use Silverlight Custom Web Part 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 and create the Hyper-V image.

Exercises

This Hands-On Lab comprises the following exercises:

1. Using the Custom Silverlight Web Part

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\UsingtheCustomSilverlightWebPart\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: Using the Custom Silverlight Web Part

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

Note: If you have already installed the Visual Studio 2010 Silverlight SharePoint Web Parts Extension in the previous lab, exercise you can skip task 1 and proceed to task 2.

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\UsingtheCustomSilverlightWebPart\Source\Before folder, double-click the VSIX.SharePoint.Silverlight.vsix file.

Figure 1Visual Studio Extension Installer

2. Click Install.

Figure 2Visual Studio Extension Installer – Installation Complete

3. Click Close.

Task 2 – Creating a Silverlight Application and the Supporting Assets to Deploy it

In this task, you will use the Silverlight Custom Web Part to create a Silverlight application and a SharePoint Solution Package that deploys the Silverlight application and a web page that includes a pre-configured Silverlight Web Part to display the Silverlight application.

1. Open Visual Studio 2010.

2. In Visual Studio 2010, click File -> New -> Project to add a new project.

3. In the Installed Templates, select Visual C# -> SharePoint -> 2010 and select Empty SharePoint Project.

4. Under Name:, enter SP.Custom.SL.WebPart.

5. In the Location: textbox enter <INSTALL>\Labs\UsingtheCustomSilverlightWebPart\Source\Begin and click OK.

Figure 3Create a new 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 -> Silverlight Custom Web Part.

Figure 4Add new Silverlight Custom Web Part

10. Click Add.

11. In the Choose a Silverlight project dialog, click Add.

Figure 5Choose a Silverlight project dialog

12. In the New Silverlight Application dialog, click OK.

Figure 6New Silverlight Application dialog

Note: The Custom Silverlight Web Part SharePoint Project Item automatically creates a Silverlight project, a web Project to test the Silverlight application, and all the modules to deploy a web page with the Silverlight Web Part on it to display the 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 7Solution Explorer

13. In the Solution Explorer, right-click App.xaml and select View Code.

14. Delete all the code inside the Application_Startup method.

15. Replace the contents of the Application_Startup method with the following code. (Snippet 4.1)

C#

this.RootVisual = new MainPage(e.InitParams);

Note: This code passes the initialization parameters for the Silverlight application to the MainPage user control when the Silverlight application starts.

16. In the Solution Explorer, double-click the MainPage.xaml file.

17. In the Toolbox, select the TextBlock control and drag it on to the MainPage.xaml design surface.

Figure 8Toolbox

18. Expand the TextBlock in the MainPage.xaml design surface.

Figure 9TextBlock

19. In the Solution Explorer, right-click MainPage.xaml and select View Code.

20. Insert the following code into the MainPage class.

C#

private IDictionary<string, string> _parameters = null;

public MainPage(IDictionary<string, string> parameters){ this._parameters = parameters; InitializeComponent(); this.textBlock1.Text = _parameters["textValue"];}

Note: This code defines a generic IDictionary collection variable named _parameters to store the initialization parameters for the Silverlight application. The MainPage constructor uses the parameters passed in from the App class to fill the _parameters IDictionary collection. The MainPage constructor then sets the Text property of the textBlock control to the initialization parameter named textValue.

21. In the Solution Explorer, right-click SilverlightApplication1TestPage.aspx and select View Code.

Note: The SilverlightApplication1TestPage.aspx file is used to test the Silverlight application in the test web site project. First, we will add the initialization parameters to this test web page to make sure the Silverlight application is correctly receiving and processing the init params.

22. After line 68, enter the following code. (Snippet 4.3)

HTML

<param name="initParams" value="textValue=Hello World!" />

Note: This code defines the initialization parameters for the Silverlight application. The textValue initialization parameter is defined and its value is set to Hello World!.

After the code above is inserted the complete list of parameters for the Silverlight application looks like this.

Figure 10Initialization parameters for Silverlight application

23. Press F5 to test the Silverlight application.

Internet Explorer automatically opens the test web page and the Silverlight application displays the initialization parameter value.

Figure 11Silverlight Application working on Internet Explorer

24. Close Internet Explorer.

25. In the Solution Explorer, right-click SandboxedVisualWebPart1.ascx and select View Code.

Note: The SandboxedVisualWebPart1.ascx file is the User Control that defines the Sandboxed Visual Web Part that hosts the Silverlight Web Part that displays the Silverlight application. Now that we know the Silverlight application is correctly receiving and processing the initialization parameters we will add the same initialization parameters to the User Control which will be deployed to the SharePoint site.

26. After line 54, enter the following code. (Snippet 4.4)

HTML

<param name="initParams" value="textValue=Hello World!" />

Note: This code defines the initialization parameters for the Silverlight application. The textValue initialization parameter is defined and its value is set to Hello World!.

After the code above is inserted the complete list of parameters for the Silverlight application looks like this.

Figure 12Initialization parameters for Silverlight application

27. In the Solution Explorer, right-click SilverlightApplication1WebPartPage.aspx and select View Code.

Note: : The SilverlightApplication1WebPartPage.aspx file is the web page that hosts the Sandboxed Visual Web Part that hosts the Silverlight Web Part that displays the Silverlight application. We can add HTML markup to the web page before we deploy it to the SharePoint web site.

28. After line 86, after the <!—Silverlight Custom Web partial --> code comment, enter the following code. (Snippet 4.5)

HTML

<font color="Scarlet" size="4">You can edit the HTML in the ASPX pages you deploy.</font><br><br><font color="Grey" size="4">The Sandbox Compatible Visual Web Part which hosts the Silverlight application is displayed below.</font><br><br><hr color="black"><br><br>

Note: This code demonstrates how you can add custom HTML markup to web pages you deploy to SharePoint web sites.

After the code above is inserted the complete list of parameters for the Silverlight application looks like this.

Figure 13Custom HTML markup

29. Save all the files.

Task 3 – Deploying and Test the Silverlight Application and Web Page Pre-configured with the Custom 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.Custom.SL.WebPart project and choose Deploy.

2. Once the status bar displays deploy succeeded, open Internet Explorer and navigate to http://intranet.contoso.com/SitePages/SilverlightApplication1WebPartPage.aspx.

3. Verify the Silverlight Web Part displays the custom Silverlight application and the initialization parameter as well as the custom HTML mark-up on the SharePoint page.

Figure 14

Silverlight Web Part displayed

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 Custom Silverlight Web Part to validate it displays the custom Silverlight application and the initialization parameter as well as the custom HTML mark-up on the SharePoint page.

1. Open Internet Explorer and navigate to http://intranet.contoso.com/SitePages/SilverlightApplication1WebPartPage.aspx.

2. Verify the Silverlight Web Part displays the custom Silverlight application and the initialization parameter as well as the custom HTML mark-up on the SharePoint page.

Figure 15Silverlight Web Part displayed

Summary

In this lab you have seen how you can use the Silverlight Custom Web Part to create a Silverlight application and deploy it to a SharePoint site and display it on a web page with the Silverlight Web Part.