【odoo14】第十六章、odoo web库(OWL)
发布日期:2021-05-09 08:40:30 浏览次数:19 分类:博客文章

本文共 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���������

������

������������������������������������������������������������������������

  1. ������/my_library/static/src/js/component.js���JavaScript���������������������������������:
odoo.define('my.component', function (require) {	"use strict";	// Place steps 3, 4, 5 here});
  1. ������/my_library/views/tempaltes.xml���������xml���������������js���������
  1. ���������1���������js���������������OWL������������
const { Component } = owl;const { xml } = owl.tags;
  1. ���������1������������js���������������OWL���������������������������
class MyComponent extends Component {	static template = xml`		
Welcome to Odoo
`}
  1. ���������������������������������������������
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���������������������������

������������������������������������������������������������������������������������������������������������

������������������������������������������������������������������

������

������

������������������������������������������������������������������������������������������������

  1. ������QWeb���������������icon���������
static template = xml`	
Welcome to Odoo
`
  1. ������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���������������

������

������

���������������������������������������������������������������������������������������������������������������������������

  1. ������XML���������������������������������������������������������������������������������������
static template = xml`	
`
  1. ���JavaScript���������������userState������:
const { Component, useState } = owl;
  1. ������constructor������������������������������
constructor() {	super(...arguments);	this.messageList = [		'Hello World',		'Welcome to Odoo',		'Odoo is awesome',		'You are awesome too'	];	this.state = useState({ currentIndex: 0 });}
  1. ������������������������������������������
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������������������������������������������������

������

������

  1. ���������������(constructor)���������������
constructor() {	console.log('CALLED:> constructor');...
  1. ������willStart������
async willStart() {	console.log('CALLED:> willStart');}
  1. ������mounted������
mounted() {	console.log('CALLED:> mounted');}
  1. ������willPatch������
willPatch() {	console.log('CALLED:> willPatch');}
  1. ������patched������
patched() {	console.log('CALLED:> patched');}
  1. ������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������������

������

������

  1. ���library.book���������������������������������������
color = fields.Integer()
  1. ���form������������������������������
  1. ���static/src/xml/qweb_tempalte.xml������������������QWeb������
  1. ���manifest���������������QWeb������
"qweb": [	'static/src/xml/qweb_template.xml',],
  1. ���������������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������������
  2. ������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������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������
���������������������������������������
������������������������active���pill_no���������������������������������������������������props������������������t-on-color-updated���������������������������������������������������

������������

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���������������������������������

上一篇:【odoo14】第六章、管理模块数据
下一篇:【odoo14】第五章、服务器侧开发-基础

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2025年04月21日 20时14分48秒