The widget classes can be described as the building blocks of a user interface and they pretty much control everything in the user interface. The widget class is the parent class of all widgets created in Odoo.
Features of Widget Class:
1. Parent or child relationships between Widgets.
2. Extensive lifecycle management with safety features.
3. Automatic rendering with Qweb.
4. Various utility functions for interaction with the outside environment.
Widget Life cycle:
The lifecycle of the widget is as the following
1. init
2. willstart
3. rendering
4. start
5. destroy
init()
The init() function is the constructor. They initialize the widget.
init: function (parent) {
this._super(parent);
// stuff that you want to init before the rendering
},
willstart()
The willstart method is a hook that has to return a deferred value. This method will be called when the widget has been created and appending it to the DOM is under progress. This method is mainly used to fetch data from the server.
willStart: function () {
// async work that need to be done before the widget is ready
// this method should return a deferred
},
rendering()
rendering() of a widget is done automatically by the framework. The framework checks for a defined template in the widget. If a template is defined then widget key in the Qweb template is used to read the value from the widget. If no template is defined then the tag name key is read and a DOM element is created.
start()
After the rendering process is complete, the start method will be called automatically. This method is useful when we have to perform some specialized post_rendering works such as setting up a library.
start: function() {
// stuff you want to make after the rendering, `this.$el` holds a correct value
this.$(".my_button").click(* an example of event binding * );
// if you have some asynchronous operations, it's a good idea to return
// a promise in start(). Note that this is quite rare, and if you
// need to fetch some data, this should probably be done in the
// willStart method
var promise = this._rpc(...);
return promise;
},
destroy()
The destroy method would destroy the widget. This means the following operations would be performed.
1. Clean up operations
2. remove widget from component tree
3. unbinding events
When a parent widget is destroyed, the child widgets destroy method would be automatically called.
myWidget.destroy();
Inserting a widget into DOM
To insert a widget into the document object model, we can use the following methods.
appendTo()
Renders and Inserts the widget as the last child of the target.
Example:
widget.appendTo($('<div>'));
prependTo()
Renders and Insert the widget as the first child of the target.
Example:
widget.prependTo($target);
insertAfter()
Renders and Insert the widget as the preceding sibling of the target.
Example:
widget.insertAfter(this.$header);
insertBefore()
Renders and Insert the widget as the following sibling of the target.
Example:
widget.insertBefore(this.$header);
Widget Guidelines
1. Identifiers should be avoided as they limit the reusability of the components.
2. Avoid predictable CSS class names as they are likely to be used by another developer.
3. Global selectors has to be avoided.
4. HTML templating or rendering should use Qweb
5. All the components intercepting the DOM events must be inherited from the Widget.