自定义视图类型¶
子类化现有视图¶
假设我们需要创建一个通用视图的自定义版本。例如,在顶部添加一些类似缎带的小部件(用于显示某些特定的自定义信息)的看板视图。在这种情况下,可以通过以下几步完成:
扩展看板控制器/渲染器/模型,并在视图注册表中进行注册。
custom_kanban_controller.js
¶import { KanbanController } from "@web/views/kanban/kanban_controller"; import { kanbanView } from "@web/views/kanban/kanban_view"; import { registry } from "@web/core/registry"; // the controller usually contains the Layout and the renderer. class CustomKanbanController extends KanbanController { // Your logic here, override or insert new methods... // if you override setup(), don't forget to call super.setup() } CustomKanbanController.template = "my_module.CustomKanbanView"; export const customKanbanView = { ...kanbanView, // contains the default Renderer/Controller/Model Controller: CustomKanbanController, }; // Register it to the views registry registry.category("views").add("custom_kanban", customKanbanView);
在我们的自定义看板中,我们定义了一个新的模板。我们可以继承看板控制器模板并添加我们的模板片段,也可以完全定义一个新的模板。
custom_kanban_controller.xml
¶<?xml version="1.0" encoding="UTF-8" ?> <templates> <t t-name="my_module.CustomKanbanView" t-inherit="web.KanbanView"> <xpath expr="//Layout" position="before"> <div> Hello world ! </div> </xpath> </t> </templates>
在架构中使用具有
js_class
属性的视图。<kanban js_class="custom_kanban"> <templates> <t t-name="kanban-box"> <!--Your comment--> </t> </templates> </kanban>
扩展视图的可能性是无限的。虽然我们在这里只扩展了控制器,但你也可以扩展渲染器以添加新按钮、修改记录的展示方式,或自定义下拉菜单,还可以扩展其他组件,如模型和 buttonTemplate
。
从头开始创建一个视图¶
创建新视图是一个高级主题。本指南仅介绍必要的步骤。
创建控制器。
控制器的主要作用是促进视图中各个组件(如渲染器、模型和布局)之间的协调。
beautiful_controller.js
¶import { Layout } from "@web/search/layout"; import { useService } from "@web/core/utils/hooks"; import { Component, onWillStart, useState} from "@odoo/owl"; export class BeautifulController extends Component { setup() { this.orm = useService("orm"); // The controller create the model and make it reactive so whenever this.model is // accessed and edited then it'll cause a rerendering this.model = useState( new this.props.Model( this.orm, this.props.resModel, this.props.fields, this.props.archInfo, this.props.domain ) ); onWillStart(async () => { await this.model.load(); }); } } BeautifulController.template = "my_module.View"; BeautifulController.components = { Layout };
控制器的模板显示带有布局的控制面板以及渲染器。
beautiful_controller.xml
¶<?xml version="1.0" encoding="UTF-8"?> <templates xml:space="preserve"> <t t-name="my_module.View"> <Layout display="props.display" className="'h-100 overflow-auto'"> <t t-component="props.Renderer" records="model.records" propsYouWant="'Hello world'"/> </Layout> </t> </templates>
创建渲染器。
渲染器的主要功能是通过渲染包含记录的视图,生成数据的可视化表示。
beautiful_renderer.js
¶import { Component } from "@odoo/owl"; export class BeautifulRenderer extends Component {} BeautifulRenderer.template = "my_module.Renderer";
beautiful_renderer.xml
¶<?xml version="1.0" encoding="UTF-8"?> <templates xml:space="preserve"> <t t-name="my_module.Renderer"> <t t-esc="props.propsYouWant"/> <t t-foreach="props.records" t-as="record" t-key="record.id"> // Show records </t> </t> </templates>
创建模型。
模型的作用是检索和管理视图中所需的所有数据。
beautiful_model.js
¶import { KeepLast } from "@web/core/utils/concurrency"; export class BeautifulModel { constructor(orm, resModel, fields, archInfo, domain) { this.orm = orm; this.resModel = resModel; // We can access arch information parsed by the beautiful arch parser const { fieldFromTheArch } = archInfo; this.fieldFromTheArch = fieldFromTheArch; this.fields = fields; this.domain = domain; this.keepLast = new KeepLast(); } async load() { // The keeplast protect against concurrency call const { length, records } = await this.keepLast.add( this.orm.webSearchRead(this.resModel, this.domain, [this.fieldsFromTheArch], {}) ); this.records = records; this.recordsLength = length; } }
注解
对于高级用例,除了从头开始创建模型外,也可以使用
RelationalModel
,该模型被其他视图所使用。创建架构解析器。
存档解析器的作用是解析存档视图,以便视图可以访问相关信息。
beautiful_arch_parser.js
¶import { XMLParser } from "@web/core/utils/xml"; export class BeautifulArchParser extends XMLParser { parse(arch) { const xmlDoc = this.parseXML(arch); const fieldFromTheArch = xmlDoc.getAttribute("fieldFromTheArch"); return { fieldFromTheArch, }; } }
创建视图并把所有部分组合在一起,然后将视图注册到视图注册表中。
beautiful_view.js
¶import { registry } from "@web/core/registry"; import { BeautifulController } from "./beautiful_controller"; import { BeautifulArchParser } from "./beautiful_arch_parser"; import { BeautifylModel } from "./beautiful_model"; import { BeautifulRenderer } from "./beautiful_renderer"; export const beautifulView = { type: "beautiful", display_name: "Beautiful", icon: "fa fa-picture-o", // the icon that will be displayed in the Layout panel multiRecord: true, Controller: BeautifulController, ArchParser: BeautifulArchParser, Model: BeautifulModel, Renderer: BeautifulRenderer, props(genericProps, view) { const { ArchParser } = view; const { arch } = genericProps; const archInfo = new ArchParser().parse(arch); return { ...genericProps, Model: view.Model, Renderer: view.Renderer, archInfo, }; }, }; registry.category("views").add("beautifulView", beautifulView);
在架构中声明 视图。
... <record id="my_beautiful_view" model="ir.ui.view"> <field name="name">my_view</field> <field name="model">my_model</field> <field name="arch" type="xml"> <beautiful fieldFromTheArch="res.partner"/> </field> </record> ...