Creating Silverlight 1.1 Applications for SharePoint with VS2008

One of the blogs I subscribe to is that of Janne Mattila, who always has very interesting things about SharePoint, generally advanced and very, very useful and interesting. In recent weeks Janne published a post about Silverlight and SharePoint that follows the same line of work I have been following in recent days. With Janne's permission, I translate the content below for all those who prefer Spanish. J .

(Note: I do not consider myself a translator, nor do I expect this to be a literal translation; what matters is the general meaning. Comments are welcome as always)

Creating Silverlight 1.1 Applications for SharePoint with VS2008

The title says it all.:-) My plan is to create a small step-by-step guide on how to create a Silverlight 1.1 application with Visual Studio 2008 and then run it in SharePoint. And since I do not want to install a bunch of things in my SharePoint environment, I created a Web Part to host the Silverlight application. All the development has been done outside the SharePoint environment.

If Silverlight is new to you, I suggest you start by checking silverlight.net and a very interesting example at Coding4Fun Silverlight 8-Ball example. The first link is the starting point for development using Silverlight and the second link is a very interesting example that shows how to create an 8-ball game using Silverlight.

Now you know more about Silverlight 🙂 so let's start with the example:

I have VS2008 running on Vista and I have downloaded and installed Microsoft Silverlight 1.1 Tools Alpha for Visual Studio 2008 to help me develop Silverlight applications. This adds a new template with all the configuration needed to build Silverlight 1.1 applications. I also have SharePoint running in Virtual PC and it is configured to connect directly to my host machine (E.g.: by typing http://demo1:1000 on my host machine it connects to the virtualized SharePoint).

The first thing is to modify SharePoint so that it can host my new application. Let's add some folders under the directory _LAYOUTS:

ClientBin is the folder that will contain all the .dll files required on the client by Silverlight (=If you compile your Silverlight project you will automatically have in your project the folder ClientBin which contains all the client assemblies needed for the project.).

The Silverlight folder is used to store the .xaml files (=The Silverlight pages). I also need to change the settings of the two folders to make things work. First I will change the settings of the folder ClientBin:

Assign only read access (Read) and also execute permissions (Execute) to no one (None) :

Then I will add .dll to allow mime types (and .pdb for debugging purposes in the future) :-):

Then I will change the settings of the Silverlight folder so that they support the .xaml extensions:

Now SharePoint is configured… but let's create a web part to host the Silverlight application on the page. Here is the code that does this:

   1:  using System;

   2:  using System.Runtime.InteropServices;

   3:  using System.Web.UI;

   4:  using System.Web.UI.WebControls.WebParts;

   5:   

   6:  namespace Silverlight_Web_Part

   7:  {

   8:    [Guid(“fc852641-9955-433c-945e-d773f46351eb”)]

   9:    public class Silverlight_Web_Part : WebPart

  10:    {

  11:      string xamlFile;

  12:      [WebBrowsable(true), Personalizable(true)]

  13:      public string XamlFile

  14:      {

  15:        get { return xamlFile; }

  16:        set { xamlFile = value; }

  17:      }

  18:   

  19:      public Silverlight_Web_Part()

  20:      {

  21:        this.ExportMode = WebPartExportMode.All;

  22:      }

  23:   

  24:      protected override void Render(HtmlTextWriter writer)

  25:      {

  26:        if (string.IsNullOrEmpty(this.XamlFile) == false)

  27:        {

  28:          writer.Write(“<div id=’SilverlightControlHost’ “ + 

  29:            “style=’width: 640px; height: 480px;’></div>”);

  30:          writer.Write(“<script type=’text/javascript’ “ +

  31:              “language=’JavaScript’ src=’/_layouts/Silverlight.js’></script>”);

  32:          writer.Write(“<script type=’text/javascript’ “ +

  33:            “language=’JavaScript’ src=’/_layouts/SilverlightStarter.js’></script>”);

  34:          writer.Write(“<script type=’text/javascript’ “ +

  35:            “language=’JavaScript’>createSilverlight(‘” + xamlFile + “‘);</script>”);

  36:        }

  37:        else

  38:        {

  39:          writer.Write(“Xaml file is not selected.”);

  40:        }

  41:      }

  42:    }

  43:  } 

