Creating self service Silverlight applications

Document Sample
Creating self service Silverlight applications Powered By Docstoc
					Hands-On Lab
Creating self service Silverlight applications
Lab version:    1.0.0
Last updated:   7/5/2012
CONTENTS




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

EXERCISE 1: CREATE THE ADS LIST TO HOLD THE BANNER ADS ................................................... 4
       Task 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............................... 14
       Task 1 – Creating the Custom Master Page ........................................................................................ 14
       Task 2 – Customizing the Master Page ............................................................................................... 14
       Task 3 – Applying the Custom Master Page........................................................................................ 17
       Exercise 3 Verification ......................................................................................................................... 18

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
       Exercise 4 Verification ......................................................................................................................... 20

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:
        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.R
                otator.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 1
Create 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 2
Upload Multiple Pictures Button


8. The Picture Manager Application will begin loading.
Figure 3
Picture Manager Application


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




Figure 4
Add 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 5
Upload and Close Button


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



Figure 6
Go back to “Ads” link


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


14. Click Versioning settings.
15. In the Content Approval section, select the Yes radio button.




Figure 8
Content Approval section


16. Click OK.
17. In the breadcrumb, click the Ads link.


Figure 9
Ads Link


18. Verify the following images exist in the Ads Picture Library.
        Figure 10
        Ads 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.
        1. Open Internet Explorer and navigate to http://intranet.contoso.com.
        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 11
        Ads 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.Rotat
          or.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 ads
        bannerImages = new List<BannerImage>();

        //Populate the generic list of type BannerImage with images
        foreach (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 Ads
In 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 images
        DispatcherTimer timer = new DispatcherTimer();
        //Set the timer interval to 3 seconds
        timer.Interval = new TimeSpan(0, 0, 0, 0, 3000);
        //Assign the event handler for the timer tick event
        timer.Tick += new EventHandler(Tick);
        //Start the timer
        timer.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 Control
In 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 collection
        BannerImage currentImage = bannerImages[currentImageIndex];
        //Set the image source for the bannerImage Image control to the current image
        bannerImage.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 collection
        if (currentImageIndex < bannerImages.Count - 1)
        {
           currentImageIndex++;
        }
        //Set the current image index to 0 if the current image is the last one in the
        //collection
        else
        {
           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 12
        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 2 Verification
In order to verify that you have correctly performed all steps of exercise 2, proceed as follows:

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 14
v4_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 15
Code 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 16
Find 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 17
        Site 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 18
        Set as Default Master Page dialog box


       4. Open http://intranet.contoso.com in Internet Explorer.
       5. Notice the Silverlight banner rotator application inserted at the top of the page.
        Figure 19
        Silverlight banner ad rotator application



Exercise 3 Verification
In order to verify that you have correctly performed all steps of exercise 3, proceed as follows:

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.
        2. Notice the Silverlight banner rotator application inserted at the top of the page.




        Figure 20
        Silverlight banner ad rotator application




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.
       1. Open Internet Explorer and navigate to http://intranet.contoso.com.
       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 21
        Approve/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 22
        Rejected 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.




        Figure 23
        Silverlight banner ad rotator application



Exercise 4 Verification
In order to verify that you have correctly performed all steps of exercise 4, proceed as follows:

Verification 4
In this verification, you will view the Silverlight rotating banner ad application to verify it does not
display the Azure ad.
1. Open Internet Explorer and navigate to http://intranet.contoso.com.
2. Notice the Azure ad no longer appears in the Silverlight banner ad rotator application at the top of the
page.




        Figure 24
        Silverlight banner ad rotator application




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.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:14
posted:7/5/2012
language:English
pages:21