[DOC] move quick_start into learning/ sub folder

2025-10-06 19:59:41 +07:00 · 2019-10-30 09:54:24 +01:00
parent 9106c19066
commit 5ba73cc09d
2 changed files with 15 additions and 7 deletions
@@ -0,0 +1,108 @@
+# 🦉 Quick Start 🦉
+
+## Static Server
+
+Let us assume that we have a static server running somewhere. Let us start by
+adding an html page with a few extra files:
+
+```
+my-app/
+    index.html
+    app.css
+    app.js
+    owl-X.Y.Z.js
+    templates.xml
+```
+
+### 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>
+```
+
+In `app.css`:
+
+```css
+button {
+  color: darkred;
+  font-size: 30px;
+  width: 220px;
+}
+```
+
+Also, let's not forget to add a release of OWL (`owl-X.Y.Z.js`)
+
+### XML
+
+In `templates.xml`:
+
+```xml
+<templates>
+   <button t-name="clickcounter" t-on-click="increment">
+      Click Me! [<t t-esc="state.value"/>]
+    </button>
+</templates>
+```
+
+### JS
+
+To build an application (or a sub-part of an application), we need two things:
+
+- 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
+  need. In practice, it could be used to contain some user session information, some
+  configuration keys (for example, isMobile = true/false if we are in mobile mode).
+
+- a description of the user interface: there should be a root component, which can
+  have sub components
+
+Here are a few steps that we may take to get started:
+
+- get the templates
+- create a qweb engine, with the templates
+- create an environment
+- create an instance of the root component
+- mount the root component to a DOM element
+
+Let us now add the javascript to make it work, in `app.js`:
+
+```javascript
+const useState = owl.hooks.useState;
+
+class ClickCounter extends owl.Component {
+  static template = "clickcounter";
+  state = useState({ value: 0 });
+
+  increment() {
+    this.state.value++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadFile("templates.xml");
+  const qweb = new owl.QWeb({ templates });
+  owl.config.env.qweb = qweb;
+  const counter = new ClickCounter();
+  const target = document.getElementById("main");
+  await counter.mount(target);
+}
+
+start();
+```