HTML and CSS Reference
In-Depth Information
with Ajax and Comet
) and to control all dependencies from the outside, i.e., using
dependency injection. To achieve this we will employ a derivative of the Model-View-
Controller (MVC) design pattern frequently referred to as Model-View-Presenter
(MVP), which is very well suited to facilitate unit testing and fits well with test-driven
development.
15.1.2.1 Passive View
MVP is practiced in a variety of ways and we will apply it in a manner that leans to-
ward what Martin Fowler, renowned programmer, author, and thinker, calls Passive
View. In this model, the view notifies the presenter—
controller
in Passive View—
of user input, and the controller completely controls the state of the view. The
controller responds to events in the view and manipulates the underlying model.
In a browser setting, the DOM is the view. For the chat application the model
will be provided by the
cometClient
object, and our main task is to develop the
controllers. Note the plural form; there are many controllers, each discrete widget
or even widget component can be represented by its own view and controller,
sometimes referred to as an
MVP axis
. This makes it easy to adhere to the single
responsibility principle, in which each object has one well-defined task. Throughout
this chapter we will refer to a controller/view duo as a
component.
We will divide the chat client into three distinct components: the user form, the
message list, and the message form. The message list and form will not be displayed
until the user form is successfully completed. However, this flow will be controlled
from the outside, as controllers will not be aware of other controllers. Keeping them
completely decoupled means we can more easily manipulate the client by adding or
removing components, and it makes them easier to test.
15.1.2.2 Displaying the Client
We need some DOM elements to display the components. To keep the scope man-
ageable within the confines of a single chapter, we're going to manually write the
required markup in the HTML file that serves the application.
The client is not going to make any sense to users without JavaScript, or without
a sufficiently capable JavaScript engine. To avoid presenting the user with controls
they cannot meaningfully use, we will initially hide all the chat related markup, and
have the individual controllers append the “js-chat” class name to the various ele-
ments used by the client. This way we can use CSS to display elements as JavaScript
enhances them.
