Önálló Owl alkalmazás létrehozása¶

Számos okból kifolyólag előfordulhat, hogy egy önálló Owl alkalmazást szeretne, amely nem része a web kliensnek. Az Odoo egyik példája az önkiszolgáló alkalmazás, amely lehetővé teszi az ügyfelek számára, hogy telefonjukról rendeljenek ételt. Ebben a fejezetben áttekintjük, mi szükséges egy ilyen megvalósításához.

Áttekintés¶

Egy önálló Owl alkalmazás létrehozásához néhány dolog szükséges:

egy gyökérkomponens az alkalmazáshoz
egy eszközköteg, amely tartalmazza a beállítási kódot
egy QWeb nézet, amely meghívja az eszközköteget
egy vezérlő, amely megjeleníti a nézetet

1. Gyökérkomponens¶

To keep things simple, let’s start with a very straightforward component that just renders „Hello, World!”. This will let us know at a glance if our setup is working.

Először hozza létre a sablont a következő helyen: /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>

Ezután hozza létre a JavaScript fájlt ehhez a komponenshez a következő helyen: /your_module/static/src/standalone_app/root.js.

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

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

Általában jó ötlet, ha az alkalmazás beállítási kódját, amely a komponenst csatolja, külön fájlban tartjuk. Hozza létre a JavaScript fájlt, amely az alkalmazást csatolja a következő helyen: /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));

A mountComponent segédfüggvény gondoskodik az Owl alkalmazás létrehozásáról és helyes konfigurálásáról: létrehoz egy környezetet, elindítja a szolgáltatásokat, biztosítja, hogy az alkalmazás le legyen fordítva, és hozzáférést biztosít az alkalmazásnak az eszközköteg sablonjaihoz, többek között.

Lásd még

Owl komponensek referencia.

2. Eszközköteg létrehozása, amely tartalmazza a kódunkat¶

A modulod manifestjében hozz létre egy új eszközcsomagot. Ennek tartalmaznia kell a web._assets_core csomagot, amely az Odoo JavaScript keretrendszert és a szükséges alapkönyvtárakat tartalmazza (pl. Owl és luxon), majd hozzáadhatsz egy globot, amely az alkalmazásod összes fájlját hozzáadja a csomaghoz.

{
    # ...
    '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/**/*',
        ],
    }
}

A többi sor csomagok és scss fájlok, amelyek szükségesek a Bootstrap működéséhez. Ezek kötelezőek, mivel a webes keretrendszer komponensei a bootstrap osztályokat használják a stílusukhoz és elrendezésükhöz.

Figyelem

Győződj meg arról, hogy az önálló alkalmazásod fájljai csak ehhez a csomaghoz vannak hozzáadva. Ha már van meghatározásod a web.assets_backend vagy web.assets_frontend számára, és ezek globjai vannak, győződj meg arról, hogy ezek a globok nem egyeznek az önálló alkalmazásod fájljaival, különben az alkalmazásod indítókódja ütközni fog a meglévő indítókóddal ezekben a csomagokban.

Lásd még

Modul manifest referencia.

3. XML nézet, amely meghívja az eszközcsomagot¶

Most, hogy létrehoztuk az eszközcsomagunkat, létre kell hoznunk egy QWeb nézetet, amely ezt az eszközcsomagot használja.

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

Ez a sablon csak két dolgot csinál: inicializálja az odoo globális változót, majd meghívja az általunk éppen definiált eszközcsomagot. Az odoo globális változó inicializálása szükséges lépés. Ennek a változónak egy objektumnak kell lennie, amely a következőket tartalmazza:

A CSRF token, amely szükséges az HTTP vezérlőkkel való interakcióhoz sok esetben.
A hibakeresési érték, amelyet sok helyen használnak további naplózás vagy fejlesztőbarát ellenőrzések hozzáadására.
__session_info__, amely a szervertől származó információkat tartalmazza, amelyekre mindig szükség van, és amelyekhez nem akarunk további kérést végrehajtani. Erről bővebben a következő szakaszban.

4. Vezérlő, amely megjeleníti a nézetet¶

Most, hogy megvan a nézet, elérhetővé kell tennünk a felhasználó számára. Ehhez létrehozunk egy HTTP vezérlőt, amely megjeleníti a nézetet és visszaadja a felhasználónak.

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

Figyeljük meg, hogyan adjuk át a session_info sablont. Ezt a get_frontend_session_info metódusból kapjuk, és végül olyan információkat fog tartalmazni, amelyeket a webes keretrendszer használ, például a jelenlegi felhasználó azonosítóját, ha be van jelentkezve, a szerver verzióját, az Odoo kiadását stb.

At this point, if you open the url /your_module/standalone_app in your brower, you should see a blank page with the text „Hello, World!”. At this point, you can start actually writing the code for your app.