在odoo二次开发中,会经常有一些个性化的前端界面需求,而odoo自身的ui样式并不支持,这时候就需要开发人员自定义widget组件满足界面需求,odoo前端界面就是由许多widget渲染组成,包括字段组件,action动作,以及一些自定义界面都是通过继承widget进行拓展而来,可以说widget是odoo的核心组成之一,源码中定义js文件存放目录为web/static/src/js/core/widget.js,下面就来介绍下widget.js中几个比较重要属性和方法。

template

可以看到widget模块通过继承core.class并进行扩展,其中有个属性template十分重要,它表示的是你自定义的组件所使用的html模板,此模板通过xml配置,例如colorpicker组件的template属性指定的是web.colorpicker,在colorpicker.xml中定义 对应xml里t-name包裹的html结构

在组件实例化时会通过qweb引擎渲染此模板最终呈现到前端页面

如同python类一样,这里的init方法通常是在组件被实例化的时候执行,做一些初始化的操作,是组件生命周期中第一个执行的方法

willStart

此方法在组件渲染完成之前调用,通过注释可以知道它将在init和start方法之间执行,他返回一个延迟对象,主要功能是执行一些异步调用,解析文件或获取一些组件所需要的数据等

start

start方法在组件渲染完成后调用,同样返回一个延迟对象给调用方,此方法中可以通过this.$el拿到渲染完成的组件,需要改变结构或者动态渲染的结构可以直接在此处操作,（在此之前无法操作组件结构,因为组件dom还未渲染完成）

destroy

用于组件的销毁,直接从dom树上移除,并且销毁附着在改组件上的所有其他组件

appendTo

该方法将组件添加到目标jquery对象上,如this.$el.appendTo('body')

attachTo

将组件挂载到某个dom节点之上,这也是odoo视图中可以通过xml字段中加入widget实现不同字段ui的核心方法，如 <field name="message_follower_ids" widget="mail_followers"/> 类似的方法还有insertAfter,insertBefore,replace,prependTo...等等方法都是往dom树上添加组件,根据需求自由调用

renderElement

此方法是渲染xml的核心,内部调用qweb引擎渲染在template中配置的xml模板,最终呈现为前端组件的html结构

以上就是widget核心方法,通过对这些方法的掌握,开发人员可以自由的定制ui界面,在后面的章节中我们将通过实际案例来详细介绍强大的widget使用方法。