Hands-On LabIntegrating Images Stored in SharePoint with Windows Phone 7 using Web Services

Lab version: 1.0.0

Last updated: 5/22/2023

Page | 1

CONTENTS

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

EXERCISE 1: CREATING A SHAREPOINT ASSET LIBRARY DATA SOURCE......................................4Task 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.....................................................7Task 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.......................................................13Task 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 1List 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 2Selecting 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 3Vehicle 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 4Adding the emableHTttpCookieContainer attribute

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

Page | 8

Figure 5Expected 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>(); }

Page | 10

Images.Clear(); images.ToList().ForEach(a => Images.Add(a)); });}

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;}

Page | 11

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 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 }}" />

Page | 12

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.

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 6Application displaying images from a SharePoint list

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

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

Figure 7Viewing 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