diff --git a/content/applications/general/developer_mode.rst b/content/applications/general/developer_mode.rst index 48024be96..7cc0ab5f7 100644 --- a/content/applications/general/developer_mode.rst +++ b/content/applications/general/developer_mode.rst @@ -44,6 +44,8 @@ activate the debug mode. :align: center :alt: Command palette with debug command +.. _developer-mode/url: + Activate through the URL ======================== diff --git a/content/developer/howtos/discover_js_framework/01_components.rst b/content/developer/howtos/discover_js_framework/01_components.rst index 4887bdc9c..22dc9cfd1 100644 --- a/content/developer/howtos/discover_js_framework/01_components.rst +++ b/content/developer/howtos/discover_js_framework/01_components.rst @@ -4,8 +4,7 @@ Chapter 1: Components This chapter introduces the `Owl framework `_, a tailor-made component system for Odoo. The main building blocks of OWL are `components -<{OWL_PATH}/doc/reference/component.md>`_ and `templates -<{OWL_PATH}/doc/reference/templates.md>`_. +<{OWL_PATH}/doc/reference/component.md>`_ and `templates <{OWL_PATH}/doc/reference/templates.md>`_. In Owl, every part of user interface is managed by a component: they hold the logic and define the templates that are used to render the user interface. In practice, a component is represented by a @@ -36,12 +35,12 @@ small JavaScript class subclassing the `Component` class. .. code-block:: xml - - -

Counter:

- - - + + +

Counter:

+ + + You maybe noticed the `owl="1"` temporary attribute, it allows Odoo to differentiate Owl templates from the old JavaScript framework templates. @@ -69,7 +68,12 @@ intended to quickly understand and practice the basics of Owl. ======================= As a first exercise, let us implement a counter in the `Playground` component located in -:file:`owl_playground/static/src/`. +:file:`owl_playground/static/src/`. To see the result, you can go to the `/owl_playground/playground` +route with your browser. + +.. tip:: + The Odoo JavaScript files downloaded by the browser are minified. For debugging purpose, it's + easier when the files are not minified. Switch to :ref:`debug mode with assets ` so that the files are not minified. .. exercise:: @@ -89,11 +93,14 @@ As a first exercise, let us implement a counter in the `Playground` component lo :align: center :alt: A counter component. +.. seealso:: + `Video: How to use the DevTools `_ + 2. Extract counter in a component ================================= For now we have the logic of a counter in the `Playground` component, let us see how to create a -sub-component from it. +`sub-component <{OWL_PATH}/doc/reference/component.md#sub-components>`_ from it. .. exercise:: @@ -129,8 +136,8 @@ todos. This will be done incrementally in multiple exercises that will introduce .. code-block:: javascript setup() { - ... - this.todo = { id: 3, description: "buy milk", done: false }; + ... + this.todo = { id: 3, description: "buy milk", done: false }; } .. image:: 01_components/todo.png @@ -146,14 +153,20 @@ todos. This will be done incrementally in multiple exercises that will introduce The `Todo` component has an implicit API. It expects to receive in its props the description of a todo object in a specified format: `id`, `description` and `done`. Let us make that API more -explicit. We can add a props definition that will let Owl perform a validation step in :ref:`dev -mode `. It is a good practice to do that for every component. +explicit. We can add a props definition that will let Owl perform a validation step in `dev mode +<{OWL_PATH}/doc/reference/app.md#dev-mode>`_. You can activate the dev mode in the `App +configuration <{OWL_PATH}/doc/reference/app.md#configuration>`_ + + It is a good practice to do props validation for every component. .. exercise:: #. Add `props validation <{OWL_PATH}/doc/reference/props.md#props-validation>`_ to the `Todo` component. - #. Make sure it passes in :ref:`dev mode `. + #. Make sure it passes in dev mode which is activated by default in `owl_playground`. The dev + mode can be activated and deactivated by modifying the `dev` attribute in the in the `config` + parameter of the `mount <{OWL_PATH}/doc/reference/app.md#mount-helper>`_ function in + :file:`owl_playground/static/src/main.js`. #. Remove `done` from the props and reload the page. The validation should fail. 5. A list of todos @@ -165,7 +178,7 @@ list. .. exercise:: #. Change the code to display a list of todos instead of just one, and use `t-foreach - <{OWL_PATH}/doc/reference/templates.md#loops>`_ in the template + <{OWL_PATH}/doc/reference/templates.md#loops>`_ in the template. #. Think about how it should be keyed with the `t-key` directive. .. image:: 01_components/todo_list.png @@ -196,7 +209,7 @@ a todo to the list. .. code-block:: javascript - this.todos = useState([]); + this.todos = useState([]); .. image:: 01_components/create_todo.png :scale: 70% @@ -253,6 +266,21 @@ The final touch is to let the user delete a todo. .. exercise:: #. Add a new callback prop `removeTodo`. + + .. tip:: + + If you're using an array to store your todo list, you can use the JavaScript `splice` function + to remove a todo from it. + + .. code-block:: + + // find the index of the element to delete + const index = list.findIndex((elem) => elem.id === elemId); + if (index >= 0) { + // remove the element at index from list + list.splice(index, 1); + } + #. Insert :code:`` in the template of the `Todo` component. #. Whenever the user clicks on it, it should call the `removeTodo` method.