2019-04-24 11:54:26 +02:00
|
|
|
# 🦉 Quick Start 🦉
|
|
|
|
|
|
2019-06-14 15:24:04 +02:00
|
|
|
## Static Server
|
2019-04-24 11:54:26 +02:00
|
|
|
|
|
|
|
|
Let us assume that we have a static server running somewhere. We could then
|
|
|
|
|
simply add an html page with a few extra files.
|
|
|
|
|
|
|
|
|
|
### HTML and CSS
|
|
|
|
|
|
|
|
|
|
In a file `index.html`:
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<title>My OWL App</title>
|
|
|
|
|
<link href="app.css" rel="stylesheet" />
|
|
|
|
|
<script src="owl-X.Y.Z.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="main"></div>
|
|
|
|
|
<script src="app.js" type="module"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
2019-03-14 14:12:51 +01:00
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
In `app.css`:
|
2019-03-14 14:12:51 +01:00
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
```css
|
|
|
|
|
button {
|
|
|
|
|
color: darkred;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
width: 220px;
|
|
|
|
|
}
|
|
|
|
|
```
|
2019-03-14 14:12:51 +01:00
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
Also, let's not forget to add a release of OWL (`owl-X.Y.Z.js`)
|
2019-03-14 14:12:51 +01:00
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
### XML
|
2019-03-14 14:12:51 +01:00
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
In `templates.xml`:
|
2019-03-14 14:12:51 +01:00
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
```xml
|
|
|
|
|
<templates>
|
|
|
|
|
<button t-name="clickcounter" t-on-click="increment">
|
|
|
|
|
Click Me! [<t t-esc="state.value"/>]
|
|
|
|
|
</button>
|
|
|
|
|
</templates>
|
2019-03-14 14:12:51 +01:00
|
|
|
```
|
|
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
### JS
|
2019-03-14 14:12:51 +01:00
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
To build an application (or a sub-part of an application), we need two things:
|
2019-03-14 14:12:51 +01:00
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
- an environment: it is the global context in which we are working. It needs to
|
|
|
|
|
contain a QWeb instance (preloaded with templates), and anything else that we
|
2019-10-17 09:50:03 +02:00
|
|
|
need. In practice, it could be used to contain some user session information, some
|
2019-04-24 11:54:26 +02:00
|
|
|
configuration keys (for example, isMobile = true/false if we are in mobile mode).
|
2019-03-14 14:12:51 +01:00
|
|
|
|
2019-06-20 09:42:33 +02:00
|
|
|
- a description of the user interface: there should be a root component, which can
|
|
|
|
|
have sub components
|
2019-03-14 14:12:51 +01:00
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
Here are a few steps that we may take to get started:
|
2019-03-14 14:12:51 +01:00
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
- get the templates
|
|
|
|
|
- create a qweb engine, with the templates
|
|
|
|
|
- create an environment
|
2019-06-20 09:42:33 +02:00
|
|
|
- create an instance of the root component
|
|
|
|
|
- mount the root component to a DOM element
|
2019-03-14 14:12:51 +01:00
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
Let us now add the javascript to make it work, in `app.js`:
|
2019-03-14 14:12:51 +01:00
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
```javascript
|
2019-09-24 14:06:53 +02:00
|
|
|
const useState = owl.hooks.useState;
|
|
|
|
|
|
2019-04-24 11:54:26 +02:00
|
|
|
class ClickCounter extends owl.Component {
|
2019-09-12 09:45:32 +02:00
|
|
|
static template = "clickcounter";
|
2019-10-17 09:50:03 +02:00
|
|
|
state = useState({ value: 0 });
|
2019-04-24 11:54:26 +02:00
|
|
|
|
|
|
|
|
increment() {
|
|
|
|
|
this.state.value++;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//------------------------------------------------------------------------------
|
|
|
|
|
// Application initialization
|
|
|
|
|
//------------------------------------------------------------------------------
|
|
|
|
|
async function start() {
|
2019-10-17 12:20:22 +02:00
|
|
|
const templates = await owl.utils.loadFile("templates.xml");
|
2019-04-24 11:54:26 +02:00
|
|
|
const env = {
|
2019-10-25 16:03:26 +02:00
|
|
|
qweb: new owl.QWeb({ templates })
|
2019-04-24 11:54:26 +02:00
|
|
|
};
|
|
|
|
|
const counter = new ClickCounter(env);
|
|
|
|
|
const target = document.getElementById("main");
|
|
|
|
|
await counter.mount(target);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
start();
|
2019-03-14 14:12:51 +01:00
|
|
|
```
|
