-
-
-
Transition on lists
-
Transitions can also be applied on lists
-
-
-
-
-
-
+
Transition on lists
+
Transitions can also be applied on lists
+
-
-
Simple CSS animation
-
Remember, normal CSS still apply: for example, a simple flash animation with pure css
-
+
Simple CSS animation
+
Remember, normal CSS still apply: for example, a simple flash animation with pure css
+
`;
@@ -177,6 +115,7 @@ const ANIMATION_CSS = `button {
font-size: 18px;
height: 35px;
}
+
.btn {
cursor: pointer;
padding: 5px;
@@ -184,7 +123,6 @@ const ANIMATION_CSS = `button {
background-color: #dddddd;
}
-
.flash {
background-position: center;
transition: background .6s;
@@ -195,7 +133,6 @@ const ANIMATION_CSS = `button {
transition: background 0s;
}
-
.square {
background-color: red;
width: 100px;
@@ -210,6 +147,7 @@ const ANIMATION_CSS = `button {
.fade-enter-active, .fade-leave-active {
transition: opacity .6s;
}
+
.fade-enter, .fade-leave-to {
opacity: 0;
}
@@ -233,7 +171,14 @@ const ANIMATION_CSS = `button {
}
`;
-const LIFECYCLE_DEMO = `class HookWidget extends owl.Component {
+const LIFECYCLE_DEMO = `// This example shows all the possible lifecycle hooks
+//
+// The root widget controls a sub widget (DemoWidget). It logs all its lifecycle
+// methods in the console. Try modifying its state by clicking on it, or by
+// clicking on the two main buttons, and look into the console to see what
+// happens.
+
+class DemoWidget extends owl.Component {
constructor() {
super(...arguments);
this.state = { n: 0 };
@@ -262,37 +207,60 @@ const LIFECYCLE_DEMO = `class HookWidget extends owl.Component {
}
}
-class ParentWidget extends owl.Component {
- constructor() {
- super(...arguments);
- this.widgets = { HookWidget };
- this.state = { n: 0, flag: true };
- }
+class App extends owl.Component {
+ widgets = { DemoWidget };
+ state = { n: 0, flag: true };
+
increment() {
this.state.n++;
}
+
toggleSubWidget() {
this.state.flag = !this.state.flag;
}
}
const qweb = new owl.QWeb(TEMPLATES);
-const widget = new ParentWidget({ qweb });
-widget.mount(document.body);
+const app = new App({ qweb });
+app.mount(document.body);
`;
const LIFECYCLE_DEMO_XML = `
-
-
-
-
-
-
+
+
Demo Sub Widget
+
(click on me to update me)
+
Props: , State: .
+
+
+
+
+
+
+
-
Demo Sub Widget. Props: . State: . (click on me to update me)
+
`;
-const TODO_APP_STORE = `const ENTER_KEY = 13;
+const LIFECYCLE_CSS = `button {
+ font-size: 18px;
+ margin: 5px;
+}
+
+.demo {
+ margin: 10px;
+ padding: 10px;
+ background-color: #dddddd;
+ width: 250px;
+}`;
+
+const TODO_APP_STORE = `// This example is an implementation of the TodoList application, from the
+// www.todomvc.com project. This is a non trivial application with some
+// interesting user interactions. It uses the local storage for persistence.
+//
+// In this implementation, we use the owl Store class to manage the state. It
+// is very similar to the VueX store.
+
+const ENTER_KEY = 13;
const ESC_KEY = 27;
const LOCALSTORAGE_KEY = "todos-odoo";
@@ -937,7 +905,20 @@ html .clear-completed:active {
}
`;
-const RESPONSIVE = `class Navbar extends owl.Component {}
+const RESPONSIVE = `// In this example, we show how we can modify keys in the global environment to
+// make a responsive application.
+//
+// The main idea is to have a "isMobile" key in the environment, then listen
+// to resize events and update the env if needed. Then, the whole interface
+// will be updated, creating and destroying widgets as needed.
+//
+// To see this in action, try resizing the window. The application will switch
+// to mobile mode whenever it has less than 768px.
+
+//------------------------------------------------------------------------------
+// Components
+//------------------------------------------------------------------------------
+class Navbar extends owl.Component {}
class ControlPanel extends owl.Component {
widgets = { MobileSearchView };
@@ -958,6 +939,9 @@ class App extends owl.Component {
widgets = { Navbar, ControlPanel, FormView, Chatter };
}
+//------------------------------------------------------------------------------
+// Application Startup
+//------------------------------------------------------------------------------
function isMobile() {
return window.innerWidth <= 768;
}
@@ -967,6 +951,7 @@ const env = {
isMobile: isMobile()
};
+
const app = new App(env);
app.mount(document.body);
@@ -983,44 +968,44 @@ window.addEventListener("resize", owl.utils.debounce(updateEnv, 20));
`;
const RESPONSIVE_XML = `
- Navbar
+ Navbar
-
-
controlpanel
-
-
-
-
-
formview
-
-
-
-
-
- MOBILE searchview
-
-
-
- This widget is only created in desktop mode.
-
+
+
Control Panel
+
+
+
+
+
Form View
+
+
+
+
+
+
Mobile searchview
+
+
+ This widget is only created in desktop mode.
+
+
+
+
`;
@@ -1036,6 +1021,7 @@ const RESPONSIVE_CSS = `body {
.app.desktop {
display: flex;
}
+
.navbar {
flex: 0 0 30px;
height: 30px;
@@ -1081,17 +1067,19 @@ const RESPONSIVE_CSS = `body {
}
`;
-const SLOTS = `// This example will not work if your browser does not support ESNext class fields
-
-// We show here how slots can be used to create generic components. In this
-// example, the Card component is basically only a container, and is created
-// by giving it slots, inside the t-widget directive.
+const SLOTS = `// We show here how slots can be used to create generic components.
+// In this example, the Card component is basically only a container. It is not
+// aware of its content. It just knows where it should be (with t-slot).
+// The parent widget define the content with t-set.
+//
+// Note that the t-on-click event, defined in the App template, is executed in
+// the context of the App component, even though it is inside the Card component
class Card extends owl.Component {
- state = { fullDisplay: true };
+ state = { showContent: true };
toggleDisplay() {
- this.state.fullDisplay = !this.state.fullDisplay;
+ this.state.showContent = !this.state.showContent;
}
}
@@ -1119,11 +1107,11 @@ const app = new App({ qweb });
app.mount(document.body);`;
const SLOTS_XML = `
-
+
-
+
@@ -1196,32 +1184,161 @@ const SLOTS_CSS = `.main {
border-top: 1px solid white;
}`;
-const EMPTY = `class App extends owl.Component {
+const ASYNC_COMPONENTS = `// This example will not work if your browser does not support ESNext class fields
+
+// In this example, we have 2 sub widgets, one of them being async (slow).
+// However, we don't want renderings of the other sub widget to be delayed
+// because of the slow widget. We use the 't-asyncroot' directive for this
+// purpose. Try removing it to see the difference.
+
+class App extends owl.Component {
+ widgets = {SlowWidget, NotificationList};
+ state = { value: 0, notifs: [] };
+
+ increment() {
+ this.state.value++;
+ const notif = "Value will be set to " + this.state.value;
+ this.state.notifs.push(notif);
+ setTimeout(() => {
+ var index = this.state.notifs.indexOf(notif);
+ this.state.notifs.splice(index, 1);
+ }, 3000);
+ }
}
+class SlowWidget extends owl.Component {
+ willUpdateProps() {
+ // simulate a widget that needs to perform async stuff (e.g. an RPC)
+ // with the updated props before re-rendering itself
+ return new Promise(resolve => setTimeout(resolve, 1500));
+ }
+}
+
+class NotificationList extends owl.Component {}
+
const qweb = new owl.QWeb(TEMPLATES);
-const app = new App({qweb});
+const app = new App({ qweb });
app.mount(document.body);
`;
+const ASYNC_COMPONENTS_XML = `
+
+
+
+
+
+
+
+ Current value:
+
+
+
+`;
+
+const ASYNC_COMPONENTS_CSS = `.app {
+ width: 70%;
+}
+
+button {
+ color: darkred;
+ font-size: 30px;
+ width: 220px;
+}
+
+.value {
+ font-size: 26px;
+ padding: 20px;
+}
+
+.notification-list {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+.notification {
+ width: 150px;
+ margin: 4px 8px;
+ padding: 16px;
+ border: 1px solid: black;
+ background-color: lightgray;
+}`;
+
+const FORM = `// This example illustrate how the t-model directive can be used to synchronize
+// data between html inputs (and select/textareas) and the state of a component.
+// Note that there are two controls with t-model="color": they are totally
+// synchronized.
+
+class Form extends owl.Component {
+ state = {
+ text: "",
+ othertext: "",
+ number: 11,
+ color: "",
+ bool: false
+ };
+}
+
+// Application setup
+const qweb = new owl.QWeb(TEMPLATES);
+const form = new Form({ qweb });
+form.mount(document.body);
+`;
+
+const FORM_XML = `
+
+
Form
+
+ Text (immediate):
+
+
+ Other text (lazy):
+
+
+ Number:
+
+
+ Boolean:
+
+
+ Color, with a select:
+
+
+
+ Color, with radio buttons:
+
+
+
+
+
State
+
Text:
+
Other Text:
+
Number:
+
Boolean: TrueFalse
+
Color:
+