Testreszab egy nézettípust¶

Alosztályoz egy meglévő nézetet¶

Tegyük fel, hogy létre kell hoznunk egy általános nézet egyedi verzióját. Például egy kanban nézetet néhány extra szalag-szerű widgettel a tetején (hogy megjelenítsen néhány speciális egyedi információt). Ebben az esetben ez néhány lépésben megtehető:

Bővítse a kanban vezérlőt/renderelőt/modellt, és regisztrálja a nézet regiszterébe.

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 {
    static template = "my_module.CustomKanbanView";

    // Your logic here, override or insert new methods...
    // if you override setup(), don't forget to call super.setup()
}

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);

Egyedi kanbanunkban új sablont definiáltunk. Vagy örökölhetjük a kanban vezérlő sablont, és hozzáadhatjuk a saját sablonrészeinket, vagy teljesen új sablont definiálhatunk.

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>

Használja a nézetet a js_class attribútummal az arch-ban.

<kanban js_class="custom_kanban">
    <templates>
        <t t-name="kanban-box">
            <!--Your comment-->
        </t>
    </templates>
</kanban>

A nézetek kiterjesztésének lehetőségei végtelenek. Bár itt csak a vezérlőt bővítettük, kiterjesztheti a renderelőt is, hogy új gombokat adjon hozzá, módosítsa a rekordok megjelenítését, vagy testreszabja a legördülő menüt, valamint kiterjesztheti más összetevőket is, mint például a modellt és a buttonTemplate-et.

Hozzon létre egy új nézetet a semmiből¶

Új nézet létrehozása haladó téma. Ez az útmutató csak a lényeges lépéseket emeli ki.

Hozza létre a vezérlőt.

A vezérlő elsődleges szerepe a nézet különböző összetevői, mint például a Renderer, Model és Layout közötti koordináció megkönnyítése.

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 {
    static template = "my_module.View";
    static components = { Layout };

    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();
        });
    }
}

A Vezérlő sablonja megjeleníti a vezérlőpanelt az Elrendezéssel és a renderelővel együtt.

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>

Hozza létre a renderelőt.

A renderelő elsődleges funkciója, hogy vizuális ábrázolást készítsen az adatokból azáltal, hogy megjeleníti a nézetet, amely tartalmazza a rekordokat.

beautiful_renderer.js¶

import { Component } from "@odoo/owl";
export class BeautifulRenderer extends Component {
    static 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>

Hozza létre a modellt.

A modell szerepe az, hogy lekérje és kezelje az összes szükséges adatot a nézetben.

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;
    }
}

Megjegyzés

Haladó esetekben, ahelyett, hogy a modellt a semmiből hoznánk létre, lehetőség van a RelationalModel használatára is, amelyet más nézetek is használnak.

Hozza létre az arch elemzőt.

Az arch elemző szerepe az arch nézet elemzése, hogy a nézet hozzáférjen az információkhoz.

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,
        };
    }
}

Hozza létre a nézetet, és kombinálja össze az összes elemet, majd regisztrálja a nézetet a nézetek nyilvántartásában.

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);

Deklarálja a nézetet az arch-ban.

...
<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>
...