参考文档

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前端会更顺手。