mvc in depth, part 2, tommy maintz
Post on 31-May-2015
4.892 Views
Preview:
DESCRIPTION
TRANSCRIPT
Wednesday, November 2, 11
Tommy MaintzMVC IN DEPTH, PT2
tommy@senchientservices.com @tmaintz
Wednesday, November 2, 11
Benefits of MVCScalabilityMaintainabilityFlexibility
Wednesday, November 2, 11
Learned So FarBasic MVC conceptsStarting the applicationDefining viewsSetting up view listenersImplementing basic controller actions
Wednesday, November 2, 11
A Progression
Wednesday, November 2, 11
Server-Side MVCMulti-pagePage equals to controller actionDispatching
Wednesday, November 2, 11
Client-Side MVCSingle pageUser Interactions equal to controller actionMultiple active controllers
Wednesday, November 2, 11
EVENTS ARE THE WAY TO GO
Wednesday, November 2, 11
Benefits Of EventsDecoupling of views and controllersMultiple controllers can listenFamiliar to web developers
Wednesday, November 2, 11
VIEW EVENTS
Wednesday, November 2, 11
View - Controller Relation
View Controller ActionEvent
Wednesday, November 2, 11
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
this.control({ 'contact-listpanel': { activate: this.onListActivate }, 'contact-listpanel > list': { select: this.onListSelect }, 'button[action=addcontact]': { tap: this.onAddButtonTap }});
Wednesday, November 2, 11
APPLICATION EVENTS
Wednesday, November 2, 11
The Problem:Single page applicationMany controllers
Wednesday, November 2, 11
Multiple Dispatches
Dispatch
View
Controlleraction
Controlleraction
Controlleraction
Dispatch
Dispatch
Wednesday, November 2, 11
Chained Dispatches
Dispatch
View
Controlleraction
Controlleraction
Controlleraction
DispatchDispatch
Wednesday, November 2, 11
Event Bus
Dispatc
h
View
Controlleraction
Controlleraction
Controlleraction
Fire
Event Bus
EventEvent
Wednesday, November 2, 11
BEST SOLUTION: EVENT BUS
Wednesday, November 2, 11
Controller A
Wednesday, November 2, 11
Controller B
Wednesday, November 2, 11
REFERENCES
Wednesday, November 2, 11
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
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
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
VIEW LOGIC?
Wednesday, November 2, 11
Why Extend a ViewCustom view behaviorFiring custom view events
Wednesday, November 2, 11
LOADING CONTROLLERS
Wednesday, November 2, 11
getController(name)Loads if doesn’t existCalls init()Calls launch()
Wednesday, November 2, 11
controller = this.getController(‘MyController’);
Wednesday, November 2, 11
INIT VS LAUNCH
Wednesday, November 2, 11
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
APPLICATION INITGlobal view eventsGlobal navigation eventsGlobal store events
Wednesday, November 2, 11
CONTROLLER INITSpecific view eventsSpecific application eventsSpecific store events
Wednesday, November 2, 11
APPLICATION LAUNCHCreating the viewportManipulate viewsLoad data into stores
Wednesday, November 2, 11
CONTROLLER LAUNCHCreating & adding viewsManipulate viewsLoad data into stores
Wednesday, November 2, 11
COMING SOON!
Wednesday, November 2, 11
ROUTES &DEEP LINKING
Wednesday, November 2, 11
HISTORY SUPPORT
Wednesday, November 2, 11
QUESTIONS?
Wednesday, November 2, 11
top related