Create Search Timecards Use Case

This page provides directions to create the Search Timecards use case along with its activity diagram and the SearchController. Use the containment tree shown below to guide you throughout this procedure. Note that all three elements mentioned here will be placed in the package org.andromda.timetracker.web.timecardsearch.

Search Timecards Tree

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

Search Timecards Use Case

  1. Create a package under the TimeTracker model by right-clicking on it in the containment tree and selecting Add 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 Create DiagramNew Use Case Diagram. On the property panel, enter the name Application Use Cases for this diagram.
  3. In the toolbar on the left of the use case diagram click on the Use Case tool . Use Case Tool 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 containment tree. This is not the final location of the use case, but we will move later to the correct location.
  4. Right click on the use case and give it two 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. Create a new class diagram in the timecardsearch package and name it Timecard Search Classes.
  5. Now create a class called SearchController under the timecardsearch package.
  6. Right-click on the Search Timecards use case and choose Create Diagram New Activity Diagram to create an activity diagram. Name it Search Timecards Activity Diagram. This action automatically associates the activity diagram to the use case.
  7. All that is left now is to connect the SearchController to the activity diagram. To do this, switch to the Composite-centric view in the explorer pane and select unnamed ActivityGraph under the Search Timecards use case. Go to the property panel and change the Context: field to point to the SearchController class.

Search Timecards Activity Diagram

We are done with the basic structure for the web page. Now let's create the page flow on the Search Timecards Activity 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 using the Initial State tool . Initial State Tool
  2. Drop an Action State below it using the Action State tool . Action State Tool Go the property panel and type Populate Search Screen in the Name field. (Note: Do not enter the name by typing it in the diagram, it does not become the name of the action state because the UML specification says this figure should show the ????. AndroMDA requires the name field to be used, so enter the name in the property panel.)
  3. Create a transition from the initial state to the Populate Search Screen state. You can use the Transition tool Transition Tool for this or select the initial state and use its toolbelt button.
  4. Drop another action state below Populate Search Screen. Again, go to the specification of this state and 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 use input.
  6. Now we need to tell AndroMDA about the Search Criteria panel on the search screen. In fact, this is a form that will submit 5 parameters to server: submitter, approver, status, start date minimum and start date maximum. This is modeled using a trigger of type signal on the transition coming out of the front-end view. Follow the steps below to specify the trigger.
    • Select the transition out of Search Timecards and go to its property panel.
    • Find the field called "Trigger" and right click on the empty field, then select New Signal Event.
    • Name the signal event search.
    • Click on the parameters tab.
    • Right click on the Parameters field and select Add to add a new parameter On the Parameter property panel enter submitter as the name of the parameter and Long as its type (note that it is Long, not long). Now click on the Tagged Values tab and click on the right column and select andromda_presentation_web_view_field_type from the drop down menu as the type of the new tagged value. This tagged value tells AndroMDA what type of field submitter is. Since submitter is a drop-down box, i.e. selection, we need to set the value of this tag to select by typing that string in the Value column on the right.
    • Return to the Properties tab and add the second parameter called approver with type of Long by clicking on the New Parameter tool . New Parameter Tool Again set the tagged value andromda_presentation_web_view_field_type to select.
    • Add the third parameter called status with type of String. Again set the tagged value andromda_presentation_web_view_field_type to select.
    • Add the fourth parameter called startDateMinimum with type of Date. This time set the tagged value andromda_presentation_web_view_field_calendar to true. This will make sure that you will get a text field for the date along with a calendar widget on its side.
    • Add the fifth parameter called startDateMaximum with type of Date. Again set the tagged value andromda_presentation_web_view_field_calendar to true.
    • Return to the Properties tab and click the Parent navigation tool Navigate Parent Tool to and check the Parameters field to make sure that you have five parameters with the correct names and types.
    • Here's a trick that you can use to check that you remembered to add all the tagged values with the correct types and values. ArgoUML maintains a navigation history stack that you can move backwards and forwards through. Click on the Tagged Values tab and then click on the Navigate Back tool Navigate Back Tool and review each tagged value to make sure it has the correct type and value. You can tell which element is currently selected by looking at the name next to the Target: label in the upper left hand corner of the property panel.
    • submitter Long
      approver Long
      status String
      startDateMinimum Date
      startDateMaxmium Date

We are now almost done with our activity diagram except for one thing. The activity diagram 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. Select the SearchController class and go to its property panel.
  2. Click on the New Operation tool.
  3. Enter populateSearchScreen as the name of the Operation.
  4. ArgoUML will create a return parameter of type void by default.
  5. Now add 5 new parameters with same names and types as those you added to the trigger above. The names and types should match exactly because that's how AndroMDA knows how to call the controller method.

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

  1. Select the Populate Search Screen action state go to its property panel.
  2. Click on the Detail tab.
  3. Right click on the Deferrable Events field and select NewCall Event.
  4. Leave the name field blank.
  5. The Operations drop-down shows the controller methods available to call (since we attached the controller to this activity diagram). Select the populateSearchScreen() method.

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.

Search Controller To UserService

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

We have now completely modeled the Search Criteria panel. Please go back to the main tutorial page and continue from where you left off