Exercise 4: Create a Web Part to Display the MarketPlace Data

Task 1 – Opening and Review the Starter Solution

In this task you will open the Web Part starter solution and review the existing code

1. Using Visual Studio, open the starter solution named TheftStatisticsWebPart from <Install>\Labs\ACDM\source\begin folder.

   Figure 49

   Solution Explorer

2. Review the projects and code in the solution. The TheftStatisticsWebPart solution was created using the Silverlight Web Part project template. Two projects are created, one SharePoint project and a Silverlight Application project. The lab will focus on the Silverlight Application. All of the files needed for the application exist in the starter solution.
3. Click on the plus sign associated with the ViewModels folder to expand the folder contents.
4. Review the code in CrimeStat class. This class is used to store individual results from a search.
5. Right-click on CrimeStatsViewModel.cs and select Open. The view model included the necessary using statements, service reference to the Bing Geocode service and the asynchronous code to geocode our results.

Task 2 – Adding the Silverlight Client Side Object Model References

In this task, you will add the needed references to the two required Silverlight Client Side Object Model assemblies.

1. In Solution Explorer, right-click the References folder located in the TheftStatisticsApplication project.
2. Select Add Reference… to display the Add Reference dialog box.
3. Select the Browse tab.
4. Navigate to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin.

5. Select both Silverlight assemblies.

   Figure 50

   Add Reference dialog box

6. Click OK to add the assembly references to the project

Task 3 – Completing the Existing View Model

In this task, you will complete the existing view model. The CrimeStatsViewModel class will asynchronously query the external list, geocode the results and add the results to an ObservableCollection for data binding.

1. Right-click CrimeStatsViewModel.cs in the Solution Explorer pane and select Open.

2. Add a public collection of TheftStatistic objects used for data binding. (Snippet 7.1.12)

   Figure 51

   Add public TheftStatistic collection

3. Add a public TheftStatisitc property named CurrentStatistic to contain the currently selected TheftStatistic. This property will raise the OnPropertyChange event. (Snippet 7.1.13)

   Figure 52

   Add public TheftStatisitc property

4. Add a public method to find the current TheftStatistic from the collection and set the CurrentStatistic property. (Snippet 7.1.14)

   Figure 53

   Create SetCurrentStatistic method

5. Add a private collection of TheftStatistic objects for temporary storage of the results returned from the Client Side Object Model query. This collection will not be data bound to the user interface. (Snippet 7.1.15)

   Figure 54

   Add private TheftStatistic collection

6. Add a variable named bcslist of type IEnumerable< ListItem>. (Snippet 7.1.16)

   Figure 55

   Add bcsList variable

7. Create a method named GetTheftStats. This method clears the databound collection and sets up the successful callback reference to process the results. The GetTheftStats method uses Client Side Object Mode and a CAML query to retrieve only year values of 2008 from the external list. (Snippet 7.1.17)

   Figure 56

   Create GetTheftStats method

8. Create the successful callback method to process the query results. The successful callback creates a TheftStatistic object for each result and adds it to the temporary storage collection. Once all the TheftStatistic objects have been added to the collection, each object is passed to the Geocode method. (Snippet 7.1.18)

   Figure 57

   Create QueryCallback method

9. Review the existing Geocode method. This method dispatches the calls to the UI thread to access the Bing map control in the UI to retrieve the map credentials. It then creates an asynchronous call to the Geocode service passing in the TheftStatistic’s State, City and Id values. The Id value is required in the callback method for retrieval of the correct object for update.

10. Review and modify the existing geocodeService_GeocodeCompleted method. This method is called once per item geocoded. It retrieves the id of the object that was associated with the City and State values, selects the item from the temporary storage collection and updates the Location property. The selected item is added to the data bound TheftStatistics collection Replace the //Add code here comment located in the existing geocodeService_GeocodeCompleted with the lines displayed below (Snippet 7.1.19)

    Figure 58

    Review and modify geocodeService_GeocodeCompleted method

11. Add a private class variable named _view of type MainPage. This will be our connection back to the MainPage (view). (Snippet 7.1.20)

12. Create the CrimeStatsViewModel constructor. The constructor requires a parameter for the view reference. The constructor will initialize our collections and call GetTheftStats to populate our databound collection. (Snippet 7.1.21)

    Figure 59

    Create CrimeStatsViewModel constructor

13. Save and close CrimeStatsViewModel.cs.

Task 4 – Replacing and Review the MainPage Xaml Markup

In this task, you will replace and review the MainPage.xaml markup with markup from the SupportingFiles folder.

1. Right-click MainPage.xaml in the Solution Explorer pane and select Open.
2. Open the SupportingFiles folder located in the starter solution and open MainPage.xaml.txt file.
3. Copy the text in the MainPage.xaml.txt files and pasted it over the existing MainPage.xaml markup.
4. Locate the Map control and enter your specific Bing map key as the CredentialsProvider attribute value.
5. Review the MainPage.xaml markup. Notice that the markup includes a Map control named CrimeMap. The Map control contains a MapItemsControl which references the static resource named Pushpin. The DataTemplate is bound to the view model’s TheftStatistics collection. The PushPin control defines the MouseEnter and MouseLeave event handlers that are defined in the code beside.
6. The Map control also defines a MapLayer control that is used to display the “popup” that is bound to the view model’s CurrentStatistic property.
7. Save and close MainPage.xaml.

Task 5 – Completing the Existing MainPage.Xaml.cs Code Beside

In this task, you will complete the existing MainPage.xaml.cs code beside page. The code will manage the control’s events and set the datacontext.

1. In Solution Explorer, right-click MainPage.xaml and select View Code.
2. Delete the commented code.

3. Add the following using statement to MainPage.xaml.cs (Snippet 7.1.22) :

   Figure 60

   Add using statement

4. Add a variable used to reference the view model. (Snippet 7.1.23)

   Figure 61

   Add viewModel Variable

5. Modify the existing constructor to initialize the viewModel variable and set the DataContext to the view model reference. (Snippet 7.1.24)

   Figure 62

   Modify MainPage method

6. Add the PushPin’s MouseEnter handler. This method retrieves the PushPin’s tag property that contains the associated TheftStatistic’s id and call the view model’s SetCurrentStatistic property. The rest of the method sets the layer’s location and visibility. (Snippet 7.1.25)

   Figure 63

   Add the PushPin’s MouseEnter handler

7. Add the PushPin’s MouseLeave handler. This method will hide the map layer. (Snippet 7.1.26)

   Figure 64

   Add the PushPin’s MouseLeave handler

Exercise 4 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 build the Silverlight Web Part and Silverlight application. A successful build will verify the exercise.

1. In the Solution Explorer, right-click the TheftStatisticsWebPart solution.
2. Click Build Solution.