Developing Time Expression User Interfaces with Spring

Now that we have Tomcat and Spring installed and set up, we can go through the steps required to develop our sample screens. Let's look at two Time Expression screens we will develop in this chapterone a nonform screen and the other an HTML form screen.

Timesheet List Screen

Figure 7.5 shows the Timesheet List screen, which is a nonform screen (that is, it contains no input fields a user can fill in because it is a display-only screen). From the perspective of coding a controller, this is the most basic screen that you can develop using Spring MVC; we will review the code behind this shortly.

Figure 7.5. Time Expression's Timesheet List web page (view name: timesheetlist).

Enter Hours Screen

Figure 7.6 shows the Enter Hours screen, a form screen (that is, it contains input fields a user can fill in). This is a little more complicated than the Timesheet List screen because we will have to bind the HTML form fields to our Java code, perform validations on the data entered, display errors, and so on.

Figure 7.6. Time Expression's Enter Hours web page (view name: enterhours).

Java Files

By now we have enough information to come up with filenames for our Java classes and JSP (view) filenames. Table 7.2 shows a map of the view, controller, and collaborator (model) classes required to complete the two screens shown in Figures 7.5 and 7.6. You might recall that we designed this map in Chapter 3 (see Table 3.5).

Table 7.2. Sample Application Flow Map (from Chapter 3)

Story Tag	View	Controller Class	Collaborators	Tables Impacted
Timesheet List	timesheetlist	TimeSheetListController	TimesheetManager	Timesheet
Enter Hours	enterhours	EnterHoursController	TimesheetManager	Timesheet Department

Note that the collaborator classes mentioned here were already developed in Chapter 5, "Using Hibernate for Persistent Objects," so we need to develop the view and controller classes now.

Figure 7.7 shows a rudimentary class diagram on how the controller and model related classes fit together.

Figure 7.7. Class diagram showing relationship between Time Expression model and controller classes.

If you have developed web applications in Java before, you might question the placement of .jsp files under the same directory structure as my Java classes (that is, java/com/visualpatterns/timex/); this is purely a personal preference because I like to see my MVC files grouped together under the same parent directory.

Let's look at how to develop the Timesheet List and Enter Hours screens, step-by-step. We will later look at how to develop the Sign In screen because it is a special case because of the authentication (sign in) required.