好久不見，我又回來了，帶着新的內容板塊再次和大家見面啦～這是你沒有見過的全新板塊（自動播放喳喳輝發音）
在新的內容板塊裏，我將會爲大家推薦一些實用的 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
