Model-View-Controller Applications
When your Web applications get larger, dividing their parts can make them more manageable. One way of doing that is to separate your application into model-view-controller (MVC) parts. The user interacts with the controller, which in turn calls the model to do data crunching, and the view to display results to the user.
Here’s an overview of these three parts:
-
Model: Implements the data crunching of the application. This is the code that actually does the in-depth (non-presentation) work, such as checking tax rater and so on. The model doesn’t know anything about the view. The model is often implemented using JavaBeans.
-
View: Implements the presentation of data to the user. The view takes and displays the data supplied to it (usually from the controller). The view is often implemented in JSP.
-
Controller: Oversees the model and the view by reacting to the data the user sends. Accepts input from the user, calls the appropriate bean methods in the model, and sends data to the view for presentation. Often implemented as a servlet.
There are several ways to implement MVC architecture with Ajax. For example, you can think of the model as being on the server, the browser as the view, and the JavaScript in the browser as the controller. That’s one way to implement MVC in Ajax applications; however, it’s more usual to host the model, view, and controller on the server, and that’s the way you’ll see it here.
Here’s an example showing how this works. The controller is a Java servlet on the server, and it calls a method in the model, which is implemented as a JavaBean. After retrieving data from the model, the controller passes that data on to the view, which is a JSP page. The view won’t be directly visible in the browser; instead, the JSP is accessed via an XMLHttpRequest object from the browser, and displayed using JavaScript.
It all starts with the controller.
The controller
The controller in this example is a Java servlet named Controller. A servlet is Java code that’s directly accessible by navigating to it in a browser, and the Controller servlet starts like this:
import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class Controller extends HttpServlet { . . . } When the user navigates to the controller, the controller creates an object of the Model class, which is simply named Mode l, and calls that object’s msg method to read the text it must send back to the browser. The model is implemented as a Java file named Model.java, and it’ll be a JavaBean in a directory below the directory in which the Controller servlet resides, named beans. To access that bean class, you import it as beans.Model, and then you can create an object of the Model class in your code:
import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import beans.Model; public class Controller extends HttpServlet { Model model = new Model(); . . . } When the Ajax part of this application calls the controller, it uses the GET method, which you handle in servlets with the doGet method:
import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import beans.Model; public class Controller extends HttpServlet { Model model = new Model(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { . . . } } In the doGet method, you can set an attribute of the request object named message to the message retrieved from the model that the view is supposed to display. Setting a request object attribute is the way you pass data around in an MVC application-the request object is sent to all the application components you forward from the controller, and those components can retrieve the data you’re sending to them from the request object-and you store data in the request object using attributes.
Here’s how you store the message-fetched from the model to send back to the browser-in the request object under the attribute name message:
import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import beans.Model; public class Controller extends HttpServlet { Model model = new Model(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setAttribute("message", model.msg()); . . . } } Now you have to forward the request object on to the view, which sends the data currently in the request object’s message attribute back to the browser. The view in this example is a JSP named view.jsp, and you can forward the request object on to it using a RequestDispatcher object:
import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import beans.Model; public class Controller extends HttpServlet { String target = "view.jsp"; Model model = new Model(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setAttribute("message", model.msg()); RequestDispatcher dispatcher = request.getRequestDispatcher(target); . . . } } Now you can forward the request-and response (which you use to configure the data you send back to the browser-object to the view like this:
import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import beans.Model; public class Controller extends HttpServlet { String target = "view.jsp"; Model model = new Model(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setAttribute("message", model.msg()); RequestDispatcher dispatcher = request.getRequestDispatcher(target); dispatcher.forward(request, response); } } That finishes the controller, which the XMLHttpRequest object in the browser interacts with. Because this is a Java servlet, you have to add <servlet> and <servlet-mapping> elements to web.xml so the server will know how to deal with this servlet; that looks like this:
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/j2ee/dtds/web-app_2_3.dtd"> <web-app> . . . <servlet> <servlet-name>Controller</servlet-name> <servlet-class>Controller</servlet-class> </servlet> <servlet-mapping> <servlet-name>Controller</servlet-name> <url-pattern>/Controller</url-pattern> </servlet-mapping> </web-app>
Next you create the view.
The view
The view is fairly simple. Its job is simply to retrieve the data stored by the controller in the request object’s message attribute and send that back to the browser. The view can display any HTML you want:
<html> <head> <title>Using MVC Architecture</title> </head> <body> <h1>Using MVC Architecture</h1> Here is the message: . . . </body> </html>
Here’s the Java code that retrieves the message from the request object and sends it back to the browser:
<html> <head> <title>Using MVC Architecture</title> </head> <body> <h1>Using MVC Architecture</h1> Here is the message: <% out.println(request.getAttribute("message")); %> </body> </html> That completes the controller and the view. Next comes the model.
The model
The model is where the data-crunching goes on in an MVC application. Ideally, the model has no idea what the view is-it’s entirely separate from the presentation logic, which is an important part of separating the pieces of your application along the MVC architecture lines. The model in this example is a class named Model, in the Java package named beans:
package beans; public class Model { . . . } As all JavaBeans must have, the model has a Java constructor that takes no arguments:
package beans; public class Model { public Model() { } } You also need to add the msg method that the controller can call to get the Hello from Ajax! message:
package beans; public class Model { public String msg() { return "Hello from Ajax!"; } public Model() { } } That completes the model, the view, and the controller. The next step is to get this MVC application installed on the server.
