DHTMLX Touch documentation

How to extend the existed functionality of the components?

While creating the DHTMLX components we tried to take into consideration all the features you may need during development. But every eventuality can’t be provided for and you can face the situation when some extra functionality must be added. And in this article we'll show you simply, shortly and clearly how to make this.

As a 'guinea-pig' we chose toolbar and its extra functionality will be the possibility to move around the screen.

Problem

We want to move toolbar around the screen but the existed methods don't let us to make this.

Solution

Adding some extra methods.

Implementation

For you clearer understanding the technique of the adding, we'll start from the very beginning - the nature of all the components.
Toolbar, as any other component, are based on interfaces and their inheritance.

Interface is a small class that presents some functionality. It has some name (in our example - 'Selectable') and a number of methods.

dhx.Selectable={
  _init:function(){
  ...
  },
  select:function(id){
  ...
  }
}

A pure component contains just code that links him with interfaces. All the methods and properties it inherits. So, when you’re calling some method, component addresses to an interface and take the appropriate method. As usual, this addressing is implemented via a mechanism named as binding.
And here you must be attentive: exactly using binding you can add the desired features (either an interface or a single method).

Binding

There are 2 types of binding:

  • Early
  • Late

Shortly, we can characterize them as following:

Early binding
1. We add a new functionality
2. We create an object that will have these new-created features
Late binding
1. We create an object
2. We add to him a new functionality

Now, details.

Early binding

It’s a more general way of inheritance and includes the direct binding of the appropriate methods or properties.

mytoolbar = dhx.proto({dhx.Movable},dhx.ui.toolbar);
var obj = new mytoolbar(config);

Some words concerning a new object:

  • The object calls _init methods of all the derived interfaces(classes) starting from the base class.
  • If one of the derived classes of the object is dhtml.Config - the function _parseSettings is called (configuration triggers are activated).
  • If the constructor contains afterInit structures, an object calls them starting from the base class.

What's else?

  • The object can inheritance several interfaces.
  • Inheritance methods won’t overwrite the existed methods with the same name.

Tally up an intermediate total - early binding will be to the point for direct component building (inheritance) and creating custom components.

Late binding

Late binding refers when a base class contains a function which must behavior itself in derived classes differently.

var obj = new dhx.ui.toolbar(config);
dhx.extend(obj, dhx.Movable);

It’s also not a usual toolbar - you can move it through a page.

Some words concerning a new object and the type of binding as well:

  • The object calls just _init method of the derived class.
  • The object constructor has only two parameters
  • Inheritance methods overwrite the existed methods with the same name

In early versions just late binding was available ( extend is used for component building). But now, when you dispose the both types, we recommend to use early binding. So, your toolbar is movable now. As you've seen it's not so diffucult as it could seem in the beggining.

The given information will be enough to force any component behaves as you like. But let's consider a little more: some scenarios that can be useful for you while developing.

Calling the methods out of a constructor

In code snippets showed above, methods are called directly in the constructor. But you can need to call some method after component configuration.
In that case the following code will be to the point:

var obj = dhx.proto({
  _init:function(){
    ...
    this._after_init.push(this._some_method);
  },
  this._some_method:function(){
     ... will be called after setting parser  ...
  } 
}, dhx.Config);

Default interface settings

Any interface can contain default settings which it processes.

You can specify these settings:

var some = {
  defaults:{
    height:120
  }
};
var other = dhx.proto({
  defaults:{
    width:240
  }
}, some);
//(new other()).defaults.height == 120