creating self service silverlight applicationsaz12722.vo.msecnd.net/.../lab.docx · web viewbecause...

Hands-On LabCreating self service Silverlight applications

Lab version: 1.0.0

Last updated: 5/21/2023

CONTENTS

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

EXERCISE 1: CREATE THE ADS LIST TO HOLD THE BANNER ADS...................................................4Task 1 – Creating the Ads List..............................................................................................................4

Exercise 1 Verification.........................................................................................................................9

EXERCISE 2: CREATE THE SILVERLIGHT APPLICATION TO DISPLAY THE ROTATING BANNER ADS........................................................................................................................................................... 10

Task 1 – Loading the Banner Ads From the Ads Picture Library.........................................................10

Task 2 – Processing the Banner Ads Returned From the Ads Picture Library....................................11

Task 3 – Starting the Timer to Cycle the Banner Ads.........................................................................11

Task 4 – Displaying the Banner Ads in the Silverlight Control............................................................12

Task 5 – Deploying the Silverlight Application and Test it.................................................................13

Exercise 2 Verification.......................................................................................................................13

EXERCISE 3: ADDING THE SILVERLIGHT APPLICATION TO A MASTER PAGE..............................14Task 1 – Creating the Custom Master Page.......................................................................................14

Task 2 – Customizing the Master Page..............................................................................................14

Task 3 – Applying the Custom Master Page.......................................................................................17


EXERCISE 4: USING THE SELF SERVICE SILVERLIGHT APPLICATION TO TURN OFF A BANNER AD............................................................................................................................................................. 18

Task 1 – Changing the Approval Status for a Banner Ad....................................................................19


SUMMARY................................................................................................................................................ 20

Overview

Because Silverlight applications add rich functionality and enhance the user experience on SharePoint sites, they are frequently part of a custom branding solution. Self service Silverlight applications provide the ability for site owners to administer and configure Silverlight applications and associated site functionality without the need to write code.

Objectives

This lab will demonstrate how you can create a self service Silverlight application which displays rotating banner ads in a SharePoint web site. To demonstrate these concepts the reader will

Create a picture library to store banner ads.

Create a Silverlight application to display rotating banner ads.

Create a custom Master Page.

Customize the custom Master Page to display the Silverlight application.

Apply the custom Master Page to a SharePoint site.

System Requirements

You must have the following items to complete this lab:

2010 Information Worker Demonstration and Evaluation Virtual Machine

SharePoint Designer 2010

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 create the Hyper-V image.

Exercises

This Hands-On Lab comprises the following exercises:

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=751fa0d1-356c-4002-9c60-d539896c66ce&displaylang=en

1. Create the Ads list to hold the banner ads

2. Create the Silverlight application to display the rotating banner ads

3. Adding a Silverlight application to a master page

4. Using the self service Silverlight application to add a new banner add

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\CreatingSelfServiceSilverlightApplications\Source\Begin\SL.Banner.Rotator.WP.sln: A visual Studio 2010 Solution containing the starter code for the Silverlight application that displays rotating banner ads, a web project to test the Silverlight application, and a SharePoint project to deploy the Silverlight application to a test page in SharePoint.

Exercise 1: Create the Ads list to hold the banner ads

In this exercise, you will create the Ads list in the http://intranet.contoso.com site collection. The Ads list contains the banner ads the Silverlight application will display.

Task 1 – Creating the Ads List

In this task, you will deploy the pre-requisite Ads list template.

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

2. Click Site Actions and select More Options.

3. In the Filter By: section, select Library.

4. Select Picture Library.

Figure 1Create dialog box

5. In the Name textbox, enter Ads.

6. Click Create.

7. In the Picture Library menu, click Upload, and select Upload Multiple Pictures.

Figure 2Upload Multiple Pictures Button

8. The Picture Manager Application will begin loading.

Figure 3Picture Manager Application

9. Once the Picture Manager loads, click the Add Picture Shortcut link.

Figure 4Add Picture Shortcut link

10. Browse to the <INSTALL>\Labs\CreatingSelfServiceSilverlightApplications\Source folder, and click Add.

11. Select all of the pictures, and then click Upload and Close.

Figure 5Upload and Close Button

12. After the picture manager closes, click the Go back to “Ads” link.

Figure 6Go back to “Ads” link

13. In the Picture Library menu, click Settings, and select Picture Library Settings.

Figure 7Picture Library Settings button

14. Click Versioning settings.

15. In the Content Approval section, select the Yes radio button.

Figure 8Content Approval section

16. Click OK.

17. In the breadcrumb, click the Ads link.

Figure 9Ads Link

18. Verify the following images exist in the Ads Picture Library.