My web part uses the Silverlight.js and SilverlightStarter.js files. SilverLight.js is the same file that is included in the project when you create a Silverlight 1.1 project in VS. SilverlightStarter.js is practically a copy of the project template file but I have modified it a little so that it supports passing the XAML file as a parameter:

   1:  function createSilverlight(filename)

   2:  {

   3:    Silverlight.createObjectEx({

   4:      source: filename,

   5:      parentElement: document.getElementById(“SilverlightControlHost”),

   6:      id: “SilverlightControl”,

   7:      properties: {

   8:        width: “100%”,

   9:        height: “100%”,

  10:        version: “1.1”,

  11:        enableHtmlAccess: “true”

  12:      },

  13:      events: {}

  14:    });

  15:     

  16:    document.body.onload = function() {

  17:     var silverlightControl = document.getElementById(‘SilverlightControl’);

  18:     if (silverlightControl)

  19:     silverlightControl.focus();

  20:    }

  21:  }

And if you check the web part code on line 35 you will notice that I pass as a parameter the XAML file that has been configured in the web part properties:

Now we just have to add some Silverlight code and we are ready. Here is the content of the Page.xaml file (=The Application :-):

   1:  <Canvas x:Name=”parentCanvas”

   2:      xmlns=”http://schemas.microsoft.com/client/2007″ 

   3:      xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” 

   4:      Loaded=”Page_Loaded” 

   5:      x:Class=”MySilverLight.Page;assembly=/_LAYOUTS/ClientBin/MySilverLight.dll”

   6:      Width=”640″

   7:      Height=”480″

   8:      Background=”White”    

   9:      >

  10:   

  11:   <Rectangle x:Name=”MyRectangle” 

  12:         Canvas.Top=”25″ Canvas.Left=”25″ 

  13:         Width=”50″ Height=”50″ 

  14:         Fill=”Gray” MouseLeftButtonDown=”MyMouseLeftButtonDown” />

  15:   <TextBlock x:Name=”MyText” 

  16:         Text=”Click either rectangle or me” 

  17:         MouseLeftButtonDown=”MyMouseLeftButtonDown” />

  18:  </Canvas>

And the Page.xaml.cs code-behind contains the following code:

   1:  using System;

   2:  using System.Windows.Controls;

   3:   

   4:  namespace MySilverLight

   5:  {

   6:    public partial class Page : Canvas

   7:    {

   8:      DateTime started = DateTime.Now;

   9:   

  10:      public void Page_Loaded(object o, EventArgs e)

  11:      {

  12:        // Required to initialize variables

  13:        InitializeComponent();

  14:      }

  15:   

  16:      public void MyMouseLeftButtonDown(object o, EventArgs e)

  17:      {

  18:        string runningTime = (DateTime.Now – started).TotalSeconds.ToString(“F2”);

  19:        System.Windows.Shapes.Rectangle rectangle = o as System.Windows.Shapes.Rectangle;

  20:        if (rectangle != null)

  21:        {

  22:          MyRectangle.Opacity = 1;

  23:          MyText.Text = “You clicked rectangle! Application has been running for “ + 

  24:            runningTime + ” seconds.”;

  25:        }

  26:   

  27:        System.Windows.Controls.TextBlock textBlock = o as System.Windows.Controls.TextBlock;

  28:        if (textBlock != null)

  29:        {

  30:          MyRectangle.Opacity = MyRectangle.Opacity * 0.8;

  31:          MyText.Text = “You clicked text block! Rectangle is fading away…”;

  32:        }

  33:      }

  34:    }

  35:  }

Now you are probably eager to know what the application does 🙂 Here is our application after a couple of requests:

And if the user clicks on the rectangle…

If the user clicks on the text…

Now we have the development environment ready so we can build and test the Silverlight 1.1 application and host it in SharePoint. Here are the steps you have to follow to try it yourself.

1) Create a Silverlight project in VS2008
2) Write the Code 🙂
3) Build the solution
4) Copy the contents of the ClientBin*.* folder to the SharePoint _LAYOUTSClientBin folder
5) Copy the *.xaml files from your project to the SharePoint Silverlight folder. (Note: you have to verify that the path in x:Class is correct! See my Page.xaml and line 5 in the source)
6) Create the page that uses the Silverlight web part and select your new XAML file

This was my small introduction to Silverlight 1.1 with SharePoint. In this example I used static .xaml files, placing them in the file system to make everything as simple as possible… I just wanted to show how you can start experimenting with this combination. This can be extended and improved in many different ways and I will probably return to this topic in future posts.

Anyway… Happy hacking!
J

That is the end of Jane's post.

I hope this helps.

Juan Carlos Peláez

MCTS Distributed Applications

Software Architect.

Keywords: Silverlight, Sharepoint, VS2008, WSS 3.0