Developing a Silverlight 3.0 Web Part for SharePoint 2010
-
Upload
sreedhar-konduru -
Category
Documents
-
view
219 -
download
0
Transcript of Developing a Silverlight 3.0 Web Part for SharePoint 2010
-
8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010
1/13
1950287311498 true 0 False
none 0xEEABC39037C
Brow se
Brow se false /w EPDw UBMA9k
THE COMPANY
eveloping a Silverlight 3.0 Web part for SharePoint 2010
s been a while since Ive been able to work with Silverlight . I did quite a bit of work about a year ago and blogged about my
periences (here is one of theposts). With SharePoint 2010 development from Silverlight gets much easier. Not only do we
ve all the Silverlight plumbing automatically in place on the web front end, but there is also a Silverlight web part wrapper
at we can use to to easily point to our .xap file.
ot only is it easier, its also much more powerful. In this article, I will walk through the Silverlight client object model, one of
e three client object models that Microsoft ships for SharePoint 2010.
e goal of this post is to demonstrate how this works by creating a simple Silverlight app that does a multiple-file check out.
is application will be written in Visual Studio 2010 which also has built-in project types for Silverlight.
e start by creating a new C# Silverlight project as shown here.
ter you name the project and click OK, youre prompted to create a web project to host it. Since this will be integrating
ectly with SharePoint, Ill not do this.
http://www.synergyonline.com/abouthttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=26http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=26http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=26http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_2_19A684E9.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=26http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://www.synergyonline.com/about -
8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010
2/13
-
8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010
3/13
e prefix it with SP to avoid some object name conflicts. In the partial class for MainPage, lets create these class-level
riables.
class variables
.ClientContext context;
.Web myWeb;
.List myList;
.ListItemCollection myItems;
st files;
the LayoutRoot_Loaded method, lets initialize our client context. This will provide our entry point and become the object
ough which all calls to SharePoint are made. Heres the code.
ntext = SP.ClientContext.Current;
specifying the Current property, we are telling it to take the current SharePoint context. In other words, the web site in
hich this will be working. Since this will become a web part, we wont know what the Url is so we just have the client object
odel look it up. Its the same idea as SPContext if youve used that before. Next, lets make a reference to the web site via
s line of code.
Web = context.Web;
ou can think of this as acting like theSPWebobject in the server-side object model. And what youll start to see is that the
ent object model mimics many of the same behaviors that youve used in the server object model. Although, itsdefinitely a
bset of the commands, so do not expect a complete duplication.
ext, lets get a handle to a document library. In my demo web site, I have a library called Docs where I have loaded a number
files. Here is how I reference it.
Get handle to document library
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spweb.aspxhttp://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spweb.aspxhttp://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spweb.aspxhttp://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spweb.aspx -
8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010
4/13
List = myWeb.Lists.GetByTitle("Docs");
etty close to the server object model. One difference that you are not referencing the list as a collection. Youll understand
hy in a minute. Before that, let me prepare a query to return all the files in the library. For this (just as you would have done
th the WSS/MOSS object model in the previous version), you can create a CAML query.
Get all files
.CamlQuery query = new SP.CamlQuery();
ery.ViewXml = "";
Items = myList.GetItems(query);
hile this is a very simply CAML query, some can be downright ugly. Ive found that it supports the same query capabilities
ch as ViewFields, Where, OrderBy, etc.
this point, let me make something clear. You you know, the client object model runs on the client, away from the server.
be efficient in its call backs to the server, the design is to batch operations to minimize the number of round trips. In this
se, none of the code Ive shown you so far has gone back to the server. This is the reason why I cannot reference the Docs
rary by doing something like myWeb.Lists[Docs] which would be how youd do it in the server object model.
batch these operations up, you can use the Load method on your client context object.
batch up work to do
ntext.Load(myList);
ntext.Load(myItems);
atch up the list object since I requested a handle to it, and I batch up myItems since I am issuing query on the list. However,
l at this point, a call hasnt been made. Thats done with the ExecuteQueryAsync method as you can see next.
execute
ntext.ExecuteQueryAsync(getRequestSucceeded, getRequestFailed);
this point, the call to the server is made and the batched requests are processed. If all goes well, the
-
8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010
5/13
tRequestSucceeded callback delegate is run. If an error occurs, the other one is called. In case youre wondering why I
dnt use a synchronous (or blocking) call, its because Silverlight requires all calls to be made asynchronously. This is
tually done on a separate thread to prevent the UI from ever locking up. Yes, its more complex, but results in a better user
perience. And, isnt that what Silverlight is all about? So, lets first look at the getRequestSucceeded method. Here is the
de:
ivate void getRequestSucceeded(object sender, SP.ClientRequestSucceededEventArgs e)
files = new List();
Dispatcher.BeginInvoke(() =>
{
//iterate through each file and add file to our list of files
foreach (SP.ListItem item in myItems)
{
files.Add (new File() {Filepath = item["FileRef"].ToString(),
Filename = item["FileLeafRef"].ToString()});
}
//bind to listbox
lstFiles.DisplayMemberPath = "Filename";
lstFiles.ItemsSource = files;
});
t me first clarify what this Dispatcher.BeginInvoke is. As I just mentioned, we are now running on a separate thread. Since
e want to process the results and bind them to our listbox, we must do this on the UI thread. The rule to remember: anytime
u want to change the UI, you must do it on the UI thread. Ok, so the syntax that were using simply goes to the dispatch er
ject (the thread that dispatched the currently-running thread), and runs the block of code as an anonymous function.
side the anonymous function, the code here should be pretty straightforward. We iterate through each item that came back
ing the foreach statement. We add these into a files object (which is a generic list). The FileRef column is the filepath to the
e relative from the web site (e.g. Docs/file1.doc). FileLeafRef is just the filename. From this point, we simply bind this to the
-
8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010
6/13
Files, my listbox object.
efore I go too much further, let me give you the File class that we use in our generic list. Just add this as a new class to your
de behind page.
/
/ Class to hold each file instance
/
blic class File
public string Filepath { get; set; }
public string Filename { get; set; }
ext, here is the code that is run if an error occurs.
ivate void checkOutRequestFailed(object sender, SP.ClientRequestFailedEventArgs e)
Dispatcher.BeginInvoke(() =>
{
MessageBox.Show("Error occured: " + e.Message);
});
ats enough code to start testing. We still havent implemented the check out, but lets first see if our list of files is populated
rrectly.
you may already know, the compiled output for a Silverlight application is a .xap file, and this is what SharePoint needs
hen using the built-in Silverlight web part. So, somehow, we need to get this .xap file referenced in SharePoint. There are
s of options such as manually uploading into a document library, placing it into the 14 hive. However, this is a perfect
ample of where asandbox solutionwould work great. What Ill do is deploy this as a module-type feature and locate it within
http://msdn.microsoft.com/en-us/magazine/ee335711.aspxhttp://msdn.microsoft.com/en-us/magazine/ee335711.aspxhttp://msdn.microsoft.com/en-us/magazine/ee335711.aspxhttp://msdn.microsoft.com/en-us/magazine/ee335711.aspx -
8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010
7/13
e root web of the web site where this feature is activated. Heres how you can do this.
d a new Empty SharePoint project to your current Visual Studio solution. When prompted, make it a sandbox solution which
ould be the default. For my demo, Ill also set the debug Url to the web site where my Docs library exists as you can see
re.
ck Finish and then a new item in this new project. Make it a module type as shown here.
ts do a little bit of clean up before we add our .xap file as a new file in this module. Start by removing the Sample.txt file.
is also automatically removes the entry from the elements manifest file (Elements.xml) for this Feature. This feature
e management is part of the new SharePoint tooling in Visual Studio 2010.
hat we now need to do is reference the .xap file from the Silverlight project as a file in this module. You can do this
anually, but theres a great automated way to do this. In the Visual Studio Solution Explorer, click the SilverlightModule node
hich was the name of the module I added). In the properties window, click the ellipsis button for the Project Output
eferences. In the dialog, add a new member and set the Project Name to point to the Silverlight project. Set the Deployment
pe to be Element File. This is shown here.
http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_12_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_10_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_12_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_10_4793D7A1.png -
8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010
8/13
ck Ok to save. The final step is to simply add the entry into the elements manifest file (Elements.xml). Here is the
ntax showing the new line Ive added.
ere is what this means during deployment: the SLApp2.xap file (the filename of my compiled Silverlight application) will be
cated within the SilverlightModule folder within the WSP package. The Url is where in the web site this will be placed when
s feature is activated. Upon activation, SharePoint will copy the .xap file into the root folder of the web site. I could have
so stored this into a document library as a ghostable reference as well.
this point, I am going to do a full build of my projects. After this, I will select deploy as shown here.
is should package everything up and deploy it as a sandbox solution into SharePoint. It will then activate the feature in my
amsite web site (http://sp2010a/teamsite). At this point, I just need to go into a web page within this site and add the built-in
verlight web part. In case you havent seen this before, here is how it looks when adding.
http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_18_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_16_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_14_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_18_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_16_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_14_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_18_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_16_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_14_4793D7A1.png -
8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010
9/13
ter you add it, it will prompt you for the Url to your .xap file. I will enter in /teamsite/SLApp2.xap which is the path relative
m the site collection to the Silverlight application. When all this is done, here is how it looks.
etty cool so far. Okay, actually it renders this way below with a messed up title. This, I assume is just a beta 2 bug. To
solve it, I just set the chrome type for the web part to None.
ts now go back to the Silverlight app and implement our final piece of logic to do the check out. Go to the design page
http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_24_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_22_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_20_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_24_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_22_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_20_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_24_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_22_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_20_4793D7A1.png -
8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010
10/13
ainPage.xaml) and double click on the Check Out button to create an event handler. Here is the code I am using inside the
tton click event.
iterate through each file selected
reach (File item in lstFiles.SelectedItems)
//batch up file for checkout
SP.File f = myWeb.GetFileByServerRelativeUrl(item.Filepath);
f.CheckOut();
execute
ntext.ExecuteQueryAsync(checkOutRequestSucceeded, checkOutRequestFailed);
is should be easy to follow and very much like the server object model. The only difference is that I need to call the
ecuteQueryAsync again to actually call back to do the work. The final items are the two callback methods when check out
mpletes. Here they are.
ivate void checkOutRequestSucceeded(object sender, SP.ClientRequestSucceededEventArgs e)
Dispatcher.BeginInvoke(() =>
{
MessageBox.Show("Files checked out");
});
ivate void checkOutRequestFailed(object sender, SP.ClientRequestFailedEventArgs e)
Dispatcher.BeginInvoke(() =>
{
MessageBox.Show("Error occured: " + e.Message);
});
-
8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010
11/13
me to recompile and redeploy everything. When re-deploying new versions of Silverlight apps, you need to be careful that
e browser does not cache your old version of the application. Ive gotten in the habit of always dumping my browser cache,
d I would suggest you do the same. When thats done, refresh the page and test it out.
we select the Docs library, you can see that these two documents are indeed checked out.
you can see, performing functions like this are much easier than calling into or creating your own custom web service. You
ght be wondering what exactly the client object model is doing to perform this task. Well, actually, it is calling a web service.
this case, the client.svc WCF web service that is new in SharePoint 2010. For this example, it is posting a package of XML
the http://sp2010a/teamsite/_vti_bin/client.svc/ProcessQuery function. Here is the XML payload that it is sending.
Request AddExpandoFieldTypeSuffix="true" SchemaVersion="14.0.0.0"
braryVersion="14.0.4536.1000" ApplicationName="Silverlight Library"
http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_30_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_26_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_30_4793D7A1.pnghttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Attachments/118/image_26_4793D7A1.png -
8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010
12/13
mlns="http://schemas.microsoft.com/sharepoint/clientquery/2009">
/teamsite/Docs/Coal.docx
/teamsite/Docs/ElectricPower.docx
Request>
is example walked you through the client object for for Silverlight, but remember that there are two other client object
odels. One is for just regular .NET applications (Windows Forms, WPF, console, etc.) and another one is for JavaScript (i.e.
eb pages). The one for .NET is very similar to the one youve seen here since both are based on incarnations of the .NET
amework. The JavaScript one is conceptually similar, but its syntax is a bit different.
-
8/13/2019 Developing a Silverlight 3.0 Web Part for SharePoint 2010
13/13
th that, Ill bring this article to a close. Hopefully you learned a thing or two about the client object model. I also hope youre
ger to go out and give it a test drive in your own applications. Have fun!
sted at 12/18/2009 8:51 AM bySystem Account | Category:Development|Permalink|Email this Post|Comments (0)
ommentsere are no comments yet for this post.
Items on this list require content approval. Your submission willnot appear in public views until approved by someone withproper rights.More information on content approval.
e*
y*
ted By*
/_layouts/images
e this page to add attachments to an item.
me
CLIENT LOGIN .CHANGE LOCALE . LIVE MEETING LOGIN .BLOG .PRIVACY POLICY
http://www.synergyonline.com/blog/blog-moss/_layouts/userdisp.aspx?ID=1073741823http://www.synergyonline.com/blog/blog-moss/_layouts/userdisp.aspx?ID=1073741823http://www.synergyonline.com/blog/blog-moss/Lists/Categories/Category.aspx?Name=Developmenthttp://www.synergyonline.com/blog/blog-moss/Lists/Categories/Category.aspx?Name=Developmenthttp://www.synergyonline.com/blog/blog-moss/Lists/Categories/Category.aspx?Name=Developmenthttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://navigatemailtolink%28%27mailto/?body=http://www.synergyonline.com/blog/blog-moss%2FLists%2FPosts%2FPost.aspx?ID%3D118%27)http://navigatemailtolink%28%27mailto/?body=http://www.synergyonline.com/blog/blog-moss%2FLists%2FPosts%2FPost.aspx?ID%3D118%27)http://navigatemailtolink%28%27mailto/?body=http://www.synergyonline.com/blog/blog-moss%2FLists%2FPosts%2FPost.aspx?ID%3D118%27)http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118#Commentshttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118#Commentshttp://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118#Commentshttp://helpwindowkey%28%22contentapproval%22%29/http://helpwindowkey%28%22contentapproval%22%29/http://helpwindowkey%28%22contentapproval%22%29/http://www.synergyonline.com/Pages/login.aspxhttp://www.synergyonline.com/Pages/locale.aspxhttps://www302.livemeeting.com/cc/synergy/joinhttp://www.synergyonline.com/Blog/Pages/Welcome.aspxhttp://www.synergyonline.com/About/Pages/privacy.aspxhttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/locations.aspxhttp://www.synergyonline.com/hshttp://www.synergyonline.com/tnghttp://www.synergyonline.com/tsghttp://www.synergyonline.com/ishttp://www.synergyonline.com/bshttp://www.synergyonline.com/About/Pages/privacy.aspxhttp://www.synergyonline.com/Blog/Pages/Welcome.aspxhttps://www302.livemeeting.com/cc/synergy/joinhttp://www.synergyonline.com/Pages/locale.aspxhttp://www.synergyonline.com/Pages/login.aspxhttp://helpwindowkey%28%22contentapproval%22%29/http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118#Commentshttp://navigatemailtolink%28%27mailto/?body=http://www.synergyonline.com/blog/blog-moss%2FLists%2FPosts%2FPost.aspx?ID%3D118%27)http://www.synergyonline.com/blog/blog-moss/Lists/Posts/Post.aspx?ID=118http://www.synergyonline.com/blog/blog-moss/Lists/Categories/Category.aspx?Name=Developmenthttp://www.synergyonline.com/blog/blog-moss/_layouts/userdisp.aspx?ID=1073741823