Download - MVC In Depth, part 2, Tommy Maintz

Wednesday, November 2, 11

Tommy MaintzMVC IN DEPTH, PT2

[email protected] @tmaintz


mailto:[email protected]

mailto:[email protected]

Benefits of MVCScalabilityMaintainabilityFlexibility


Learned So FarBasic MVC conceptsStarting the applicationDefining viewsSetting up view listenersImplementing basic controller actions


A Progression


Server-Side MVCMulti-pagePage equals to controller actionDispatching


Client-Side MVCSingle pageUser Interactions equal to controller actionMultiple active controllers


EVENTS ARE THE WAY TO GO


Benefits Of EventsDecoupling of views and controllersMultiple controllers can listenFamiliar to web developers


VIEW EVENTS


View - Controller Relation

View Controller ActionEvent


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});


this.control({ 'contact-listpanel': { activate: this.onListActivate }, 'contact-listpanel > list': { select: this.onListSelect }, 'button[action=addcontact]': { tap: this.onAddButtonTap }});


APPLICATION EVENTS


The Problem:Single page applicationMany controllers


Multiple Dispatches

Dispatch

View

Controlleraction

Controlleraction

Controlleraction

Dispatch

Dispatch


Chained Dispatches

Dispatch

View

Controlleraction

Controlleraction

Controlleraction

DispatchDispatch


Event Bus

Dispatc

h

View

Controlleraction

Controlleraction

Controlleraction

Fire

Event Bus

EventEvent


BEST SOLUTION: EVENT BUS


Controller A


Controller B


REFERENCES


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(); } }


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(); }


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); }


VIEW LOGIC?


Why Extend a ViewCustom view behaviorFiring custom view events


LOADING CONTROLLERS


getController(name)Loads if doesn’t existCalls init()Calls launch()


controller = this.getController(‘MyController’);


INIT VS LAUNCH


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


APPLICATION INITGlobal view eventsGlobal navigation eventsGlobal store events


CONTROLLER INITSpecific view eventsSpecific application eventsSpecific store events


APPLICATION LAUNCHCreating the viewportManipulate viewsLoad data into stores


CONTROLLER LAUNCHCreating & adding viewsManipulate viewsLoad data into stores


COMING SOON!


ROUTES &DEEP LINKING


HISTORY SUPPORT


QUESTIONS?
