The document discusses Model-View-Controller (MVC) patterns for web applications. It covers benefits of MVC like scalability and maintainability. It discusses progression from server-side MVC to client-side single page MVC using events. The document advocates for using an event bus to handle events across multiple controllers in a single page app. It also covers using references, loading controllers, and differences between init and launch methods for applications and controllers.

1. Wednesday, November 2, 11

2. MVC IN DEPTH, PT2
Tommy Maintz
tommy@senchientservices.com @tmaintz
Wednesday, November 2, 11

3. Benefits of MVC
Scalability
Maintainability
Flexibility
Wednesday, November 2, 11

4. Learned So Far
Basic MVC concepts
Starting the application
Defining views
Setting up view listeners
Implementing basic controller actions
Wednesday, November 2, 11

5. A Progression
Wednesday, November 2, 11

6. Server-Side MVC
Multi-page
Page equals to controller action
Dispatching
Wednesday, November 2, 11

7. Client-Side MVC
Single page
User Interactions equal to controller action
Multiple active controllers
Wednesday, November 2, 11

8. EVENTS ARE THE
WAY TO GO
Wednesday, November 2, 11

9. Benefits Of Events
Decoupling of views and controllers
Multiple controllers can listen
Familiar to web developers
Wednesday, November 2, 11

10. VIEW EVENTS
Wednesday, November 2, 11

11. View - Controller
Relation
View Event Controller Action
Wednesday, November 2, 11

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

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

14. APPLICATION
EVENTS
Wednesday, November 2, 11

15. The Problem:
Single page application
Many controllers
Wednesday, November 2, 11

16. Multiple Dispatches
View
Di
Dispatch
tch sp
a atc
sp h
Di
Controller Controller Controller
action action action
Wednesday, November 2, 11

17. Chained Dispatches
View
a tch
Disp
Controller Dispatch Controller Dispatch Controller
action action action
Wednesday, November 2, 11

18. Event Bus
View
ch
at
sp
Di
Controller Controller Controller
action action action
Fire Event Event
Event Bus
Wednesday, November 2, 11

19. BEST SOLUTION:
EVENT BUS
Wednesday, November 2, 11

20. Controller A
Wednesday, November 2, 11

21. Controller B
Wednesday, November 2, 11

22. REFERENCES
Wednesday, November 2, 11

23. refs: [{
ref : 'deleteButton',
selector: 'button[action=deletecontact]'
}],
onContactSelect: function() {
var deleteButton = this.getDeleteButton();
if (deleteButton) {
deleteButton.show();
} deleteButton.show();
}
}
Wednesday, November 2, 11

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

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

26. VIEW LOGIC?
Wednesday, November 2, 11

27. Why Extend a View
Custom view behavior
Firing custom view events
Wednesday, November 2, 11

28. LOADING
CONTROLLERS
Wednesday, November 2, 11

29. getController(name)
Loads if doesn’t exist
Calls init()
Calls launch()
Wednesday, November 2, 11

30. controller = this.getController(‘MyController’);
Wednesday, November 2, 11

31. INIT VS LAUNCH
Wednesday, November 2, 11

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

33. APPLICATION INIT
Global view events
Global navigation events
Global store events
Wednesday, November 2, 11

34. CONTROLLER INIT
Specific view events
Specific application events
Specific store events
Wednesday, November 2, 11

35. APPLICATION LAUNCH
Creating the viewport
Manipulate views
Load data into stores
Wednesday, November 2, 11

36. CONTROLLER LAUNCH
Creating & adding views
Manipulate views
Load data into stores
Wednesday, November 2, 11

37. COMING SOON!
Wednesday, November 2, 11

38. ROUTES &
DEEP LINKING
Wednesday, November 2, 11

39. HISTORY SUPPORT
Wednesday, November 2, 11

40. QUESTIONS?
Wednesday, November 2, 11