- Silverlight Web Parts
- Manually Building a Silverlight Web Part
- Visual Studio Silverlight Web Parts Extension
- Building a Silverlight Web Part
- Building a Custom Silverlight Web Part
- Connecting Web Parts
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Manually Building a Silverlight Web Part
The first task you need to solve is how to package and deploy your Silverlight application in your SharePoint .wsp package. Start by creating a new Silverlight project in Visual Studio. Next, create an empty SharePoint project in the same Visual Studio solution that the Silverlight project is in. You will have something similar to the project structure in Figure 5.1.
)
Figure 5.1 Default Silverlight and SharePoint projects
At this point you have two projects in the solution, Silverlight and SharePoint, but they are not connected in any way. Normally to reference another project, you add a project reference to the other project in the solution. A Visual Studio project reference will make sure to build the referenced project before including the output of the referenced project into the refering project. In the case of Silverlight this does not work because the output you want to reference is not a .dll but the .xap Silverlight application's package file. So the SharePoint tools had to come up with a different way to do this. This is the technique that is not totally obvious, but it is not too bad after you see it once.
Now that you have two projects, the task is to get the Silverlight .xap file into the SharePoint project. Modules are the ways in which you deploy files to SharePoint. Add a new Module Project Item to the SharePoint project in Visual Studio. The new Module Project Item contains a Sample.txt file and an Elements.xml file. The Elements.xml, shown in Listing 5.1, describes where to deploy the Sample.txt file. In this the URL property specifies a folder called Module1. If this folder does not exist in SharePoint, it is automatically created.
Listing 5.1. Elements.xml in a New Module
<?xmlversion="1.0"encoding="utf-8"?><Elementsxmlns="http://schemas.microsoft.com/sharepoint/"><ModuleName="Module1"><FilePath="Module1\Sample.txt"Url="Module1/Sample.txt"/></Module></Elements>
Go ahead and delete the Sample.txt file because it is not needed. You are now ready to add a reference to the Silverlight project. Click the Module1 node in the SharePoint project to view the Properties window. In the Properties window for the Module there is a property named Project Output References. This is a collection property; click the ellipse to open the Project Output References dialog window. Click the Add button to add a new reference. In the reference's properties, set the Deployment Type to Element File. Choose the Silverlight project from the Project Name drop-down property list. In Figure 5.2 you can see that the Project Output References dialog adds a reference to the Silverlight project and adds the path to the Elements.xml file.
)
Figure 5.2 Project Output References
Also notice that the Module folder only contains the Elements.xml file, which has been updated as shown in Listing 5.2.
Listing 5.2. Elements.xml to Deploy a Silverlight Application
<?xmlversion="1.0"encoding="utf-8"?><Elementsxmlns="http://schemas.microsoft.com/sharepoint/"><ModuleName="Module1"><FilePath="Module1\SilverlightApplication1.xap"Url="Module1/SilverlightApplication1.xap"/></Module></Elements>
This is because there is only a refence to the Silverlight application. The actual .xap is not stored in the SharePoint project. Visual Studio also ensures the Silverlight is built before the SharePoint project if it is dirty, just like it does when adding a project reference.
Build, package, and deploy the SharePoint project to SharePoint by pressing F5. Visual Studio deploys and activates the feature that then deploys the Silverlight application's .xap file; in this case to the Module1 folder. You can verify that the Silverlight application was deployed using SharePoint Designer. Open SharePoint Designer and browse to the All Files folder of the site you deployed the solution to. Under the All Files folder you see the Module1 folder, which contains the SilverlightApplication1.xap file that you just deployed, as shown in Figure 5.3.
)
Figure 5.3 Verify the Silverlight deployment using SharePoint Designer
After you have deployed the solution, users can add Silverlight Web Parts to pages. All they need is the path to the deployed .xap file, for example http://intranet.contoso.com/Module1/SilverlightApplication1.xap. You could also take the next step and add a web part directly to your project. But Microsoft has already done all of these steps for you in a Visual Studio extension, which you can download for free. Let's take a look at how to do this using the extension.