Control Types and Data Types

Control Types

While the Videre CMS provides binding, persistance, and validation support for nearly all the common HTML controls, it would be short-sighted to think that is all the controls that would ever be needed.  Instead of picking the most popular jQuery plugin controls, instead it allows them to be easily added to your portal with a package that registers the control type.  An example of such a control is the bootstrap-tagsinput.  Here is it's control type registration

videre.UI.registerControlType('bootstrap-tagsinput',
{
   get: function (ctl) { return ctl.val(); },
   set: function (ctl, val)
   {
       ctl.tagsinput('removeAll');
       val = val != null ? val : [];
       $.each(val, function (idx, text) { ctl.tagsinput('add', text); });
       ctl.tagsinput('refresh');
   },
   init: function (ctr) { ctr.find('[data-controltype=\"bootstrap-tagsinput\"]').tagsinput(
      { confirmKeys: [13], 
        confirmOnBlur: true, 
        tagClass: function (item) { return 'btn btn-default'; } 
      }); }
});
 
The control type definition is comprised of 3 parts.  

init 

The init method will be run once per page rendering.  It is typical that any jQuery initialization logic be executed on all elements matching the controltype.

get

The location for custom logic to pull values from your custom control to be placed in our javascript object. 

set

The location for custom logic when the value is pulled from the javascript object and placed into the control.

Data Types

In order to allow the data binding, persistance, and validatoin logic to elegantly handle different datatypes the Videre CMS framework allows for extensible data types to be defined.  A sample registration looks something like this.

videre.UI.registerDataType('money', {
    isValid: function (val) { return !isNaN(val); },
    get: null,
    set: function (ctl, val)
    {
        var precision = ctl.data('precision') != null ? ctl.data('precision') : 2;
        var text = (val != null ? val : '0').toFixed(precision);
        videre.UI.setControlValue(ctl, text);
    }
});
The data type definition is comprised of 3 parts, all optional.  
 

isValid 

Allows custom logic to run to determine if value is valid.

get

The location for custom logic when the value is pulled from the control and placed into the javascript object. 

set

The location for custom logic when the value is pulled from the javascript object and placed into the control