參考文檔
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前端會更順手。
