Hello there,
I have been learning the OWL framework by doing the todo list tutorial. I have completed the tutorial and understood the concepts of components, hooks, templates, event handling, reactivity, etc.
Now I am going through the POS app and trying to understand how OWL was used in Odoo specifically. However, except from the templates, I cannot seem relate the code from Odoo POS with the OWL tutorial code.
This is why I would like to ask here to get some more details and hopefully understand the way in which it is written.
I was looking specifically at the ProductScreen component within the Point of Sale and trying to understand it.
Below I have added specific questions.
I have attached three links to images with screenshot of what I will refer to in the following questions.
1. How does Odoo instantiate classes (such as class ProductScreen).What is the trigger for the instantiation and what does the instantiated object reference?
For example: In regular Javascript I have to use the "new" keyword to create an instance of the class. However, I do not see that in the code. So I'm wondering how Odoo does this.
2. What does ProductScreen.template = 'ProductScreen' represent? Is that the same as static template = xml `
3.What does Registries.Component.add(ProductScreen) do? I suppose it adds it to the registry. What is the registry? I read that it is a key,value map. Is it some sort of Object? what does Odoo do with the registry once the component is added to it?
4. What does return ProductScreen do? What root component is calling on the ProductScreen component for its return? is it returned as an instance of the class?
Sorry I am asking so many questions about this. I just seem to find it very interesting, but couldn't find a lot of information about these concepts. And thought this might be the best place to ask.
Any help would be greatly appreciated, thanks!
https://ibb.co/mJdfztz
https://ibb.co/YkqhmKq
https://ibb.co/nLgVhjJ
Alright so I've been putting many hours of research on this topic and I think I've found some answers to some of the questions:
- The Main.js file (addons/point_of_sale/static/src/js/main.js), contains the PosApp class which is the Root component of the Point of Sale addon/module.
- The PosApp component has a method called Setup(). This method is used as a class constructor. Within this method there is a "this.Components" property. All entries within the registry category: "main components", are stored in an array and assigned to the Components property.
This means that the registry is used as a means to store references to all the components that make up the Point of Sale module.
- The PosApp component also has the static template = xml`...`. Which is taught in the OWL documentation. Within this template is a foreach tag, which is used to loop through the "this.Components" array. Hereby, laying out all other component's templates in the process.
The above brings an understanding to:
1. When the foreach loop runs, it instantiates each component.
3 The use of registry is to store a the references of each component under certain registry category.
To whoever reads this and sees that their are flaws to the above-mentioned. Please correct me.