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
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