Figure 10Ads Picture Library

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 Ads list to validate it contains the sample data.


2. Click Site Actions and select View All Site Content.

3. In the Picture Libraries section, click Ads.

4. Verify the Ads list exists and contains the following data.

Figure 11Ads Picture Library

Exercise 2: Create the Silverlight application to display the rotating banner ads

In this exercise you will create a Silverlight application that displays rotating banner ads stored in the Ads list.

Task 1 – Loading the Banner Ads From the Ads Picture Library

In this task, you will use the SharePoint Client Object Model to query the Ads Picture Library and return the banner ads it contains.

1. Open the following Visual Studio 2010 Solution by double-clicking on it <INSTALL>\Labs\CreatingSelfServiceSilverlightApplications\Source\Begin\SL.Banner.Rotator.WP.sln.

2. In the Solution Explorer, right-click BannerGallery.xaml and select View Code.

3. Insert the following code into the LoadImages method. (Snippet 6.2.1)

C#

ClientContext clientContext = new ClientContext("http://intranet.contoso.com");

adsList = clientContext.Web.Lists.GetByTitle("Ads");

CamlQuery query = new Microsoft.SharePoint.Client.CamlQuery();

query.ViewXml = @"<View>" + @"<Query>" + @"<Where>" + @"<Eq>" + @"<FieldRef Name='_ModerationStatus' />" + @"<Value Type='ModStat'>Approved</Value>" + @"</Eq>" + @"</Where>" + @"<OrderBy>" + @"<FieldRef Name='FileLeafRef' Ascending='True' />" + @"</OrderBy>" + @"</Query>" + @"<ViewFields>" + @"<FieldRef Name='FileLeafRef' />" + @"</ViewFields>" + @"</View>";

adsListItemCollection = adsList.GetItems(query);

clientContext.Load(adsListItemCollection);

clientContext.ExecuteQueryAsync(onQuerySucceeded, onQueryFailed);

Note: This code uses a CAML query to return only the banner ads in the Ads Picture Library that are Approved. The SharePoint Client Object Model makes a asynchronous call to return the data and the onQuerySucceeded and onQueryFailed callback delegate methods are called when the asynchronous call is complete.

Task 2 – Processing the Banner Ads Returned From the Ads Picture Library

In this task, you will add the banner ads returned from the SharePoint Client Object Model to a generic list.

1. Insert the following code into the DisplayAds method. (Snippet 6.2.2)

C#

//Create a generic list of type BannerImage to hold the adsbannerImages = new List<BannerImage>();

//Populate the generic list of type BannerImage with imagesforeach (ListItem item in adsListItemCollection){ BannerImage bannerImage = new BannerImage(); bannerImage.Url = "http://intranet.contoso.com/Ads/" + item["FileLeafRef"].ToString(); bannerImages.Add(bannerImage);}

StartCyclingBannerAds();

Note: First, the code creates a generic list of type BannerImage to store the Ads returned from the Ads Picture Library. The BannerImage class represents a single banner ad. Then the code loops through the ads returned from the Ads Picture Library and ads them to the generic list. Then the code calls the StartCyclingBannerAds method to display them.

Task 3 – Starting the Timer to Cycle the Banner AdsIn this task, you will configure and start a DispatcherTimer to cycle the banner ads.

1. Insert the following code into the StartCyclingBannerAds method. (Snippet 6.2.3)

C#

//Create a new timer to rotate the imagesDispatcherTimer timer = new DispatcherTimer();//Set the timer interval to 3 secondstimer.Interval = new TimeSpan(0, 0, 0, 0, 3000);//Assign the event handler for the timer tick eventtimer.Tick += new EventHandler(Tick);//Start the timertimer.Start();

Note: This method uses a DispatcherTimer to cycle the banner ads in the Silverlight application. The banner ads are set to cycle every three seconds. The Tick Event Handler is responsible for changing the banner ad which is currently displayed.

Task 4 – Displaying the Banner Ads in the Silverlight ControlIn this task, you will write the Tick event handler for the DispatcherTimer.

1. Insert the following code into the StartCyclingBannerAds method. (Snippet 6.2.4)

C#

//Load the next image from the collectionBannerImage currentImage = bannerImages[currentImageIndex];//Set the image source for the bannerImage Image control to the current imagebannerImage.Source = new BitmapImage(new Uri(currentImage.Url, UriKind.RelativeOrAbsolute));//Increment the current image index if the current image is not the last one//in the collectionif (currentImageIndex < bannerImages.Count - 1){ currentImageIndex++;}//Set the current image index to 0 if the current image is the last one in the//collectionelse{ currentImageIndex = 0;}

