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.
We want to move toolbar around the screen but the existed methods don't let us to make this.
Adding some extra methods.
For you clearer understanding the technique of 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 ('init', 'select',..).
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).
There are 2 types of binding:
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 it a new functionality |
Now, details.
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:
What's else?
Tally up an intermediate total - early binding will be to the point for direct component building (inheritance) and creating custom components.
Late binding refers when a base class contains a function which must behave itself in derived classes differently.
var obj = new dhx.ui.toolbar(config); dhx.extend(obj, dhx.Movable);
Some words concerning a new object and the type of binding as well:
In early versions just late binding was available ( extend is used for component binding). 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 difficult as it could seem in the beginning.
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.
In the 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.$ready.push(this._some_method); }, _some_method:function(){ ... will be called after setting parser ... } }, dhx.Config);
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