mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[DOC] component: add section on root widget
This commit is contained in:
@@ -4,6 +4,7 @@
|
|||||||
|
|
||||||
- [Overview](#overview)
|
- [Overview](#overview)
|
||||||
- [Example](#example)
|
- [Example](#example)
|
||||||
|
- [Root Widget And Environment](#root-widget-and-environment)
|
||||||
- [Reference](#reference)
|
- [Reference](#reference)
|
||||||
- [Properties](#properties)
|
- [Properties](#properties)
|
||||||
- [Static Properties](#static-properties)
|
- [Static Properties](#static-properties)
|
||||||
@@ -75,6 +76,30 @@ a state object is defined. It is not mandatory to use the state object, but it
|
|||||||
is certainly encouraged. The state object is [observed](observer.md), and any
|
is certainly encouraged. The state object is [observed](observer.md), and any
|
||||||
change to it will cause a rerendering.
|
change to it will cause a rerendering.
|
||||||
|
|
||||||
|
## Root Widget And Environment
|
||||||
|
|
||||||
|
Most of the time, Owl widget will be created automatically by the `t-widget`
|
||||||
|
directive in a template. There is however an obvious exception: the root widget
|
||||||
|
of an Owl application has to be created manually:
|
||||||
|
|
||||||
|
```js
|
||||||
|
class App extends owl.Component { ... }
|
||||||
|
|
||||||
|
const qweb = new owl.QWeb(TEMPLATES);
|
||||||
|
const env = { qweb: qweb };
|
||||||
|
const app = new App(env);
|
||||||
|
app.mount(document.body);
|
||||||
|
```
|
||||||
|
|
||||||
|
The root widget needs an environment. In Owl, an environment is an object with
|
||||||
|
a `qweb` key, which has to be a [QWeb](qweb.md) instance. This qweb instance will
|
||||||
|
be used to render everything.
|
||||||
|
|
||||||
|
The environment will be given to each child, unchanged, in the `env` property.
|
||||||
|
This can be very useful to share common information/methods. For example, all
|
||||||
|
rpcs can be made through a `rpc` method in the environment. This makes it very
|
||||||
|
easy to test a component.
|
||||||
|
|
||||||
## Reference
|
## Reference
|
||||||
|
|
||||||
An Owl component is a small class which represent a widget or some UI element.
|
An Owl component is a small class which represent a widget or some UI element.
|
||||||
|
|||||||
Reference in New Issue
Block a user