Development Book V17: Reactive OWL component

The goal of reactivity is to provide an easy mechanism to modify the state so that the interface is automatically updated when the state is modified. OWL allows for automatic user interface updates through the hooks. When something changes inside the component, the hooks will immediately update the component's user interface. In the example that follows, the component's message will change according to what the user does.

Reactively implementing our OWL component by executing the following commands, the useState hook import

const { Component, whenReady, xml, mount, useState } = owl;

Then define the component as below:

                            
                        class Counter extends Component {
                            static template = xml`
                                <div class="bg-info text-center p-2">
                                    <i class="fa fa-arrow-left p-1" style="cursor: pointer;" t-on-click="onPrevious"> </i>
                                    <b t-esc="messageList[Math.abs(state.currentIndex%4)]"/>
                                    <i class="fa fa-arrow-right p-1" style="cursor: pointer;" t-on-click="onNext"> </i>
                                    <i class="fa fa-close p-1 float-right" style="cursor: pointer;" t-on-click="onRemove"> </i>
                                </div>`
                        }
                        
                        

Then add the constructor () method for constructor

                            
                        constructor() {
                          super(...arguments);
                          this.messageList = [
                              'Hello World',
                              'Welcome to Odoo',
                              'Odoo is awesome',
                              'You are awesome too'
                              ];
                          this.state = useState({ currentIndex: 0 });
                        }

                            
                        

We define the click event handling methods inside the component as follows:

                        
                        onNext(ev) {
                           this.state.currentIndex++;
                        }
                        onPrevious(ev) {
                           this.state.currentIndex--;
                        }
                        
                        

To handle the component's state, we imported the useState hook in this instance. Next, define the component's template. We have added a message to the component that has an arrow to the left and right of it. When an object instance is created, the constructor method is called. The list of messages has been defined to a variable inside the constructor. We have added the state variable by using the useState hook. Our OWL component is hence reactive. The current index has been added to the state, and the user interface is updated whenever the state is modified. The variable is updated by the onNext() and onPrevious() functions. The result will look like this:

The corresponding method is called and the message is updated when we click on the arrow.