Exercise 1: Using the Content Editor Web Part

In this exercise, you will use the Content Editor Web Part to display a Silverlight application running on a different web site.

Task 1 – Hosting the Sample Silverlight Application in a Web Site

In this task, you will use Visual Studio to host the sample Silverlight application in a web site separate from the SharePoint web site.

1. Using Visual Studio 2010, open the Sample.Silverlight.App.sln Visual Studio Solution at the following location <INSTALL>\Labs\CEWPSilverlightIntegration\Source\End \Sample.Silverlight.App.
2. Once the solution is loaded, press F5.

3. Once the web browser is loaded and the sample Silverlight application is displayed, right-click in the address textbox and and select Copy. The path to the web page hosting the Silverlight application will be used in the next task.

   Figure 1

   Copy address

Task 2 – Adding the Content Editor Web Part to a Page in a SharePoint Site

In this task, you will use Internet Explorer to add a Content Editor Web Part to a page in a SharePoint site.

1. Open Internet Explorer and navigate to https://intranet.contoso.com.

2. Click the Edit button.

   Figure 2

   Edit Button

3. In the Editing Tools group in the ribbon, select the Insert tab.

   Figure 3

   Insert Tab

4. Select Web Part.
5. In the Categories section select Media and Content.
6. In the Web Parts section select Content Editor.
7. Click the Add button.

8. Click the Save Button.

   Figure 4

   Save Button

9. After the page is saved, mouse over the down arrow for the Web Part menu and select Edit Web Part.

   Figure 5

   Edit Web Part

10. Click the Click here to add new content link.

    Figure 6

    Add new Content

11. In the Ribbon, click the HTML button, and select Edit HTML Source.

    Figure 7

    Edit HTML Source

12. In the HTML Source dialog, enter the following HTML to display the Silverlight application you deployed uploaded in task 1.

    HTML

    <IFRAME SRC="<PATH TO WEB PAGE HOSTING SAMPLE SILVERLIGHT APPLICATION>" WIDTH="400" HEIGHT="300" />

13. Replace the <PATH TO WEB PAGE HOSTING SAMPLE SILVERLIGHT APPLICATION> placeholder with the value you copied from the web browser in task 1. To do this, highlight the placeholder text, right click, and select paste.

    Figure 8

    Paste the URL of task 1

14. After you paste in the new URL the code will look like this.

    Figure 9

    URL Pasted

    Note:

    An IFRAME displays the web page from the web site that hosts the Silverlight application. In a scenario where the web site that hosts the Silverlight application requires separate credentials to authenticate you must enter the appropriate credentials to access the web site.

15. Click OK.

16. In the Content Editor Web Part Toolpane, click OK.

    Figure 10

    Content Editor Toolpane

17. Notice the Content Editor Web Part displays the Silverlight.Sample.App Silverlight application on the SharePoint page.

    Figure 11

    Silverlight Sample Application into a Web Part