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.
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.
Before beginning this exercise, close all open instances of Visual Studio 2010.
In the <INSTALL>\Labs\UsingtheCustomSilverlightWebPart\Source\Before folder, double-click the VSIX.SharePoint.Silverlight.vsix file.
Figure 1
Visual Studio Extension Installer
Click Install.
Figure 2
Visual Studio Extension Installer – Installation Complete
- 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.
- Open Visual Studio 2010.
- In Visual Studio 2010, click File-> New -> Project to add a new project.
- In the Installed Templates, select Visual C# -> SharePoint -> 2010 and select Empty SharePoint Project.
- Under Name:, enter SP.Custom.SL.WebPart.
In the Location: textbox enter <INSTALL>\Labs\UsingtheCustomSilverlightWebPart\Source\Begin and click OK.
Figure 3
Create a new SharePoint project
- In the SharePoint Customization Wizard, enter the URL for your on premise instance of SharePoint 2010 (i.e. https://intranet.contoso.com).
- Select Deploy as a sandboxed solution and click Finish.
- Right-click the Sample.Silverlight.App project and choose Add -> New Item.
Select Visual C# -> SharePoint -> 2010 -> Silverlight Custom Web Part.
Figure 4
Add new Silverlight Custom Web Part
- Click Add.
In the Choose a Silverlight project dialog, click Add.
Figure 5
Choose a Silverlight project dialog
In the New Silverlight Application dialog, click OK.
Figure 6
New Silverlight Application dialog
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 7
Solution Explorer
- In the Solution Explorer, right-click App.xaml and select View Code.
- Delete all the code inside the Application_Startup method.
Replace the contents of the Application_Startup method with the following code. (Snippet 4.1)
this.RootVisual = new MainPage(e.InitParams);
This code passes the initialization parameters for the Silverlight application to the MainPage user control when the Silverlight application starts.
- In the Solution Explorer, double-click the MainPage.xaml file.
In the Toolbox, select the TextBlock control and drag it on to the MainPage.xaml design surface.
Expand the TextBlock in the MainPage.xaml design surface.
- In the Solution Explorer, right-click MainPage.xaml and select View Code.
Insert the following code into the MainPage class.
private IDictionary<string, string> _parameters = null; public MainPage(IDictionary<string, string> parameters) { this._parameters = parameters; InitializeComponent(); this.textBlock1.Text = _parameters["textValue"]; }
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.
- In the Solution Explorer, right-click SilverlightApplication1TestPage.aspx and select View Code.
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.
After line 68, enter the following code. (Snippet 4.3)
<param name="initParams" value="textValue=Hello World!" />
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 10
Initialization parameters for Silverlight application
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 11
Silverlight Application working on Internet Explorer
- Close Internet Explorer.
- In the Solution Explorer, right-click SandboxedVisualWebPart1.ascx and select View Code.
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.
After line 54, enter the following code. (Snippet 4.4)
<param name="initParams" value="textValue=Hello World!" />
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 12
Initialization parameters for Silverlight application
- In the Solution Explorer, right-click SilverlightApplication1WebPartPage.aspx and select View Code.
: 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.
After line 86, after the <!—Silverlight Custom Web partial --> code comment, enter the following code. (Snippet 4.5)
<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>
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 13
Custom HTML markup
- 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.
- In the Solution Explorer, right-click the SP.Custom.SL.WebPart project and choose Deploy.
- Once the status bar displays deploy succeeded, open Internet Explorer and navigate to https://intranet.contoso.com/SitePages/SilverlightApplication1WebPartPage.aspx.
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