Odoo 自定义Widgets 基础教程(章节1)-阿里云开发者社区

开发者社区> openerp.hk> 正文

Odoo 自定义Widgets 基础教程(章节1)

简介:
+关注继续查看

大家好,

此次,我们主要讲解 Odoo 中的Widgets。

网上、论坛里很多提及Widget的文章,但很少说Odoo自定义Widget 是如何实现的,这一直是大家所苦恼的地方。本章,将对Odoo中的Widget 进行基础讲解。

首先, Widget【挂件】产生的目的,是为了方便后端开发人员在不熟悉JavaScripts 的情况下,能快速地实现前端视图展示。

我们来看看Widget 所在的目录:

/addons/web/src/static/src/js/core/widget.js

其次,要理解Widget 原理,就是通过js把现有视图或者DOM一类对象进行渲染。所有代码都在前端!就是说,视图是通过客户端来渲染完成的!

这里最核心的一段代码:

var Widget = core.Class.extend(mixins.PropertiesMixin, ServicesMixin,{ 

.......定义各种方法.......

}

方法说明及解释如下:

init: function (parent)
构造部件并设置父节点;

*父节点的意义在于将当前实例绑定到给定的小部件实例。可以为空。当通过调用destroy方法时,当此挂件实例将被摧毁。

willStart: function ()
方法在“初始化 init”和“开始”之间调用。执行渲染和启动方法所需的异步调用。

destroy: function ()
摧毁当此挂件实例

appendTo: function (target)
渲染当前的小部件并将其附加到给定的jQuery对象或控件上。
target 为jQuery对象或控件实例。

prependTo: function (target) {},
渲染当前的小部件并将其预置到给定的jQuery对象或控件上。
target 为jQuery对象或控件实例。
append()和prepend()的作用(区别)

append()用于在被选元素的结尾插入元素。
prepend()用于在被选元素的开头插入元素。

看下面的HTML代码

<div id="test">
  <p>a</p>
</div>

使用 append( ) 和 prepend( )添加元素

$(document).ready(function(){
    $("#test").append("<p>b</p>") //使用append()添加 b 段落
    $("#test").prepend("<p>c</p>") //使用 prepend()添加 c 段落
})

效果如下

<div id="test">
<p>c</p>
<p>a</p>
<p>b</p>
</div>

insertAfter: function (target) { },

insertAfter()函数用于将所有匹配元素插入到指定元素之后的位置:

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>
<!--以上是jQuery代码执行前的html内容-->
<script type="text/javascript">
$('<!--插入到p元素之后的位置-->').insertAfter( "p" );
// 其返回值就是匹配插入内容(两个注释元素'<!--插入到p元素之后的位置-->')的jQuery对象
</script>
<!--以下是jQuery代码执行后的html内容-->

<p>段落文本1<span></span></p><!--插入到p元素之后的位置-->
<p>段落文本2<span></span></p><!--插入到p元素之后的位置-->

insertBefore: function (target) { }

insertBefore()函数用于将所有匹配元素插入到指定元素之前的位置:

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>
<!--以上是jQuery代码执行前的html内容-->
<script type="text/javascript">
$('<!--插入到p元素之前的位置-->').insertBefore( "p" );
// 其返回值就是匹配插入内容(两个注释元素'<!--插入到p元素之前的位置-->')的jQuery对象
</script>
<!--以下是jQuery代码执行后的html内容-->

<!--插入到p元素之前的位置--><p>段落文本1<span></span></p>
<!--插入到p元素之前的位置--><p>段落文本2<span></span></p>

attachTo: function (target) { }
将当前挂件附加到DOM元素上
【这也是odoo field中添加 widgets 后,可以对字段进行渲染的核心】

var self = this;
        this.setElement(target.$el || target);
        return this.willStart().then(function () {
            return self.start();
        });

replace: function (target) {}
渲染当前窗口挂件并替换给定的jQuery对象

start: function () {}

此方法一般是在渲染完成后调用。主要用于绑定动作,执行异步操作,调用动作等。

一般来说,此方法应该返回一个可以传递到$.when()的对象来通知调用方这个小挂件已经初始化

renderElement: function () {},
replaceElement: function ($el) { }
setElement: function (element) {}

大同小异,最后三种方法留给大家去探索。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Flutter 56: 图解自定义 BubbleWidget 气泡插件
0 基础学习 Flutter,第五十六步:尝试一下自定义气泡插件!
2665 0
Odoo自定义报表 - 浅析
大家好, 在Odoo(原OpenERP 开源ERP)架构中,有自定义报表开发【Custom Report Engine】这一功能,但无论在海外还是国内的网站上很难找到相关的解释与介绍。所以,我们整理了相关开发介绍至本博文中。
4871 0
uni-app自定义返回逻辑教程
自 HBuilderX v1.1.0 起,uni-app 的页面新增 onBackPress(event) 生命周期函数。 onBackPress(event) 返回 event ={form: backbutton | navigateBack} 说明 当用户进行以下操作时,会触发该函数: A...
6152 0
《OdooERP应用与开发案例教程》试读:第二章-PostgreSQL概述
文/开源智造联合创始人老杨 本文来自《OdooERP应用与开发案例教程》的试读章节。书籍尚未出版,请勿转载。欢迎您反馈阅读意见。 PostgreSQL是Odoo支持的数据库。PostgreSQL是起源于大学的一个历史很长的开源数据库系统。
1568 0
3.3 自定义控件基础 之 View的绘制
当测量好了一个View之后,我们就可以简单地重写onDraw()方法,并在Canvas对象上来绘制所需要的图形。首先我们来了解一下利用系统2D绘图API所必须要使用到的Canvas对象。
554 0
QuickPager asp.net 分页控件、表单控件等自定义控件下载 和介绍 【2009.09.07更新】
  最新下载地址: 自然框架的源代码、Demo、数据库、配置信息管理程序下载(2010.01.25更新)     QuickControl web控件集包含的控件 QuickControl web控件集——基本控件: 控件名称 说明 详细介绍 MyTextBox ...
960 0
+关注
openerp.hk
OpenERP.HK 国际业务覆盖老挝、加拿大、美国、印度、韩国等地,国内业务覆盖福建、重庆、四川、广州、上海、宁波、陕西、深圳、山东、云南等城市。 2016 年,OpenERP.HK 获中国电子报《成都市信息消费优秀解决方案》 2017年6月,上线saas平台,提供3000
11
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载