Connecting Silverlight controls to SharePoint data

Report as inappropriate Your report has been received

Shared by: linzhengnd

Tags

Stats

views:: 1
posted:: 11/14/2011
language:: English
pages:: 10

Public Domain

Document Sample

Hands-On Lab
Connecting Silverlight controls to SharePoint
data
Lab version: 1.0.0
Last updated: 11/14/2011
CONTENTS

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

EXERCISE 1: EXPLORING THE STARTER SOLUTION .......................................................................... 5
Task 1 – Preparating.............................................................................................................................. 5
Task 2 – Reviewing the XAML ............................................................................................................... 6
Exercise 1 verification ........................................................................................................................... 8

EXERCISE 2: PERFORMING THE BINDING WITH SILVERLIGHT CLIENT OM CODE .......................... 8
Task 1 – Adding The Client OM Code .................................................................................................... 8
Exercise 2 verification ......................................................................................................................... 10

SUMMARY .................................................................................................................................................. 10
Overview
Silverlight 4 contains a wealth of rich user interface controls that can quickly be added to an application
to deliver a rich and robust presentation layer for users of the application. This lab will introduce
additional functionality by showing how to bind SharePoint data directly to many of those same
Silverlight controls, requiring a minimal amount of custom code.

Objectives
This lab will demonstrate how to use bind SharePoint data to Silverlight controls with very little code.
This allows you to take advantage of the rich UI of Silverlight without requiring a lot of work.

System Requirements
You must have the following items to complete this lab:
 2010 Information Worker Demonstration and Evaluation Virtual Machine
 Microsoft Visual Studio 2010
 Silverlight 4

 Silverlight web part extension for Visual Studio
 Silverlight 4 Toolkit

Setup
The setup and configuration for this demo involves the following tasks:
 Task 1 - Start the Microsoft 2010 Information Worker Demonstration and Evaluation Virtual
Machine (RTM).

 Task 2 - Make sure that Silverlight version 4 is installed on the machine
 Task 3 - Install the Silverlight Web parts Extensions into Visual Studio 2010
 Task 4 - Make sure that the Silverlight 4 Tools for Visual Studio are installed on the machine
 Task 5 - Configure the environment for this demo
Task 1 – Starting The Microsoft 2010 Information Worker Demonstration And Evaluation Virtual
Machine (RTM)
1. Follow the instructions in the Virtual Machine Setup Guide.docx file you will find at the
following location:
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=751fa0d1-356c-4002-9c60-
d539896c66ce&displaylang=en

Task 2 – Making Sure That Silverlight Version 4 Is Installed On The Machine
1. Download Silverlight 4 from here: http://www.silverlight.net and install

Task 3 – Installing The Silverlight Web Parts Extensions Into Visual Studio 2010
1. Download the Silverlight and SharePoint VSIX extensions from here:
http://code.msdn.microsoft.com/vsixforsp/Release/ProjectReleases.aspx?ReleaseId=4177
2. Extract the files to your hard drive
3. Close Visual Studio if it is open
4. Double-click on the VSIX.SharePoint.Silverlight.vsix file to run the extension installer

Task 4 – Making Sure That The Silverlight 4 Tools For Visual Studio Are Installed On The Machine
1. Download from here:
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=b3deb194-ca86-4fb6-
a716-b67c2604a139 and install

Task 5 – Configuring The Environment For This Demo
1. Run the SetupLab.cmd file from the \Labs\ConnectingSLControlsSPData\Source\Begin
folder to establish the SharePoint environment necessary for this lab.

Exercises
This Hands-On Lab encompasses the following exercises:
1. Exploring the starter solution
2. Performing the Binding with Silverlight Client OM code

Estimated time to complete this lab: 20 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\ConnectingSLControlsSPData\Source\Begin\Databinding.sln: This
solution contains the initial starting point for all of the exercises in this lab.

Note: Inside each exercise folder, you will find an end folder containing a solution with the
completed lab exercise.

Exercise 1: Exploring the Starter Solution
This exercise reviews the XAML that is included with the starter solution to help understand the code
added in Exercise 2 . The starter solution is set up to contain the basic project structure required for
this exercise as well as the XAML markup used to define our UI. For this demo, the UI consists of a
Silverlight datagrid control with three columns:
 Last Name
 First Name
 Company

The code added in Exercise 2 will bind the grid to the Contacts list from a SharePoint site.
Task 1 – Preparating
In this task, you will open the starter solution in VS 2010 and explore the environment to understand
what has been done to get things set up for the rest of the exercises.

1. Using Visual Studio 2010, open the starter solution named Databinding from the
<Install>\Labs\ConnectingSLControlsSPData\source\begin\ folder. Solution Explorer
should look like this:
Figure 1
Databinding solution

Notice that there are two projects in this solution:
a. Databinding – this is the actual project that will be deployed to SharePoint. It is an
Empty SharePoint Project with a new project item added to it - the
SilverlightWebPart1 item just above key.snk in the picture.
b. SilverlightApplication1 – this is the Silverlight project in which we will build our
Silverlight application. The output of this project is packaged with the output of the
SilverlightWebPart1 project and deployed to SharePoint.
2. Double-click on the Properties node in Solution Explorer underneath the Databinding project
and then open the SharePoint tab. Notice that the checkbox next to Enable Silverlight
debugging is selected. This is necessary if we need to step through our code later on. Close the
properties pane.
3. [Optional] If desired, explore the different files in both projects. Some of these files and/or the
content in the files are used in later Exercises.