Note: This method sets the Source property for the bannerImage Image control in the Silverlight application to the next banner ad in the list. It also keeps track of which banner ad is currently displayed and cycles the banner ads appropriately.

Task 5 – Deploying the Silverlight Application and Test it.In this task, you will deploy the Silverlight application to SharePoint and verify it works.

1. In the Solution Explorer, right-click the SL.Banner.Rotator.WP project and select Deploy.

2. Open Internet Explorer and navigate to http://intranet.contoso.com/SitePages/SL.Banner.RotatorWebPartPage.aspx

3. Verify the Silverlight application displays the banner ads from the Ads Picture Library.

Figure 12Banner displayed

Note: The first banner ad is displayed in the screenshot above. There are four banner ads that cycle in the Silverlight application.



Verification 2

In this verification, you will browse to the web page in the SharePoint site where you deployed the Silverlight application and verify it works.

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

2. Notice the Silverlight banner rotator application inserted at the top of the page.

3. Verify the Silverlight application displays the banner ads from the Ads Picture Library.

Figure 13

Banner displayed

Note: The first banner ad is displayed in the screenshot above. There are four banner ads that cycle in the Silverlight application.

Exercise 3: Adding the Silverlight Application to a Master Page

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

Task 1 – Creating the Custom Master Page

In this task, you will create a new Master Page to host the custom Silverlight application.

1. Navigate to Start -> All Programs -> SharePoint -> Microsoft SharePoint Designer 2010.

2. In SharePoint Designer 2010, click on Open Site.

3. In the Open Site dialog, enter http://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.

4. Select Navigation -> Site Objects -> Master Pages to display the available master pages.

5. In the Master Pages tab opened in the step above, right-click on the V4.master master page and choose Copy.

6. Right-click in an open space in the Master Pages tab and select Paste to create the new Master Page.

7. Right-click on the Master Page you created in the step above (v4_copy(1).master), select Rename and V4_Banner.master.

Task 2 – Customizing the Master Page

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

1. In SharePoint Designer 2010 click on V4_Banner.master to open the settings page.

Figure 14v4_Banner.master Page

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

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

Note: By default, the v4_Banner.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.

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

Figure 15Code Button

5. 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 16Find and Replace dialog box

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

7. Enter the following HTML:

HTML

<div class="s4-pagedescription" tabindex="0" ><object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="486" height="60"><param name="source" value="http://intranet.contoso.com/SiteAssets/SL.Banner.Rotator.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="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none"><img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>

</a></object></div>

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

8. Click File -> Save to save your changes.

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

Figure 17Site Definition Page Warning

Task 3 – Applying the Custom Master Page

In this task, you will apply the custom master page to test your work.

1. Select Navigation -> Site Objects -> Master Pages to display the available master pages.

2. Right-click V4_Silverlight.master and select Set as Default Master Page.

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

Figure 18Set as Default Master Page dialog box

4. Open http://intranet.contoso.com in Internet Explorer.


Figure 19Silverlight banner ad rotator application



Verification 1

In this verification, you will browse to the SharePoint site where you applied the v4_Banner.master Master Page and verify it displays the Silverlight application.

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



Exercise 4: Using the self service Silverlight Application to turn off a banner ad

In this exercise you will turn off a banner ad so it is not displayed in the self service Silverlight application.

Task 1 – Changing the Approval Status for a Banner Ad

In this task, you will change the approval status for a banner ad in the Ads list.


2. Click Site Actions and select View All Site Content.

3. In the Picture Libraries section, click Ads.

4. Click the dropdown list for the azure picture and select Approve/Reject.

Figure 21Approve/Reject Button

Note: The Silverlight application only displays banner ads that have an Approved status. By setting the azure picture’s status to Rejected, we prevent it from displaying in the Silverlight application.

5. In the Approval Status section, select the Rejected radio button.

Figure 22Rejected Radio Button

6. Click OK.

7. Notice the Azure ad no longer appears in the Silverlight banner ad rotator application at the top of the page.




Verification 4

In this verification, you will view the Silverlight rotating banner ad application to verify it does not display the Azure ad.


2. Notice the Azure ad no longer appears in the Silverlight banner ad rotator application at the top of the page.


Summary

In this lab, you have seen how to create a self-service Silverlight application that displays banner ads users upload to a SharePoint Picture Library. You have also learned how to enhance the appearance of a SharePoint site by adding a Silverlight application to a custom Master Page with SharePoint Designer

2010. Finally, you learned how to apply the custom Master Page that hosts the Silverlight application to a SharePoint site and change the approval status for a banner ad to remove it from the banner ad rotation.

creating self service silverlight applicationsaz12722.vo.msecnd.net/.../lab.docx · web viewbecause...

Documents