Géry Debongnie
e56580efb2
Each component called its hooks properly individually, however the issue was that it was done component by component. However, in practice, we want the willPatch hooks to be done before ANY patch is actually performed, and the patched should be called AFTER every patch is applied. The trick is to propagate a list of patched components across various function calls. closes #64
🦉 Odoo Web Library 🦉
Project Overview
The Odoo Web Library (OWL) is a small UI framework intended to be the basis for the Odoo Web Client, and hopefully many other Odoo related projects. OWL's main feature is a declarative component system, with QWeb as a template engine, asynchronous rendering, and an underlying virtual dom.
If you are interested, you can find a discussion on what makes OWL different from React and Vue here
What makes OWL different
- XML based: templates are based on the XML format, which allows interesting
applications. For example, they could be stored in a database and modified
dynamically with
xpaths. - templates compilation in the browser: this may not be a good fit for all applications, but if you need to generate dynamically user interfaces in the browser, this is very powerful. For example, a generic form view component could generate a specific form user interface for each various models, from a XML view.
- no toolchain required: this is extremely useful for some applications, if,
for various reasons (security/deployment/dynamic modules/specific assets tools),
it is not ok to use standard web tools based on
npm.
Try it online!
An online playground is available at https://odoo.github.io/owl/playground to let you experiment with the OWL framework.
Example
Here is a short example to illustrate interactive widgets:
class ClickCounter extends owl.Component {
inlineTemplate = `
<button t-on-click="increment">
Click Me! [<t t-esc="state.value"/>]
</button>`;
state = { value: 0 };
increment() {
this.state.value++;
}
}
const qweb = new owl.QWeb();
const counter = new ClickCounter({qweb});
counter.mount(document.body);
More interesting examples can be found on the playground application.
Installing/Building
If you want to use a simple <script> tag, the last release can be downloaded here:
Some npm scripts are available:
| Command | Description |
|---|---|
npm install |
install every dependency required for this project |
npm run build |
build a bundle of owl in the /dist/ folder |
npm run minify |
minify the prebuilt owl.js file |
npm run test |
run all tests |
npm run test:watch |
run all tests, and keep a watcher |
Documentation
The complete documentation can be found here. The most important sections are:
License
OWL is GPL licensed.