基于wol学习自定义odoo的widget

2022-06-25 18:32:22 阅读：199 来源： 互联网

标签：__ widget 自定义 JackUrlImage url js wol odoo

简介：

在odoo二次开发中,会经常有一些个性化的前端界面需求,而odoo自身的ui样式并不支持,这时候就需要开发人员自定义widget组件满足界面需求,odoo前端界面就是由许多widget渲染组成,包括字段组件,action动作,以及一些自定义界面都是通过继承widget进行拓展而来,可以说widget是odoo的核心组成之一。 OWL是 Odoo 创建的前端开发框架。这是他们在最新版本的 Odoo（版本 14）中引入的一个框架，以使前端代码更好一些。如果您熟悉其他前端框架，如 React、Vue、Angular、Backbone 等，那么您将很快了解 OWL。它遵循许多相同的模式和想法。现在的情况是我需要一个专用的widget来实现一个特定的图片显示功能：

图片显示静态分离（不再存在odoo数据库中，默认的二进制存储，不再存在odoo的web服务器中）
使用EasyImage2.0存储（有token认证的api上传图床）
用户很简单的使用页面widget，上传图片，自动转存图床，更新存储字段为url，更新预览，双击放大

参考教程：

https://www.oocademy.com/v15.0/tutorial/introduction-to-owl-115#-Expanding-our-widget

一：owl基本结构

与 Odoo 开发一样，我们必须使用一个新模块。让我们设置一个最简单的，以便我们可以尝试一些 OWL 功能。

__init__.py是空的，

只定义了__manifest__.py文件的一些基本信息。

# -*- coding: utf-8 -*-
# code:__manifest__.py
{
    'name': "jack_url_image",
    'summary': """图片挂件改存api图床""",
    'description': """图片挂件改存api图床""",
    'author': "jackadam",
    'website': "http://www.baidu.com",
    'category': 'Administration',
    'version': '15.0.0.1',
    'depends': ['base'],
    'installable': True,
    'application': True,
    'auto_install': False,
}

安装一下，应该没什么问题的。

二：创建并注册js类

我们的新组件文件JackUrlImage.js将被调用，我们将把它添加到static/src/js/components/.

// code:myaddons/jack_url_image/static/src/js/components/JackUrlImage.js 
odoo.define("jack_url_image.JackUrlImage", function (require) {
     const { Component } = owl;

     class JackUrlImage extends Component {
         //
     };

 });

注册到manifest

# code:__manifest__.py
 { 
     ... 
    'assets': {
        'web.assets_backend': [
            'jack_url_image/static/src/js/components/JackUrlImage.js',
        ]
    },
}

三：为组件创建模板 xml

四：更新依赖项

五：覆盖表单渲染器以将组件安装到类

六：将 div 添加到销售订单表单

七：扩展我们的widget

八：设计我们的小部件

九：连接数据

十：

标签：__,widget,自定义,JackUrlImage,url,js,wol,odoo
来源： https://www.cnblogs.com/jackadam/p/16412159.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9