Docstoc

Lab

Document Sample
Lab Powered By Docstoc
					Hands-On Lab
Integrating Images Stored in SharePoint with
Windows Phone 7 using Web Services

Lab version:    1.0.0
Last updated:   12/2/2011




                                         Page | 1
CONTENTS

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

EXERCISE 1: CREATING A SHAREPOINT ASSET LIBRARY DATA SOURCE ...................................... 4
       Task 1 – Deploying the List Template to a SharePoint Site ................................................................... 4
       Task 2 – Creating the Vehicle Image Library ......................................................................................... 5

EXERCISE 2: CREATING THE WINDOWS PHONE 7 APPLICATION ...................................................... 7
       Task 1 – Beginning the Exercise ............................................................................................................ 7
       Task 2 – Configuring Constants in the Windows Phone 7 Application ................................................. 7
       Task 3 – Adding a Reference to the SharePoint Lists.asmx Web Service ............................................. 7
       Task 4 – Modifying the ServiceReferences.ClientConfig File to Support the Cookie Container Used
       With Forms Based Authentication ........................................................................................................ 8
       Task 5 – Retrieving Vehicle Images from SharePoint............................................................................ 9
       Task 6 – Binding Image URL to an Image Object Using a Custom Converter ..................................... 11

EXERCISE 3: TESTING THE WINDOWS PHONE 7 APPLICATION ....................................................... 13
       Task 1 – Testing the Application’s View Functionality in Windows Phone 7 Emulator ...................... 13

SUMMARY .................................................................................................................................................. 16




                                                                                                                                                 Page | 2
Overview

Windows Phone 7 applications can use SharePoint Web services to view images stored in a library.
Visual Studio 2010 provides a rich development environment for creating, deploying, and integrating
SharePoint Asset libraries with Windows Phone 7 applications.


Objectives
In this hands-on lab, you will learn how to use a SharePoint Web service to display images stored in a
SharePoint library in a Windows Phone 7 application. You will also learn how to use a converter class to
retrieve an image from a URL and bind to an Image object in a Windows Phone 7 application.
          Learn how to use the SharePoint lists.asmx Web service to retrieve Asset library data from a
           Windows Phone 7 application.

          Learn how to use a converter object in a Windows Phone 7 application to retrieve images
           from a URL and bind to an Image object.


Prerequisites
The following is required to complete this hands-on lab:

 Note: See Setting Up A SharePoint and Windows Phone 7 Development Environment Module for
 instructions that describe how to set up the SharePoint and Windows Phone 7 developer machine.



          Windows 7 x64 installed with all Windows Updates installed, in one of the following
           scenarios.
                ◦   Installed on a physical machine

                ◦   Installed on a bootable VHD
          SharePoint 2010 installed on the Windows 7 x64 developer machine configured with a site
           collection that uses Forms Based Authentication (FBA).
          Windows Phone 7 Developer Tools

            ◦   http://download.microsoft.com/download/1/7/7/177D6AF8-17FA-40E7-AB53-
                00B7CED31729/vm_web.exe
          Windows Phone 7 Developer Tools - January 2011 Update
                                                                                                 Page | 3
            ◦   http://download.microsoft.com/download/6/D/6/6D66958D-891B-4C0E-BC32-
                2DFC41917B11/WindowsPhoneDeveloperResources_en-US_Patch1.msp
           Windows Phone Developer Tools Fix

            ◦   http://download.microsoft.com/download/6/D/6/6D66958D-891B-4C0E-BC32-
                2DFC41917B11/VS10-KB2486994-x86.exe

 Note: The following prerequisites are not included in the Setting Up A SharePoint and Windows Phone
 7 Development Environment Module installation instructions. If you are using a development machine
 built according to the Setting Up A SharePoint and Windows Phone 7 Development Environment
 Module instructions you must install these components.



           KB981002- WCF: Hotfix rollup in .NET 3.5 SP1 for Win 7 and Win 2k8 R2

            ◦   http://code.msdn.microsoft.com/KB981002




