在 Odoo 中添加自定義頁(yè)面

Jackwoo 發(fā)布于2019-07-31 11:20 / 3084人閱讀

摘要：一般情況下都是在中繼承后在其末尾添加相關(guān)資源路徑除了資源需要引入外，我們編寫(xiě)的頁(yè)面模板也許要引入，打開(kāi)并在底部添加我們的自定義頁(yè)面文件大功告成，一個(gè)最簡(jiǎn)單的自定義頁(yè)面已經(jīng)完成了，安裝模塊然后運(yùn)行看看效果吧。

前些天群里的小伙伴問(wèn)了些關(guān)于在 Odoo 管理后臺(tái)自定義頁(yè)面和 Widget 的問(wèn)題，那我就來(lái)寫(xiě)一篇簡(jiǎn)短的內(nèi)容，教大家如何創(chuàng)建自定義頁(yè)面并引用第三方庫(kù)。如果大家有看我之前寫(xiě)的基礎(chǔ)教程的話，應(yīng)該知道我們從一開(kāi)始就是用的是 Odoo11 吧，從今天開(kāi)始，我們的教程全都將基于 Odoo12 進(jìn)行編寫(xiě)，所以在開(kāi)始前，請(qǐng)確保你現(xiàn)在使用的是 Odoo12，或者跟隨官方的安裝指南安裝好環(huán)境再開(kāi)始今天的內(nèi)容。

創(chuàng)建模塊

話不多說(shuō)，先用 scaffold 命令創(chuàng)建一個(gè)新的模塊 custom_page，結(jié)構(gòu)如下：

myaddons
└── custom_page
    ├── __init__.py
    ├── __manifest__.py
    ├── controllers
    ├── demo
    ├── models
    ├── security
    ├── static
    └── views

我將會(huì)通過(guò)使用 wired-elements 這個(gè) Web Components 組件庫(kù)創(chuàng)建一個(gè)簡(jiǎn)單的自定義頁(yè)面，從而演示如何引入并使用第三方庫(kù)。所以我們先準(zhǔn)備好相關(guān)庫(kù)，先下載好這個(gè)庫(kù)，然后將它放到 static 目錄下：

static
└── lib
   └── wired-elements
      └── wired-elements.bundled.min.js

以上的目錄層級(jí)結(jié)構(gòu)是約定俗成的，第三方 JS 庫(kù)推薦都放在 static/lib 下。

創(chuàng)建頁(yè)面

接下來(lái)是創(chuàng)建自定義頁(yè)面，同樣的在 static 下創(chuàng)建：

static
└── src
   └── xml
      └── base.xml

自定義的頁(yè)面、JS 和 CSS 等資源文件，都按約定放置在 static/src 下，下面是自定義頁(yè)面 base.xml 文件的內(nèi)容：

頁(yè)面中使用到了 wired-elements 的組件，具體使用方式請(qǐng)參考官方文檔。上面的定義中，我們看到有一個(gè)屬性 t-name，這個(gè)是頁(yè)面的名稱(chēng)，可在 JS 中調(diào)用，這里暫不展開(kāi)說(shuō)明。

定義動(dòng)作

自定義頁(yè)面實(shí)際上是一個(gè) client action，也就是客戶端動(dòng)作，通過(guò)對(duì) AbstractAction 這個(gè)抽象類(lèi)進(jìn)行擴(kuò)展，從而指定自定義頁(yè)面的模板和頁(yè)面的事件等，下面的代碼定義了一個(gè)最簡(jiǎn)單的客戶端動(dòng)作，它包含了一個(gè)點(diǎn)擊事件：

    odoo.define("custom_page.demo", function (require) {
    "use strict";
    
    var AbstractAction = require("web.AbstractAction");
    var core = require("web.core");
    
    var CustomPageDemo = AbstractAction.extend({
        template: "DemoPage",
        events: { "click .demo-submit": "_onSubmitClick" },
    
        _onSubmitClick: function (e) {
            e.stopPropagation();
            alert("Submit clicked!");
        }
    });
    
    core.action_registry.add("custom_page.demo", CustomPageDemo);
    
    return CustomPageDemo;
    
    });

上面這段代碼的核心部分在 AbstractAction.extend(...) 中，其中 template 指定了自定義頁(yè)面的模板名稱(chēng)，也就是我們前面所說(shuō)的 t-name 這個(gè)屬性，而 events 則定義了頁(yè)面的一些事件，如該例中，定義的是當(dāng)點(diǎn)擊（click）帶有類(lèi) .demo-submit 的元素時(shí)執(zhí)行 _onSubmitClick 這個(gè)方法。

需要注意的是，我們需要通過(guò) core.action_registry.add() 這個(gè)方法對(duì)動(dòng)作進(jìn)行注冊(cè)，第一個(gè)參數(shù)表示注冊(cè)的動(dòng)作名（tag），第二個(gè)參數(shù)是要注冊(cè)的動(dòng)作對(duì)象。

創(chuàng)建菜單

既然自定義的頁(yè)面是一個(gè)動(dòng)作，那么我們就需要?jiǎng)?chuàng)建菜單和它進(jìn)行關(guān)聯(lián)，在 views/views.xml 定義菜單：

    
        
            
                Custom Page
                custom_page.demo

加載資源

