Silverlight Enabled WebPart Tutorial

Printable View

Jan 27th, 2009, 05:28 PM
Wokawidget

Silverlight Enabled WebPart Tutorial
Overview

There are a few steps that must be completed in the right order for the development and testing of a Silverlight enabled WebPart.
1. Install WSS 3.0
2. Install VS 2008 and VS 2008 SP 1
3. Install Visual Studio 2008 extensions for Windows Sharepoint Services (VSeWSSv12)
4. Install Silverlight Tools 2.0 for Visual Studio 2008
5. Modify the Sharepoint Web.Config to include Web Extensions and Silverlight assemblies
6. Add the XAP MIME-Type to IIS
7. Create a sample Silverlight control
8. Create a sample WebPart control
9. Copy the output from the Silverlight project to the Sharepoint server
10. Configure the WebPart in Sharepoint
11. Test
The following posts will walk you through the above steps.
Jan 27th, 2009, 05:52 PM
Wokawidget

Step 1 - Install WSS
First of all you need to download and install Sharepoint.
This can be downloaded from the following Url:

http://www.microsoft.com/DownLoads/d...displaylang=en

When installing Sharepoint select the option to install the database locally, unless you have an SQL Server instance installed for Sharepoint to use.

If you setup a sharepoint service account specifically for use with the Sharepoint app pool identity, then you may get the following error in the System section of the Event log:

The application-specific permission settings do not grant Local Activation permission for the COM Server application with CLSID
{61738644-F196-11D0-9953-00C04FD919C1}
to the user DEVLAB\SharepointServiceAcc SID (S-1-5-21-3130128137-2669382741-1398243744-1109). This security permission can be modified using the Component Services administrative tool.

For more information, see Help and Support Center at http://go.microsoft.com/fwlink/events.asp.

In this case my sharepoint identity account was specified as SharepointServiceAcct during the Sharepoint install procedure.
To find the exact component service that is generating this error open RegEdit and search for the Guid {61738644-F196-11D0-9953-00C04FD919C1} in the registry. Once found it will show the exact component service you need to edit...in this case it's the IIS WAMREG Admin Service.

If you see this error then you need to make sure that the Sharepoint app pool acct identity has Local Launch and Local Activation permissions for the IIS WAMREG Admin Service:
1. Open component services and browse to Computers-->My Computer-->DCOM Config-->IIS WAMREG Admin Service and click properties
2. Click on the Security tab and for the Launch and Activation Permissions make sure that Customize is selected and then click Edit...
3. Click Add and enter the Sharepoint app pool user acct and click Ok
4. Make sure Local Launch and Local Activation is selected for this user and click Ok
Once this is all done then log into the Sharepoint admin site and create a new web application and then create a new site collection.
In this example for Sharepoint Web Application has the url:

http://localhost:1010

and the site collections url is:

http://localhost:1010/Sites/SampleSite

Note: The .NET 3.5 Framework, Web Extensions and Silverlight assemblies are all installed during Steps 2, 3 and 4, and these are the setup procedures for a dev VS 2008 machine.
For a production Sharepoint server install you won't be installing VS 2008 and so you will need to install .NET 3.5 Framework SP1 and the Silverlight SDK on the Sharepoint server manually.
The Silverlight SDK can be downloaded from here: http://www.microsoft.com/downloads/d...displaylang=en
After the SDK has been installed make sure the System.Web.Silverlight.dll assembly has been registered in the GAC.
Jan 27th, 2009, 06:32 PM
Wokawidget

Step 2 - Install Visual Studio 2008 and SP1

If you don't have Visual Studio 2008 then you can download the Visual Web Developer 2008 Express Edition for free from the following url:

http://www.microsoft.com/eXPress/download/

You will then need to install Visual Studio 2008 and Framework 3.5 SP 1. This can be downloaded from the following url:

http://www.microsoft.com/downloads/d...displaylang=en
Jan 27th, 2009, 06:34 PM
Wokawidget

Step 3 - Install Visual Studio 2008 extensions for Windows Sharepoint Services

You can download Visual Studio 2008 extensions for Windows Sharepoint Services (VSeWSSv12) from the following url:

http://www.microsoft.com/downloads/d...displaylang=en
Jan 27th, 2009, 06:36 PM
Wokawidget

Step 4 - Install Silverlight Tools 2.0 for Visual Studio 2008

The Silverlight Tools 2.0 for Visual Studio 2008 can be downloaded from the following url:

