第四章：从头开始创建视图¶

警告

强烈建议在开始本章之前完成第一章：字段和视图。第3章介绍的概念，包括视图和示例，对于理解本章所涵盖的内容至关重要。

让我们看看如何完全从头开始创建一个新视图。从某种意义上说，这并不是很难，但是没有真正好的资源来说明如何做到这一点。请注意，大多数情况应该通过定制现有视图或使用客户端操作来解决。

对于这个练习，让我们假设我们想要创建一个 gallery 视图，这是一个可以用图像字段表示一组记录的视图。在我们令人惊叹的 T 恤情景中，我们希望能够看到一组 T 恤图像。

这个问题当然可以通过看板视图来解决，但这意味着我们不能在同一个操作中同时使用普通看板视图和画廊视图。

让我们创建一个图库视图。每个图库视图将由其 arch 中的 image_field 属性定义：

<gallery image_field="some_field"/>

为了完成本章的任务，您需要安装awesome_gallery插件。该插件包含必要的服务器文件以添加新视图。

目标

Solutions

本章的每个练习的解决方案都托管在官方Odoo教程存储库。

1. 创建一个 Hello World 视图¶

第一步是创建一个带有简单组件的JavaScript实现。

Exercise

在 static/src 中创建 gallery_view.js 、 gallery_controller.js 和 gallery_controller.xml 文件。
在 gallery_controller.js 中实现一个简单的 hello world 组件。
在 gallery_view.js 中，导入控制器，创建一个视图对象，并将其注册到视图注册表中，名称为 gallery。
在订单操作中添加 gallery 作为一种视图类型。
确保在切换到图库视图时，您可以看到您的hello world组件。

2. 使用布局组件¶

到目前为止，我们的图库视图看起来不像是一个标准视图。让我们使用 Layout 组件来拥有其他视图的标准功能。

Exercise

导入 Layout 组件并将其添加到 GalleryController 的 components 中。
更新模板以使用 Layout。它需要一个 display 属性，可以在 props.display 中找到。

3. 解析 arch¶

目前，我们的图库视图还没有做太多事情。让我们从阅读视图中包含的结构信息开始。

解析arch的过程通常使用 ArchParser 来完成，它是每个视图特定的。它继承自一个通用的 XMLParser 类。

Example

这是一个 ArchParser 可能看起来像的例子：

import { XMLParser } from "@web/core/utils/xml";

export class GraphArchParser extends XMLParser {
    parse(arch, fields) {
       const result = {};
       this.visitXML(arch, (node) => {
           ...
        });
       return result;
    }
}

Exercise

在自己的文件中创建 ArchParser 类。它可以继承自 @web/core/utils/xml 中的 XMLParser。
使用它来读取 image_field 信息。
更新 gallery 视图代码，将其添加到控制器接收的 props 中。

注解

这样做可能有点过度设计，因为我们基本上只需要从arch中读取一个属性，但这是每个Odoo视图都使用的设计，因为它让我们将一些前期处理从控制器中提取出来。

另请参阅

Example: The graph arch parser

4. 加载一些数据¶

现在让我们获取一些真实数据。

Exercise

在 GalleryController 中添加一个 loadImages(domain) {...} 方法。它应该执行一个来自 orm 服务的 webSearchRead 调用，以获取与域相对应的记录并使用在 props 中接收到的 imageField。
修改 setup 代码，在 onWillStart 和 onWillUpdateProps 钩子中调用该方法。
修改模板以在 Layout 组件的默认插槽中显示数据。

注解

加载数据的代码将在下一个练习中移入适当的模型中。

5. 重新组织代码¶

真正的视图会更加有组织。在这个例子中可能有些过度，但这是为了学习如何在Odoo中构建代码结构。此外，这将更好地适应不断变化的需求。

Exercise

将所有模型代码移动到自己的 GalleryModel 类中。
将所有渲染代码移动到 GalleryRenderer 组件中。
调整 GalleryController 和 gallery_view 以使其正常工作。

6. 显示图片¶

Exercise

更新渲染器以便以美观的方式显示图像，如果字段已设置。如果 image_field 为空，则显示一个空框。

7. 点击后切换到表单视图¶

Exercise

更新渲染器以响应对图像的单击并切换到表单视图。您可以使用操作服务中的 switchView 函数。

另请参阅

代码：switchView 函数

9. 添加分页功能¶

Exercise

让我们在控制面板上添加一个分页器，并像在普通的Odoo视图中一样管理所有分页。请注意，这是非常困难的。

另请参阅

Code: The usePager hook

10. 验证视图¶

到目前为止，我们已经拥有了一个漂亮且有用的视图。但在实际应用中，我们可能会遇到用户错误编码其图库视图的 arch 的问题：它目前只是一个非结构化的 XML 片段。

让我们添加一些验证！在Odoo中，XML文档可以用一个RN文件 :dfn:`（Relax NG文件）`来描述，然后进行验证。

Exercise

添加一个描述当前语法的 RNG 文件：
- 一个必填属性 image_field.
- 一个可选属性： tooltip_field 。
添加一些代码，确保所有视图都根据此 RNG 文件进行验证。
顺便提一下，确保 image_field 和 tooltip_field 是当前模型中的字段。

由于验证 RNG 文件并不容易，这里提供了一个代码片段以帮助您：

# -*- coding: utf-8 -*-
import logging
import os

from lxml import etree

from odoo.loglevels import ustr
from odoo.tools import misc, view_validation

_logger = logging.getLogger(__name__)

_viewname_validator = None

@view_validation.validate('viewname')
def schema_viewname(arch, **kwargs):
    """ Check the gallery view against its schema

    :type arch: etree._Element
    """
    global _viewname_validator

    if _viewname_validator is None:
        with misc.file_open(os.path.join('modulename', 'rng', 'viewname.rng')) as f:
            _viewname_validator = etree.RelaxNG(etree.parse(f))

    if _viewname_validator.validate(arch):
        return True

    for error in _viewname_validator.error_log:
        _logger.error(ustr(error))
    return False

另请参阅

Example: The RNG file of the graph view

Edit on GitHub

第四章：从头开始创建视图¶

1. 创建一个 Hello World 视图¶

2. 使用布局组件¶

3. 解析 arch¶

4. 加载一些数据¶

5. 重新组织代码¶

6. 显示图片¶

7. 点击后切换到表单视图¶

8. 添加一个可选的工具提示¶

9. 添加分页功能¶

10. 验证视图¶