Class:
Before ECMAScript 6 classes were available, Odoo was created. In ECMAScript 5, defining a function and adding methods to the prototype object is the normal method for defining a class. This is fine, but when we want to use inheritance or mixins, it gets a little complicated. These factors led Odoo to adopt its own class system, which was modeled after John Resig's.
The file class.js in the directory web. the class contains the base Class.
Creating subclass:
Let's discuss how classes are made. The extend method is the primary mechanism (this is more or less the equivalent of extending in ES6 classes).
var Class = require('web.Class');
var Name = Class.extend({
init: function () {
// define your function
},
func1: function () {
// define function
},
});Inherits a class
The ability to inherit from an existing class is useful. Use the extend method on the superclass to accomplish this. The framework will covertly rebind a special method whenever a method is called: _super to the method being called right now. We can use this because of this. Whenever we need to call a parent method, we use _super.
var Name = require('web.Name');
var value = Name.extend({
move: function () {
this.function1();
this._super.apply(this, arguments);
},
function1: function () {
console.log('heeeloo');
// define function
},
});
var vals = new value();
vals.move()Mixin:
A class that offers reusable method implementations is referred to in Python as a mixin. Mixins simply group a number of methods for reuse. The Odoo platform also supports the use of this capability. Inheritance enables mixins, which are abstract models, to offer valuable functionality. The database does not actually include a representation of them. They instead offer a selection of features that can be combined with those of other models. A number of mixins are included by default with the Odoo addons; some of the more popular ones are "mail. thread," "mail. activity. mixin," "rating. mixin," etc.
var Name = require('web.Name');
var keyMixin = {
key: function () {
console.log('hiii...');
},
};
var name = Name.extend(keyMixin, {
function2: function () {
console.log('hii');
},
});The name class in this illustration is a subclass of Name but also incorporates the KeyMixin
Patching an existing class
Although it is uncommon, there are situations when we must replace one class with another.
The objective is to have a method for changing a class and all existing/future instances.
The include technique is used for this.
var name = require('web.name');
name.include({
func1: function () {
this._super.apply(this, arguments);
},
});Widget Class
The Widget class is a crucial component of the user interface. A widget essentially controls everything in the user interface. The web module defines the Widget class. In widget.js, type widget.
Features:
Widgets have parent-child relationships (PropertiesMixin)
comprehensive safety features for lifetime management (e.g. automatically destroying children's widgets during the destruction of a parent)
Use qweb for automatic rendering
different utilitarian features to aid interaction with the outer world.
Event System
Currently, Odoo supports two different event systems: a basic system that only allows listener addition and event triggering, and a more comprehensive system that also allows events to "bubble up."
The EventDispatcherMixin, which can be found in the mixins.js file, implements both of these event management systems. The Widget class contains this mixin.
The base Event system
on this is utilized to sign a listener up for an occasion.
off: effective for removing the events listener
once: In order to register a listener who will only be called once, use this method.
trigger: set off a situation. Each listener will then be called as a result.
var Widget = require('web.Widget');
var Counter = require('myModule.Counter');
var MyWidget = Widget.extend({
start: function () {
this.counter = new Counter(this);
this.counter.on('valuechange', this, this._onValueChange);
var def = this.counter.appendTo(this.$el);
return Promise.all([def, this._super.apply(this, arguments)]);
},
_onValueChange: function (val) {
// do something with val
},
});
// in Counter widget, we need to call the trigger method:
... this.trigger('valuechange', someValue);Extended Event System
A more sophisticated system that imitates the DOM events API is the custom event widgets. The component tree will "bubble up" whenever an event is triggered until it reaches the root widget or is halted.
trigger_up: Using this technique, a tiny OdooEvent will be created and sent to a component. Keep in mind that it will begin with the element that caused the event.
custom_events: It is the Odoo events counterpart of the event dictionary.
OdooEvent is a fairly straightforward class. It contains three public attributes: name (the name of the event), data, and target (the widget that caused the event) (the payload). Additionally, it has the methods is stopped and stopPropagation.
The previous example can be updated to use the custom event system:
var Widget = require('web.Widget');
var Counter = require('myModule.Counter');
var MyWidget = Widget.extend({
custom_events: {
valuechange: '_onValueChange'
},
start: function () {
this.counter = new Counter(this);
var def = this.counter.appendTo(this.$el);
return Promise.all([def, this._super.apply(this, arguments)]);
},
_onValueChange: function(event) {
// do something with event.data.val
},
});
// in Counter widget, we need to call the trigger_up method:
... this.trigger_up('valuechange', {value: someValue});These are some methods of creating classes and events in javascript functions. We can use these methods in our functions and other related processes.