http://www.microsoft.com/downloads/d...displaylang=en
Jan 27th, 2009, 06:58 PM
Wokawidget

1 Attachment(s)

Step 5 - Modify the Sharepoint Web.Config to include Web Extensions

The Sharepoint SampleSite Web.Config file can be located at:

c:\inetpub\wwwroot\wss\VirtualDirectories\1010\Web.Config

This needs to be changed to include the following additions.
I have also attached the full web.config to this post.

Add the following to the <configuration><configSections> xml:

Code:

<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" /> <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="Everywhere" /> <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" /> <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" /> <section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" /> </sectionGroup> </sectionGroup> </sectionGroup>

Add the following to the <configuration><Sharepoint><SafeControls> xml:

Code:

<SafeControl Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TypeName="*" Safe="True" /> <SafeControl Assembly="System.Web.Silverlight, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.SilverlightControls" TypeName="*" Safe="True" />

Add the following to the <configuration><system.web><httpHandlers> xml:

Code:

<remove verb="*" path="*.asmx" /> <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false" />

Add the following to the <configuration><system.web><compilation><assemblies> xml:

Code:

<add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" /> <add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" /> <add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" /> <add assembly="System.Web.Silverlight, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

Add the following to the <configuration><system.web><pages> xml:

Code:

<controls> <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> </controls>

Add the following to the <configuration><runtime><assemblyBinding> xml:

Code:

<dependentAssembly> <assemblyIdentity name="System.Web.Extensions" publicKeyToken="31bf3856ad364e35" /> <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0" /> </dependentAssembly> <dependentAssembly> <assemblyIdentity name="System.Web.Extensions.Design" publicKeyToken="31bf3856ad364e35" /> <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0" /> </dependentAssembly>

Add the following to the <configuration> xml:

Code:

<system.webServer> <validation validateIntegratedModeConfiguration="false" /> <modules> <remove name="ScriptModule" /> <add name="ScriptModule" preCondition="managedHandler" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> </modules> <handlers> <remove name="WebServiceHandlerFactory-Integrated" /> <remove name="ScriptHandlerFactory" /> <remove name="ScriptHandlerFactoryAppServices" /> <remove name="ScriptResource" /> <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> </handlers> <security> <authorization> <add accessType="Allow" users="" /> <add accessType="Allow" users="?" /> </authorization> </security> </system.webServer>
Jan 27th, 2009, 07:08 PM
Wokawidget

1 Attachment(s)

Step 6 - Add the XAP MIME-Type to IIS
To add the Silverlight XAP to the IIS MIME-Type complete the following steps:
1. Open IIS
2. Open up the properties for the IIS Web Server
3. Click MIME Types...
4. Click New...
5. Enter ".xap" for the Extension
6. Enter "application/x-silverlight-app" for the MIME type
7. Click Ok, Ok, Apply
This can also be done on the Sharepoint SampleSite web site on port 1010. The MIME types button is located under the HTTP Headers tab on the site property page..
Jan 27th, 2009, 07:24 PM
Wokawidget

2 Attachment(s)

Step 7 - Create a sample Silverlight control
All the cofiguration has now been completed and we are now ready to get down to business with actually creating our VB.NET Silverlight project.
1. Open up VS 2008 and create a new Silverlight Application project from the Visual Studio templates. Call this project SilverlightWebPart.VBNETExample.SilverlightControls and set the option to create a sample test page.
2. Add a new folder called Images and add your VBF avatar image, or any other image, to this folder.
3. Delete the Page.xaml.
4. Add a new Silverlight Control to the project called AvatarDisplay
5. Modify the code of the files to match the examples shown below:
AvatarDisplay.xaml

Code:

<UserControl x:Class="SilverlightWebPart.VBNETExample.SilverlightControls.AvatarDisplay" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="200"> <Grid x:Name="LayoutRoot" Background="White"> <Canvas Width="200" Height="200"> <Canvas.Resources> <Storyboard x:Name="AvatarFadeIn"> <DoubleAnimation Storyboard.TargetName="pnlHolder" Storyboard.TargetProperty="Opacity" From="0.2" To="1.0" Duration="0:0:2" /> </Storyboard> <Storyboard x:Name="AvatarFadeOut"> <DoubleAnimation Storyboard.TargetName="pnlHolder" Storyboard.TargetProperty="Opacity" From="1.0" To="0.2" Duration="0:0:2" /> </Storyboard> </Canvas.Resources> <StackPanel x:Name="pnlHolder" Canvas.Left="75" Canvas.Top="70" Opacity="0.2"> <Image x:Name="imgAvatar" Source="Images/Avatar.jpg" MouseEnter="imgAvatar_MouseEnter" MouseLeave="imgAvatar_MouseLeave" /> <TextBlock x:Name="txtWoof" Text="WooF!" HorizontalAlignment="Center" /> </StackPanel> </Canvas> </Grid> </UserControl>

