| Elaine Chien | 719e2d8 | 2023-07-27 18:00:19 | [diff] [blame] | 1 | # Views MVC Developer Guide |
| 2 | |
| 3 | ## Components and Concepts |
| 4 | |
| 5 | ### Model: |
| 6 | * Contains data related to the display of the view |
| 7 | * Treat backend service as separate models |
| Elaine Chien | 7894271 | 2023-11-03 17:17:39 | [diff] [blame^] | 8 | * Gets updated by the view controller |
| Elaine Chien | 719e2d8 | 2023-07-27 18:00:19 | [diff] [blame] | 9 | |
| 10 | ### View: |
| 11 | * Presentation of UI |
| 12 | * Receives and handles events from the user that don’t require model data |
| 13 | * Is called into by the View Controller and does not interact with the model |
| 14 | * The view should end up being pretty simple |
| 15 | |
| 16 | ### Controller: |
| 17 | We break up the traditional Controller into the Coordinator and View Controller. More complicated features where the View Controller gets unruly can also further split out a mediator object (Reach out to the views team for more details if your team would like to explore that option) |
| 18 | |
| 19 | #### Coordinator: |
| 20 | * Public API of the component |
| 21 | * In charge of when features become active or inactive |
| 22 | * Owned by the coordinator of it’s parent component |
| Elaine Chien | 7894271 | 2023-11-03 17:17:39 | [diff] [blame^] | 23 | * May create and own UI models or manage the models of it’s child coordinators |
| Elaine Chien | 719e2d8 | 2023-07-27 18:00:19 | [diff] [blame] | 24 | |
| 25 | #### View Controller: |
| 26 | * Sets up views based on model data |
| 27 | * Event processing for events that result in changes to model data |
| 28 | * Translates model data and decides how/what we want to show the data on the view |
| 29 | * Updates model data |
| 30 | * Observes model changes and changes in other relevant components and processes these changes to determine how they affect the view |
| 31 | |
| 32 | # Visual of Components |
| 33 |  |
| 34 | |
| Elaine Chien | 7894271 | 2023-11-03 17:17:39 | [diff] [blame^] | 35 | Note: In this diagram the coordinator is owning the model, but the model can also be owned by the parent coordinator or outside components if it’s a backend model. |
| 36 | |
| Elaine Chien | 719e2d8 | 2023-07-27 18:00:19 | [diff] [blame] | 37 | #### Concrete Examples |
| 38 | Simple example from the Chrome Labs feature. |
| 39 | * [Coordinator](https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/views/toolbar/chrome_labs_coordinator.h) |
| 40 | * [Model](https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/toolbar/chrome_labs_model.h) |
| 41 | * [View](https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/views/toolbar/chrome_labs_bubble_view.h) |
| 42 | * [View Controller](https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/views/toolbar/chrome_labs_view_controller.h) |
| 43 | |
| 44 | |
| 45 | More involved example with the Extensions Menu. This one deals with more complicated view controller responsibilities as well as integrating with existing model-esque objects and non MVC controllers. |
| 46 | |
| 47 | * [Coordinator](https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/ui/views/extensions/extensions_menu_coordinator.h;l=6?q=extensions_menu_coor&sq=&ss=chromium) |
| 48 | * Views: |
| 49 | * [Main Page](https://source.chromium.org/chromium/chromium/src/+/refs/heads/main:chrome/browser/ui/views/extensions/extensions_menu_main_page_view.h;drc=80833aef0b4fff4978b49865bb95a7497f200c71;bpv=1;bpt=1;l=36) |
| 50 | * [Site Permissions Page](https://source.chromium.org/chromium/chromium/src/+/refs/heads/main:chrome/browser/ui/views/extensions/extensions_menu_site_permissions_page_view.h;drc=80833aef0b4fff4978b49865bb95a7497f200c71;bpv=1;bpt=1;l=27) |
| 51 | * [View Controller](https://source.chromium.org/chromium/chromium/src/+/refs/heads/main:chrome/browser/ui/views/extensions/extensions_menu_view_controller.h;drc=80833aef0b4fff4978b49865bb95a7497f200c71;l=27) |
