This page provides directions to create the Search Timecards use case along with its state machine diagram and the SearchController. Note that all three elements mentioned here will be placed in the package org.andromda.timetracker.web.timecardsearch.

Let's start by creating the Search Timecards use case.

1. Create a package under the timetracker model by right-clicking on it in the model explorer and selecting Add UML Entity > Package. Name this new package Use Cases because we will create our use case diagrams here.
2. In the Use Cases package, create a use case diagram by right clicking on it and selecting Add Diagram > Use Case Diagram. Type in the name Application Use Cases for this diagram and press Enter
3. In the toolbar on the left of the use case diagram click on the Use Case icon (2nd icon from the Use Case Diagram group). Now click anywhere inside the diagram. A new use case will be created. Type the phrase "Search Timecards" to name the use case. Note that the use case is created under the Use Cases package in the model explorer. This is not the final location of the use case, but we will move later to the correct location.
4. Give the use case these stereotypes as discussed earlier: FrontEndUseCase and FrontEndApplication.

Now lets create the package org.andromda.timetracker.web.timecardsearch which is the final destination of our front-end elements.

1. Create a package called web under org.andromda.timetracker.
2. Create a package called timecardsearch under web.
3. Drag the Search Timecards use case under the timecardsearch package.
4. Right-click on the Search Timecards use case and choose Add Diagram > State Diagram to create an state diagram. Name it Search Timecards State Machine Diagram. This action automatically creates a state machine in the Search Timecards use case and associates the create state diagram to the state machine.
5. Rename the state machine by selecting it and pressing F2. Type in Search Timecards State Machine
6. Now create a class called SearchController under the Search Timecards State Machine state machine. Do this by right-clicking on timecardsearch package, choose Add UML Entity > Class. Type in SearchController for its name and press Enter. Drag the SearchController class under the Search Timecards State Machine state machine.

We are done with the basic structure for the web page. Now let's create the page flow on the Search Timecards State Machine Diagram. Open this diagram and follow the steps below. Use the tool bar on the left to create various elements on the diagram. Use the tool tips and the status bar to identify the tool bar icons.

1. Create an Initial State at the top.
2. Drop a state below it. Type Populate Search Screen as the name for this state.
3. Create a transition from the initial state to the Populate Search Screen state.
4. Drop another action state below Populate Search Screen. Name it Search Timecards. Since this state represents a screen, give it the stereotype of FrontEndView.
5. Create a transition from Populate Search Screen to Search Timecards and another in the reverse direction. In other words, the use case simply switches between the two states - of course, most of the time it stays in the Search Timecards state, waiting for user input.
6. Right click on the transition out of Search Timecards and choose Add UML > Attribute. It will create an Activity as the effect of the transition.
7. Type in search as its name and press Enter.

The effect modeled on the transition out of Search Timecards will make AndroMDA render a form in the Search Criteria panel. This form will submit 5 parameters to server: submitter, approver, status, start date minimum and start date maximum. Follow the steps below to specify these parameters.

1. Right click on the search activity (in the model explorer) and open its properties.
2. Click on the ImportPackage tab.
3. Click on the button on the right to add a package import. Select the timetracker model and click on OK.
4. Click on the Parameters tab.
5. Click on the button on the right (the one with a red circle) to add the first parameter. Enter submitter as the name of the parameter and choose AndroMDA Datatypes::datatype::Long as its type (note that it is Long, not long).
6. Add the second parameter called approver with type of Long.
7. Add the third parameter called status with type of String.
8. Add the fourth parameter called startDateMinimum with type of Date.
9. Add the fifth parameter called startDateMaximum with type of Date.
10. Click Close to dismiss the dialog box.
11. We will have to add some tagged values to each of these parameters. Select them (one after the other), open the Stereotype tab and apply the specified stereotype. At the bottom of the stereotype panel, you'll find the Stereotype's properties table. Enter here the corresponding value.
    • submitter: andromda_presentation_web_view_field_type, select
    • approver: andromda_presentation_web_view_field_type, select
    • status: andromda_presentation_web_view_field_type, select
    • startDateMinimum: andromda_presentation_web_view_field_calendar, true
    • startDateMaximum: andromda_presentation_web_view_field_calendar, true

Note: Here is the meaning of these tag values:

• andromda_presentation_web_view_field_type: This will tell AndroMDA what type of field the parameter is. select will give a drop-down box, i.e. selection.
• andromda_presentation_web_view_field_calendar: This will make sure that you will get a text field for the date along with a calendar widget on its side.

We are now almost done with our activity diagram except for one thing. The state machine still has to call the SearchController to populate the submitter and approver drop-downs. To do this we will first specify a method on SearchController called populateSearchScreen(). Follow the steps below to add this method:

1. In the model explorer, right-click on SearchController and select Add UML Entity > Operation.
2. Enter populateSearchScreen as the name of the operation.
3. In the Property tab, click on General.
4. Specify the return type as void.
5. Click on the Parameters tab.
6. Add the same 5 parameters that you added to the effect above - the names and types should match exactly. But don't add the tag values. That's how AndroMDA knows how to call the controller method.

Tips & Tricks: You can simply copy the five parameters from search activity to the populateSearchScreen operation. To do this:

1. In the model explorer, select the five parameters in the search activity. Copy them (Ctrl + C).
2. Select the populateSearchScreen operation and paste the parameters (Ctrl + V).
3. In the Property tab, click on Stereotypes. Select the 5 parameters one after the other, and delete their stereotypes (it will remove their tag values).

Now that we have an appropriate controller method, let's call it from the state machine diagram.

1. Right-click on the Populate Search Screen state and choose Add UML > Entry Activity.
2. Find the sub-panel Entry
3. Specify Activity as the type of behavior of the entry.
4. Right click on the activity entry and click on Add UML > Call Operation Action.
5. Choose Select an existing operation.
6. Browse to timetracker::org.andromda.timetracker::web::timecardsearch::Search Timecards::Search Timecards State Machine::SearchController::populateSearchScreen()
7. Click OK to dismiss the dialog box.

There is just one more thing left. The SearchController needs to be able to call the service layer to get the list of users. To add this capability, we need to create a dependency from the SearchController to the UserService.

1. Open the Services diagram in the service package.
2. From the model explorer on the left, drag the SearchController class on to the diagram.
3. Draw a dependency from SearchController to UserService.

We have now completely modeled the Search Criteria panel. Save your model, and export it, as usual.

Please go back to the main tutorial page and continue from where you left off.