AvatarDisplay.xaml.vb

Code:

Option Explicit On Option Strict On Partial Public Class AvatarDisplay Inherits UserControl Public Sub New() InitializeComponent() End Sub Private Sub imgAvatar_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs) Me.BeginFadeInAnnimation() End Sub Private Sub imgAvatar_MouseLeave(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs) Me.BeginFadeOutAnnimation() End Sub Private Sub BeginFadeInAnnimation() If Not (Me.AvatarFadeOut.GetCurrentState = ClockState.Stopped) Then Me.AvatarFadeOut.Stop() End If Me.AvatarFadeIn.Begin() End Sub Private Sub BeginFadeOutAnnimation() If Not (Me.AvatarFadeIn.GetCurrentState = ClockState.Stopped) Then Me.AvatarFadeIn.Stop() End If Me.AvatarFadeOut.Begin() End Sub End Class

After you have made these code changes you can run the project. As you can see from the screenshots this is an extremely simple Silverlight control that merely fades the image and text in and out when the mouse enters and leaves the control.
Jan 27th, 2009, 07:45 PM
Wokawidget

Step 8 - Create a sample WebPart control
Now the easy bit. We must create a web part that can host a Silverlight control. Complete the following steps to create a generic Silverlight WebPart:
1. Add a new Web Part project called SilverlightWebPart.VBNETExample.WebParts to the solution.
2. Delete WebPart1
3. Add a new Sharepoint Web Part item to the project called SilverlightControlPanel
4. Open the SilverlightWebPart.VBNETExample.WebParts project properties
5. On the Application tab remove the Root Namespace and leave as empty string
6. On the Debug tab set the Start Action to start the browser with the Url: http://localhost:1010/Sites/SampleSite
7. Add the System.Web.Extensions and the System.Web.Silverlight namespaces to the project references
8. Modify the code for the files shown below:
SilverlightControlPanel.webpart:

Code:

<?xml version="1.0" encoding="utf-8"?> <webParts> <webPart xmlns="http://schemas.microsoft.com/WebPart/v3"> <metaData>  <type name="11dc4485-b887-47cc-aef8-06431b78aabc" /> <importErrorMessage>Cannot import Silverlight Control Panel Web Part.</importErrorMessage> </metaData> <data> <properties> <property name="Title" type="string">Silverlight Control Panel</property> <property name="Description" type="string">A general web part that hosts a Silverlight control</property> </properties> </data> </webPart> </webParts>

SilverlightControlPanel.vb

Code:

Option Explicit On Option Strict On Imports System Imports System.Runtime.InteropServices Imports System.Web.UI Imports System.Web.UI.WebControls Imports System.Web.UI.WebControls.WebParts Imports System.Xml.Serialization Imports Microsoft.SharePoint Imports Microsoft.SharePoint.WebControls Imports Microsoft.SharePoint.WebPartPages Imports System.Web.UI.SilverlightControls Imports System.ComponentModel Namespace SilverlightWebPart.VBNETExample.WebParts <Guid("11dc4485-b887-47cc-aef8-06431b78aabc")> _ Public Class SilverlightControlPanel Inherits System.Web.UI.WebControls.WebParts.WebPart Private _silverlightControlID As String = String.Empty Private _silverlightControlXAPSourcePath As String = String.Empty Public Sub New() End Sub Protected Overrides Sub OnLoad(ByVal e As System.EventArgs) MyBase.OnLoad(e) Me.AddScriptManager() End Sub Protected Overrides Sub CreateChildControls() MyBase.CreateChildControls() Me.AddSilverlightControl() End Sub <WebBrowsable(True), _ Personalizable(PersonalizationScope.User), _ WebDescription("Unique ID for the Silverlight control."), _ Category("Silverlight Control Properties"), _ WebDisplayName("Control ID")> _ Public Property SilverlightControlID() As String Get Return Me._silverlightControlID End Get Set(ByVal value As String) Me._silverlightControlID = value End Set End Property <WebBrowsable(True), _ Personalizable(PersonalizationScope.User), _ WebDescription("Location of the Silverlight XAP Package."), _ Category("Silverlight Control Properties"), _ WebDisplayName("XAP Source Location")> _ Public Property SilverlightControlXAPSourcePath() As String Get Return Me._silverlightControlXAPSourcePath End Get Set(ByVal value As String) Me._silverlightControlXAPSourcePath = value End Set End Property Private Sub AddScriptManager() Dim scriptMgr As ScriptManager = ScriptManager.GetCurrent(Me.Page) If (scriptMgr Is Nothing) Then scriptMgr = New ScriptManager Me.Controls.AddAt(0, scriptMgr) End If End Sub Private Sub AddSilverlightControl() Dim silverlightControl As New Silverlight silverlightControl.ID = Me._silverlightControlID silverlightControl.Source = Me._silverlightControlXAPSourcePath silverlightControl.MinimumVersion = "2.0.5.0" Me.Controls.Add(silverlightControl) End Sub End Class End Namespace

