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.
Let's start by creating the
Search Timecards
use case.
- 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.
- 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.
- In the toolbar on the left of the use case diagram click on the 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.
- 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.
- Create a package called
web
under org.andromda.timetracker.
- Create a package called
timecardsearch
under web.
- Drag the
Search Timecards
use case under the
timecardsearch
package.
- Create a new class diagram in the
timecardsearch
package and name it
Timecard Search Classes.
- Now create a class called
SearchController
under the
timecardsearch
package.
- 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.
- 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.
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.
- Create an Initial State at the top using the Initial State tool .
- Drop an Action State below it using the 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.)
- Create a transition from the initial state to the
Populate Search Screen
state. You can use the Transition tool
for this or select the initial state and use its toolbelt button.
- 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.
- 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.
- 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 .
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
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
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:
- Select the
SearchController
class and go to its property panel.
- Click on the New Operation tool.
- Enter
populateSearchScreen
as the name of the Operation.
- ArgoUML will create a return parameter of type void by default.
- 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.
- Select the
Populate Search Screen
action state go to its property
panel.
- Click on the Detail tab.
- Right click on the Deferrable Events field and select NewCall Event.
- Leave the name field blank.
- 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.
- Open the Services diagram in the service package.
- From the Explorer pane on the left, drag the
SearchController
class
on to the diagram.
- Draw a dependency from
SearchController
to UserService.
- 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