Exercise 1: Adding a Silverlight Application to a Master Page

In this exercise you will create a custom master page and add a Silverlight application to it.

Task 1 – Creating a Library for the Silverlight Application

In this task, you will create a document library to host your Silverlight application and upload the Silverlight application to that library.

1. Launch Internet Explorer and navigate to https://intranet.contoso.com.
2. In the left hand pane select All Site Content

3. Click Create.

   Figure 1

   Create Button

4. Select Library for the Filter By: and Content for the Category.

5. Click Document Library.

   Figure 2

   Create dialog box

6. On the right of the dialog under Document Library, enter SilverlightApps in the Name text box and click Create.

   Figure 3

   Document Library Name

7. Once the SilverlightApps Document Library is created, you are taken to the SL-APPS Document Library automatically.
8. Click Add document in the SilverlightApps document library.
9. In the Upload Document dialog, click Browse and select <INSTALL>\Labs\AddingSilverlightApplicationToAMasterPage\Source\End\Silverlight.Weather.xap and click OK.

10. The Silverlight.Weather.xap file will appear in the SilverlightApps document library.

    Figure 4

    SilverlightApps document Library

Task 2 – Creating the Custom Master Page

1. In this task, you will create a new Master Page to host the custom Silverlight application.
2. Navigate to Start >> All Programs >> SharePoint >> Microsoft SharePoint Designer 2010.
3. In SharePoint Designer 2010, click on Open Site.

4. In the Open Site dialog, enter https://intranet.contoso.com in the Site name: text box and click Open.

   Note:

   If you are prompted for credentials in the Windows Security dialog, enter the administrator credentials you used to log into the virtual machine.

5. Select Navigation >> Site Objects >> Master Pages to display the available master pages.
6. In the Master Pages tab opened in the step above, right-click on the V4.master master page and choose Copy.
7. Right-click in an open space in the Master Pages tab and select Paste to create the new Master Page.
8. Right-click on the Master Page you created in the step above (v4_copy(1).master), select Rename and V4_Silverlight.master.

Task 4 – Customizing the Master Page

1. In this task, you will add the Silverlight application to the custom Master Page.

2. In SharePoint Designer 2010 click on V4_Silverlight.master to open the settings page.

   Figure 5

   V4_Silverlight.master page

3. Click on the Edit file link in the Customization panel to open the master page in Design view.

4. If prompted to check the file out, click Yes.

   Note:

   By default, the v4_Silverlight.master page is shown in Split view so that the code is shown in the upper half of the screen and the design in the lower half.

5. Click the Code button to view the code for the Master Page.

   Figure 6

   Code Button

6. Press Ctrl+F to open the Find and Replace dialog, select the Find What: text box, enter PlaceHolderPageDescription and click Find Next. Click Close.

   Figure 7

   Find and Replace dialog

7. Place your cursor after the </div> tag under the PlaceHolderPageDescription tag and press Enter.

8. Enter the following HTML:

   HTML

   <div class="s4-pagedescription" tabindex="0" > <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="160" height="25"> <param name="source" value="https://intranet.contoso.com/silverlightapps/Silverlight.Weather.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="4.0.50401.0" /> <param name="autoUpgrade" value="true" /> <a href="https://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none"> <img src="https://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/> </a> </object> </div>
   Note:

   This markup will place a Silverlight control into the web page via an object tag. The source parameter provides the path to the Silverlight application.

9. Click File >> Save to save your changes.

10. If the Site Definition Page Warning dialog is displayed, click Yes.

    Figure 8

    Site Definition Page Warning dialog

Task 5 – Appling the Custom Master Page

1. In this task, you will apply custom master page to test your work.
2. Select Navigation -> Site Objects -> Master Pages to display the available master pages.
3. Right-click V4_Silverlight.master and select Set as Default Master Page.

4. When prompted to set the default Master Page, click Yes.

   Figure 9

   Set as Default Master Page Dialog

5. Open https://intranet.contoso.com in Internet Explorer.

6. Notice the Weather control inserted at the top of the page.

   Figure 10

   Control Inserted

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 site where you applied the v4_Silverlight.master Master Page and verify it displays the Silverlight application.

1. Open https://intranet.contoso.com in Internet Explorer.

2. Notice the Weather control inserted at the top of the page.

   Figure 11

   Control Inserted