和普通頁(yè)面一樣，頁(yè)面中所引用的 JS 或者 CSS 等資源文件，都需要在頁(yè)面上引入才能使用，在 Odoo 中也不例外，不過(guò)有一點(diǎn)不同的是，Odoo 中有專(zhuān)門(mén)的集中引入資源文件的地方，這樣做是為了將資源進(jìn)行打包壓縮，以減少請(qǐng)求的包體大小。

一般情況下都是在 views/templates.xml 中繼承 web.ssets_backend 后在其末尾添加相關(guān)資源路徑：

除了 JS 資源需要引入外，我們編寫(xiě)的頁(yè)面模板也許要引入，打開(kāi) __manifest__.py 并在底部添加我們的自定義頁(yè)面文件：

"qweb": ["static/src/xml/base.xml"]

OK! 大功告成，一個(gè)最簡(jiǎn)單的自定義頁(yè)面已經(jīng)完成了，安裝模塊然后運(yùn)行看看效果吧。

開(kāi)發(fā)者模式

很不幸的是，打開(kāi)之后好像只有幾個(gè)小點(diǎn)在頁(yè)面，然后并沒(méi)有什么東西了。先不慌，我們先打開(kāi)設(shè)置頁(yè)面，然后在頁(yè)面最右側(cè)那一列的底部，可以看到兩個(gè)鏈接，分別是『激活開(kāi)發(fā)者模式』和『激活開(kāi)發(fā)者模式 (帶 assets)』，我們點(diǎn)一下第二個(gè)帶 assets 的鏈接，然后再次訪問(wèn)我們的自定義頁(yè)面，結(jié)果如何？

那兩個(gè)鏈接顧名思義，就是進(jìn)入開(kāi)發(fā)者模式，其中帶 assets 的開(kāi)發(fā)者模式會(huì)跳過(guò)執(zhí)行資源打包的動(dòng)作，在打開(kāi)這個(gè)模式前，我們看到頁(yè)面上的組件擠成一團(tuán)了，是因?yàn)橘Y源打包后導(dǎo)致 wired-elements 的部分屬性無(wú)法找到。

注：以上操作只是為了演示說(shuō)明相關(guān)功能，在生產(chǎn)環(huán)境中，強(qiáng)烈不建議任何非開(kāi)發(fā)或運(yùn)維人員進(jìn)入開(kāi)發(fā)模式進(jìn)行操作。

源碼都在倉(cāng)庫(kù) Odoo-Tutorial-Demo 中，請(qǐng)先自己動(dòng)手實(shí)操，遇到問(wèn)題再下載源碼安裝查看，如果有其他難題可以提出來(lái)，我會(huì)抽空解答的~

GPU云服務(wù)器云服務(wù)器自定義頁(yè)面自定義監(jiān)控頁(yè)面 php添加自定義菜單在php自定義函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/45031.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Jackwoo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

關(guān)于C++基礎(chǔ)的一些“碎碎念”

閱讀 1931·2021-09-29 09:35
云服務(wù)器和云虛擬主機(jī)有什么區(qū)別-云主機(jī)、云服務(wù)器、虛擬主機(jī)有什么區(qū)別呢？

閱讀 2791·2021-09-22 15:25
PIGYun：“喜迎金秋" 香港、韓國(guó)BGP混合CN2大帶寬僅14元起

閱讀 2043·2021-08-23 09:43
前端進(jìn)階（12） - css 的弱化與 js 的強(qiáng)化

閱讀 2114·2019-08-30 15:54
前端每日實(shí)戰(zhàn)：53# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)文本淡入淡出的 loader 動(dòng)畫(huà)

閱讀 3407·2019-08-30 15:53
哪些你知道或不知道的css，在這里或許都齊全

閱讀 2455·2019-08-30 13:50
移動(dòng)端鍵盤(pán)和光標(biāo)的兼容那點(diǎn)事

閱讀 2468·2019-08-30 11:24
前端框架這么多，該如何抉擇？

閱讀 2337·2019-08-29 15:37

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

在 Odoo 中添加自定義頁(yè)面

相關(guān)文章

**「Odoo 基礎(chǔ)教程系列」第二篇——從 Todo 應(yīng)用開(kāi)始（1）**

**「Odoo 基礎(chǔ)教程系列」第五篇——從 Todo 應(yīng)用開(kāi)始（4）**

**「Odoo 基礎(chǔ)教程系列」第六篇——從 Todo 應(yīng)用開(kāi)始（5）**

Odoo 模塊推薦——Web Dialog Size

**「Odoo 基礎(chǔ)教程系列」第七篇——從 Todo 應(yīng)用開(kāi)始（6）**

發(fā)表評(píng)論

0條評(píng)論

Jackwoo

男|高級(jí)講師

TA的文章

關(guān)于C++基礎(chǔ)的一些“碎碎念”

云服務(wù)器和云虛擬主機(jī)有什么區(qū)別-云主機(jī)、云服務(wù)器、虛擬主機(jī)有什么區(qū)別呢？

PIGYun：“喜迎金秋" 香港、韓國(guó)BGP混合CN2大帶寬僅14元起

前端進(jìn)階（12） - css 的弱化與 js 的強(qiáng)化

前端每日實(shí)戰(zhàn)：53# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)文本淡入淡出的 loader 動(dòng)畫(huà)

哪些你知道或不知道的css，在這里或許都齊全

移動(dòng)端鍵盤(pán)和光標(biāo)的兼容那點(diǎn)事

前端框架這么多，該如何抉擇？

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

在 Odoo 中添加自定義頁(yè)面

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！