摘要:模塊安裝之后不需要任何配置,這個模塊對中的彈窗做了一些優化,為了看到效果我們需要找一個彈窗出來。在打開開發者模式后點擊菜單就有一個彈窗出現把注意力放在上圖彈窗右上角的高亮處,在安裝該模塊前,高亮位置是沒有這樣的擴展圖標的。
好久不見,我又回來了,帶著新的內容板塊再次和大家見面啦~這是你沒有見過的全新板塊(自動播放喳喳輝發音)
在新的內容板塊里,我將會為大家推薦一些實用的 Odoo 模塊,并且通過簡單的實例來說明這些模塊的使用方法和適用場景(可能會在某些時候虛構一些業務場景),除此之外我還將對部分模塊的實現和源碼進行簡單的講解和分析,畢竟會用不是我們的目的,知曉其核心才更有意義。
今天就先推薦一個小模塊吧,雖然這個模塊很簡單,但是卻能帶來很實在的用戶體驗上的提升。
備注 | ||
---|---|---|
名稱 | Web Dialog Size | |
功能 | 讓用戶可以放大彈窗到全屏寬,并且讓彈窗可以拖動 | |
商店地址 | 點擊前往 | 商店中最高版本為 11.0 |
倉庫地址 | 前往 GitHub | 倉庫中最高版本為 12.0 |
本次體驗使用的 Odoo 版本是 12.0,不同版本之間可能會有細微差異,請以實際使用情況為準。
模塊安裝之后不需要任何配置,這個模塊對 Odoo 中的彈窗做了一些優化,為了看到效果我們需要找一個彈窗出來。
在打開「開發者模式」后點擊菜單「Update Apps List」就有一個彈窗出現:
把注意力放在上圖彈窗右上角的高亮處,在安裝該模塊前,高亮位置是沒有這樣的擴展圖標的。在點擊該圖標后,彈窗的寬度發生了變化:
同時擴展圖標也變成了收縮圖標,除了縮放圖標和彈窗寬度的變化外,這個模塊還讓原本不能拖動的彈窗變得可以隨意拖動了:
適用場景上面只是簡單的試用,并不能體現出這個模塊的優點,那我們打開另一個彈窗再看一下效果吧:
這是個人選項(在右上角下拉菜單里的「Preferences」)的彈窗,就簽名(Signature)來說,在縱向高度不是很夠的時候,如果橫向寬度也不夠寬的話,我們在富文本框內輸入時,很容易就會換行,然后需要滾動文本去查看上面的內容,而把窗口放大到全屏寬之后,文本框內每行就能多顯示一些字符了。
又或者說在彈窗內有列表需要顯示,而且字段相對較多,彈窗寬度不夠就需要橫向滾動列表,稍微有些麻煩,這時候將彈窗放大到全屏寬就能顯示更多列的內容了。
其實我覺得最有用的還是窗口拖動這個功能。不妨設想一個場景,你正在編輯一個表單頁面上的 x2many 字段,你創建了一些這個字段的記錄,在你又一次創建新記錄并且在填寫了一半的內容之后,想要看一下現在正在創建的這條記錄是不是在前面已經創建過了,可是列表前面的幾條數據剛好被彈窗遮擋住了,這時為了避免創建重復的數據,你不得不關閉彈窗去查看列表前面的記錄,如果并沒有創建過,前面填寫的這么多內容就都白費了!
而窗口可以拖動的話,就可以輕松地查看到被擋住的內容,然后你可以繼續填寫剩下的字段,舒服呀!對于我這種金魚記憶的人來說,這個功能再好用不過了。
實現淺析上面看完了怎么用,現在我們來看看怎么寫。因為這是個對前端展現內容做修改的模塊,核心部分基本上都在其 JS 代碼中,所以我們直奔主題,打開 static/src/js/ 目錄下的 JS 文件,一般情況下這種類型的模塊其 JS 命名是和模塊名一樣的,在這個模塊里就是 web_dialog_size.js 了。
先來看看 willStart() 這個方法:
willStart: function () { var self = this; return this._super.apply(this, arguments).then(function () { self.$modal.find(".dialog_button_extend").on("click", self.proxy("_extending")); self.$modal.find(".dialog_button_restore").on("click", self.proxy("_restore")); return config.done(function(r) { if (r.default_maximize) { self._extending(); } else { self._restore(); } }); }); },
在執行完 _super() 之后,這里只是簡單地做了三件事:
為擴展按鈕添加點擊事件,綁定方法 _extending()
為收縮按鈕添加點擊事件,綁定方法 _restore()
查詢系統參數,判斷彈窗是否默認為放大狀態,然后執行相應的方法
其中第 3 點中用到了 RPC 請求去調用模型的方法查詢數據:
var config = rpc.query({ model: "ir.config_parameter", method: "get_web_dialog_size_config", });
打開模塊的 models/ir_config_parameter.py 可以看到只有一個模型方法:
@api.model def get_web_dialog_size_config(self): get_param = self.sudo().get_param return { "default_maximize": const_eval( get_param("web_dialog_size.default_maximize", "False")) }
這個方法所做的就是查找系統參數中彈窗默認是否最大化的值,默認值為 False。
劃重點!當我們編寫的前端內容需要從后臺獲取返回值,例如上面的獲取配置信息,就可以像這個模塊這樣做,最后返回得到的是一個 Promise,可以使用 .then() 和 .done() 等方法鏈。
下面再看看 opened() 這個方法:
opened: function(handler) { return this._super.apply(this, arguments).then(function(){ if (this.$modal) { this.$modal.draggable({ handle: ".modal-header", helper: false }); } }.bind(this)); },
這個方法將會在彈窗打開(open())之后執行,這里只做了一件事,讓窗口可以拖動。這里是利用 jQuery UI 的 Draggable) 實現的。
重點來了,Odoo 的前端用到的一個基礎框架就是 jQuery UI),也就是說里面的 Widgets 和各種效果以及工具方法我們都可以在自定義 Widget 或編寫擴展的時候用上,在準備實現某些相關的功能前,不妨先看看官方文檔,說不定就省了很多的功夫呢 XD
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/43045.html
摘要:一般情況下都是在中繼承后在其末尾添加相關資源路徑除了資源需要引入外,我們編寫的頁面模板也許要引入,打開并在底部添加我們的自定義頁面文件大功告成,一個最簡單的自定義頁面已經完成了,安裝模塊然后運行看看效果吧。 前些天群里的小伙伴問了些關于在 Odoo 管理后臺自定義頁面和 Widget 的問題,那我就來寫一篇簡短的內容,教大家如何創建自定義頁面并引用第三方庫。如果大家有看我之前寫的基礎教...
摘要:前提條件在源碼中可以看到,部署命令的操作是將模塊文件上傳在運行中的執行安裝操作。從幫助上看,部署命令的使用為模塊路徑網站用戶名密碼使用示例注意點閱讀源碼可以發現該命令只是安裝或者升級模塊的文件,并不會更新已經在運行的代碼。閱讀源碼的cli模塊發現一個遠程部署模塊的命令,在官方文檔并沒有說,發現隱藏功能! 解決的問題 在odoo里面寫界面是很煩人的,每次寫完需要重啟服務器并且到app界面點擊升...
摘要:而模塊化則是區別于大多數傳統的最強特性,基于這一特性,開發人員可以輕松地繼承和擴展任何現有的模塊,可以輕松地針對不同的需求進行功能定制。相關文章基礎教程系列第一篇環境準備 showImg(https://segmentfault.com/img/remote/1460000013290099?w=1280&h=856); 大家新年好!給大伙拜個早年,今天也是情人節呢,這么好的日子,卻一...
摘要:安裝好后,在中執行查看版本信息,應該會看到輸出如下信息版本號可能會不同如果提示未找到,則需要手動將用戶基礎目錄下的添加到中。相關文章基礎教程系列第篇開天坑啦 showImg(https://segmentfault.com/img/bV4GZu?w=1262&h=911); 之前說好的 「Odoo 基礎教程系列」終于來了(撒花)~剛過完年重新投入到工作中,一下子事情有點多都要忙不過來了...
摘要:雖然這是個很簡單的應用,但是希望大家可以動手一起操作,從最簡單的開始上手學習如何使用這個框架。則是在和之間,負責響應用戶操作,從中獲取數據進行處理并返回到中。 showImg(https://segmentfault.com/img/bV66tE?w=728&h=410); 在第一篇教程發布之后差不多一個月的今天,終于完成了第二篇內容,這個發布周期拖得實在是有點太長了,我都覺得不好意思...
閱讀 2012·2021-11-24 09:39
閱讀 1882·2019-08-30 15:55
閱讀 2173·2019-08-30 15:53
閱讀 571·2019-08-29 13:16
閱讀 989·2019-08-26 12:20
閱讀 2386·2019-08-26 11:58
閱讀 3145·2019-08-26 10:19
閱讀 3307·2019-08-23 18:31