AJAX In Action [66]
4.1.1 Repeating the pattern at different scales
The classic web MVC model describes the entire application in coarse-grained detail. The entire generated data stream is the View. The entire CGI or servlet layer is the Controller, and so on.
In desktop application development, MVC patterns are often applied at a much finer scale, too. Something as simple as a pushbutton widget can use MVC:
■
The internal representation of states—pressed, unpressed, inactive, for example—is the Model. An Ajax widget would typically implement this as a JavaScript object.
■
The painted-on-screen widget—composed of Document Object Model
(DOM) nodes, in the case of an Ajax UI—with modifications for different states, highlights, and tooltips, is the View.
Licensed to jonathan zheng A different kind of MVC 121 ■ The internal code for relating the two is the Controller. The event-handler code (that is, what happens in the larger application when the user presses the button) is also a Controller, but not the Controller for this View and Model. We’ll get to that shortly. A pushbutton in isolation will have very little behavior, state, or visible variation, so the payback for using MVC here is relatively small. If we look at a more complicated widget component, such as a tree or a table, however, the overall system is complicated enough to benefit from a clean MVC-based design more thoroughly. Figure 4.1 illustrates MVC applied to a tree widget. The Model consists of tree nodes, each with a list of child nodes, an open/closed status, and a reference to some business object, representing files and directories in a file explorer, say. The View consists of the icons and lines painted onto the widget canvas. The Controller handles user events, such as opening and closing nodes and displaying popup menus, and also triggering graphical update calls for particular nodes, to allow the View to refresh itself incrementally. That’s one way of applying MVC outside of the more familiar web server scenario. But we’re not finished yet. Let’s turn our attention to the web browser next. Figure 4.1 Model-View-Controller applied to the internal functioning of a tree widget. The view consists of a series of painted-on-screen elements composed of DOM elements. Behind the scenes, the tree structure is modeled as a series of JavaScript objects. Controller code mediates between the two. Licensed to jonathan zheng 122 CHAPTER 4 The page as an application 4.1.2 Applying MVC in the browser We’ve focused on the small details of our application. We can also zoom out our perspective, to consider the entire JavaScript application that is delivered to the browser on startup. This, too, can be structured to follow the MVC pattern, and it will benefit from clear separation of concerns if it is. At this level, the Model consists of the business domain objects, the View is the programmatically manipulated page as a whole, and the Controller is a combination of all the event handlers in the code that link the UI to the domain objects. Figure 4.2 illustrates the MVC operating at this level. This is perhaps the most important use of MVC for an Ajax developer, because it is a natural fit to the Ajax rich client application. We’ll examine the details of such use of the pattern, and what it buys us, in the remainder of the chapter. If you think back to the conventional web MVC that we discussed in chapter 3 as well, you’ll remember that we have at least three layers of MVC within a typical Ajax application, each performing different roles within the lifecycle of the application and each contributing to clean, well-organized code. Figure 4.3 illustrates Figure