Implementing the features of the designer view

To implement the ContentViewDesignerView class in your view, you must override the following members:

• InitializeControls

  In this override you can access the elements of the template via the container argument.

• LayoutTemplateName

  This property returns the name of the template of the view.

• GetScriptReferences

  In this method, the script for the client component is referenced.

• GetScriptDescriptors

  In this method you can define an instance of your client class and set the desired properties to it.

• ViewTitle

  This property must return the display name of the view.

• ViewName

  This property must return the programmatic name of the view.

For more information about overriding the InitializeControls and LayoutTemplateName methods, see Referencing the template in the designer view.

You must store the client class in a javascript file in the project, where the view resides.

The file must include the following methods:

• initialize

  This method is called when an instance of the class is created. It calls the initialize method of the ContentViewDesignerView class.

• dispose

  This method is called when the instance of the class is no longer used. It calls the dispose method of the ContentViewDesignerViewclass.

• refreshUI

  This method is called when the view is opened. In it you must get an instance of the control and populate the UI with the values of the properties of the control.

• applyChanges

  This method is called when the changes must be applied to the control. In it you must get an instance of the control and set its properties to the new values in the UI.

• set_parentDesigner

  This method is used by the IDesignerViewControl interface for passing an instance of the designer to the view. Via this instance the view can access the data of the control.

To create the file, perform the following:

1. In the context menu of the Designer » Views folder, click Add » New Item...

2. In the left pane, select Visual C# Items » Web.

3. Click JScript File and in the Name input field, enter DatePickerDesignerView.

4. Open the newly created file.

5. To create the namespace for the client code, paste the following code:

   Type.registerNamespace("DatePicker.Designer.Views");

6. To define the client class, paste the following code:

   DatePicker.DatePickerDesignerView = function (element) {

       DatePicker.DatePickerDesignerView.initializeBase(this, [element]);

       this._minimumPicker = null;

       this._maximumPicker = null;

   }

7. Define the prototype for the class in the following way:

   DatePicker.DatePickerDesignerView.prototype = {

       initialize: function () {

           DatePicker.DatePickerDesignerView.callBaseMethod(this, 'initialize');

       },

       dispose: function () {

           DatePicker.DatePickerDesignerView.callBaseMethod(this, 'dispose');

       },

    

       //properties

       get_minimumPicker: function () { return this._minimumPicker; },

       set_minimumPicker: function (value) { this._minimumPicker = value },

       get_maximumPicker: function () { return this._maximumPicker; },

       set_maximumPicker: function (value) { this._maximumPicker = value },

    

       // implementation of IDesignerViewControl: Forces the control to refersh from the control Data

       refreshUI: function () {

           var controlData = this.get_controlData();

           var maximum = Sys.Serialization.JavaScriptSerializer.deserialize(controlData.Maximum);

           this._maximumPicker.set_selectedDate(maximum);

           var minimum = Sys.Serialization.JavaScriptSerializer.deserialize(controlData.Minimum);

           this._minimumPicker.set_selectedDate(minimum);

       },

    

       // implementation of IDesignerViewControl: forces the designer view to apply the changes on UI to the control Data

       applyChanges: function () {

           var controlData = this.get_controlData();

           var maximumDate = (new Date(this._maximumPicker.get_selectedDate())).format("MM/dd/yyyy h:mm:ss");

           var minimumDate = (new Date(this._minimumPicker.get_selectedDate())).format("MM/dd/yyyy h:mm:ss");

    

           controlData.Maximum = Sys.Serialization.JavaScriptSerializer.serialize(GetUserPreferences().sitefinityToUniversalDate(maximumDate));

           controlData.Minimum = Sys.Serialization.JavaScriptSerializer.serialize(GetUserPreferences().sitefinityToUniversalDate(minimumDate));

       },

    

       // gets the javascript control object that is being designed

       get_controlData: function () {

           return this.get_parentDesigner().get_propertyEditor().get_control();

       },

       get_parentDesigner: function () {

           return this._parentDesigner;

       },

    

       // IDesignerViewControl: sets the reference fo the propertyEditor control

       set_parentDesigner: function (value) {

           this._parentDesigner = value;

       }

   }

8. Register the client class and specify its base class in the following way:

   DatePicker.DatePickerDesignerView.registerClass('DatePicker.Designer.Views.DatePickerDesignerView', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IDesignerViewControl);

9. Save the file.

10. In the Properties pane of the DatePickerDesignerView.js file, change the Build Action to Embedded Resource.

To create the namespace for the client code you call the registerNamespace of the Type class.

NOTE: The same namespace must be used throughout the entire client code in this file.

In the prototype you override the methods to implement IDesignerViewControl and add properties for the RadDatePicker controls. You register the client class by calling the registerClass method.

You must reference the client component from the view class. You do this in the override of the GetScriptReference method. In it you create a script references for your client component. When creating a reference, you must specify the name of the embedded resource that contains the client component and the assembly it resides in. In the GetScriptDescriptors method you specify a script descriptors for the view in the following way.

Next, you must create the multi view designer. For more information, see Creating the multi view designer.