xml | Odoo Connects Everything

odoo12 new starting point

ODOO12新起点
终于迎来了12，也是传说中期待的双数版本号
去年这个时候是11，虽也惊喜，但毕竟是python2到3的过渡期，有历史责任包袱的产品还是需要双兼容，于是那个版本是从7持续以来第一个被忽视的版本
所以我们现在的感觉就如同当年还在Windows Mobile的odoo78910，因为专注取舍错过了整个Symbian过渡时期，然后一口气飞奔进入iOS/Android双雄争霸时代
这比喻也许有些夸张，但对定位为开源企业级应用操作系统的我们来说，还是比较合适的：）

随着新产品线开始全面拥抱odoo12已经一个月有余，目前各种感觉都很顺畅，真不愧是一个全新的高起点定制系统：
框架模式方面基本成型，落后的能淘汰的都淘汰了，缺陷的能优化的也都优化了，结构上开始趋向稳定，预计未来大版本升级会容易很多
数据库方面过去成熟稳定的PostgreSQL9低版本已经无法胜任，久违的ORM开始慢慢的启用了一些新特性，长远发展看pg10+要成为标配
XML视图方面更新了更为严谨的rng约束，各种元素及属性将不可随意添加或缺失，有效的规范了页面结构的整体质量
CSS样式方面预处理器由Less改成了与整体框架更为融洽的Scss，核心的Bootstrap库大版本也从经典的3升级到了最新的4，感觉表现层这系列折腾起码要稳定几年了
Python方面彻底进入3时代，以后可能还有一些3.7前后版本的对应兼容库问题，但总算是完全告别2时代了
JavaScript方面基本已经将odoo9以来奠定的框架基础改造至极限，虽不能说很完美，但这一路优化过来已属不易，二次可开发的地方也越多越完善，将来Hack代码的机会不多了

其他应用层面的变化太多就不一一列举了，这里就重点说一个原来的document模块要废弃了，其在表单顶部工具栏的文档附件管理已被底部的mail消息日志功能所整合替代。长远看这也是一个很好的改进，只是可惜了原来依赖该基础模块的一大波第三方模块要被迫转型升级。考虑到要适应多年以来形成的附件操作习惯突然改变，同时我们自己也有直接间接依赖的几十号各类模块需要以空间换时间的兼容使用，特此立项从12版本开始上架维护用于替代的Document Sidebar模块，该应用市场链接https://apps.odoo.com/apps/modules/12.0/document_sidebar/

document_sidebar

odoo community version toggle left nav menu

ODOO社区版切换左侧导航菜单
社区版的菜单体系是一二三级同时分别展示于顶部和左侧，非常的直观，习惯这点后用企业版的菜单系统是非常难受的。个人认为最好的体验因该是大屏幕设备用社区版菜单，小屏幕终端用企业版菜单，关于这个课题以后在深入探讨，先回归本次主题：

<template id="webclient_bootstrap" inherit_id="web.webclient_bootstrap" name="renjie webclient_bootstrap">
    <xpath expr="//nav" position="inside">
        <div class="menu-toggle">
            <a href="/" title="切换子菜单" class="fa fa-exchange"></a>
        </div>
    </xpath>
</template>

</div>

</xpath>

</template>

以上通过继承菜单对应的模版在导航区植入一个切换开关按扭的入口

/*
    author: i@renjie.me
*/
.navbar{
    .menu-toggle{
        position: absolute;
        top: 6px;
        left: 1px;
        a{
            color: @navbar-inverse-link-color;
            &:hover, &:focus {
                background-color: @navbar-inverse-link-hover-bg;
                color: @nav-pills-active-link-hover-color;
            }
        }
    }
}

author: i@renjie.me