Task 2 – Reviewing the XAML
In this task you will review the XAML markup in the starter solution to see how the databinding code in
Exercise 2 operates.

1. From Solution Explorer, in the SilverlightApplication1 project, double-click the file
MainPage.xaml to open it and display the Silverlight design canvas.
2. Position your cursor in the XAML markup in the bottom of the display – between the <Grid> and
</Grid> lines.
3. Add the following XAML markup:
XAML
<sdk:DataGrid AutoGenerateColumns="False" Height="230"
HorizontalAlignment="Left" Margin="12,14,0,0" Name="dataGrid1"
VerticalAlignment="Top" Width="368" >

<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True"
CanUserSort="True" Width="Auto"
Binding="{Binding Path=FieldValues[Title]}" Header="Last Name"/>
<sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True"
CanUserSort="True" Width="Auto"
Binding="{Binding Path=FieldValues[FirstName]}"
Header="First Name"/>
<sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True"
CanUserSort="True" Width="Auto"
Binding="{Binding Path=FieldValues[Company]}" Header="Company"/>
</sdk:DataGrid.Columns>

</sdk:DataGrid>

This markup defines a Silverlight datagrid with the three columns mentioned previously. Each
column contains a Binding attribute that ties it to the appropriate column in the FieldValues
collection – the data coming from the datasource bound to the control. (Remember, we’ll
perform the binding in Exercise 2.) This exercise is taking advantage of Silverlight 4’s ability to
bind directly to collection initializers.
4. To finish exploring and see the results of what has been set up for you, hit the F5 key to deploy
and activate the starter solution. After Visual Studio launches the browser, navigate to
http://intranet.contoso.com/sites/Databinding/SitePages/SilverlightApplication1WebPartPag
e.aspx. Your page should look like this:

Figure 2
SilverlightApplication1
The grid control is shown on the page, but it is not yet functional. You will add the functionality
in Exercise 2.

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 can compare the anticipated output shown in step 4 with the actual output
shown on your screen. If the two match, you have completed the exercise successfully.

Exercise 2: Performing the Binding with
Silverlight Client OM code
This exercise builds on top of the previous Exercise and adds code to the starter solution to show how
you can use the Silverlight client object model to retrieve a set of data and bind that data directly to
Silverlight controls. The benefit of databinding is that it does not require much code. In this lab, it takes
only about 10 lines of actual code, and while this example is pretty simplistic, a more complex example
would not take much (or possibly any) more code.

Task 1 – Adding The Client OM Code
In this task, you will add more Silverlight client object model code to the starter solution. This code will
retrieve a collection of list items from SharePoint and bind it to the grid from Exercise 1 to present the
data.

1. If the browser is still open from Exercise 1, close it and return to Visual Studio.
2. From Solution Explorer, in the SilverlightApplication1 project, double-click the file
MainPage.xaml.cs to open it and display the code behind file for our Silverlight application.
3. Position your cursor on line 39 and add the following code:
C#
void LoadList()
{
spContext = ClientContext.Current;
if (spContext != null)
{
List contactsList = spContext.Web.Lists.GetByTitle("Contacts");
contactItems = contactsList.GetItems(CamlQuery.CreateAllItemsQuery());
spContext.Load(contactItems);
spContext.ExecuteQueryAsync(ContactsLoaded, OnFailure);
}
}

This code retrieves the Contacts list from the current SharePoint site, and then using the
GetItems method in conjunction with the CamlQuery.CreateAllObjectsQuery method,
defines a collection consisting of all items in the list. However, note that due to the
asynchronous nature of the Silverlight client object model, we don’t actually start talking to the
server until the last line in this method – with the ExecuteQueryAsync call. Until that point,
all of our code is added to a batch that is committed together. This means that our objects are
not actually populated until we’ve called up to the server. If we were to try to access properties
of contactItems, for example, our code would fail. The ExecuteQueyAsync method
contains references to two callback methods – one for when our batch succeeds and one for
when it fails. As the name implies, the ExecuteQueryAsync method executes asynchronously,
meaning it doesn’t lock the UI while waiting for the response from the server – the user is free to
continue working.
4. Position your cursor inside the ContactsLoaded method and add the following code:
C#
Dispatcher.BeginInvoke(() =>
{
dataGrid1.ItemsSource = contactItems;
});

The ContactsLoaded method will be called if our call to the server succeeds. For this exercise, it
makes use of the Dispatcher.BeginInvoke method to enable our background code to
interact with the UI, and contains the one line of code necessary to bind the datagrid from
Exercise 1 to the collection built programmatically in this Exercise. The ability to bind directly to
a collection in this way requires Silverlight 4.

5. This completes the coding, so hit F5 to test out the solution. After Visual Studio launches the
browser, navigate to
http://intranet.contoso.com/sites/Databinding/SitePages/SilverlightApplication1WebPart
Page.aspx.
6. With our databinding code from Exercise 2 in place, the page should now look like this:
Figure 3
Databinding page

The four sample items from the Contacts list are now displayed within the grid.

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

Verification 1
In this verification, you can compare the anticipated output shown in step 6 with the actual output
shown on your screen. If the two match, you have completed the exercise successfully.

Summary
In this lab you have seen how to use the Silverlight Client OM to retrieve a collection of items from
SharePoint which can then be directly bound to any of the Silverlight controls which support
databinding.