The properties SilverlightControlID and SilverlightControlXAPSourcePath properties will show up in Sharepoint under the category "Silverlight Control Properties" when we customize our web part in the next step.

The AddScriptManager sub adds a ScriptManager object to the page if one has not already been added.
The AddSilverlightControl method adds a Silverlight object to the WebPart. This Silverlight object is used as a space holder for the actual Silverlight control. The path to the Silverlight control is set by the SilverlightControlXAPSourcePath property.
if you right click the SilverlightWebPart.VBNETExample.WebParts project and click deploy Visual Studio will automatically copy the WebPart output assembly to the GAC and will also register the assembly in the <SafeControls> section of the Sharepoint sites web.config file.
Jan 27th, 2009, 07:55 PM
Wokawidget

1 Attachment(s)

Step 9 - Copy the output from the Silverlight project to the Sharepoint server
For the Silverlight control to be used by a WebPart the Silverlight project output must be copied to a path that is under the root of the Sharepoint site.
1. Browse to C:\inetpub\wwwroot\wss\VirtualDirectories\1010\
2. Create a folder called ClientBin and then a folder called SilverlightWebPart.VBNETExample
3. Browse to the output folder for the Silverlight project SilverlightWebPart.VBNETExample.SilverlightControls\Bin\Debug, select all files and click copy.
4. Paste these files into the folder C:\inetpub\wwwroot\wss\VirtualDirectories\1010\ClientBin\SilverlightWebPart.VBNETExample.Silverlight Controls
This does not have to be a manual process. Post build actions can be setup to automatically copy the files to the correct WSS ClientBin folder.
Jan 29th, 2009, 06:10 AM
Wokawidget

2 Attachment(s)

Step 10 - Configure the WebPart in Sharepoint
Finally, we are almost done. All that needs doing now is the configuration of the new WebPart in Sharepoint.
Complete the following steps to finalize our WebPart configuration:
1. Open the Sharepoint site http://localhost:1010/Sites/SampleSite
2. In the top right of the page click Site Actions, and then click Edit Site
3. Select the position for where the new WebPart should be inserted and click the Add WebPart button
4. Browse down the list of installed WebParts and select the SilverlightControlPanel
5. Now that this WebPart has been added to the page click the Edit button on the WebPart and select Modify Shared WebPart.
6. In the properties window that is displayed scroll down to and expand the "Silverlight Control Properties".
7. Enter a control ID of "AvatarDisplay1"
8. Enter the relative path to the Silverlight control XAP file, in this case it's "/ClinetBin/SilverlightWebPart.VBNETExample/SilverlightWebPart.VBNETExample.SilverlightControls.xap"
9. Click OK on the properties pane
10. Click Exit Edit Mode.
Jan 29th, 2009, 06:13 AM
Wokawidget

1 Attachment(s)

Step 11 - Test

After editting the WebPart properties we can view the Sharepoint site in normal mode, and we can clearly see the new Silverlight enabled WebPart.
To test simply move the mouse over the avatar and if all is working it should fade into focus, then fade out when the mouse moves away.

Now open your CV and add "Silverlight enabled WebParts" to your list of skills :D

WOOOOF
Feb 9th, 2009, 07:08 AM
ac931274

Re: Silverlight Enabled WebPart Tutorial

Great write up.

However should people not want to install all of the software, Microsoft has produced a time limited Virtual PC that has everything that you need to develop Webparts (Server 2008, VS 2008, WSS 3.0, etc) already installed.

The link is http://www.microsoft.com/downloads/d...DisplayLang=en "Windows SharePoint Services 3.0 SP1 Developer Evaluation VPC Image".

Hope that this is of use.:)