mvc in depth, part 2, tommy maintz
DESCRIPTION
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.TRANSCRIPT
![Page 1: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/1.jpg)
Wednesday, November 2, 11
![Page 3: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/3.jpg)
Benefits of MVCScalabilityMaintainabilityFlexibility
Wednesday, November 2, 11
![Page 4: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/4.jpg)
Learned So FarBasic MVC conceptsStarting the applicationDefining viewsSetting up view listenersImplementing basic controller actions
Wednesday, November 2, 11
![Page 5: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/5.jpg)
A Progression
Wednesday, November 2, 11
![Page 6: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/6.jpg)
Server-Side MVCMulti-pagePage equals to controller actionDispatching
Wednesday, November 2, 11
![Page 7: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/7.jpg)
Client-Side MVCSingle pageUser Interactions equal to controller actionMultiple active controllers
Wednesday, November 2, 11
![Page 8: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/8.jpg)
EVENTS ARE THE WAY TO GO
Wednesday, November 2, 11
![Page 9: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/9.jpg)
Benefits Of EventsDecoupling of views and controllersMultiple controllers can listenFamiliar to web developers
Wednesday, November 2, 11
![Page 10: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/10.jpg)
VIEW EVENTS
Wednesday, November 2, 11
![Page 11: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/11.jpg)
View - Controller Relation
View Controller ActionEvent
Wednesday, November 2, 11
![Page 12: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/12.jpg)
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
![Page 13: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/13.jpg)
this.control({ 'contact-listpanel': { activate: this.onListActivate }, 'contact-listpanel > list': { select: this.onListSelect }, 'button[action=addcontact]': { tap: this.onAddButtonTap }});
Wednesday, November 2, 11
![Page 14: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/14.jpg)
APPLICATION EVENTS
Wednesday, November 2, 11
![Page 15: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/15.jpg)
The Problem:Single page applicationMany controllers
Wednesday, November 2, 11
![Page 16: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/16.jpg)
Multiple Dispatches
Dispatch
View
Controlleraction
Controlleraction
Controlleraction
Dispatch
Dispatch
Wednesday, November 2, 11
![Page 17: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/17.jpg)
Chained Dispatches
Dispatch
View
Controlleraction
Controlleraction
Controlleraction
DispatchDispatch
Wednesday, November 2, 11
![Page 18: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/18.jpg)
Event Bus
Dispatc
h
View
Controlleraction
Controlleraction
Controlleraction
Fire
Event Bus
EventEvent
Wednesday, November 2, 11
![Page 19: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/19.jpg)
BEST SOLUTION: EVENT BUS
Wednesday, November 2, 11
![Page 20: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/20.jpg)
Controller A
Wednesday, November 2, 11
![Page 21: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/21.jpg)
Controller B
Wednesday, November 2, 11
![Page 22: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/22.jpg)
REFERENCES
Wednesday, November 2, 11
![Page 23: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/23.jpg)
refs: [{ ref : 'deleteButton', selector: 'button[action=deletecontact]' }], onContactSelect: function() { var deleteButton = this.getDeleteButton(); deleteButton.show(); }
refs: [{ ref : 'deleteButton', selector: 'button[action=deletecontact]' }], onContactSelect: function() { var deleteButton = this.getDeleteButton(); if (deleteButton) { deleteButton.show(); } }
Wednesday, November 2, 11
![Page 24: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/24.jpg)
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
![Page 25: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/25.jpg)
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
![Page 26: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/26.jpg)
VIEW LOGIC?
Wednesday, November 2, 11
![Page 27: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/27.jpg)
Why Extend a ViewCustom view behaviorFiring custom view events
Wednesday, November 2, 11
![Page 28: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/28.jpg)
LOADING CONTROLLERS
Wednesday, November 2, 11
![Page 29: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/29.jpg)
getController(name)Loads if doesn’t existCalls init()Calls launch()
Wednesday, November 2, 11
![Page 30: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/30.jpg)
controller = this.getController(‘MyController’);
Wednesday, November 2, 11
![Page 31: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/31.jpg)
INIT VS LAUNCH
Wednesday, November 2, 11
![Page 32: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/32.jpg)
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
![Page 33: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/33.jpg)
APPLICATION INITGlobal view eventsGlobal navigation eventsGlobal store events
Wednesday, November 2, 11
![Page 34: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/34.jpg)
CONTROLLER INITSpecific view eventsSpecific application eventsSpecific store events
Wednesday, November 2, 11
![Page 35: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/35.jpg)
APPLICATION LAUNCHCreating the viewportManipulate viewsLoad data into stores
Wednesday, November 2, 11
![Page 36: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/36.jpg)
CONTROLLER LAUNCHCreating & adding viewsManipulate viewsLoad data into stores
Wednesday, November 2, 11
![Page 37: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/37.jpg)
COMING SOON!
Wednesday, November 2, 11
![Page 38: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/38.jpg)
ROUTES &DEEP LINKING
Wednesday, November 2, 11
![Page 39: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/39.jpg)
HISTORY SUPPORT
Wednesday, November 2, 11
![Page 40: MVC In Depth, part 2, Tommy Maintz](https://reader030.vdocuments.mx/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/40.jpg)
QUESTIONS?
Wednesday, November 2, 11