MVC In Depth, part 2, Tommy Maintz
-
Upload
sencha -
Category
Technology
-
view
4.892 -
download
1
description
Transcript of MVC In Depth, part 2, Tommy Maintz
![Page 1: MVC In Depth, part 2, Tommy Maintz](https://reader030.fdocuments.us/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/1.jpg)
Wednesday, November 2, 11
![Page 3: MVC In Depth, part 2, Tommy Maintz](https://reader030.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/22.jpg)
REFERENCES
Wednesday, November 2, 11
![Page 23: MVC In Depth, part 2, Tommy Maintz](https://reader030.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader030/viewer/2022020218/556a0067d8b42a5d758b4e48/html5/thumbnails/40.jpg)
QUESTIONS?
Wednesday, November 2, 11