Sharepoint silverlight World Analog Clock Webpart

Hi,

SharePoint 2010 has built-in support for Silverlight Web Parts, making it easy to get Silverlight applications up and running. But in real scenarios sometime requirement needs more customization then its hard to integrate the requirement with out of box WebPart. In this article I will explain how a SilverLight application can be integrated to the sharepoint webpart.

Requirements of WebPart:

Analog clock should be displayed to the home page of the site which can be personalized and customizable for the normal user. User can add as many as world clocks as he/she want and set the timezone and able to do basic configuration. following are the key points of the requirnments.

• Can add multiple clocks to the WebPart.
• Can display the time only
• Select desired Time Zone from the list
• Change clock title
• Show/Hide seconds hand
• Show/Hide milliseconds dial
• Show/Hide tenth seconds dial

Explanation:

After goggling few I found Bamboo webpart which is pretty fine for me and fits my requirements but unfortunately got some error on test server related to safe control which is beyond my approach to fix. Finally I found a open source WebPart on codeplex which perfectly suits my requirement except adding multiple clocks. Then i have downloaded the code and did some of customization with the share point project as well as silver light project.

To add More clocks, I followed the given steps:

I modified the Sharepoint clock webpart class(ClockWebpart.cs) to create a new property called “Clocks”

#region Properties
protected ClockWebPart ParentWebPart
{
get { return this.Parent as ClockWebPart; }
}
protected List<EditorControls.ClockWebPart.EditorParts.Clock> Clocks
{
get
{
return Serialization.Deserialize(ParentWebPart.Clocks);
}
}
#endregion
private string _clocks =string.Empty;
[Personalizable(PersonalizationScope.Shared),
WebBrowsable(false)]
public string Clocks { get { return _clocks; } set { _clocks = value; } }
Next step is to modify the user control of the web part to pick the value from the user and then implement the Render method as follows:

protected override void Render(HtmlTextWriter writer)
{
if (Clocks.Count>0)
{
foreach (var clock in Clocks)
{
AddClock(clock);
}
}
base.Render(writer);
}
private void AddClock(EditorControls.ClockWebPart.EditorParts.Clock clock)
{
ClocckContainer.Controls.Add(new Literal { Text =
"<object data='data:application/x-silverlight-2,' type='application/x-silverlight-2' width='150px' height='150px'>" +
"<param name='source' value='~/_layouts/SharePoint.Silverlight.Clock/SilverlightClock_MVP.xap' />" +
"<param name='onError' value='onSilverlightError' />" +
"<param name='background' value='Transparent' /> " +
"<param name='windowless' value='true' />" +
"<param name='minRuntimeVersion' value='4.0.50826.0' />" +
"<param name='autoUpgrade' value='true' />" +
"<param name='initParams' value='" + GetInitParams(clock) + "' />" +
"<a href='http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0' style='text-decoration: none'>" +
"<img src='http://go.microsoft.com/fwlink/?LinkId=161376' alt='Get Microsoft Silverlight' style='border-style: none' /></a></object>"
});
}
Also, create a new class "Clock":

using System;
namespace SharePoint.Silverlight.Clock.EditorControls.ClockWebPart.EditorParts
{
[Serializable]
public class Clock
{
public string ClockTitle { get; set; }
public bool ShowDigitalClock { get; set; }
public bool ShowSecondHand { get; set; }
public bool ShowMilliHand { get; set; }
public bool ShowTenthsHand { get; set; }
public string ClockTimeZoneId { get; set; }
public string UtcOffsetTicks { get; set; }
internal Clock(string clockTitle, bool showDigitalClock, bool showSecondHand, bool showMilliHand, bool showTenthsHand, string clockTimeZoneId)
{
ClockTitle = clockTitle;
ShowDigitalClock = showDigitalClock;
ShowSecondHand = showSecondHand;
ShowMilliHand = showMilliHand;
ShowTenthsHand = showTenthsHand;
ClockTimeZoneId = clockTimeZoneId;
try
{
if (!string.Equals("0", clockTimeZoneId))
{
var tzId = TimeZoneInfo.FindSystemTimeZoneById(clockTimeZoneId);
UtcOffsetTicks = tzId.BaseUtcOffset.Ticks.ToString();
}
}
catch { }
}
public Clock()
{
}
}
}
Next, I modified the EditorBase class in two methods:

public override bool ApplyChanges()
{
ClockWebPart wp = this.WebPartToEdit as ClockWebPart;
EditorPartMain partMain = this.FindControl(ID + "EditorPartMain") as EditorPartMain;
wp.Clocks = partMain.AddedClocks;
return true;
}
public override void SyncChanges()
{
EnsureChildControls();
ClockWebPart wp = this.WebPartToEdit as ClockWebPart;
EditorPartMain partMain = this.FindControl(ID + "EditorPartMain") as EditorPartMain;
partMain.AddedClocks = wp.Clocks;
partMain.Initialize();
}

With some modifications in the silverlight like height and width adjustments. This code will provide functionality to add more clocks to the webpart.

Note: For beginners of the silverlight use following trik to scale down the clock:

<Grid.RenderTransform>
<ScaleTransform x:Name=”CanvasScale” ScaleX=”.5″ ScaleY=”.5″></ScaleTransform>
</Grid.RenderTransform>

Happy sharepointing