Exercise 1: Creating a SharePoint Asset
Library Data Source
In this exercise, you will deploy a list template to SharePoint and make an Asset library based upon the
list template. The list template defines an Asset library that contains vehicle images. In this scenario,
the Windows Phone 7 application will read from the Asset library and display the images.
Task 1 – Deploying the List Template to a SharePoint Site
In this task, you will deploy the vehicle images list template to a SharePoint site. The list template
contains sample data used in the lab.
       1. Open Internet Explorer and navigate to the SharePoint Team Site configured for Forms
          Based Authentication.
       2. example: http://fbawp7
       3. Log into the site using site collection administrator credentials.
       4. Click Site Actions, and select Site Settings.
       5. In the Galleries section, click List templates.
       6. In the Ribbon, click the Documents tab.

                                                                                                    Page | 4
       7. Click Upload Document.
       8. Click Browse…
       9. Browse to the Vehicle Images.stp file located at
          %TrainingKitPath%\Labs\IntegratingSharePointImages\Source\Before and select it.
       10. Click Open.
       11. Click OK.
       12. Click Save.
       13. Verify the Vehicle Images list template appears in the List Templates Gallery.




        Figure 1
        List Template Gallery



Task 2 – Creating the Vehicle Image Library
In this task, you will use the vehicle images library template to create the vehicle images library.
       1. Open Internet Explorer and navigate to the SharePoint Team Site configured for Forms
          Based Authentication.
        example: http://fbawp7
       2. Log into the site using site collection administrator credentials.
       3. Click Site Actions and select More Options.
       4. In the Filter By section, select Library.
       5. Select the Vehicle Images library.



                                                                                                       Page | 5
Figure 2
Selecting the Vehicle Images template


6. In the Name textbox enter Vehicle Images.
7. Click Create.
8. Verify the Vehicle Images library contains the following sample images.




Figure 3
Vehicle Images list with content




                                                                             Page | 6
Exercise 2: Creating the Windows Phone
7 Application
In this exercise, you will create a Windows Phone 7 application to read and display images from the
vehicle images SharePoint library created in exercise 1.
Task 1 – Beginning the Exercise
In this task, you will open the lab solution in Visual Studio 2010.
       1. Make sure that you have downloaded and installed the items listed in System Requirements
          above prior to beginning this exercise.
       2. Launch Visual Studio 2010 as administrator and open the lab project by selecting File »
          Open » Project.
                a. Browse to the WP7.AccAdv.Images.sln file located at
                   %TrainingKitPath%\Labs\IntegratingSharePointImages\Source\Before and select it.
                b. Click Open to open the solution.

Task 2 – Configuring Constants in the Windows Phone 7 Application
In this task, you will configure the constants used in the Windows Phone 7 application to work with your
development environment.
       1. In the WP7.AccAdv.Images project, in the Utilities folder, open the Constants.cs file.
       2. Change the value for the USER_NAME and USER_PASSWORD constants to represent a
          Forms Based Authentication user specific to your development environment. For this lab,
          the user requires read and write permissions.
       3. Change the value for the AUTHENTICATION_SERVICE_URL constant to the URL specific to
          your development environment.
             The following code example demonstrates the value for a SharePoint server named fbawp7.
        C#
        public const string AUTHENTICATION_SERVICE_URL =
        "http://fbawp7/_vti_bin/authentication.asmx";




Task 3 – Adding a Reference to the SharePoint Lists.asmx Web Service
In this task, you will add a reference to the SharePoint lists.asmx Web service.


                                                                                                Page | 7
       1. In the Solution Explorer, in the WP7.AccAdv.Images project, right click Service References
          and select Add Service Reference.
       2. In the Address textbox enter the URL to the lists.asmx SharePoint web service for the site
          where you created the Vehicle Images library.
           Example: http://fbawp7/_vti_bin/lists.asmx
       3. Click Go.
       4. Once the service is resolved, enter ListService in the Namespace textbox.
       5. Click OK.

