在 Odoo 中添加自定義頁面

Jackwoo 發布于2019-07-31 11:20 / 2951人閱讀

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

前些天群里的小伙伴問了些關于在 Odoo 管理后臺自定義頁面和 Widget 的問題，那我就來寫一篇簡短的內容，教大家如何創建自定義頁面并引用第三方庫。如果大家有看我之前寫的基礎教程的話，應該知道我們從一開始就是用的是 Odoo11 吧，從今天開始，我們的教程全都將基于 Odoo12 進行編寫，所以在開始前，請確保你現在使用的是 Odoo12，或者跟隨官方的安裝指南安裝好環境再開始今天的內容。

創建模塊

話不多說，先用 scaffold 命令創建一個新的模塊 custom_page，結構如下：

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

我將會通過使用 wired-elements 這個 Web Components 組件庫創建一個簡單的自定義頁面，從而演示如何引入并使用第三方庫。所以我們先準備好相關庫，先下載好這個庫，然后將它放到 static 目錄下：

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

以上的目錄層級結構是約定俗成的，第三方 JS 庫推薦都放在 static/lib 下。

創建頁面

接下來是創建自定義頁面，同樣的在 static 下創建：

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

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

頁面中使用到了 wired-elements 的組件，具體使用方式請參考官方文檔。上面的定義中，我們看到有一個屬性 t-name，這個是頁面的名稱，可在 JS 中調用，這里暫不展開說明。

定義動作

自定義頁面實際上是一個 client action，也就是客戶端動作，通過對 AbstractAction 這個抽象類進行擴展，從而指定自定義頁面的模板和頁面的事件等，下面的代碼定義了一個最簡單的客戶端動作，它包含了一個點擊事件：

    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 指定了自定義頁面的模板名稱，也就是我們前面所說的 t-name 這個屬性，而 events 則定義了頁面的一些事件，如該例中，定義的是當點擊（click）帶有類 .demo-submit 的元素時執行 _onSubmitClick 這個方法。

需要注意的是，我們需要通過 core.action_registry.add() 這個方法對動作進行注冊，第一個參數表示注冊的動作名（tag），第二個參數是要注冊的動作對象。

創建菜單

既然自定義的頁面是一個動作，那么我們就需要創建菜單和它進行關聯，在 views/views.xml 定義菜單：

    
        
            
                Custom Page
                custom_page.demo

加載資源

和普通頁面一樣，頁面中所引用的 JS 或者 CSS 等資源文件，都需要在頁面上引入才能使用，在 Odoo 中也不例外，不過有一點不同的是，Odoo 中有專門的集中引入資源文件的地方，這樣做是為了將資源進行打包壓縮，以減少請求的包體大小。

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

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

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

OK! 大功告成，一個最簡單的自定義頁面已經完成了，安裝模塊然后運行看看效果吧。

開發者模式

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

那兩個鏈接顧名思義，就是進入開發者模式，其中帶 assets 的開發者模式會跳過執行資源打包的動作，在打開這個模式前，我們看到頁面上的組件擠成一團了，是因為資源打包后導致 wired-elements 的部分屬性無法找到。

注：以上操作只是為了演示說明相關功能，在生產環境中，強烈不建議任何非開發或運維人員進入開發模式進行操作。

源碼都在倉庫 Odoo-Tutorial-Demo 中，請先自己動手實操，遇到問題再下載源碼安裝查看，如果有其他難題可以提出來，我會抽空解答的~

GPU云服務器云服務器自定義頁面自定義監控頁面 php添加自定義菜單在php自定義函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/45031.html

「Odoo 基礎教程系列」第二篇——從 Todo 應用開始（1）

摘要：雖然這是個很簡單的應用，但是希望大家可以動手一起操作，從最簡單的開始上手學習如何使用這個框架。則是在和之間，負責響應用戶操作，從中獲取數據進行處理并返回到中。 showImg(https://segmentfault.com/img/bV66tE?w=728&h=410); 在第一篇教程發布之后差不多一個月的今天，終于完成了第二篇內容，這個發布周期拖得實在是有點太長了，我都覺得不好意思...

UCloud 2019-07-31 11:07 評論0 收藏0
「Odoo 基礎教程系列」第五篇——從 Todo 應用開始（4）

摘要：在前面教程中，我們使用了兩種類型的視圖和今天我們將學習使用另一種類型的視圖搜索視圖。大家可以試試看同時應用多個分組，或者將分組和過濾器組合使用，仔細觀察和思考產生的結果。還是老規矩，教程中的代碼會更新在倉庫中。 showImg(https://segmentfault.com/img/bVbgO85?w=1950&h=1300); 在前面教程中，我們使用了兩種類型的視圖——TreeVi...

xiyang 2019-07-30 17:48 評論0 收藏0
「Odoo 基礎教程系列」第六篇——從 Todo 應用開始（5）

摘要：大家好鴨，我又來更新啦還記得我們在第二篇教程中提到過的動作嗎，今天我們就來專門講講在中的，學習不同類型的動作對應的應用場景，并且在我們的應用中使用上其中一些類型的動作。報表動作這類型的動作用于觸發報表打印，例如打印發票等。 showImg(https://segmentfault.com/img/bVbhdTE?w=1471&h=845); 大家好鴨，我又來更新啦！還記得我們在第二篇教...

Lionad-Morotar 2019-07-30 17:53 評論0 收藏0
Odoo 模塊推薦——Web Dialog Size

摘要：模塊安裝之后不需要任何配置，這個模塊對中的彈窗做了一些優化，為了看到效果我們需要找一個彈窗出來。在打開開發者模式后點擊菜單就有一個彈窗出現把注意力放在上圖彈窗右上角的高亮處，在安裝該模塊前，高亮位置是沒有這樣的擴展圖標的。好久不見，我又回來了，帶著新的內容板塊再次和大家見面啦～這是你沒有見過的全新板塊（自動播放喳喳輝發音）在新的內容板塊里，我將會為大家推薦一些實用的 Odoo 模塊...

tommego 2019-07-31 09:59 評論0 收藏0
「Odoo 基礎教程系列」第七篇——從 Todo 應用開始（6）

摘要：今天這個系列教程即將迎來它的最后一篇內容了，我們將要來學習中權限相關的內容。在的權限管理體系中，同樣也有用戶組這一概念的存在，和其他框架如可以說大同小異。通常和權限相關的內容，我們都會在模塊的目錄下進行定義，記錄集規則的定義自然也不例外。在今年的情人節（2018.02.14）那天，我寫了一篇博客說即將要開一個坑，也就是大家在看的這個系列的教程。今天這個系列教程即將迎來它的最后一篇內容...

zeyu 2019-07-31 11:18 評論0 收藏0