Basic HelloWorld Widget with ControlDesigner for Sitefinity 4.0

HelloWorld.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HelloWorld.ascx.cs" Inherits="SitefinityWebApp.Widgets.HelloWorld.HelloWorld" %>

<p>Hello <asp:Literal ID="NameLiteral" runat="server" />, how are you?</p>

HelloWorld.ascx.cs

using System;
using Telerik.Sitefinity.Web.UI.ControlDesign;

namespace SitefinityWebApp.Widgets.HelloWorld
{
	/// <summary>
	/// Sitefinity "Hello World" Widget
	/// </summary>
	[ControlDesigner(typeof(HelloWorldDesigner)), PropertyEditorTitle("Hello World")]
	public partial class HelloWorld : System.Web.UI.UserControl
	{
		/// <summary>
		/// Gets or sets the name.
		/// </summary>
		/// <value>
		/// The name.
		/// </value>
		public string Name { get; set; }

		/// <summary>
		/// Handles the Load event of the Page control.
		/// </summary>
		/// <param name="sender">The source of the event.</param>
		/// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
		protected void Page_Load(object sender, EventArgs e)
		{
			NameLiteral.Text = Name;
		}
	}
}

HelloWorldDesigner.ascx

<div class="sfContentViews">
    <div id="RotatorOptions">
        <div>
            <div id="groupSettingPageSelect">
                <ul class="sfTargetList">
                    <li>
                        <label for="Name" class="sfTxtLbl">
                            Your Name</label>
                        <input type="text" id="Name" class="sfTxt" />
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

HelloWorldDesigner.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Telerik.Sitefinity.Web.UI.ControlDesign;
using System.Web.UI;

namespace SitefinityWebApp.Widgets.HelloWorld
{
	/// <summary>
	/// Widget Control Designer for the "Hello World" Widget
	/// </summary>
	public class HelloWorldDesigner : ControlDesignerBase
	{
		/// <summary>
		/// Initializes the controls.
		/// </summary>
		/// <param name="container">The container.</param>
		protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
		{
			base.DesignerMode = ControlDesignerModes.Simple;
		}

		private string _layoutTemplatePath = "~/Widgets/HelloWorld/HelloWorldDesignerTemplate.ascx";
		/// <summary>
		/// Gets or sets the layout template path.
		/// </summary>
		/// <value>
		/// The layout template path.
		/// </value>
		public override string LayoutTemplatePath
		{
			get { return _layoutTemplatePath; }
			set { _layoutTemplatePath = value; }
		}

		private string _scriptPath = "~/Widgets/HelloWorld/HelloWorldDesigner.js";
		/// <summary>
		/// Gets or sets the designer javascript path.
		/// </summary>
		/// <value>
		/// The designer javascript path.
		/// </value>
		public string DesignerScriptPath
		{
			get { return _scriptPath; }
			set { _scriptPath = value; }
		}

		/// <summary>
		/// Gets the name of the layout template.
		/// </summary>
		/// <value>
		/// The name of the layout template.
		/// </value>
		protected override string LayoutTemplateName
		{
			get { return "IGNORE"; }
		}

		/// <summary>
		/// Gets the script references.
		/// </summary>
		/// <returns></returns>
		public override IEnumerable<ScriptReference> GetScriptReferences()
		{
			// get existing scripts
			var scripts = base.GetScriptReferences() as List<ScriptReference>;
			if (scripts == null) return base.GetScriptReferences();

			// add widget designer script
			scripts.Add(new ScriptReference(DesignerScriptPath));
			return scripts.ToArray();
		}
	}
}

HelloWorldDesigner.js

Type.registerNamespace("SitefinityWebApp.Widgets.HelloWorld");

SitefinityWebApp.Widgets.HelloWorld.HelloWorldDesigner = function (element) {
	SitefinityWebApp.Widgets.HelloWorld.HelloWorldDesigner.initializeBase(this, [element]);
}

SitefinityWebApp.Widgets.HelloWorld.HelloWorldDesigner.prototype = {
	initialize: function () {
		SitefinityWebApp.Widgets.HelloWorld.HelloWorldDesigner.callBaseMethod(this, 'initialize');
	},
	dispose: function () {
		SitefinityWebApp.Widgets.HelloWorld.HelloWorldDesigner.callBaseMethod(this, 'dispose');
	},
	refreshUI: function () {
		// initialize property getter
		var data = this._propertyEditor.get_control();

		// bind properties
		jQuery("#Name").val(data.Name);
	},
	applyChanges: function () {
		// initialize property setter
		var controlData = this._propertyEditor.get_control();

		// set property values
		controlData.Name = jQuery("#Name").val();
	}
}

SitefinityWebApp.Widgets.HelloWorld.HelloWorldDesigner.registerClass('SitefinityWebApp.Widgets.HelloWorld.HelloWorldDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Thanks for the easy to understand example. Should HelloWorldDesigner.ascx be named HelloWorldDesignerTemplate.ascx?