Andrej Tozon's blog

In the Attic

NAVIGATION - SEARCH

Integrating Silverlight with Community Server 2008.5

3. November 2008 02:18 / Andrej Tozon / Silverlight . Layout . Community . Development / Comments (0)

I’m sure Telligent will fully enable Silverlight parts into future Community Server releases, but until then, a couple of tricks are needed to make Silverlight play well with CS. The following points were made with Community Server 2008.5 release.

Include Silverlight apps in posts

The common way to include Silverlight in CS posts is by using HTML iframes. CS is blocking this tag by default so you have to edit communityserver.config file and enable it. Look for the <Markup> tag and go to the <Html> section within it. Add the iframe line somewhere to that section:

<iframe src = "true" frameborder = "true" width = "true" height = "true" />

Only attributes with values set to “true” will be allowed so don’t forget to add the attributes you plan to set on an iframe.

Next, upload the Silverlight app to a web site folder. The files to upload are usually the application’s [app].html (host page), [app].xap (application) and Silverlight.js (JavaScript helper library). Make sure that the uploaded .html file is accessible through the web and the app is working.

The last step is an easy one. Insert the iframe in your post wherever you want to put your Silverlight application. You’ll most commonly do that when editing posts in Html view. I usually put another div tag around an iframe:

<div style="width:100%;height:200px">
  <iframe src="/silverlight/app.html" frameborder="0" width="100%" height="200" />
</div>

Putting Silverlight into CS master page

This one requires some more manual work, but you can use CS’s master page’s system to control where you want to include Silverlight. As I needed to have Silverlight-enabled on all pages, I picked the Master.master file. I also used a different approach for embedding Silverlight – instead of iframe, I used a new Silverlight ASP.NET control, which makes things much easier. You’ll get this control in your toolbox once you install Silverlight SDK. This approach, however, will require you to “upgrade” your web.config to target .NET Framework 3.5. You can either do this manually by copying all the missing sections and other entries into it or by opening the site with Visual Studio 2008 – Visual Studio usually prompts for this kind of upgrade when opening ASP.NET 2.0 projects. You should also add the following reference line into the pages/controls section to make Silverlight possible on every page:

<add assembly="System.Web.Silverlight" namespace="System.Web.UI.SilverlightControls" tagPrefix="asp" />

My edit of Master.master file now looks like this:

...
<div id="CommonHeader">
  <asp:ScriptManager ID="ScriptManager1" runat="server" />
  <asp:Silverlight ID="sl" runat="server" Source="/Silverlight/banner.xap" 
    Height="100%" Width="100%" Windowless="true" />
    <div class="Common">
...

[inserted lines bold]

Because of the inserted Silverlight control, all existing header contents were pushed further down. To fix this, override affected elements’ CSS style. You’ll do this on the Control Panel | System Administration | Site Administration | Site Theme | Custom Styles (Advanced) page. Just enter the overrides:

#CommonHeaderTitleArea
{
    position: relative;
    top: -113px;
}
#CommonHeaderUserArea
{
    position: relative;
    top: -113px;
}

[Note: my header has its height set to default – 113px, so I had to push it (-)113px up. Change this value according to your header height.

These were just very quick (and dirty) fixes to enable Silverlight in your CS2008.5 site until Silverlight gets native support in Community Site. I’ll most likely be putting even more Silverlight into my CS so I may update this post with even more tips.

Tags :