NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[DOC] doc: update a lot of the documentation

Browse Source
This commit is contained in:
Géry Debongnie
2019-04-23 15:26:00 +02:00
parent 79b97c6d24
commit 1a778922af
8 changed files with 266 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+44 -84
View File
@@ -2,83 +2,30 @@
## Project Overview
The Odoo Web Library (OWL) is a small (currently around 11k minified and gzipped)
framework intended to be the basis for the Odoo Web Client, and hopefully many
other Odoo related projects.
The Odoo Web Library (OWL) is a small
UI framework intended to be the basis for the [Odoo](https://www.odoo.com/) Web Client, and hopefully many
other Odoo related projects. OWL's two key features are:
Briefly, the OWL framework contains:
- a declarative component system, with QWeb as a template engine, asynchronous rendering, and an underlying virtual dom,
- and a store (state management solution, loosely inspired by VueX and React/Redux).
- a declarative component system, with a virtual dom based on a fork of Snabbdom
- and a store (state management solution, loosely inspired by VueX and React/Redux)
If you are interested, you can find a discussion on what makes OWL different
from React and Vue [here](doc/comparison.md)
The component system is designed to be:
## Try it online!
1. **declarative:** the user interface should be described in term of the state
of the application, not as a sequence of imperative steps.
An online playground is available at [https://odoo.github.io/owl/](https://odoo.github.io/owl/) to let you experiment with the OWL framework.
2. **composable:** each widget can seamlessly be created in a parent widget by
a simple directive in its template.
# Example
3. **asynchronous rendering:** the framework will transparently wait for each
subwidgets to be ready before applying the rendering. It uses native promises
under the hood.
4. **uses QWeb as a template system:** the templates are described in XML
and follow the QWeb specification. This is a requirement for Odoo.
## Try it online
You can experiment with the OWL project online: [https://odoo.github.io/owl/](https://odoo.github.io/owl/)
## Installing/Building
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 build:es5 | build a bundle of _owl_ in the _/dist/_ folder (ES5 code) |
| 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](doc/readme.md). The most important sections are:
- [Quick Start](doc/quick_start.md)
- [Tutorial](doc/tutorial.md)
- [Component](doc/component.md)
- [QWeb](doc/qweb.md)
# Examples
Here is a minimal Hello World example:
Here is a short example to illustrate interactive widgets:
```javascript
class HelloWorld extends owl.core.Component {
inlineTemplate = `<div>Hello <t t-esc="props.name"/></div>`;
}
const env = {
qweb: new owl.core.QWeb()
};
const hello = new HelloWorld(env, { name: "World" });
hello.mount(document.body);
```
The next example show interactive widgets, and how widget
composition works:
```javascript
class ClickCounter extends owl.core.Component {
class ClickCounter extends owl.Component {
inlineTemplate = `
<div>
<button t-on-click="increment">Click Me! [<t t-esc="state.value"/>]</button>
</div>`;
<button t-on-click="increment">
Click Me! [<t t-esc="state.value"/>]
</button>`;
constructor(parent, props) {
super(parent, props);
@@ -90,24 +37,37 @@ class ClickCounter extends owl.core.Component {
}
}
class App extends owl.core.Component {
inlineTemplate = `
<div>
<t t-widget="ClickCounter"/>
</div>`;
widgets = { ClickCounter };
}
const env = {
qweb: new owl.core.QWeb()
};
const app = new App(env);
app.mount(document.body);
const qweb = new owl.QWeb();
const counter = new ClickCounter({qweb});
counter.mount(document.body);
```
More interesting examples can be found on the playground application: [https://odoo.github.io/owl/](https://odoo.github.io/owl/).
More interesting examples can be found on the [playground](https://odoo.github.io/owl/) application.
## Installing/Building
If you want to use a simple `<script>` tag, the last release can be downloaded here:
- [owl-0.7.0.js](https://odoo.github.io/owl/releases/owl-0.7.0.js)
- [owl-0.7.0.min.js](https://odoo.github.io/owl/releases/owl-0.7.0.min.js)
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](doc/readme.md). The most important sections are:
- [Quick Start](doc/quick_start.md)
- [Component](doc/component.md)
- [Store](doc/store.md)
## License