Building Applications with Microsoft Silverlight andMicrosoft SharePointServer 2010<br />Bob German<br />Technology Archit...
Session Agenda<br />Getting Started<br />Brief background<br />Building a solution “from scratch” with Visual Studio 2010<...
SharePoint is…<br />An ASP.NET application using SQL Server<br />HTTP/HTTPS web interface<br />XML Web services<br />WebDA...
Silverlight is…<br />A browser plug-in (mostly):<br />Your app runs in a sandbox<br />XAML declarative markup<br />Contain...
Why Build a Silverlight UI?<br />Easier to build and test<br />Common runtime  fewer browser compatibility headaches<br /...
Silverlight Development<br />Subset of Windows Presentation Foundation<br />XAML(eXtensible Application Markup Language)<b...
Coding in Silverlight<br />Subset of .net types<br />Missing: XmlDocument, ADO.NET Data, ArrayList<br />Silverlight projec...
Sandboxed Solutions<br />SharePoint Solution runs Partly trusted<br />Same .wsp file – easily selected in Visual Studio 20...
Development Environment<br />Two targets, one tool: Visual Studio 2010!<br />Visual Studio setup:<br />One Visual Studio s...
Hosting SilverlightIt’s Just an <object> Tag!<br /><object data="data:application/x-silverlight," type="application/x-silv...
Hello Silverlight<br />Getting Started with Silverlight 4.0 and SharePoint 2010 Development<br />demo <br />
SharePoint Data Access from SilverlightMany options<br />Client Object Model<br />WCF Data Services(REST access to lists –...
Get Request (page)<br />Get Response (page)<br />Load<br />Get Request (data)<br />Typical Service Interaction<br />User B...
User Browses<br />Get Request (page)<br />Get Response (page,data)<br />Load (data ref)<br />Read (data)<br />Web Browser<...
Silverlight HTML Bridge<br />Access the HTML DOM from Silverlight<br />Call JavaScript from Silverlight<br />Silverlight c...
Picture View Web Part<br />Web Page<br />Web Part<br />< object> tag<br />with hidden field name<br />Image Library<br />J...
Picture View Web Part<br /><ul><li>Reducing round trips via HTML Bridge
Running Out of Browser
Printing from Silverlight</li></ul>demo <br />
Large Datasets<br />Too much data  Slow, unresponsive UX<br />Too much data  Overwhelms the user<br />Answer: Only load ...
Paged List View Web Part<br />Web Page<br />Web Part<br />ListData.svc<br />< object> tag<br />with hidden field name<br /...
Large Datasets<br />Paging through data with WCF Data Services<br />demo <br />
External Data Access<br />Why surface non-SharePoint data in Silverlight?<br />Authenticate directly from client (may be g...
External Data Access<br />Silverlight won’t access a server at a differentDNS domain, protocol or port than the hosting pa...
Solution “Nuggets”<br />demo<br />Demonstrations ofmore SharePoint and Silverlight Solutions<br />
Summary<br />It only takes an <object> tag to put Silverlight in SharePoint<br />Two Sandboxes is Better than One (Silverl...
Upcoming SlideShare
Loading in...5
×

Creating Great Applications in SharePoint 2010 with Silverlight 4

3,242

Published on

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.

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
  • an excellent overview of SharePoint and Silverlight
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,242
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • There are more!! Cookies, for example.
  • Creating Great Applications in SharePoint 2010 with Silverlight 4

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

    ×