参考文档
Building Interface Extensions — odoo 10.0 documentation odoo官网的开发文档
widget视图
- 目前写的是非field标签属性widget
- 主要是熟悉下odoo前端widget的基本使用
- 根据官方文档的例子实现的widget未知原因一直不能成功运行，有人知道原因咩
- 使用的是odoo.define声明的方式
准备阶段
当前目录结构如图：
主要代码在js文件中，src-xml内文件主要存放qweb模板
- 首先把自己创建的xml文件都在manifest中声明好，qweb模板单独声明
- 将js，css文件加载到odoo中
<template id="assets_backend" name="demo_assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/demo/static/src/css/demo.css"/>
<script type="text/javascript" src="/demo/static/src/js/demo.js"/>
</xpath>
</template>
- 页面调用widget视图，在ir.actions.client中声明一个action，tag标签绑定widget注册成action的名字，然后与菜单中的action绑定
<record id="action_home_page" model="ir.actions.client">
<field name="name">demo home</field>
<field name="tag">demo_home_page</field>
</record>
创建一个widget
- widget主要开发都在js文件中
-
开始按照官方文档介绍的方法创建widget
以odoo.模块名=function的方式声明本模块的作用域
函数参数有两个：
instance：odoo web的当前实例 local：声明当前模块下的变量或方法
odoo提供了一个虚拟class的实现，创建class可以通过instance.web.Class.extend方式。
创建widget也需要继承widget类，最后需要在web client的事件中注册，在页面才能调用。
但是按照文档描述注册widget，页面点击触发，一直提示找不到这个action。
不知道是写错了，还是10的前端有变化。通过查看源码，发现可以使用新的define方式声明。
不成功代码 - 下面主要介绍新的声明方式创建widget
这种写法更适用于模块化前端编程，使用require.js进行前端开发的会比较熟悉
首先通过odoo.define("namespaceName",function(require){});声明当前作用域适用范围
然后通过require引入要使用的js模块。
例如：
var core = require('web.core');
var Model = require('web.Model');
var Widget = require('web.Widget');
var data = require('web.data');
下面就可以通过继承创建一个widget了
继承于odoo-10.0/addons/web/static/src/js/framework/widget.js
具体可以重写的方法属性，可以找到上面的js文件参照
主要属性有className-widget创建的dom元素class，events-widget的事件表，template-widget的qweb模板
主要方法有init-初始化实例方法，start-widget自动调用方法
最后在注册一下wdget，页面中才能调用
这样一个基础的widget页面就可以使用了
会在页面中显示
一个div .calss=oe_demo_homepage 内容为homepage widget
qweb模板的使用
短暂接触odoo来看，目前前端页面都是通过qweb来动态渲染界面的，qweb拥有自己的特有的模板标签<t></t>，通过该标签可以做到使用widget/controllers传递的变量值(感觉和java的jsp差不多呀-。-)
- 与widget结合，简单使用模板
记录下在widget中使用qweb模板。很简单，直接把模板名赋值到widget继承属性的template下就可以了。当页面调用widget的时候，就会渲染qweb模板内容（html片段）。
首先随便新建一个xml文件作为qweb模板文件使用，内容如下
不要忘记在配置文件中，声明xml
template qweb的模板内容根内只能存在一个根节点。也就是不能并行存在多个div在templates子级路径上。否则会出现使用this.$el.find找不到节点对象的情况
t-name就是你要使用的qweb的标志名称了。在t标签内可以写想要的html内容了。
t-esc可以调用上下文的变量，当前示例是与widget结合的模板，所以可以用过widget.name(widget内的this.name)渲染出变量值。
然后在js文件中通过widget调用当前模板
这样一个qweb模板与widget结合的简单使用就完成了。
t标签常用的属性还有一些条件表达式，t-if，t-foreach t-as等，具体用法参考官方文档内容。
因为odoo自带了jquery与jquery ui等第三方库，可以在js中直接使用。
- qweb与controller结合使用
本来不知道这种用法的，但是想把百度地图嵌入odoo中，发现直接assert方法并不能加载外链文件，通过查看odoo自带模块源码，发现qweb模板内直接写个html页面，可以通过controller直接出来，但是页面及js就需要自己写了。
有空会写一下百度地图在odoo中显示的内容，具体使用就在那里写吧。
odoo前端应该是基于backbone.js进行设计的，源码中使用了大量的backbone api，有underscore，backbone基础的，在使用odoo前端会更顺手。
