Using Silverlight 4 Web Parts in SharePoint 2010

SharePoint 2010 has built-in support for Silverlight Web Parts, making it easy to get Silverlight applications up and running. But most developers will want to go beyond the basic functionality to create highly integrated experiences using Visual Studio. In this article, I'll look at how to build Silverlight Web Parts that can run in the Sandbox, manipulate SharePoint data using the Client Object Model, and run out of the browser on the desktop.

Silverlight Overview

A number of features make Silverlight 4 a great business application platform. At its most basic level Silverlight is a browser plug-in that runs across a number of platforms (e.g., Windows and Mac) on a number of browsers (e.g., Internet Explorer, Safari, and Firefox). This functionality greatly reduces the amount of code you write, allowing you to focus on your application's business logic and not on the subtle compatibility issues that come with supporting multiple browsers. Silverlight lets you create rich immersive experiences for your users.

Silverlight is .Net. You can use all your knowledge of ASP.Net, Windows Presentation Foundation (WPF), and Windows Forms to program Silverlight. In fact, Silverlight is a subset of WPF. Both WPF and Silverlight use XAML to declaratively define the user experience. Most business applications revolve around some back-end data store such as SQL Server or a line-of-business system such as SAP. Silverlight has extensive data binding capabilities to allow you to quickly bind back-end data the user interfaces. More and more, rich media such as pictures, voice, and video are becoming standard requirements in a business application. Users expect to stream video from the server for training and other business functions such as CEO broadcasts.

Silverlight supports Smooth Streaming technology, which lets you host and deliver HD video from your IIS servers, including SharePoint. Another feature, introduced with Silverlight 3, is the Out-of-Browser (OOB) feature. OOB lets you install and run your Silverlight application out of the browser on the local machine. By surfacing the OOB application on the start menu or desktop, you give a user a more desktop-application-like feel. You can also detect your online status and respond accordingly—for example, caching data locally. The OOB features in Silverlight 4 have expanded this capability to allow your OOB applications to run with full trust and instantiate COM objects.

Another Silverlight feature allows Silverlight controls to communicate with other running Silverlight controls. This means that you can mix complex applications to work together as single applications. For example, imagine adding two Silverlight applications to a page that could allow the applications to communicate with each and provide a master/detail experience for users. This is similar conceptually to what you do today with Web part-to-part communication. Silverlight also provides a rapid application developer model with great tools such as Visual Studio 2010 and Expression Blend 3 + Sketchflow. The designer and developer workflow that Silverlight provides allows designers to create beautiful and expressive designs, then hand those applications over the wall to a developer who can add deep data integration with line-of-business systems.

Silverlight Out of the Box

SharePoint 2010 contains a number of Silverlight features out of the box, a clear indication that SharePoint is serious about Silverlight and that SharePoint developers should be as well. You learned about a small set of Silverlight capabilities in the previous section. Now let’s talk about how SharePoint leverages Silverlight. One feature that will be most visible and used most often is the Silverlight Web Part (Figure 1). A Silverlight Web Part lets you add a Silverlight application to your SharePoint site simply by adding a Web Part and setting the path to the Silverlight application's .XAP file.

You can upload Silverlight applications to SharePoint document libraries or other SharePoint folders, which makes it easy for end users to add Silverlight applications to their sites. For example, most users have administrative rights on their My Site. Let’s walk through the steps you could take to add a Silverlight application to your My Site. First you'll need a sample Silverlight application. You can find one by browsing the list of Silverlight samples on the Silverlight.net/Community site. You can choose a sample application that looks interesting to you and download it to your desktop. But in this example, we'll use a weather control that displays the current weather. After you've downloaded that application, upload it to a document library on your My Site. Add the Silverlight application you just uploaded to the right-hand column of your home page. From the ribbon menu put the page into edit mode. Once the page is in edit mode you'll see the Web Part zones. Click on the zone on the right (it should be called Middle Right Zone) to open the insert Web Part dialog.

From the Categories list on the left select Media and Content, then in the Web Parts list select Silverlight Web Part. Click the Add button to insert the Silverlight Web Part into the Middle Right Zone. You'll be prompted to provide the URL to the Silverlight application. Enter the path to the Silverlight control you uploaded to your document library. The easiest way to get the path is to right-click on the Silverlight .XAP file and choose Copy Shortcut from the context menu. After adding the URL to the Silverlight application click ok. Click on Stop Editing from the ribbon menu to exit edit mode. You'll see your Silverlight application running on your page; in this case you can see that it accurately reflects the weather in Redmond (Figure 2).