.navbar{

.menu-toggle{

position: absolute;

top: 6px;

left: 1px;

color: @navbar-inverse-link-color;

&:hover, &:focus {

background-color: @navbar-inverse-link-hover-bg;

color: @nav-pills-active-link-hover-color;

}

以上LESS代码定义其样式外观与一级菜单和谐保持一致并定位到合适的位置，没错，导航最左也就是第一个菜单前面的空位也就是它了

/**
 * author: i@renjie.me
 */
var WebClient = require('web.WebClient');
WebClient.include({
    show_application: function() {
        var self = this;
        var ret = self._super.apply(self, arguments);
        self.$('nav .menu-toggle').click(self.proxy(self.toggle_menu));
        return ret;
    },
    toggle_menu: function(e) {
        var self = this;
        e.preventDefault();
        self.$('.o_main .o_sub_menu').toggle("fast");
        return false;
    }
});

/**

* author: i@renjie.me

var WebClient = require('web.WebClient');

WebClient.include({

show_application: function() {

var self = this;

var ret = self._super.apply(self, arguments);

self.$('nav .menu-toggle').click(self.proxy(self.toggle_menu));

return ret;

toggle_menu: function(e) {

var self = this;

e.preventDefault();

self.$('.o_main .o_sub_menu').toggle("fast");

return false;

}

});

最后绑定上前端行为代码就可以开关自如的控制左侧导航区，同时还有一个小小的切换动画效果。至此，社区版也可以像企业版那样间接实现整个内容区都可以用来展示视图数据，特别适合那些数据多到需要用水平滚动条来左右拖动配合使用的场景

odoo tree view disable open form content

ODOO列表视图禁止打开表单内容
正常的列表视图做为菜单动作直接打开的话，直接点击是跳转当前动作下的表单视图；还有一种是做为表单视图One2many、Many2many类型的嵌入式列表视图，直接点击打开Dialog窗口展示表单视图，一些特殊的需求场景下往往希望只将信息展示到列表即止，不用更多的详细互动：

/**
 * author: i@renjie.me
 */
var ListView = require('web.ListView');
ListView.List.include({
    row_clicked: function () {
        var self = this;
        var context = self.dataset.get_context().eval();
        if(!context["disable_open"]){
            self._super.apply(self, arguments);
        }
    }
});

/**

* author: i@renjie.me

var ListView = require('web.ListView');

ListView.List.include({

row_clicked: function () {

var self = this;

var context = self.dataset.get_context().eval();

if(!context["disable_open"]){

self._super.apply(self, arguments);

}

});

原理就是找到相关的行点击入口，通过万能的context扩展一个独立的禁止打开参数，默认不禁止，视图里通过显式声明使用该功能：

<field name="renjie_ids" context="{'disable_open': True}"/>

1	<field name="renjie_ids" context="{'disable_open': True}"/>

odoo custom web window title

odoo窗口标题的修改方法有很多，但最灵活的还是后台开发者模式动态修改视图里的title，这就需要先搭一座便桥先：

<template id="layout" inherit_id="web.layout" name="odoo custom web window title">
    <xpath expr="//title" position="replace">
        <title>renjie.me</title>
    </xpath>
</template>

<title>renjie.me</title>

</xpath>

</template>

上述是桥接视图方便随时修改，接着还需要将原生前端硬编码优雅的架构到一起

/**
 * author: i@renjie.me
 */
var WebClient = require('web.WebClient');
WebClient.include({
    init: function() {
        this._super.apply(this, arguments);
        this.set('title_part', {"zopenerp": document.title});
    }
});

/**

* author: i@renjie.me

var WebClient = require('web.WebClient');

WebClient.include({

init: function() {

this._super.apply(this, arguments);

this.set('title_part', {"zopenerp": document.title});

}

});

如果还想追求到极致的话，下一步就是再将其整合到res_config通用设置里，特别适合SAAS运营的场景：）

odoo form view pic url widget

原生表单视图的image组件只能使用binary类型字段存储本地图片，而互联网应用一般都使用cdn，如第三方的七牛云存储，其在odoo中的表现形式其实是一个char类型的url，并不会占用自身服务器的存储，这就需要量身为其定制一种外链图片的widget：

<t t-name="FieldPic">
    <span class="oe_form_field oe_form_field_pic" t-att-style="widget.node.attrs.style">
        <img t-if="widget.get('effective_readonly')" class="oe_form_pic img-thumbnail" style="display:none"/>
        <t t-if="!widget.get('effective_readonly')">
            <div>
                <input type="text"
                    t-att-id="widget.id_for_label"
                    t-att-tabindex="widget.node.attrs.tabindex"
                    t-att-autofocus="widget.node.attrs.autofocus"
                    t-att-placeholder="widget.node.attrs.placeholder"
                t-att-maxlength="widget.field.size"
                />
            </div>
        </t>
    </span>
</t>

<div>

<input type="text"

t-att-id="widget.id_for_label"

t-att-tabindex="widget.node.attrs.tabindex"

t-att-autofocus="widget.node.attrs.autofocus"

t-att-placeholder="widget.node.attrs.placeholder"

t-att-maxlength="widget.field.size"

</div>

</t>

</span>

</t>

var core = require('web.core');
var form_widget_registry = core.form_widget_registry;
var FieldUrl = form_widget_registry.get('url');
/**
 * author: i@renjie.me
 */
var FieldPic = FieldUrl.extend({
    template: 'FieldPic',
    placeholder: "/web/static/src/img/placeholder.png",
    render_value: function() {
        var self = this;
        if (!self.get("effective_readonly")) {
            self._super();
        } else {
            var src = self.get('value') || self.placeholder;
            var $img = self.$el.find('img')
            if(src){
                $img.load(function() {
                    if(self.options.size){
                        var width = self.options.size[0];
                        var height = self.options.size[1];
                        $img.css({
                            "max-width": "" + width + "px",
                            "min-width": "" + width + "px",
                            "max-height": "" + height + "px",
                            "min-height": "" + height + "px"
                        });
                    }
                });
                $img.on('error', function() {
                    $img.attr('src', self.placeholder);
                });
                $img.attr({
                    src: src,
                    alt: self.node.attrs.alt,
                    title: self.node.attrs.title
                }).show();
            }
        }
    }
});
form_widget_registry.add('pic', FieldPic);

var core = require('web.core');

var form_widget_registry = core.form_widget_registry;

var FieldUrl = form_widget_registry.get('url');

/**

* author: i@renjie.me

var FieldPic = FieldUrl.extend({

template: 'FieldPic',

placeholder: "/web/static/src/img/placeholder.png",

render_value: function() {

var self = this;

if (!self.get("effective_readonly")) {

self._super();

} else {

var src = self.get('value') || self.placeholder;

var $img = self.$el.find('img')

if(src){

$img.load(function() {

if(self.options.size){

var width = self.options.size[0];

var height = self.options.size[1];

$img.css({

"max-width": "" + width + "px",

"min-width": "" + width + "px",

"max-height": "" + height + "px",

"min-height": "" + height + "px"

});

}

});

$img.on('error', function() {

$img.attr('src', self.placeholder);

});

$img.attr({

src: src,

alt: self.node.attrs.alt,

title: self.node.attrs.title

}).show();

}

});

form_widget_registry.add('pic', FieldPic);

之后就可以在表单视图中直接使用诸如<field name=”pic_url” widget=”pic”/>形式的网络图片字段组件