在 Odoo 中添加自定义页面

Jackwoo 发布于2019-07-31 11:20 / 2950人阅读

摘要：一般情况下都是在中继承后在其末尾添加相关资源路径除了资源需要引入外，我们编写的页面模板也许要引入，打开并在底部添加我们的自定义页面文件大功告成，一个最简单的自定义页面已经完成了，安装模块然后运行看看效果吧。

前些天群里的小伙伴问了些关于在 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自定义函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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