Wednesday, November 2, 11
MVC IN DEPTH, PT2                                Tommy Maintz             tommy@senchientservices.com       @tmaintzWednes...
Benefits of MVC                               Scalability                               Maintainability                   ...
Learned So Far                            Basic MVC concepts                            Starting the application          ...
A ProgressionWednesday, November 2, 11
Server-Side MVC                            Multi-page                            Page equals to controller action         ...
Client-Side MVC                      Single page                      User Interactions equal to controller action        ...
EVENTS ARE THE                              WAY TO GOWednesday, November 2, 11
Benefits Of Events                            Decoupling of views and controllers                            Multiple cont...
VIEW EVENTSWednesday, November 2, 11
View - Controller                                  Relation                            View   Event   Controller ActionWed...
this.listPanel = this.render({                   xtype: contact-listpanel,                   listeners: {                 ...
this.control({                    contact-listpanel: {                        activate: this.onListActivate               ...
APPLICATION                              EVENTSWednesday, November 2, 11
The Problem:                            Single page application                            Many controllersWednesday, Nove...
Multiple Dispatches                                                  View                                                 ...
Chained Dispatches                                           View                                 a tch                   ...
Event Bus                                             View                                      ch                        ...
BEST SOLUTION:                              EVENT BUSWednesday, November 2, 11
Controller AWednesday, November 2, 11
Controller BWednesday, November 2, 11
REFERENCESWednesday, November 2, 11
refs: [{              ref     : deleteButton,              selector: button[action=deletecontact]          }],          on...
refs: [{                     ref     : newContactWindow,                     selector: window[role=newcontact],           ...
refs: [{                                ref     : blogPostTab,                                forceCreate: true,          ...
VIEW LOGIC?Wednesday, November 2, 11
Why Extend a View                              Custom view behavior                              Firing custom view events...
LOADING                            CONTROLLERSWednesday, November 2, 11
getController(name)                            Loads if doesn’t exist                            Calls init()             ...
controller = this.getController(‘MyController’);Wednesday, November 2, 11
INIT VS LAUNCHWednesday, November 2, 11
this.init.call(this.scope || this);      for (i = 0; i < ln; i++) {          controller = this.getController(controllers[i...
APPLICATION INIT                            Global view events                            Global navigation events        ...
CONTROLLER INIT                            Specific view events                            Specific application events      ...
APPLICATION LAUNCH                            Creating the viewport                            Manipulate views           ...
CONTROLLER LAUNCH                            Creating & adding views                            Manipulate views          ...
COMING SOON!Wednesday, November 2, 11
ROUTES &                            DEEP LINKINGWednesday, November 2, 11
HISTORY SUPPORTWednesday, November 2, 11
QUESTIONS?Wednesday, November 2, 11
Upcoming SlideShare
Loading in …5
×

MVC In Depth, part 2, Tommy Maintz

5,506 views

Published on

A two-part journey through the recommended patterns for building complex, Model-View-Controller-centric applications with both Ext JS 4 and Sencha Touch.

Tommy Maintz is the original lead of Sencha Touch. With extensive knowledge of Object Oriented JavaScript and mobile browser idiosyncrasies, he pushes the boundaries of what is possible within mobile browsers. Tommy brings a unique view point and an ambitious philosophy to creating engaging user interfaces. His attention to detail drives his desire to make the perfect framework for developers to enjoy.

MVC In Depth, part 2, Tommy Maintz

  1. 1. Wednesday, November 2, 11
  2. 2. MVC IN DEPTH, PT2 Tommy Maintz tommy@senchientservices.com @tmaintzWednesday, November 2, 11
  3. 3. Benefits of MVC Scalability Maintainability FlexibilityWednesday, November 2, 11
  4. 4. Learned So Far Basic MVC concepts Starting the application Defining views Setting up view listeners Implementing basic controller actionsWednesday, November 2, 11
  5. 5. A ProgressionWednesday, November 2, 11
  6. 6. Server-Side MVC Multi-page Page equals to controller action DispatchingWednesday, November 2, 11
  7. 7. Client-Side MVC Single page User Interactions equal to controller action Multiple active controllersWednesday, November 2, 11
  8. 8. EVENTS ARE THE WAY TO GOWednesday, November 2, 11
  9. 9. Benefits Of Events Decoupling of views and controllers Multiple controllers can listen Familiar to web developersWednesday, November 2, 11
  10. 10. VIEW EVENTSWednesday, November 2, 11
  11. 11. View - Controller Relation View Event Controller ActionWednesday, November 2, 11
  12. 12. this.listPanel = this.render({ xtype: contact-listpanel, listeners: { list: { select: this.show, scope: this }, activate : function(listPanel) { listPanel.list.getSelectionModel() .deselectAll(); } } }); this.listPanel.query(#addButton)[0].on({ tap: this.compose, scope: this });Wednesday, November 2, 11
  13. 13. this.control({ contact-listpanel: { activate: this.onListActivate }, contact-listpanel > list: { select: this.onListSelect }, button[action=addcontact]: { tap: this.onAddButtonTap } });Wednesday, November 2, 11
  14. 14. APPLICATION EVENTSWednesday, November 2, 11
  15. 15. The Problem: Single page application Many controllersWednesday, November 2, 11
  16. 16. Multiple Dispatches View Di Dispatch tch sp a atc sp h Di Controller Controller Controller action action actionWednesday, November 2, 11
  17. 17. Chained Dispatches View a tch Disp Controller Dispatch Controller Dispatch Controller action action actionWednesday, November 2, 11
  18. 18. Event Bus View ch at sp Di Controller Controller Controller action action action Fire Event Event Event BusWednesday, November 2, 11
  19. 19. BEST SOLUTION: EVENT BUSWednesday, November 2, 11
  20. 20. Controller AWednesday, November 2, 11
  21. 21. Controller BWednesday, November 2, 11
  22. 22. REFERENCESWednesday, November 2, 11
  23. 23. refs: [{ ref : deleteButton, selector: button[action=deletecontact] }], onContactSelect: function() { var deleteButton = this.getDeleteButton(); if (deleteButton) { deleteButton.show(); } deleteButton.show(); } }Wednesday, November 2, 11
  24. 24. refs: [{ ref : newContactWindow, selector: window[role=newcontact], autoCreate: true, // Normal component configuration, role: newcontact, xtype: window, title: Create new Contact, ... }], onAddContactButtonTap: function() { this.getNewContactWindow().show(); }Wednesday, November 2, 11
  25. 25. refs: [{ ref : blogPostTab, forceCreate: true, // Normal component configuration, xtype: panel, title: New Tab ... }], onBlogPostTap: function(blogPost) { var newTab = this.getBlogPostTab(), tabPanel = this.getTabPanel(); newTab.setTitle(blogPost.getTitle()); newTab.setHtml(blogPost.getContent()); tabPanel.add(newTab); tabPanel.setActiveItem(newTab); }Wednesday, November 2, 11
  26. 26. VIEW LOGIC?Wednesday, November 2, 11
  27. 27. Why Extend a View Custom view behavior Firing custom view eventsWednesday, November 2, 11
  28. 28. LOADING CONTROLLERSWednesday, November 2, 11
  29. 29. getController(name) Loads if doesn’t exist Calls init() Calls launch()Wednesday, November 2, 11
  30. 30. controller = this.getController(‘MyController’);Wednesday, November 2, 11
  31. 31. INIT VS LAUNCHWednesday, November 2, 11
  32. 32. this.init.call(this.scope || this); for (i = 0; i < ln; i++) { controller = this.getController(controllers[i], false); controller.init(); } this.launch.call(this.scope || this); this.controllers.each(function(controller) { controller.launch(this); }, this); this.fireEvent(launch, this);Wednesday, November 2, 11
  33. 33. APPLICATION INIT Global view events Global navigation events Global store eventsWednesday, November 2, 11
  34. 34. CONTROLLER INIT Specific view events Specific application events Specific store eventsWednesday, November 2, 11
  35. 35. APPLICATION LAUNCH Creating the viewport Manipulate views Load data into storesWednesday, November 2, 11
  36. 36. CONTROLLER LAUNCH Creating & adding views Manipulate views Load data into storesWednesday, November 2, 11
  37. 37. COMING SOON!Wednesday, November 2, 11
  38. 38. ROUTES & DEEP LINKINGWednesday, November 2, 11
  39. 39. HISTORY SUPPORTWednesday, November 2, 11
  40. 40. QUESTIONS?Wednesday, November 2, 11

×