Task 4 – Modifying the ServiceReferences.ClientConfig File to Support the Cookie Container Used With
Forms Based Authentication
In this task, you will modify the ServiceReferences.ClientConfig file to support the CookieContainer used
with Forms BasedAuthentication. The code used to authenticate to the SharePoint server in this lab
uses Forms Based Authentication. Forms Based Authentication requires the use of a CookieContainer.
Please see the Security With SharePoint And Windows Phone 7 Applications Module for more
information about Forms Based Authentication.
       1. In the WP7.AccAdv.Images project, open the ServiceReferences.ClientConfig file.
       2. Locate the ListsSoap binding element.
       3. Add the following attribute to the ListsSoap binding element.
        XML
        enableHttpCookieContainer="true"



        The following screenshot shows what the ListSoap binding element looks like after the above
        code is added.




        Figure 4
        Adding the emableHTttpCookieContainer attribute



         Note: The following exception will occur if you do not make this change to the
         ServiceReferences.ClientConfig file.



                                                                                                 Page | 8
        Figure 5
        Expected exception when modifying a service with the enabledHttpCookieContainer defined



         Note: If you change the interface to one or both of the services the application calls and need
         to update the service reference you will need to remove the XML code above from the
         ServiceReferences.ClientConfig file then update the service reference. After the service
         reference update is complete, add the XML code back to the ServiceReferences.ClientConfig
         file.




Task 5 – Retrieving Vehicle Images from SharePoint
In this task, you will use the SharePoint lists.asmx Web service to return vehicle images from the
SharePoint library.
       1. In the WP7.AccAdv.Images project, in the ViewModels folder, open the MainViewModel.cs
          file.
       2. Add the following code under the //TODO: 5.1.1 comment to define the LoadImages
          method:
        C#
        public void LoadImages()
        {
           XElement viewFields = new XElement("ViewFields",
                                     new XElement("FieldRef",
                                        new XAttribute("Name", "Title")),

                                                                                                     Page | 9
                                   new XElement("FieldRef",
                                      new XAttribute("Name", "_Comments")),
                                   new XElement("FieldRef",
                                      new XAttribute("Name", "ThumbnailOnForm")));

   ListsSoapClient lists = new ListsSoapClient();
   lists.CookieContainer = App.CookieJar;
   lists.GetListItemsCompleted += new
EventHandler<GetListItemsCompletedEventArgs>
       (lists_GetListItemsCompleted);
   lists.GetListItemsAsync("Vehicle Images", string.Empty, null, viewFields,
       null, null, null);
}



The above code uses the proxy class Visual Studio 2010 generated for the lists.asmx service to
query the Vehicle Images SharePoint library.
3. Add the following code under the //TODO: 5.1.2 comment to define the
   lists_GetListItemsCompleted method:
C#
void lists_GetListItemsCompleted(object sender, GetListItemsCompletedEventArgs
e)
{
   IEnumerable<XElement> rows = e.Result.Descendants(XName.Get
      ("row", "#RowsetSchema"));
   IEnumerable<SPImage> images = from element in rows
                                 select new SPImage()
                                 {
                                   Title =
(string)element.Attribute("ows_Title"),
                                   Comments = Utils.HtmlToText((string)

element.Attribute("ows__Comments")),
                                   ImgUrl = (string)element.Attribute
                                            ("ows_ThumbnailOnForm")
                                 };

     Deployment.Current.Dispatcher.BeginInvoke(() =>
     {
       if (Images == null)
       {
          Images = new ObservableCollection<SPImage>();
       }
       Images.Clear();
       images.ToList().ForEach(a => Images.Add(a));
     });

                                                                                       Page | 10
        }



        The lists_GetListItemsCompleted method fires when the call to the lists.asmx SharePoint Web
        service completes. The method parses the result set, creates an instance of the SPImage class
        that represents each image in the SharePoint library, and adds the SPImage instances to the
        Images observable collection. The Images observable collection is bound to the MainPage user
        control in the Windows Phone 7 application. The MainPage user control displays the vehicle
        images retrieved from the SharePoint library.
       4. Save MainViewModel.cs.

Task 6 – Binding Image URL to an Image Object Using a Custom Converter
In this task, you will use a custom converter object to retrieve an image from a URL and bind to an Image
object in the MainPage user control.
       1. In the WP7.AccAdv.Images project, in the Utilities folder, open the Utils.cs file.
       2. Add the following code under the //TODO: 5.1.3 comment to define the Convert method:
        C#
        public object Convert(object value, Type targetType, object parameter,
                              CultureInfo culture)
        {
           BitmapImage bmp=new BitmapImage();

             System.Net.HttpWebRequest request =
                     (HttpWebRequest)HttpWebRequest.Create(value.ToString());
             request.CookieContainer = App.CookieJar;
             request.Method = "GET";
             request.BeginGetResponse((s) =>
             {
                HttpWebRequest requestResult = (HttpWebRequest)s.AsyncState;
                HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(s);
                Stream content = response.GetResponseStream();
                System.Windows.Deployment.Current.Dispatcher.BeginInvoke(() =>
                {
                    bmp.SetSource(content);
                });
             }, request);

             return bmp;
        }



        The ImageConverter class’s Convert method is used in the MainPage user control to retrieve
        the image binary using the image url. The Convert method binds the image stream to a
                                                                                               Page | 11
