Details Column

In this section we will add the details column to the results table. This column will have buttons that will take you to the Timecard Details page when clicked. The modified activity diagram for this functionality is shown below:

Search Timecards Activity Diagram

This activity diagram has no new modeling concepts, so we will give you just the high level steps to construct it. In general, we are trying to create a details trigger coming out of the Search Timecards view. The details trigger will contain an id parameter that indicates which timecard was clicked. We need to pass this id to the next use case called Timecard Details. However, since id is not a very descriptive name we would like to convert it to a page variable called timecardId, which will be passed to the next page. The activity called Initialize Timecard Id transforms the id parameter to the timecardId page variable. So, without further delay, here are the steps to update your activity diagram:

  1. First create the action state called Initialize Timecard Id. Remember that the Name of the action state should be Initialize Timecard Id (not just its label). This is done by double-clicking the state and entering the name in the action state specification.
  2. Create a transition from Search Timecards to Initialize Timecard Id. Create a signal trigger on this transition called details and add a parameter to it called id of type Long. (This is similar to adding the search trigger out of Search Timecards.)
  3. Add a tag to the id parameter called andromda_presentation_web_view_field_type and set its value to link. This tag ensures that the id column in the table will be a link instead of the default text box.
  4. Add a tag on the transition (not on the trigger) called andromda_presentation_web_action_tablelink and set its value to timecardSummaries. This tag ensures that the details trigger will occur on the table that displays timecardSummaries. Also since we are not specifying any attribute in this value (such as timecardSummaries.id) a separate column will be created with buttons named Details.
  5. Create a final state.
  6. Add a transition from Initialize Timecard Id to the final state.
  7. Create a page variable called timecardId of type Long on this transition. Remember that page variables are created by first creating a signal trigger with no name and adding the page variable as a parameter on this trigger. (This is similar to adding the timecardSummaries page variable.)
  8. Switch to the Services diagram for a second and add the following method to the SearchController
    +initializeTimecardId(id : Long, timecardId : Long) : void
  9. Switch back to the activity diagram and call the initializeTimecardId() method from the Initialize Timecard Id action state. Remember that the call should be added as a deferrable event. (This is similar to adding the populateSearchScreen() call to the Populate Search Screen action state.) MagicDraw users: You can create and call the SearchController.initializeTimecardId() method, all in one step, when editing the call trigger. This is done using the "New Button" on the right of the combobox. It's a shortcut that frees you from switching to another diagram.
  10. We need to connect the final state to the next use case which is Timecard Details. To do this, simply open the specification for the final state by double-clicking on it. In the Name field, enter Timecard Details. AndroMDA does a name match to connect the final state to the target use case (which we have not created yet).

That completes the Search Timecards activity diagram. Of course, we still need to create the Timecard Details use case, otherwise AndroMDA will complain that it cannot find the target for the final state in the Search Timecards activity diagram. Follow the steps below to create a very simple Timecard Details use case:

  1. Open the use case diagram called Application Use Cases.
  2. Add a new use case and call it Timecard Details. Give it the FrontEndUseCase stereotype.
  3. In the model, create a new package under org.andromda.timetracker.web and call it timecarddetails.
  4. Move the Timecard Details use case from the Use Cases package to the timecarddetails package that we just created. This can be done in the Containment Tree.
  5. Now create a class called TimecardController under the timecarddetails package.
  6. Create a new activity diagram under the Timecard Details use case and name it Timecard Details Activity Diagram.
  7. Connect the TimecardController to the activity diagram using the procedure specific to your modeling tool. (This is similar to the way we connected the SearchController to the Search Timecards activity diagram.)
  8. Open the Timecard Details activity diagram and enter the following elements to it. Note that the page variable timecardId gets its value from the previous use case ( Search Timecards).
Timecard Details Activity Diagram

Now let's ask AndroMDA to generate code for the modified model:

  1. Execute the commands mvn clean followed by mvn install in the Command Prompt. The build will fail complaining about the SearchControllerImpl class because we have not implemented the initializeTimecardId() method.
  2. Open SearchControllerImpl.java and add the following code to it.
                            public final void initializeTimecardId(
                            ActionMapping mapping,
                            org.andromda.timetracker.web.timecardsearch.InitializeTimecardIdForm form,
                            HttpServletRequest request,
                            HttpServletResponse response)
                            throws Exception
                            {
                            form.setTimecardId(form.getId());
                            }
                        
  3. Build only the web project to make sure the code added above is compiled and packaged. Here's how:
    mvn -f web/pom.xml install
  4. Make sure the JBoss server is running.
  5. Deploy the application: Copy timetracker.war from web\target to Jboss standalone\deployments directory.
  6. Open a browser and make it point to http://localhost:8080/timetracker. The TimeTracker search page should appear with Details buttons in the results panel. Note: You may have to click your browser's refresh button to clear its cache and grab a fresh copy of the page.
  7. Click on one of the Details buttons. The browser should forward to the Timecard Details page. Notice that id is passed as a parameter in the URL.

Below is a screen shot of the Search screen so far.

Search Results Panel

What's Next?

We have now implemented the full functionality of the search screen. All that remains is the look and feel as specified by the TimeTracker prototype. Click here to start customizing the look and feel.