Web framework tutorial

awesome_owl/__init__.py

@@ -1,3 +1,3 @@
 # -*- coding: utf-8 -*-
 
-from . import controllers
+from . import controllers

awesome_owl/__manifest__.py

@@ -1,43 +1,37 @@
-# -*- coding: utf-8 -*-
 {
-    'name': "Awesome Owl",
-
-    'summary': """
+    "name": "Awesome Owl",
+    "summary": """
         Starting module for "Discover the JS framework, chapter 1: Owl components"
     """,
-
-    'description': """
+    "description": """
         Starting module for "Discover the JS framework, chapter 1: Owl components"
     """,
-
-    'author': "Odoo",
-    'website': "https://www.odoo.com",
-
+    "author": "Odoo",
+    "website": "https://www.odoo.com",
     # Categories can be used to filter modules in modules listing
     # Check https://github.com/odoo/odoo/blob/15.0/odoo/addons/base/data/ir_module_category_data.xml
     # for the full list
-    'category': 'Tutorials',
-    'version': '0.1',
-
+    "category": "Tutorials",
+    "version": "0.1",
     # any module necessary for this one to work correctly
-    'depends': ['base', 'web'],
-    'application': True,
-    'installable': True,
-    'data': [
-        'views/templates.xml',
+    "depends": ["base", "web"],
+    "application": True,
+    "installable": True,
+    "data": [
+        "views/templates.xml",
     ],
-    'assets': {
-        'awesome_owl.assets_playground': [
-            ('include', 'web._assets_helpers'),
-            ('include', 'web._assets_backend_helpers'),
-            'web/static/src/scss/pre_variables.scss',
-            'web/static/lib/bootstrap/scss/_variables.scss',
-            'web/static/lib/bootstrap/scss/_maps.scss',
-            ('include', 'web._assets_bootstrap'),
-            ('include', 'web._assets_core'),
-            'web/static/src/libs/fontawesome/css/font-awesome.css',
-            'awesome_owl/static/src/**/*',
+    "assets": {
+        "awesome_owl.assets_playground": [
+            ("include", "web._assets_helpers"),
+            ("include", "web._assets_backend_helpers"),
+            "web/static/src/scss/pre_variables.scss",
+            "web/static/lib/bootstrap/scss/_variables.scss",
+            "web/static/lib/bootstrap/scss/_maps.scss",
+            ("include", "web._assets_bootstrap"),
+            ("include", "web._assets_core"),
+            "web/static/src/libs/fontawesome/css/font-awesome.css",
+            "awesome_owl/static/src/**/*",
         ],
     },
-    'license': 'AGPL-3'
+    "license": "AGPL-3",
 }

awesome_owl/static/src/card/card.js

@@ -0,0 +1,18 @@
+import { Component, xml } from "@odoo/owl";
+
+
+export class Card extends Component {
+    static template = xml`
+        <div class="card d-inline-block m-2" style="width: 18rem;">
+            <div class="card-body">
+                <h5 class="card-title" t-out="props.title" />
+                <p class="card-text" t-out="props.content" />
+            </div>
+        </div>
+    `;
+
+    static props = {
+        title: String,
+        content: [Object, String],
+    }
+}

awesome_owl/static/src/counter/counter.js

@@ -0,0 +1,23 @@
+import { Component, useState, xml } from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = xml`
+        <div>
+            <p>Counter: <t t-esc="state.value"/></p>
+            <button class="btn btn-primary" t-on-click="increment">Increment</button>
+        </div>
+    `;
+
+    static props = {
+        onChange: { type: Function, optional: true },
+    };
+
+    setup() {
+        this.state = useState({ value: 0 });
+    }
+
+    increment() {
+        this.state.value++;
+        this.props.onChange?.();
+    }
+}

awesome_owl/static/src/main.js

@@ -4,9 +4,8 @@ import { Playground } from "./playground";
 
 const config = {
     dev: true,
-    name: "Owl Tutorial" 
+    name: "Owl Tutorial"
 };
 
 // Mount the Playground component when the document.body is ready
 whenReady(() => mountComponent(Playground, document.body, config));
-

awesome_owl/static/src/playground.js

@@ -1,5 +1,28 @@
-import { Component } from "@odoo/owl";
+import { Component, markup, useState } from "@odoo/owl";
+import { Card } from "./card/card";
+import { Counter } from "./counter/counter";
+
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+
+    static components = { Card, Counter };
+    static props = {};
+
+    setup() {
+        this.sum = useState({ value: 0 });
+        this.onChange = this.onChange.bind(this);
+    }
+
+    get htmlContent() {
+        return markup("<strong>This is bold</strong>");
+    }
+
+    get rawHtmlContent() {
+        return "<strong>This is not bold</strong>";
+    }
+
+    onChange() {
+        this.sum.value++;
+    }
 }

awesome_owl/static/src/playground.xml

@@ -1,10 +1,16 @@
-<?xml version="1.0" encoding="UTF-8" ?>
+<?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
-
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
+        <div>
+            <div class="playground p-3">
+                <Counter onChange="onChange" />
+                <Counter onChange="onChange" />
+            </div>
+            <p>The sum is: <t t-esc="sum.value" /></p>
+        </div>
+        <div>
+            <Card title="'card 1'" content="rawHtmlContent" />
+            <Card title="'card 2'" content="htmlContent" />
         </div>
     </t>
-
 </templates>

awesome_owl/views/templates.xml

@@ -1,15 +1,15 @@
 <odoo>
     <data>
-          <template id="awesome_owl.playground" name="Awesome T-Shirt thank you">
+        <template id="awesome_owl.playground" name="Awesome T-Shirt thank you">
             <html>
                 <head>
-                    <link type="image/x-icon" rel="shortcut icon" href="/web/static/img/favicon.ico"/>
-                    <t t-call-assets="awesome_owl.assets_playground"/>
+                    <link type="image/x-icon" rel="shortcut icon" href="/web/static/img/favicon.ico" />
+                    <t t-call-assets="awesome_owl.assets_playground" />
                 </head>
 
                 <body>
                 </body>
             </html>
-          </template>
+        </template>
     </data>
 </odoo>