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

[IMP] playground: improve code samples

Browse Source
This commit is contained in:
Géry Debongnie
2019-04-24 12:15:42 +02:00
parent 7b9194819f
commit 621960a739
1 changed files with 70 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
playground/src/samples.js
+70 -85
View File
@@ -1,110 +1,100 @@
const HELLO_WORLD = `const {Component, QWeb} = owl; const CLICK_COUNTER = `class ClickCounter extends owl.Component {
class App extends Component {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.template = "demo.hello"; this.template = "clickcounter";
this.state = {value: 0};
}
increment() {
this.state.value++;
} }
} }
const qweb = new QWeb(TEMPLATES); const qweb = new owl.QWeb(TEMPLATES);
const app = new App({qweb}, { name: "World" }); const counter = new ClickCounter({qweb});
app.mount(document.body); counter.mount(document.body);
`; `;
const HELLO_WORLD_XML = `<templates> const CLICK_COUNTER_XML = `<templates>
<div t-name="demo.hello" class="hello"> <button t-name="clickcounter" t-on-click="increment">
Hello <t t-esc="props.name"/> Click Me! [<t t-esc="state.value"/>]
</div> </button>
</templates>`; </templates>`;
const HELLO_WORLD_CSS = `.hello { const CLICK_COUNTER_CSS = `button {
color: darkred; color: darkred;
font-size: 30px; font-size: 30px;
width: 220px;
}`; }`;
const HELLO_WORLD_ESNEXT = `// This example will not work if your browser does not support ESNext Class Fields const CLICK_COUNTER_ESNEXT = `// This example will not work if your browser does not support ESNext class fields
const {Component, QWeb} = owl; class ClickCounter extends owl.Component {
template = "clickcounter";
state = {value: 0};
class HelloWorld extends Component { increment() {
template = "demo.hello"; this.state.value++;
}
} }
const qweb = new QWeb(TEMPLATES); const qweb = new owl.QWeb(TEMPLATES);
const hello = new HelloWorld({qweb}, { name: "World" }); const counter = new ClickCounter({qweb});
hello.mount(document.body);`; counter.mount(document.body);
const HELLO_WORLD_ES5 = `const { Component, QWeb } = owl;
function HelloWorld(env, props) {
var obj = new Component(env, props);
Object.setPrototypeOf(obj, HelloWorld.prototype);
obj.template = "demo.hello";
obj.state = { greeting: "Hello" };
return obj;
}
HelloWorld.prototype = Object.create(Component.prototype);
// we show here how to add methods to sub components
HelloWorld.prototype.changeGreeting = function() {
var newGreeting = this.state.greeting === "Hello" ? "Hi" : "Hello";
this.state.greeting = newGreeting;
};
const qweb = new QWeb(TEMPLATES);
const hello = new HelloWorld({ qweb }, { name: "ES5 World" });
hello.mount(document.body);
`; `;
const HELLO_WORLD_ES5_XML = `<templates> const WIDGET_COMPOSITION = `class ClickCounter extends owl.Component {
<div t-name="demo.hello" class="hello" t-on-click="changeGreeting">
<t t-esc="state.greeting"/> <t t-esc="props.name"/>
</div>
</templates>`;
const WIDGET_COMPOSITION = `class Counter extends owl.Component {
constructor(parent, props) { constructor(parent, props) {
super(parent, props); super(parent, props);
this.template="counter"; this.template = "clickcounter";
this.state = { this.state = {value: props.initialState || 0};
value: props.initialState || 0
};
} }
increment(delta) { increment() {
this.state.value += delta; this.state.value++;
} }
} }
let nextId = 1;
class App extends owl.Component { class App extends owl.Component {
constructor() { constructor() {
super(...arguments); super(...arguments);
this.template="app"; this.template = "app";
this.widgets = { Counter }; this.state = {counters: []}
this.widgets = { ClickCounter };
}
addCounter() {
this.state.counters.push(nextId++);
} }
} }
const env = { const qweb = new owl.QWeb(TEMPLATES);
qweb: new owl.QWeb(TEMPLATES) const app = new App({qweb});
}; app.mount(document.body);`;
const app = new App(env);
app.mount(document.body);
`;
const WIDGET_COMPOSITION_XML = `<templates> const WIDGET_COMPOSITION_XML = `<templates>
<div t-name="counter"> <button t-name="clickcounter" t-on-click="increment">
<button t-on-click="increment(-1)">-</button> Click Me! [<t t-esc="state.value"/>]
<span style="font-weight:bold">Value: <t t-esc="state.value"/></span> </button>
<button t-on-click="increment(1)">+</button>
</div>
<div t-name="app"> <div t-name="app">
<t t-widget="Counter" t-props="{initialState: 1}"/> <div><button t-on-click="addCounter">Add a counter</button></div>
<t t-widget="Counter" t-props="{initialState: 42}"/> <div>
<t t-foreach="state.counters" t-as="counter">
<t t-widget="ClickCounter" t-key="counter" t-props="{initialState: counter}"/>
</t>
</div>
</div> </div>
</templates>`; </templates>`;
const WIDGET_COMPOSITION_CSS = `button {
color: darkred;
font-size: 30px;
width: 220px;
}`;
const LIFECYCLE_DEMO = `const { Component, QWeb } = owl; const LIFECYCLE_DEMO = `const { Component, QWeb } = owl;
class HookWidget extends Component { class HookWidget extends Component {
@@ -1060,27 +1050,22 @@ widget.mount(document.body);
export const SAMPLES = [ export const SAMPLES = [
{ {
description: "Hello World", description: "Click Counter",
code: HELLO_WORLD, code: CLICK_COUNTER,
xml: HELLO_WORLD_XML, xml: CLICK_COUNTER_XML,
css: HELLO_WORLD_CSS css: CLICK_COUNTER_CSS
}, },
{ {
description: "Hello World (ESNext)", description: "Click Counter (ESNext)",
code: HELLO_WORLD_ESNEXT, code: CLICK_COUNTER_ESNEXT,
xml: HELLO_WORLD_XML, xml: CLICK_COUNTER_XML,
css: HELLO_WORLD_CSS css: CLICK_COUNTER_CSS
},
{
description: "Hello World (ES5)",
code: HELLO_WORLD_ES5,
xml: HELLO_WORLD_ES5_XML,
css: HELLO_WORLD_CSS
}, },
{ {
description: "Widget Composition", description: "Widget Composition",
code: WIDGET_COMPOSITION, code: WIDGET_COMPOSITION,
xml: WIDGET_COMPOSITION_XML xml: WIDGET_COMPOSITION_XML,
css: WIDGET_COMPOSITION_CSS
}, },
{ {
description: "Lifecycle demo", description: "Lifecycle demo",