创建一个独立的 Owl 应用程序

对于各种原因,您可能希望拥有一个独立的 Owl 应用程序,而不是 Web 客户端的一部分。Odoo 中的一个例子是自助点餐应用,它允许客户通过手机点餐。在本章中,我们将探讨实现此类功能所需的内容。

概览

要拥有一个独立的 Owl 应用,需要满足以下几点:

  • 应用的根组件

  • 一个包含设置代码的资源包

  • 一个调用资源包的 QWeb 视图

  • 一个渲染视图的控制器

1. 根组件

为了简化问题,我们先从一个非常简单的组件开始,该组件仅渲染 “Hello, World!”。这将让我们一目了然地知道我们的设置是否正常工作。

首先,在 /your_module/static/src/standalone_app/root.xml 中创建模板。

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="your_module.Root">
        Hello, World!
    </t>
</templates>

然后在 /your_module/static/src/standalone_app/root.js 创建该组件的 JavaScript 文件。

import { Component } from "@odoo/owl";

export class Root extends Component {
    static template = "your_module.Root";
    static props = {};
}

通常建议将挂载组件的应用程序设置代码放在单独的文件中。创建一个 JavaScript 文件,用于在 /your_module/static/src/standalone_app/app.js 中挂载应用。

import { whenReady } from "@odoo/owl";
import { mountComponent } from "@web/env";
import { Root } from "./root";

whenReady(() => mountComponent(Root, document.body));

mountComponent 工具函数将负责创建 Owl 应用并正确进行配置:它将创建一个环境,启动 服务,确保应用已翻译,并赋予应用对您资源包中的模板的访问权限,以及其他一些操作。

另请参见

Owl 组件引用

2. 创建包含我们代码的资源包

在你的模块的清单文件中,创建一个新的 资源包。它应该包含 web._assets_core 资源包,该包包含 Odoo JavaScript 框架及其所需的核心库(例如 Owl 和 luxon),之后你可以添加一个通配符,将你应用程序的所有文件都包含到该资源包中。

{
    # ...
    'assets': {
        'your_module.assets_standalone_app': [
            ('include', 'web._assets_helpers'),
            'web/static/src/scss/pre_variables.scss',
            'web/static/lib/bootstrap/scss/_variables.scss',
            ('include', 'web._assets_bootstrap'),
            ('include', 'web._assets_core'),
            'your_module/static/src/standalone_app/**/*',
        ],
    }
}

其他行是使 Bootstrap 正常运行所需的捆绑文件和 scss 文件。它们是必填的,因为网页框架的组件使用 Bootstrap 类进行样式和布局。

小心

确保你的独立应用的文件仅被添加到此包中。如果你已经定义了 web.assets_backendweb.assets_frontend,并且它们包含通配符(globs),请确保这些通配符不会匹配你的独立应用的文件,否则你的应用的启动代码将与这些包中的现有启动代码发生冲突。

另请参见

模块清单引用

3. 调用资源包的 XML 视图

现在我们已经创建了资产包,接下来需要创建一个 QWeb 视图,该视图使用该资产包。

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="your_module.standalone_app">&lt;!DOCTYPE html&gt;
        <html>
            <head>
                <script type="text/javascript">
                    var odoo = {
                        csrf_token: "<t t-nocache="The csrf token must always be up to date." t-esc="request.csrf_token(None)"/>",
                        debug: "<t t-out="debug"/>",
                        __session_info__: <t t-esc="json.dumps(session_info)"/>,
                    };
                </script>
                <t t-call-assets="your_module.assets_standalone_app" />
            </head>
            <body/>
        </html>
    </template>
</odoo>

此模板仅做两件事:它初始化 odoo 全局变量,然后调用我们刚刚定义的资源包。初始化 odoo 全局变量是必要的步骤。此变量应是一个包含以下内容的对象:

  • CSRF 令牌,通常在与 HTTP 控制器交互时需要使用。

  • 调试值,用于许多地方以添加额外的日志记录或开发者友好的检查。

  • __session_info__,其中包含服务器提供的始终需要的信息,而我们不希望进行额外的请求。有关此内容的更多信息,请参见下一节。

4. 渲染视图的控制器

现在我们有了视图,需要将其对用户开放。为此,我们将创建一个 HTTP 控制器,该控制器将渲染该视图并将其返回给用户。

from odoo.http import request, route, Controller

class YourController(Controller):
    @route("/your_module/standalone_app", auth="public")
    def standalone_app(self):
        return request.render(
            'your_module.standalone_app',
            {
                'session_info': request.env['ir.http'].get_frontend_session_info(),
            }
        )

请注意我们是如何将模板 session_info 传递给它的。我们从 get_frontend_session_info 方法中获取它,它最终将包含由网页框架使用的相关信息,例如当前登录用户的 ID、服务器版本、Odoo 版本等。

此时,如果您在浏览器中打开网址 /your_module/standalone_app,您应该会看到一个空白页面,上面显示文字 “Hello, World!”。此时,您可以开始为您的应用编写实际的代码。