The following sections of this tutorial will show how a heading component’s Text property can be customised, in a way that the default text input field will be kept, but by the end of this example, there will be a limit to the number of characters entered for the heading text, and an alert will be displayed when the limit is reached. In order to do this, we have to develop a new Property Editor.

Let’s create our custom Property Editor class, by extending the PropertyEditor class, which contains the most basic data and behaviours needed to create a new Property Editor for a Framework Component. All the code needed to compile our very first Property Editor is shown below.
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Web.UI.HtmlControls; 
using System.Web.UI; 
using Seeems.Cms.Content; 
using Seeems.Framework.Xml; 
namespace Seeems.Framework.UI.Design { 
   public class CustomPropertyEditor : PropertyEditor { 
   // members declared within the newly created PropertyEditor type 
   } 
}
In order to function properly, the newly created Property Editor class must override some base methods, as well as provide values for some fields. The necessary methods, defined in the PropertyEditor base class, that must be overriden in our custom Property Editor class are:
  1. GetSupportedTypes()
  2. ParseValue()
  3. RenderInput()

They provide a mechanism for specifically customising the behaviour and display of a component property. We are going to take a look at the most simple declarations that would enable the newly created Property Editor to function properly.