For developers: Implement the client component for the simple widget designer

You must store the client component in a .js file in the project, where the designer resides. 

To implement the client component, perform the following:

1. Add a new .js to the project of your designer.
   You can name the file the same way as the class. 
   For example, if the class is named RotatorDesigner, name the file RotatorDesigner.js.
2. In the context menu of the .js file, click Properties.
3. In Properties pane, set the BuildAction field to EmbeddedResource.
4. Open the .js file.
5. In the .js file, create the namespace for the client code.
   This is done by calling the registerNamespace of the Type class in the following way:
   
   Type.registerNamespace("NewsRotator");

   NOTE: You must use the same namespace throughout the entire client code of this file.

6. Define the client class in the following way:
   
   NewsRotator.RotatorDesigner = function (element) {

       NewsRotator.RotatorDesigner.initializeBase(this, [element]);

   }
7. Define the prototype for the class by including the following methods:
• initialize
  This method is called when an instance of the class is created. In it, you must call the initialize method of the ControlDesignerBase class.
• dispose
  This method is called when the instance of the class is no longer used. In it, you must call the dispose method of the ControlDesignerBase class.
• refreshUI
  This method is called when the designer is opened. In it you must get an instance of the widget and populate the UI with the values of the properties of the widget.
• applyChanges
  This method is called when the changes must be applied to the widget. In it you must get an instance of the widget and set its properties to the new values in the UI.
  
• The following sample, illustrates the use of the above methods:
  
  NewsRotator.RotatorDesigner.prototype = {

      initialize: function () {

          NewsRotator.RotatorDesigner.callBaseMethod(this, 'initialize');

      },

      dispose: function () {

          NewsRotator.RotatorDesigner.callBaseMethod(this, 'dispose');

      },

      refreshUI: function () {

          var controlData = this.get_controlData();

    

          jQuery("#txtTitle").val(controlData.Title);

      },

      applyChanges: function () {

    

          var controlData = this.get_controlData();

    

          controlData.Title = jQuery("#txtTitle").val();

      },

      get_controlData: function () {

          return this.get_propertyEditor().get_control();

      },

      get_propertyEditor: function () {

          return this._propertyEditor;

      }

  }
8. Register the client class and specify its base class.
   This is done by calling the registerClass method. You must pass the Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase as the base class, like in the following example:
   
   NewsRotator.RotatorDesigner.registerClass('NewsRotator.RotatorDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);

   if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();