documentation/content/developer/tutorials/discover_js_framework.rst

49 lines
1.9 KiB
ReStructuredText
Raw Permalink Normal View History

:show-content:
[IMP] developer: improve navigation in top-level pages Prior to this commit, users had to either know in advance or guess the location of the content they were looking for. Top-level pages of the "Developer" section of the documentation, in particular the "Developer" page itself, were listing their sub-pages without directions for users. This commit brings the following changes to improve the navigation: - add directions for users on the "Developer" page and list the three main categories of developer documentation ("Tutorials", "How-to guides", and "Reference") with explanations of their content and target audience; - add categories for content cards on the "Tutorials" and "How-to guides" pages, and fine-tune the toctree of the "Reference" page to more easily locate specific topics; - clarify what are the "Python framework" and the "JavaScript framework" by relabelling them to "Server framework" and "Web framework" on top-level pages, as some users were confused to find that the JS framework was not responsible for the server, and others that the documentation for QWeb template is located in the Python documentation; - extract the "Setup guide" from the "Getting started" tutorial and rename the latter to "Server framework 101" to allow reusing the setup guide in other tutorials and make clear that the "Server framework 101" tutorial is not about the Web framework. task-3802536 closes odoo/documentation#8597 Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com> Co-authored-by: Valeriya (vchu) <vchu@odoo.com>
2024-04-09 16:54:08 +07:00
==========================
Discover the web framework
==========================
.. toctree::
:titlesonly:
:glob:
discover_js_framework/*
[IMP] developer: improve navigation in top-level pages Prior to this commit, users had to either know in advance or guess the location of the content they were looking for. Top-level pages of the "Developer" section of the documentation, in particular the "Developer" page itself, were listing their sub-pages without directions for users. This commit brings the following changes to improve the navigation: - add directions for users on the "Developer" page and list the three main categories of developer documentation ("Tutorials", "How-to guides", and "Reference") with explanations of their content and target audience; - add categories for content cards on the "Tutorials" and "How-to guides" pages, and fine-tune the toctree of the "Reference" page to more easily locate specific topics; - clarify what are the "Python framework" and the "JavaScript framework" by relabelling them to "Server framework" and "Web framework" on top-level pages, as some users were confused to find that the JS framework was not responsible for the server, and others that the documentation for QWeb template is located in the Python documentation; - extract the "Setup guide" from the "Getting started" tutorial and rename the latter to "Server framework 101" to allow reusing the setup guide in other tutorials and make clear that the "Server framework 101" tutorial is not about the Web framework. task-3802536 closes odoo/documentation#8597 Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com> Co-authored-by: Valeriya (vchu) <vchu@odoo.com>
2024-04-09 16:54:08 +07:00
This two parts tutorial is designed to introduce you to the basics of the web framework. Whether
you are new to the framework or have some prior experience, this tutorial will provide you with a
[IMP] developer: improve navigation in top-level pages Prior to this commit, users had to either know in advance or guess the location of the content they were looking for. Top-level pages of the "Developer" section of the documentation, in particular the "Developer" page itself, were listing their sub-pages without directions for users. This commit brings the following changes to improve the navigation: - add directions for users on the "Developer" page and list the three main categories of developer documentation ("Tutorials", "How-to guides", and "Reference") with explanations of their content and target audience; - add categories for content cards on the "Tutorials" and "How-to guides" pages, and fine-tune the toctree of the "Reference" page to more easily locate specific topics; - clarify what are the "Python framework" and the "JavaScript framework" by relabelling them to "Server framework" and "Web framework" on top-level pages, as some users were confused to find that the JS framework was not responsible for the server, and others that the documentation for QWeb template is located in the Python documentation; - extract the "Setup guide" from the "Getting started" tutorial and rename the latter to "Server framework 101" to allow reusing the setup guide in other tutorials and make clear that the "Server framework 101" tutorial is not about the Web framework. task-3802536 closes odoo/documentation#8597 Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com> Co-authored-by: Valeriya (vchu) <vchu@odoo.com>
2024-04-09 16:54:08 +07:00
solid foundation for using the web framework in your projects.
[IMP] Rework the JavaScript tutorials This commit rework the entire JavaScript tutorial series with the following improvements: - Each chapter is now designed to be independent, allowing learners to follow any chapter without the necessity of completing previous ones. - Each chapter has been transformed into a standalone module, enabling learners to create small projects from scratch within each chapter. - The screenshots/text/code have been updated for Odoo 17. Currently we have 5 chapters: - Discover Chapter 1 - Owl Components: This chapter allows to learn the Owl framework in the `awesome_owl` module. - Discover Chapter 2 - Build a dashboard: This chapter allows to grasp the basic of the web framework by building a dashboard in the `awesome_dashboard` module. - Master Chapter 1 - Build a clicker game: This chapter allows to grasp the web framework by building a clicker game in the `awesome_clicker` module. - Master Chapter 2 - Create a gallery view: This chapter allows to learn how to create a new view type. The new view is a gallery of records pictures. It can be done in the `awesome_gallery` module. - Master Chapter 3 - Customize a kanban view: This chapter allows to learn to customize a kanban view by implementing a list of customer in the side of a kanban view. This can be done in the `awesome_kanban` module. The chapter on creating and customizing fields is deleted for now and will be completely rewritten in a near future. The chapter on testing is deleted, how-to guides will be written to cover this subject. The solutions for all exercises has been done for v17, the goal by merging the new tutorial is to have this new branch structure in `odoo/tutorials`: - 16.0 - 16.0-solutions - 17.0 - 17.0-discover-js-framework-solutions - 17.0-master-odoo-web-framework-solutions - master <-- default branch, starting point for all addons - master-discover-js-framework-solutions - master-master-odoo-web-framework-solutions closes odoo/documentation#6876 Task-id: 3623595 Signed-off-by: Géry Debongnie <ged@odoo.com>
2023-04-30 16:42:18 +07:00
The first part covers the basics of Owl components, which
[IMP] developer: improve navigation in top-level pages Prior to this commit, users had to either know in advance or guess the location of the content they were looking for. Top-level pages of the "Developer" section of the documentation, in particular the "Developer" page itself, were listing their sub-pages without directions for users. This commit brings the following changes to improve the navigation: - add directions for users on the "Developer" page and list the three main categories of developer documentation ("Tutorials", "How-to guides", and "Reference") with explanations of their content and target audience; - add categories for content cards on the "Tutorials" and "How-to guides" pages, and fine-tune the toctree of the "Reference" page to more easily locate specific topics; - clarify what are the "Python framework" and the "JavaScript framework" by relabelling them to "Server framework" and "Web framework" on top-level pages, as some users were confused to find that the JS framework was not responsible for the server, and others that the documentation for QWeb template is located in the Python documentation; - extract the "Setup guide" from the "Getting started" tutorial and rename the latter to "Server framework 101" to allow reusing the setup guide in other tutorials and make clear that the "Server framework 101" tutorial is not about the Web framework. task-3802536 closes odoo/documentation#8597 Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com> Co-authored-by: Valeriya (vchu) <vchu@odoo.com>
2024-04-09 16:54:08 +07:00
are a key part of the web framework. Owl components are reusable UI components that can be used
to build complex web interfaces quickly and efficiently. We will explore how to create and use Owl
[IMP] Rework the JavaScript tutorials This commit rework the entire JavaScript tutorial series with the following improvements: - Each chapter is now designed to be independent, allowing learners to follow any chapter without the necessity of completing previous ones. - Each chapter has been transformed into a standalone module, enabling learners to create small projects from scratch within each chapter. - The screenshots/text/code have been updated for Odoo 17. Currently we have 5 chapters: - Discover Chapter 1 - Owl Components: This chapter allows to learn the Owl framework in the `awesome_owl` module. - Discover Chapter 2 - Build a dashboard: This chapter allows to grasp the basic of the web framework by building a dashboard in the `awesome_dashboard` module. - Master Chapter 1 - Build a clicker game: This chapter allows to grasp the web framework by building a clicker game in the `awesome_clicker` module. - Master Chapter 2 - Create a gallery view: This chapter allows to learn how to create a new view type. The new view is a gallery of records pictures. It can be done in the `awesome_gallery` module. - Master Chapter 3 - Customize a kanban view: This chapter allows to learn to customize a kanban view by implementing a list of customer in the side of a kanban view. This can be done in the `awesome_kanban` module. The chapter on creating and customizing fields is deleted for now and will be completely rewritten in a near future. The chapter on testing is deleted, how-to guides will be written to cover this subject. The solutions for all exercises has been done for v17, the goal by merging the new tutorial is to have this new branch structure in `odoo/tutorials`: - 16.0 - 16.0-solutions - 17.0 - 17.0-discover-js-framework-solutions - 17.0-master-odoo-web-framework-solutions - master <-- default branch, starting point for all addons - master-discover-js-framework-solutions - master-master-odoo-web-framework-solutions closes odoo/documentation#6876 Task-id: 3623595 Signed-off-by: Géry Debongnie <ged@odoo.com>
2023-04-30 16:42:18 +07:00
components in Odoo. Then, in the second part of this tutorial, we focus on creating a dashboard using various
features of Odoo. Dashboards are an essential part of any web application, and provide a nice starting
point to use and interact with the Odoo codebase.
This tutorial assumes that you have some basic knowledge of development with Odoo in general
(models, controllers, QWeb, ...). If you are new to Odoo, we recommend that you start with the
[IMP] developer: improve navigation in top-level pages Prior to this commit, users had to either know in advance or guess the location of the content they were looking for. Top-level pages of the "Developer" section of the documentation, in particular the "Developer" page itself, were listing their sub-pages without directions for users. This commit brings the following changes to improve the navigation: - add directions for users on the "Developer" page and list the three main categories of developer documentation ("Tutorials", "How-to guides", and "Reference") with explanations of their content and target audience; - add categories for content cards on the "Tutorials" and "How-to guides" pages, and fine-tune the toctree of the "Reference" page to more easily locate specific topics; - clarify what are the "Python framework" and the "JavaScript framework" by relabelling them to "Server framework" and "Web framework" on top-level pages, as some users were confused to find that the JS framework was not responsible for the server, and others that the documentation for QWeb template is located in the Python documentation; - extract the "Setup guide" from the "Getting started" tutorial and rename the latter to "Server framework 101" to allow reusing the setup guide in other tutorials and make clear that the "Server framework 101" tutorial is not about the Web framework. task-3802536 closes odoo/documentation#8597 Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com> Co-authored-by: Valeriya (vchu) <vchu@odoo.com>
2024-04-09 16:54:08 +07:00
:doc:`/developer/tutorials/server_framework_101` tutorial before proceeding with this one.
[IMP] Rework the JavaScript tutorials This commit rework the entire JavaScript tutorial series with the following improvements: - Each chapter is now designed to be independent, allowing learners to follow any chapter without the necessity of completing previous ones. - Each chapter has been transformed into a standalone module, enabling learners to create small projects from scratch within each chapter. - The screenshots/text/code have been updated for Odoo 17. Currently we have 5 chapters: - Discover Chapter 1 - Owl Components: This chapter allows to learn the Owl framework in the `awesome_owl` module. - Discover Chapter 2 - Build a dashboard: This chapter allows to grasp the basic of the web framework by building a dashboard in the `awesome_dashboard` module. - Master Chapter 1 - Build a clicker game: This chapter allows to grasp the web framework by building a clicker game in the `awesome_clicker` module. - Master Chapter 2 - Create a gallery view: This chapter allows to learn how to create a new view type. The new view is a gallery of records pictures. It can be done in the `awesome_gallery` module. - Master Chapter 3 - Customize a kanban view: This chapter allows to learn to customize a kanban view by implementing a list of customer in the side of a kanban view. This can be done in the `awesome_kanban` module. The chapter on creating and customizing fields is deleted for now and will be completely rewritten in a near future. The chapter on testing is deleted, how-to guides will be written to cover this subject. The solutions for all exercises has been done for v17, the goal by merging the new tutorial is to have this new branch structure in `odoo/tutorials`: - 16.0 - 16.0-solutions - 17.0 - 17.0-discover-js-framework-solutions - 17.0-master-odoo-web-framework-solutions - master <-- default branch, starting point for all addons - master-discover-js-framework-solutions - master-master-odoo-web-framework-solutions closes odoo/documentation#6876 Task-id: 3623595 Signed-off-by: Géry Debongnie <ged@odoo.com>
2023-04-30 16:42:18 +07:00
.. note::
Each chapter of this tutorial is an independant project. If you feel comfortable with Owl, you can
start directly with chapter 2.
.. _tutorials/discover_js_framework/setup:
Setup
=====
#. Clone the `official Odoo tutorials repository <https://github.com/odoo/tutorials>`_ and switch to
the branch `{CURRENT_MAJOR_BRANCH}`.
[IMP] Rework the JavaScript tutorials This commit rework the entire JavaScript tutorial series with the following improvements: - Each chapter is now designed to be independent, allowing learners to follow any chapter without the necessity of completing previous ones. - Each chapter has been transformed into a standalone module, enabling learners to create small projects from scratch within each chapter. - The screenshots/text/code have been updated for Odoo 17. Currently we have 5 chapters: - Discover Chapter 1 - Owl Components: This chapter allows to learn the Owl framework in the `awesome_owl` module. - Discover Chapter 2 - Build a dashboard: This chapter allows to grasp the basic of the web framework by building a dashboard in the `awesome_dashboard` module. - Master Chapter 1 - Build a clicker game: This chapter allows to grasp the web framework by building a clicker game in the `awesome_clicker` module. - Master Chapter 2 - Create a gallery view: This chapter allows to learn how to create a new view type. The new view is a gallery of records pictures. It can be done in the `awesome_gallery` module. - Master Chapter 3 - Customize a kanban view: This chapter allows to learn to customize a kanban view by implementing a list of customer in the side of a kanban view. This can be done in the `awesome_kanban` module. The chapter on creating and customizing fields is deleted for now and will be completely rewritten in a near future. The chapter on testing is deleted, how-to guides will be written to cover this subject. The solutions for all exercises has been done for v17, the goal by merging the new tutorial is to have this new branch structure in `odoo/tutorials`: - 16.0 - 16.0-solutions - 17.0 - 17.0-discover-js-framework-solutions - 17.0-master-odoo-web-framework-solutions - master <-- default branch, starting point for all addons - master-discover-js-framework-solutions - master-master-odoo-web-framework-solutions closes odoo/documentation#6876 Task-id: 3623595 Signed-off-by: Géry Debongnie <ged@odoo.com>
2023-04-30 16:42:18 +07:00
#. Add the cloned repository to your :option:`--addons-path <odoo-bin --addons-path>`.
#. Start a new Odoo database and install the modules `awesome_owl` (for chapter 1) and `awesome_dashboard`
(for chapter 2).
Content
=======
- :doc:`discover_js_framework/01_owl_components`
[IMP] Rework the JavaScript tutorials This commit rework the entire JavaScript tutorial series with the following improvements: - Each chapter is now designed to be independent, allowing learners to follow any chapter without the necessity of completing previous ones. - Each chapter has been transformed into a standalone module, enabling learners to create small projects from scratch within each chapter. - The screenshots/text/code have been updated for Odoo 17. Currently we have 5 chapters: - Discover Chapter 1 - Owl Components: This chapter allows to learn the Owl framework in the `awesome_owl` module. - Discover Chapter 2 - Build a dashboard: This chapter allows to grasp the basic of the web framework by building a dashboard in the `awesome_dashboard` module. - Master Chapter 1 - Build a clicker game: This chapter allows to grasp the web framework by building a clicker game in the `awesome_clicker` module. - Master Chapter 2 - Create a gallery view: This chapter allows to learn how to create a new view type. The new view is a gallery of records pictures. It can be done in the `awesome_gallery` module. - Master Chapter 3 - Customize a kanban view: This chapter allows to learn to customize a kanban view by implementing a list of customer in the side of a kanban view. This can be done in the `awesome_kanban` module. The chapter on creating and customizing fields is deleted for now and will be completely rewritten in a near future. The chapter on testing is deleted, how-to guides will be written to cover this subject. The solutions for all exercises has been done for v17, the goal by merging the new tutorial is to have this new branch structure in `odoo/tutorials`: - 16.0 - 16.0-solutions - 17.0 - 17.0-discover-js-framework-solutions - 17.0-master-odoo-web-framework-solutions - master <-- default branch, starting point for all addons - master-discover-js-framework-solutions - master-master-odoo-web-framework-solutions closes odoo/documentation#6876 Task-id: 3623595 Signed-off-by: Géry Debongnie <ged@odoo.com>
2023-04-30 16:42:18 +07:00
- :doc:`discover_js_framework/02_build_a_dashboard`