SharePoint also includes a number of Silverlight controls in the box. The Silverlight Media Web Part (Figure 3) lets you easily add video to your SharePoint site by adding the Media Web Part. Let’s look at how easy it is to add video to your SharePoint sites. SharePoint 2010 contains a new library type called Asset Libraries. Asset Libraries are designed to hold media such as pictures and videos. Create a new Asset Library from the create dialog. Upload a Windows Media Video (WMV) file to your Assets Library. Browse to the home page of your site, or wherever you would like to add video. Put the page in edit mode by clicking the Edit button on the Page tab of the ribbon menu.

Once the page is in edit mode, click on the spot in the page where you would like to insert the media player. Clicking inside the page while in edit mode will enable a context-sensitive ribbon tab called Editing Tools. The Editing Tools tab contains two tabs: Format Text and Insert. Click on the Insert tab, then select Web Part from the Web Parts ribbon group. From the Insert Web Part dialog select the Media and Content item from the Categories list and then select Media Web Part. Click the Add button to add the Media Web Part to the page.

Once the Media Web Part control has been added to the page you must select the Web Part to enable another context-sensitive ribbon item called Media. Click on Change Media dropdown to select the video to play. Choose SharePoint from the Change Media dropdown. This will open a browse dialog that will let you pick the video in your Asset Library that you uploaded earlier. The Media ribbon menu lets you set other properties of the media player such as dimensions and style. You can also set the video to loop or start automatically when the page opens.

SharePoint also uses Silverlight internally for some of its functionality. For example, Web Applications such as Word and PowerPoint will use Silverlight to render content. SharePoint also will launch a rich Silverlight Create dialog (Figure 4) to let you pick the type of list or library to create.

Access SharePoint Data from Silverlight

SharePoint contains a number of ways that you can access the data contained in Lists and Libraries. One way to access SharePoint from client applications such as Silverlight is via SOAP-based Web Services. These Web Services, still available in SharePoint 2010, cover the widest area of features. Although there are some incompatibilities in Silverlight due to the way Silverlight implements this feature, they are necessary in certain scenarios (e.g., calling search services).

The Client Object is a new feature of SharePoint 2010 that provides a Silverlight-based object model for calling SharePoint. The Client Object is a very lightweight and efficient way to batch call SharePoint to retrieve and update data. The Client Object Model gives you explicit control of not only when and how often you call the server but also over how much data is returned. The Client Object Model is generated from the Server Object Model, SharePoint.dll. So if you're familiar with the Server OM, you'll be familiar with the Client OM.

Another new way to access list and library data is by using RESTful services. SharePoint 2010 exposes all of its data as a RESTful endpoint. You can use the ADO.Net data services against SharePoint’s list data to generate strongly typed classes using the entity framework. This makes reading and writing list and library data very familiar to .Net developers.

Silverlight applications can run in the new Sandboxed solutions of SharePoint 2010 and SharePoint Online. Silverlight applications execute on the client and make a perfect Sandboxed solution because of this. For example, Sandboxed solutions are blocked from making network calls such as Web Service calls. But Silverlight can make these calls, even as part of a Sandboxed solution. This means that by using a combination of Sandboxed solutions for easy deployment and Silverlight client-side features you can achieve many of the same capabilities as Farm-level solutions without any of the security risks to the SharePoint farm. And only Sandboxed solutions can be deployed to the standard SharePoint Online service.

Silverlight Development on SharePoint

With SharePoint 2010, the developer story has come a long way. SharePoint now is integrated into Visual Studio 2010 as a first-class platform. Visual Studio 2010 supports a number of SharePoint project types such as Web Parts, Workflows, Event Receivers, and Modules (Figure 5). You can also import existing .wsp package files that have been exported from saving a SharePoint site as a template or exported from SharePoint designer. You can even upgrade a SharePoint 2007 project created with Visual Studio Extensions for WSS (VseWSS).

SharePoint projects now are Silverlight aware and can deploy and debug Silverlight applications as part of the SharePoint .wsp package file. Let’s walk through the creation and deployment of a simple Silverlight application to SharePoint. Start by opening Visual Studio and creating a Silverlight application. In this example, name the project SimpleSilverlight and click OK. Uncheck the option to host the Silverlight application in a new Web site. You don't need this because it creates a test Web site for your Silverlight project. You will use SharePoint as your test Web site. The Silverlight project opens in Visual Studio and you can use the Silverlight designer to create the application. In this case, you'll use Expression Blend as the designer. In Visual Studio right-click on the MainPage.xaml file and choose Open in Expression Blend from the context menu. Use Expression Blend to create the application (Figure 6).

