From the July 14th, 2010 Boston Area SharePoint Users Group meeting, "Creating Great Applications in SharePoint 2010 with Silverlight", Presented by Bob German of Microsoft.
SharePoint and Silverlight make an unbeatable combination for building great web applications. In this session, you will learn how to develop these solutions more easily than ever with Visual Studio 2010 and SharePoint's new client object model and REST services. We'll begin with an empty Visual Studio project and show how to get started, and then move on to topics such as how to deal with large datasets, out-of-browser support, building mash-ups and more.
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Building Apps with Silverlight and SharePoint
1. Building Applications with Microsoft Silverlight andMicrosoft SharePointServer 2010 Bob German Technology Architect Microsoft Technology Center | Boston
2. Session Agenda Getting Started Brief background Building a solution “from scratch” with Visual Studio 2010 SharePoint Data in Silverlight Passing data on the web page Silverlight Client Object Model Open Data Protocol (REST) access to SharePointusing WCF Data Services More topics and solution “nuggets” Cross-domain access Web Part Connections Search, maps, webcams and more!
3. SharePoint is… An ASP.NET application using SQL Server HTTP/HTTPS web interface XML Web services WebDAV (Office client integration) Web Front End SharePoint ASP.NET SQL Server IIS
4. Silverlight is… A browser plug-in (mostly): Your app runs in a sandbox XAML declarative markup Contains subset of .NET runtime Cross-browser/cross-platform Can interact with the network and web browser Web Server User Code Browser Controls Managed Interop Prop sys Deep zoom CLR Layout Text Media Gfx Image
5. Why Build a Silverlight UI? Easier to build and test Common runtime fewer browser compatibility headaches Familiar .net semantics Separate design from coding Common development and debugging platform (Visual Studio) More powerful Animations, media, data binding, etc. Client Integration HTML Bridge Out of browser File System Multi-touch
6. Silverlight Development Subset of Windows Presentation Foundation XAML(eXtensible Application Markup Language) Declarative serialization of .net objects Separates visual UI from application logic Expression Blend is a rich design tool for XAML C# equivalent xaml border.CornerRadius = new CornerRadius(2);LinearGradientBrushlgb = new LinearGradientBrush(); lgb.StartPoint = new Point(0.5, 0);lgb.EndPoint = new Point(0.5, 1); GradientStopgs = new GradientStop(); gs.Color= Color.FromArgb(0,255,255,255); gs.Offset= 0; lgb.GradientStops.Add(gs); gs= new GradientStop(); gs.Color= Color.FromArgb(0, 209, 209, 209); gs.Offset= 1; lgb.GradientStops.Add(gs); lgb.Background = lgb; <Border CornerRadius="2"> <Border.Background> <LinearGradientBrushStartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="#FFFFFF" Offset="0"/> <GradientStop Color="#D1D1D1" Offset="1"/> </LinearGradient> </Border.Background> </Border>
7. Coding in Silverlight Subset of .net types Missing: XmlDocument, ADO.NET Data, ArrayList Silverlight projects can only reference Silverlight assemblies Web-style Networking All calls must be asynchronous Rules of the web apply: generally, you can only call back to web services the same domain Interact with UI only on the UI Thread(use Dispatcher)
8. Sandboxed Solutions SharePoint Solution runs Partly trusted Same .wsp file – easily selected in Visual Studio 2010 project settings Installed at the Site Collection level Deployed as content in content DB Ideal in hosting situations Declarative features light up Code runs in a separate process Exposes a subset ofMicrosoft.SharePoint Code Access Security policy limitsruntime access Easy to Manage Site Collection Solution Gallery Central Administration for managing andmonitoring solutions, resource quotas Two Sandboxes arebetter than one! .xap Silverlight .wsp SharePoint
9. Development Environment Two targets, one tool: Visual Studio 2010! Visual Studio setup: One Visual Studio solution per WSP: A project per Silverlight application A project for SharePoint solution Use Output References to copy .xap filesto a Module for deployment “Enable Silverlight Debugging” checkbox(on SharePoint tab of startupproject property page)
10. Hosting SilverlightIt’s Just an <object> Tag! <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source“ value="http://server/ClientBin/HelloWorld.xap"/> <param name="onerror" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value=“3.0.0.0" /> <param name="autoUpgrade" value="true" /> <param name=“initparams” value=“Param1=Value1” /> <!– HTML to render if Silverlight not installed --> </object>
12. SharePoint Data Access from SilverlightMany options Client Object Model WCF Data Services(REST access to lists – formerly “ADO.NET Data Services”) Call SharePoint webservices API Pass data on the HTML page Call a custom web service SharePoint Server SilverlightPlug-in
13. Get Request (page) Get Response (page) Load Get Request (data) Typical Service Interaction User Browses Web Browser SharePoint Server SilverlightPlug-in Do we really need another round trip to the server? Get Response (data)
14. User Browses Get Request (page) Get Response (page,data) Load (data ref) Read (data) Web Browser SharePoint Server SilverlightPlug-in Piggybacking on the Page(more efficient for initial data read)
15. Silverlight HTML Bridge Access the HTML DOM from Silverlight Call JavaScript from Silverlight Silverlight code from Javascript Call Javascript event handlers from Silverlight Call Silverlight event handlers from Javascript Pass Silverlight types to (and return them from) Javascript functions and objects
16. Picture View Web Part Web Page Web Part < object> tag with hidden field name Image Library JSON with picture data (hidden field) Silverlight Viewer
20. Large Datasets Too much data Slow, unresponsive UX Too much data Overwhelms the user Answer: Only load what the user needs to see Allow user to query for information Allow user to page through data WCF Data Services is your friend! (a.k.a. ADO.NET Data Services) This uses Open Data Protocol (OData)to SharePoint Example: To show 3rdgroupof 10 rows, ?$top=10&$skip=20
21. Paged List View Web Part Web Page Web Part ListData.svc < object> tag with hidden field name List JSON with initial load of list data (hidden field) Silverlight Viewer
23. External Data Access Why surface non-SharePoint data in Silverlight? Authenticate directly from client (may be good or bad ) Access data not available in a Sandboxed Solution Rich, multithreaded UI Issue: Cross-domain access
24. External Data Access Silverlight won’t access a server at a differentDNS domain, protocol or port than the hosting page unless… Target server has contentaccesspolicy.xml or crossdomain.xml files granting access, OR, You use a proxy (your own or a public one), OR, You use the Javascript bridge (then you’re subject to the browser’s cross-domain policy) “Out of Browser” always needs policy file (unauthenticated) x Silverlight Browser bar.services.com foo.pages.com
26. Summary It only takes an <object> tag to put Silverlight in SharePoint Two Sandboxes is Better than One (Silverlight and Sandboxed Solutions) Use the HTML bridge to reduce round trips and post back data on page Allow user browsing to trigger accessing only the data you need Make mash-ups with connected web parts
27. Resources Source Code for demos in this session:http://code.msdn.microsoft.com/SP2010Silverlight My blog (see previous posting for pointer to MSDN webcast for click-by-click getting started)http://blogs.msdn.com/bobgerman/ Books: Previousgeneration,still helpful Ch. 5 and14 areSilverlight