參考文檔
Building Interface Extensions — odoo 10.0 documentation odoo官網(wǎng)的開發(fā)文檔
widget視圖
- 目前寫的是非field標簽屬性widget
- 主要是熟悉下odoo前端widget的基本使用
- 根據(jù)官方文檔的例子實現(xiàn)的widget未知原因一直不能成功運行，有人知道原因咩
- 使用的是odoo.define聲明的方式
準備階段
當前目錄結(jié)構(gòu)如圖：
主要代碼在js文件中棍丐，src-xml內(nèi)文件主要存放qweb模板
- 首先把自己創(chuàng)建的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>
- 頁面調(diào)用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>
創(chuàng)建一個widget
- widget主要開發(fā)都在js文件中
-
開始按照官方文檔介紹的方法創(chuàng)建widget
以odoo.模塊名=function的方式聲明本模塊的作用域
函數(shù)參數(shù)有兩個：
instance：odoo web的當前實例 local：聲明當前模塊下的變量或方法
odoo提供了一個虛擬class的實現(xiàn)罪既，創(chuàng)建class可以通過instance.web.Class.extend方式。
創(chuàng)建widget也需要繼承widget類铡恕，最后需要在web client的事件中注冊琢感，在頁面才能調(diào)用。
但是按照文檔描述注冊widget探熔，頁面點擊觸發(fā)驹针，一直提示找不到這個action。
不知道是寫錯了诀艰，還是10的前端有變化柬甥。通過查看源碼，發(fā)現(xiàn)可以使用新的define方式聲明其垄。
不成功代碼 - 下面主要介紹新的聲明方式創(chuàng)建widget
這種寫法更適用于模塊化前端編程苛蒲，使用require.js進行前端開發(fā)的會比較熟悉
首先通過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');
下面就可以通過繼承創(chuàng)建一個widget了
繼承于odoo-10.0/addons/web/static/src/js/framework/widget.js
具體可以重寫的方法屬性捉捅，可以找到上面的js文件參照
主要屬性有className-widget創(chuàng)建的dom元素class撤防，events-widget的事件表，template-widget的qweb模板
主要方法有init-初始化實例方法棒口，start-widget自動調(diào)用方法
最后在注冊一下wdget寄月，頁面中才能調(diào)用
這樣一個基礎的widget頁面就可以使用了
會在頁面中顯示
一個div .calss=oe_demo_homepage 內(nèi)容為homepage widget
qweb模板的使用
短暫接觸odoo來看，目前前端頁面都是通過qweb來動態(tài)渲染界面的无牵，qweb擁有自己的特有的模板標簽<t></t>漾肮，通過該標簽可以做到使用widget/controllers傳遞的變量值(感覺和java的jsp差不多呀-。-)
- 與widget結(jié)合茎毁，簡單使用模板
記錄下在widget中使用qweb模板克懊。很簡單忱辅，直接把模板名賦值到widget繼承屬性的template下就可以了。當頁面調(diào)用widget的時候谭溉，就會渲染qweb模板內(nèi)容（html片段）墙懂。
首先隨便新建一個xml文件作為qweb模板文件使用，內(nèi)容如下
不要忘記在配置文件中扮念，聲明xml
template qweb的模板內(nèi)容根內(nèi)只能存在一個根節(jié)點损搬。也就是不能并行存在多個div在templates子級路徑上。否則會出現(xiàn)使用this.$el.find找不到節(jié)點對象的情況
t-name就是你要使用的qweb的標志名稱了柜与。在t標簽內(nèi)可以寫想要的html內(nèi)容了巧勤。
t-esc可以調(diào)用上下文的變量，當前示例是與widget結(jié)合的模板弄匕，所以可以用過widget.name(widget內(nèi)的this.name)渲染出變量值颅悉。
然后在js文件中通過widget調(diào)用當前模板
這樣一個qweb模板與widget結(jié)合的簡單使用就完成了。
t標簽常用的屬性還有一些條件表達式迁匠，t-if剩瓶，t-foreach t-as等，具體用法參考官方文檔內(nèi)容柒瓣。
因為odoo自帶了jquery與jquery ui等第三方庫儒搭，可以在js中直接使用。
- qweb與controller結(jié)合使用
本來不知道這種用法的芙贫，但是想把百度地圖嵌入odoo中搂鲫，發(fā)現(xiàn)直接assert方法并不能加載外鏈文件，通過查看odoo自帶模塊源碼磺平，發(fā)現(xiàn)qweb模板內(nèi)直接寫個html頁面魂仍，可以通過controller直接出來，但是頁面及js就需要自己寫了拣挪。
有空會寫一下百度地圖在odoo中顯示的內(nèi)容擦酌，具體使用就在那里寫吧。
odoo前端應該是基于backbone.js進行設計的菠劝，源碼中使用了大量的backbone api赊舶，有underscore，backbone基礎的赶诊，在使用odoo前端會更順手笼平。