BitmapImage object. Image controls contained in the MainPage user control pass the Image
URL to the converter and bind to the BitmapImage object returned by the Convert method.
3. Save the Utils.cs.
4. In the WP7.AccAdv.Images project, open the MainPage.xaml file.
5. Replace the <!-- TODO: 5.1.4 --> comment with the following namespace markup:
Xaml
xmlns:local="clr-namespace:WP7.AccAdv.Images;assembly=WP7.AccAdv.Images"

  Note: You must replace the TODO comment. The project will not run correctly if the TODO
  comment is not removed.



The namespace markup associates a prefix (local) with a namespace (WP7.AccAdv.Images) from
an assembly. The compiler uses the namespace to identify a resource or class.
6. Add the following markup under the <!-- TODO: 5.1.5 --> comment to define the
   ImageConverter as a resource :
Xaml
<phone:PhoneApplicationPage.Resources>
  <local:ImageConverter x:Key="ImageConverter" />
</phone:PhoneApplicationPage.Resources>



The PhoneApplicationPage.Resouces markup creates a resource library scoped at the page level.
This resource library contains an instance of the ImageConverter object. It is be accessed using
the ImageConverter key.
7. Replace the <!-- TODO: 5.1.6 --> comment with the following markup:
 Xaml
Converter={StaticResource ImageConverter}



Example: <Image Height="470" Width="470" Canvas.Left="0"
                 Source="{Binding SelectedImage.ImgUrl,
                 Converter={StaticResource ImageConverter }}" />



This markup instructs the code to call the ImageConverter class to convert the data bound value.
Image objects cannot use a URL as a source. The ImageConverter object is used to convert the
URL reference to a BitmapImage object which can be used as a Source object.



                                                                                      Page | 12
         Note: You must replace the TODO comment. The project will not run correctly if the TODO
         comment is not removed.



       8. Replace the <!-- TODO: 5.1.7 --> comment with the following markup:
        Xaml
        Converter={StaticResource ImageConverter}



        Example: <Image Stretch="UniformToFill" Source="{Binding ImgUrl,
                         Converter={StaticResource ImageConverter }}"
                         Height="140" Width="140" />



        This markup instructs the code to call the ImageConverter class to convert the data bound value.
        Image objects cannot use a URL as a source. The ImageConverter object is used to convert the
        URL reference to a BitmapImage object which can be used as a Source object.

         Note: You must replace the TODO comment. The project will not run correctly if the TODO
         comment is not removed.



Exercise 3: Testing the Windows Phone 7
Application
In this exercise, you will test the Windows Phone 7 application.
Task 1 – Testing the Application’s View Functionality in Windows Phone 7 Emulator
In this task, you will test the Windows Phone 7 application using the Windows Phone 7 emulator.
       1. In the WP7.AccAdv.Images solution, select Windows Phone 7 Emulator in the deployment
          location dropdown list.
       2. In the WP7.AccAdv.Images solution, press F5.
       3. The Windows Phone application starts in the emulator and displays the images from the
          Vehicle Images SharePoint library.




                                                                                              Page | 13
Figure 6
Application displaying images from a SharePoint list


4. Click on one of the vehicle images in the list to select it.


                                                                  Page | 14
5. The Windows Phone application displays a larger image from the SharePoint library.




Figure 7
Viewing a single image from the SharePoint library



                                                                                    Page | 15
       6. Click the X in located above the image to close the image and return to the list of vehicle
          images.



Summary
In this hands-on lab, you saw how to use the lists.asmx Web service to retrieve images from a
SharePoint Asset library and display them in a Windows Phone 7 application. You also learned how to
use a converter to retrieve images from a URL and convert to a BitmapImage object which can be used
to bind to an Image object in a Windows Phone 7 application.




                                                                                                Page | 16

				
DOCUMENT INFO
Categories:
Tags:
Stats:
views:12
posted:12/2/2011
language:English
pages:16