
本文共 14233 字,大约阅读时间需要 47 分钟。
odoo14���������������OWL(Odoo Web Library)���JavaScript���������OWL������������������������UI���������������QWeb���������������������OWL������������������������������������������������������������������������������hooks���reactivity���the autoinstantiation of subcomponents������������������������������������������������OWL������������������UI������������������������������OWL���������������������������������������������������������������������������������������form���������������������������������������������������������
- ������OWL������
- ���OWL���������������������������
- TODO: Making OWL components reactive
- ������OWL���������������
- ���form���������������OWL������
������
���������odoo������������������������������JavaScript���������������React.js���Vue.js������������������https://github.com/odoo/owl���������OWL������������������
������������
OWL������������ES6������������������������������������������ES6���������������������ES6���������������������������������������������������������������������Chrome������Firefox������������
������OWL������
������������������������OWL������������������������������������������������OWL������������������������Odoo���Web���������������
���������������������������������������������������������������������
������������������������my_library���������
������
������������������������������������������������������������������������
- ������/my_library/static/src/js/component.js���JavaScript���������������������������������:
odoo.define('my.component', function (require) { "use strict"; // Place steps 3, 4, 5 here});
- ������/my_library/views/tempaltes.xml���������xml���������������js���������
- ���������1���������js���������������OWL������������
const { Component } = owl;const { xml } = owl.tags;
- ���������1������������js���������������OWL���������������������������
class MyComponent extends Component { static template = xml`Welcome to Odoo`}
- ���������������������������������������������
owl.utils.whenReady().then(() => { const app = new MyComponent(); app.mount(document.body);});
������/������my_library���������������������������������������������������������������������������������������
���������������������������������������������������������������������������������������
������
������1���������2������������������js������������������������������������(assets)���������������������assets���������������������14������CMS������������������������������������
������3���������������OWL���������������������������������������OWL���������������������������������owl������������������������������������������������������������OWL���������������������������������Component���������������owl.tags���������xml���������OWL���������������Component���������������������������������������������������������������������������������4���������������������������MyComponent������������������������������������QWeb���������������������������������������������������������������������xml...
���������������������������������������(inline template)������������������������������QWeb��������� ���������
������QWeb������������������������������������������������������������������������������������QWeb���������
������5���������������������MyComponent������������������body������OWL���������ES6������������������������������new���������������������������mount()������������������������������������������������������������whenReady()���������������������������������������������OWL���������������������OWL���������������������������
������
OWL���odoo������������������������������������������JS���������������������������OWL������������������������
���OWL���������������������������
������������������������������������������������������������������������������������������������������������
������������������������������������������������������������������������
������
������������������������������������������������������������������������������������������������
- ������QWeb���������������icon���������
static template = xml`Welcome to Odoo`
- ������onRemove������������
class MyComponent extends Component { static template = xml`Welcome to Odoo` onRemove(ev) { this.destroy(); }}
���������������������������������
������������������������������������������������������������������������������������������������
������
������1���������������������������������������������������t-on-click������������������������������������������������������������������������������������������������������onRemove������������������������������������������������������
t-on-=" "
������������������������������������������������������������������������
t-on-mouseover="onMouseover"
���������������������������������������������������������������������OWL������������onMouseover���������
������2������������������onRemove������������������������������������������������������������������������������������destory()������������������������������������destory()������������������������JavaScript���������������destory()���OWL������������������������������������
���������������������DOM���������������������������������������������������������������������my-custom-event���������������������������t-on-my-custom-event���������������
Making OWL ������reactive
OWL���������������������������������������������������������UI���������������������������������������������������������������������������UI���������������������������������������������������������������UI���������������
������
������
���������������������������������������������������������������������������������������������������������������������������
- ������XML���������������������������������������������������������������������������������������
static template = xml``
- ���JavaScript���������������userState������:
const { Component, useState } = owl;
- ������constructor������������������������������
constructor() { super(...arguments); this.messageList = [ 'Hello World', 'Welcome to Odoo', 'Odoo is awesome', 'You are awesome too' ]; this.state = useState({ currentIndex: 0 });}
- ������������������������������������������
onNext(ev) { this.state.currentIndex++;}onPrevious(ev) { this.state.currentIndex--;}
���������������������������:
������
������1������������������XML���������������������������������������������������������������������������������������������������state������������currentIndex������������������������������������������������������������������������������t-on-click������������������������������
������2������������������useState������������������������������������������������3������������������������������(constructor)������������������������������������������������������������������������������������������������������������������������������������useState���������������state���������������state������������������UI������������������������������������������������useState������������������currentIndex������currentIndex������������UI���������������������������������
���������������������������������������������������������������������������������������������������������������������������������������https://github.com/odoo/owl/ blob/master/doc/reference/hooks.md���������������
������4������������������������������������������������������������������������������������������������������������������state���������������������UI���������������������
������OWL���������������
OWL���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������console������������������������������������������������
������
������
- ���������������(constructor)���������������
constructor() { console.log('CALLED:> constructor');...
- ������willStart������
async willStart() { console.log('CALLED:> willStart');}
- ������mounted������
mounted() { console.log('CALLED:> mounted');}
- ������willPatch������
willPatch() { console.log('CALLED:> willPatch');}
- ������patched������
patched() { console.log('CALLED:> patched');}
- ������willUnmount()������
willUnmount() { console.log('CALLED:> willUnmount');}
���������������������������
������
constructor(): ���������������������������������������������������������������������������
willStart(): ������������������������������������������������������������������������������������RPC������������������mounted(): ������������������DOM���������������������willPatch(): ���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������dom���������������������patched(): ���willPatched()���������������������������������������������������������������������������������������������������������������������������willUnmount(): ������������������������������������������������������������������������������������������������������������������������mounted���willUnmount������������������������������������������������������
������������������������������������������������������������������������OWL������������props������������������������������������������������props������������������willUpdateProps������������������������������������������������������������������������������RPC������������������
���form������������OWL������
������������������������OWL������������������������������������������form������������������������������������������������������������������������������������������������������
������������������������������������������OWL���������������������������������������������������������������������������QWeb������������������
������
- ���library.book���������������������������������������
color = fields.Integer()
- ���form������������������������������
- ���static/src/xml/qweb_tempalte.xml������������������QWeb������
- ���manifest���������������QWeb������
"qweb": [ 'static/src/xml/qweb_template.xml',],
- ���������������static/src/scss/field_widget.scss���������������SCSS���������������������������������https://github.com/ PacktPublishing/Odoo-13-Development-Cookbook-Fourth- Edition/blob/master/Chapter16/05_owl_field/my_library/ static/src/scss/field_widget.scss������������
- ������static/src/js/field_widget.js
odoo.define('my_field_widget', function (require) { "use strict"; const { Component } = owl; const AbstractField = require( 'web.AbstractFieldOwl'); const fieldRegistry = require( 'web.field_registry_owl');// Place steps 7 and 8 here});
������7���������������������������
class ColorPill extends Component { static template = 'OWLColorPill'; pillClicked() { this.trigger('color-updated', {val: this.props.pill_no}); }}
������8���������AbstractField
class FieldColor extends AbstractField { static supportedFieldTypes = ['integer']; static template = 'OWLFieldColorPills'; static components = { ColorPill }; // Add methods from step 9 here }fieldRegistry.add('int_color', FieldColor);
������9���������������
constructor(...args) { super(...args); this.totalColors = Array.from({ length: 10 }, (_, i) => (i + 1).toString());}async willStart() { this.colorGroupData = {}; var colorData = await this.rpc({ model: this.model, method: 'read_group', domain: [], fields: ['color'], groupBy: ['color'], }); colorData.forEach(res => { this.colorGroupData[res.color] = res.color_count; });}colorUpdated(ev) { this._setValue(ev.detail.val);}
������10������js���scss������������������������������
������������������������
������������������������������������������color������������������������������������������������������������������������OWL���������������������������������������������������������
������
������1���������������������������������
������2������������������form���������������3������������������QWeb������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
odoo14������widget���������OWL������������������������QWeb������������������OWL QWeb������������������QWeb ������������������������������owl="1"���������
������4������������������manifest������
������5���������SCSS������������������6���������JS���������������OWL������������������������AbstractField���fieldRegistry���AbstractField������������OWL���������������������������������������fieldRegistry���������������OWL���������������7������������������ColorPill������������������template������������������XML ������������������������������������ColorPill���������pillClicked���������������������������������������������������������������������������FieldColor���������������t-on-color-updated������������color-updated������������������������FieldColor���������������������8���9������������������FieldColor���������������AbstractField���������������������������������AbstractField���������������������������������������������������������������������������������������������components���������������������������������������������������������������������������components���������������������������������������������������willStart���������willStart������������������������������������������RPC���������������������������������������������������������������������colorUpdated���������������������������������������������������������������������������������setValue���������������������������������������������������������������������������event������������detail���������������������������������������������������fieldRegistry������������������������������������������������������������������������������������������������������������������������10���������������JavaScript���SCSS���������������������������������发表评论
最新留言
关于作者
