We are finally ready to attack the front-end! In this section, we will use the AndroMDA BPM4Struts cartridge to develop a Struts based web front-end. Note that AndroMDA offers another cartridge to generate JSF based front-ends. However, if you like some other front-end framework better, you can roll your own cartridge! But remember to share it with the community :-).

The BPM4Struts cartridge generates Struts web pages from a UML model that defines the flow of your application. Before we get into modeling our application, please read the following material to understand fundamental concepts behind the BPM4Struts cartridge.

1. Introduction to BPM4Struts: The Introduction and Goal sections provide a good overview of the cartridge.
2. BPM4Struts How-to Guide: Quickly look over the concepts behind use-cases, activity graphs and controllers.

As you might have gathered, there are 3 important concepts associated with creating a web page: a use case, an activity diagram (that details the use case), and one or more controllers (whose methods can be called from the activity diagram). So let's discuss how we will model our search screen. We will start with a use case called Search Timecards. This use case is shown on the right and we have marked it with two stereotypes:

1. FrontEndUseCase: which means exactly that - it is a front-end use case
2. FrontEndApplication: which means that it is the application's entry point. Note that, for now, we won't worry about security or navigation -- as soon as you point your browser to this web application, it will show the Search Timecards page!

We will then add details to this use case by creating an activity diagram. The activity diagram is shown below:

The activity diagram can use the SearchController shown below by calling its methods. The key parameter passed to SearchController methods is a form interface that provides access to HTTP request parameters. The SearchController can call services in the service layer. Specifically, we have shown here that it has access to the UserService.

Now let's enter the use case, the activity diagram and the controller in our model. Please follow one of the links below to edit the model with the UML tool of your choice.

• ArgoUML
• MagicDraw 9.x
• MagicDraw 15.5
• RSM 6

Now let's ask AndroMDA to generate code for the Search Timecards page:

1. Execute the command mvn install in the Command Prompt. Make sure you get a BUILD SUCCESSFUL message.

The only code we need to write by hand is the call from the SearchController to the UserService to populate the drop-downs. So open the SearchControllerImpl class generated at C:\timetracker\web\src\main\java\org\andromda\timetracker\web\timecardsearch. Add the code shown below:

// license-header java merge-point
package org.andromda.timetracker.web.timecardsearch;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.andromda.timetracker.vo.UserVO;
import org.andromda.timetracker.vo.UserVOComparator;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.apache.struts.action.ActionMapping;

public class SearchControllerImpl extends SearchController
{
    private Log logger = LogFactory.getLog(SearchControllerImpl.class);
    private static final String ALL_STRING = "-- All --";

    public final void populateSearchScreen(
        ActionMapping mapping,
        org.andromda.timetracker.web.timecardsearch.PopulateSearchScreenForm form,
        HttpServletRequest request,
        HttpServletResponse response)
    throws Exception
    {
        if (logger.isDebugEnabled()) {
            logger.debug("form: " + form);
        }

        // Get list of users and add the "All" option at the top
        UserVO[] users = getUserService().getAllUsers();
        Arrays.sort(users, new UserVOComparator());
        List userList = new ArrayList(Arrays.asList(users));
        userList.add(0, new UserVO(null, ALL_STRING, null, null));

        // Populate submitter and approver dropdowns
        form.setSubmitterBackingList(userList, "id", "username");
        form.setApproverBackingList(userList, "id", "username");
    }
}
    

Note that we sort the users array so that names appear alphabetically in the drop-downs. The sorting function uses UserVOComparator, which is available under C:\timetracker-completed\common\src\main\java\org\andromda\timetracker\vo. Copy it to your solution using the same directory structure.

Now follow the steps below to build and deploy the application to JBoss and test it.

1. Build the common and web projects to make sure the code added above is compiled and packaged. Here's how:
   mvn -f common/pom.xml install
mvn -f web/pom.xml install
2. Start the JBoss server. To do this, open a Command Prompt in the JBoss bin directory (C:\jboss-4.0.5\bin) and execute the command run.
3. Deploy the application to the JBoss server. Go to the previous Command Prompt (in the directory C:\timetracker) and execute the command:
   mvn -f app/pom.xml -Ddeploy
   Look for JBoss console message indicating that the application has started.
4. Open a browser and make it point to http://localhost:8080/timetracker. The TimeTracker search page should appear. Note that although the look and feel is not what we have in the prototype, the screen is functionally correct. We will worry about the look and feel later, when all the functionality is complete.
5. Make sure that the submitter and approver drop downs are populated with the complete user list.
6. Set some values in the search criteria fields and click the Search button. Now look at the JBoss log file to see if the form values are logged correctly. The JBoss log file is located at C:\jboss-4.0.5\server\default\log\server.log. Below is a sample log:
   

2006-06-29 02:47:41,541 DEBUG form:
    org.andromda.timetracker.web.timecardsearch.SearchTimecardsSearchFormImpl@a2bd15
    [startDateMinimum=Tue Jun 13 00:00:00 EDT 2006,
     startDateMaximum=Wed Jun 07 00:00:00 EDT 2006,
     submitter=3,
     status=<null>,
     approver=2]
    

Below is a screen shot of the Search screen so far. Isn't it amazing that we were able to get all this functionality without much coding? Of course, the look and feel is nowhere near what we want, but we will take care of that once the screen is fully functional.

What's Next?

Congratulations! You have successfully deployed a complete vertical slice of the application that includes a front-end, middle-tier and a back-end. We are now ready start our second iteration with the goal to build the Search Results panel. Click the Next link below to start iteration 2.