SPOC 2010: Silverlight and SharePoint 2010: Better Together

Howdy,

This is a live blog post from the current talk Jan Tielens is giving. I’ll give  you the quick topics.

There exists a basic SL Web Part, that can display any SL application delivered as .xap (and accessible via a URL, of course).

Most important property of it: You can set a .XAP file’s URL.

How it is done:

1. Upload a .XAP to a document library(Shared Documents)
2. Copy the URL of the .XAP
3. Insert the SL Web Part from “Media and Content” area
4. Paste the URL into the Web Part
5. Set the Web Part’s width to variable (not fixed), otherwise it’ll issuean error

How to Deploy

1. Virtual File System

• Add module item (Add –> New Item)
• Past the .XAP into the module (Elements.xml will now contain a ref to the .XAP)

2. Physical File System

In the 14\TEMPLATE\LAYOUTS folder

• 15\TEMPLATE\LAYOUTS\ClientBin (default)
• Advantage: Becomes available right away!

3. Solutions:

• Add a mapped folder (e.g. above mentioned LAYOUTS) to the solutions
• Copy .xap into it

Important: For sandboxed solutions, only deployment to VFS is possible.

Client Object Models

Definition: Simple API to add, Retrieve, Update and Manage SP data

DLLs are location in the 14\TEMPLATE\LAYOUTS\ClientBin folder

How to Build Silverlight Web Parts

Create a new project (SL enabled), and put the following code snippets into a User Control.

Add a reference to the Microsoft.SharePoint.Silverlight*.dll files.

Data Binding is done like this in SL:

   1: <DataTemplate>

   2:     <TextBlock Text="{Binding Title}"></TextBox>

   3: </DataTemplate>

Snippet 1: Basic data binding in SL

   1: using (ClientContext ctx = new ClientContext("http://urlToSharePoint"))

   2: {

   3:     items = ctx.Web.Lists.GetByTitle("Videos");

   4:     ctx.Load(items);

   5:     ctx.ExecuteQueryAsync(Success, Fail);

   6: }

Snippet 2: Using the Client Object Model API. Success and Fail are callback methods you have to define. items is a ListItemCollection you’ll have to define in the user control as  a member variable.

As we saw yesterday at an in-depth look of the Client Object, you can also retrieve

Next, marshall the thread from the UI back (in Success/Fail)

   1: this.Dispatcher.BeginInvoke(() =>

   2: {

   3:     //Here we can work with the list items

   4:     foreach(ListItem item in items)

   5:     {

   6:         //Do sth, e.g. add new items

   7:     }

   8: }

Snippet 3: dispatcher invocation

Jan goes one step further and displays the playing of videos by putting a <MediaElement> into the XAML.

Customizable SL Web Parts

The advantage over the Out-of-the-Box web part is that you can add customization value to it:

E.g. adding own properties

BTW: Parameters are passed to SL web parts using the initParams

   1: <param name=’initParams’ value=’docLib{0}’/>

Snippet 4: Replace {0} with you custom property name, or make it a String.Format!

These can be accessed in Application_Startup method of theSL App like this:

   1: e.initParams("docLib")

Snippet 5: Accessing the initParams

You can also run your SL app outside the browser. You can do this by going to your project’s SL tab and setting the “Run out of the browser” checkbox. This enables your webpart to be downloadable to the client and be executable as a client app!

Keep going, Jan!

Cheers,

Martin