When you're finished, save and close Expression Blend. Switch back to Visual Studio, which will prompt you to reload the application because it was changed outside of Visual Studio. Next, you'll need to deploy the Silverlight application to SharePoint. You could stop at this point and just distribute your Silverlight .XAP file, as you saw in the earlier example with the weather application. But I wouldn’t recommend this approach because it is a best practice to always deploy applications to SharePoint using a SharePoint package file (.wsp). Add a new empty SharePoint project to your Silverlight solution. Call the empty SharePoint project SimpleSilverlightDeploy. The new SharePoint project wizard will prompt you to choose the location to deploy to and the type of project to create. The default is to create a Sandboxed solution. This is the best choice for Silverlight projects. Next, you need to add a SharePoint Module project item to the SharePoint project.

Modules are the way that you deploy files to SharePoint. Call the Module SimpleApp. By default, a sample file called Sample.txt is created. You can delete this file because it is not needed. In other .Net applications you can add a project reference to another project to include the output of one project in another. But this does not work for deploying a Silverlight application because you don't want a reference to the .dll file; you need a reference to the .XAP file instead. Click on the SimpleApp module node in the solution explorer on the right side of Visual Studio. You'll see a property called Project Output References. Click the ellipse to open the Project Output References collection dialog. Click the add button to add a new reference.

In the properties of the new reference set the property name to the name of the Silverlight Project—in this case, SimpleSilverlight. Set the Deployment Type property to ElementFile and close the dialog. The last step is to edit the Elements.xml file to specify where you want to deploy the file. Edit the file by adding a new File node under the Module node. The path property specifies the relative path to the file in the .wsp package. The URL property specifies the path on the SharePoint Server where you want the file deployed. In this example, I use the WebDav path to deploy the file to the Master Pages document library.

                      You can now press F5 to deploy the solution to SharePoint. Visual Studio builds and deploys the solution to the SharePoint solution gallery and activates the project. It will also open the SharePoint site. You can verify that deployment was successful in a couple of ways. First, from the site settings page open the Solutions Gallery. The Solutions Gallery shows you all the applications that are installed in the Sandbox for that Site Collection. Next you can verify that the Silverlight application was deployed to the Master Pages gallery by browsing to the Master Pages gallery.The Master Pages gallery is located at http://server/_catalogs/masterpage. To test your new Silverlight application, put the page in edit mode and insert a Silverlight Web Part, just as you did earlier in this article. Click the Add button to add the Web Part and set the URL to the Silverlight application, which from our example will be http://intranet.contoso.com/_catalogs/masterpage/Silverlight/SimpleSilverlight.xap. You may need to resize your Web Part to fit the Silverlight application. Once that is done, click the save icon to exit edit mode. You will see something similar to the page shown in Figure 7.Debugging Silverlight with SharePointVisual Studio makes it easy to debug Silverlight applications in SharePoint. In the SharePoint project that you created in the previous section, right-click on the SharePoint project node and select properties. In the Visual Studio properties window, select the SharePoint tab. The SharePoint tab lets you modify and control the package and deployment process that is used.For example, maybe you don't want Visual Studio to activate the SharePoint solutions when you deploy. This gives you very granular control over the entire process. But in this case, you're interested in the last property at the bottom of the page. You may need to scroll down to see it. At the bottom of the tab page there is a check box called Enable Silverlight debugging (instead of Script debugging). Check this box to debug your Silverlight application. After you set this property you can set breakpoints in your code just as you would any other .Net project. Visual Studio will do everything to attach the debugger correctly.A Rich ExperienceYou've seen how the rich experience features of Silverlight, coupled with the rich platform features of SharePoint, come together to make an incredible business application platform. When you think about Silverlight applications in SharePoint remember that Silverlight, at its core, is simply an HTML object tag. This means that you can insert Silverlight nearly everywhere in SharePoint. Many times you'll see examples of Silverlight in SharePoint Web Parts, but you can use Silverlight in many more ways. You could implement a Silverlight navigation menu or a Silverlight field control. You could also implement Silverlight edit forms or List headers.The possible places to integrate Silverlight and SharePoint together have no end. And with the addition of the out-of-browser features and the client-side Business Connectivity Services (BCS) cache, SharePoint and Silverlight will continue to reach outside the boundaries of traditional SharePoint applications to deliver rich business application experiences directly to SharePoint users. In this article, I presented only the basics of what is possible with Silverlight and SharePoint, but I hope that with this foundation you can begin exploring all the richness that the SharePoint and Silverlight platforms have to offer.Paul Stubbs ([email protected]) is a Microsoft Technical Evangelist for SharePoint and Office. He focuses on the information worker development community around SharePoint and Office, Silverlight, and Web 2.0 social networking. Paul has also worked as a Senior Program Manager on the Visual Studio team in Redmond. Visit blogs.msdn.com/pstubbs.