UML Sequence Diagrams

Sequence Diagram Example with EA

UML sequence diagrams illustrate the interactions between objects (that is, instances of classes). Before creating a UML sequence diagram, you must have a UML class diagram that illustrates the classes that comprise your application. See these instructions for creating UML class diagrams if you haven't yet performed this step. However, for this exercise, you'll be working with an EA project file that already contains some classes and a class diagram that correspond to this Java program:

package hello;
 
import javax.swing.*; // here's where JOptionPane comes from...
import java.util.*;   // here's where Date comes from...
import java.text.*;   // here's where SimpleDateFormat comes from...
/**
 * HelloWorldApp.java
 * @author: hornick
 * This program displays a welcome message in a dialog, and then
 * displays the current day/time in a second dialog.
 */
public class HelloWorldApp {
 
    /**
     * This is the main method of this program.
     * It delegates the real work to other methods
     */
    public static void main(String args[]) {
 
        String text = "hello se1010" ;
        printWelcomeMessage( text );
        printDate();
   }
 
    /**
     * This method displays a welcome message in a JOptionPane dialog
     * It displays it twice: just as it came in, and also in uppercase
     * @param message Contains the text to be displayed in the dialog
     */
    public static void printWelcomeMessage(String message ) {
 
        // take the incoming message and convert to uppercase
        String subtext = message.toUpperCase();
 
        // print the message via a dialog box
        JOptionPane.showMessageDialog(null, "The message is: \n" + message + "\n or alternately: \n" + subtext ); 
    }
 
    /**
     * This method displays the current day & time in a JOptionPane dialog
     */
    public static void printDate() {
        Date today = new Date(); // creates a Date object with the current date and time when the code executes
 
        // We need a SimpleDateFormat object to convert the Date object to something printable
        SimpleDateFormat formatter = new SimpleDateFormat("EEEE HH:mm:ss");
        // Note: the "EEEE HH:mm:ss" format displays e.g. "Thursday 10:02:34"
 
        // Now print the formatted date
        String dateString = formatter.format(today);
        JOptionPane.showMessageDialog(null, dateString );  
    }
}

Follow this procedure to create your first sequence diagram:

  1. First, download this example EA project file. Remember the name and location where you save this file on your computer; you'll need it in step II below:
    1. Run the EA application. In the main EA window (Start Page), click on Open a Project File.
    2. In the Open Project dialog, browse to the directory where you saved the downloaded example project file, and press the Open button.
  2. The sample project, HelloWorld, should now appear in the Recent Projects list in the main EA window, and the project should be opened (HelloWorld - EA should now appear in the EA title bar.)
  3. Next, open the top-level class diagram:
    1. If the Project Browser window (default location: upper right) is not visible , select Project Browser from the View menu. (If the project browser tends to disappear, you can lock it in place by clicking the “push pin” icon; to release the browser, click the icon again.)
    2. Click on the plus sign next to Logical View to expand it. You'll see an icon labeled Class diagram appear below Logical View.
    3. Double-click Class diagram and to open the class diagram. You'll see the classes that comprise this application within the class diagram, along with the relationship between the classes.
    4. You should see Class Diagram on the tab at the bottom of the main window.
  4. Next, open the top-level sequence diagram:
    1. Click on the plus sign next to Dynamic View to expand it. You'll see an icon labeled Sequence diagram appear below Dynamic View.
    2. Double-click Sequence diagram and to open the sequence diagram. The diagram will be empty.
    3. You should see Sequence Diagram on the tab at the bottom of the main window.
  5. Next, ensure that to correct toolbox is available:
    1. If the Toolbox window (default location: upper left) is not visible, select Toolbox from the View menu. (The “push pin” may be useful here too).
    2. If the Interaction Elements tools are not visible, click on More tools… and select UMLInteraction.
  6. Now, create the objects that comprise the running program:
    1. Left-click on the Actor from the Toolbox and drag it onto upper left corner of the Sequence Diagram.
    2. Enter a name of “User” in the pop-up dialog box and select OK. This icon represents the user of our program.
    3. Expand the “hello” package under Logical View. The HelloWorldApp class icon should appear. Left-click the HelloWorldApp class and drag the icon onto the Sequence Diagram.
    4. When you release the mouse, the Paste Element dialog appears. Select As Simple Link and press the OK button. You select As Simple Link when you are working with a class that is not instantiated as an object. In this case the HelloWorldApp is never instantiated since it contains only class (static) methods.
    5. The HelloWorldApp element appears in the Sequence diagram. Reposition it towards the left of the window by dragging it with the mouse.
    6. Repeat the preceding two steps for the JOptionPane class, which is also a non-instantiated element. The JOptionPane class is in the javax.swing package.
    7. The “User” calls the main() method from the HelloWorldApp class. We represent this call in the Sequence Diagram by drawing an arrow from the user's lifeline to the HelloWorldApp.
      1. Select the arrow, , from the Interaction Relationships icons and then drag from the user lifeline (dotted line under the user) to the HelloWorldApp lifeline.
      2. Select main(String[]) from the “Message” drop-down menu and click OK.
    8. Examine the source code for the Java program. Note that the main() method invokes the printWelcomeMessage() method, followed by the printDate() method. To illustrate the method call from main() to printWelcomeMessage:
      1. Within the Interaction Relationships, select Self-message, , by clicking on it.
      2. Once selected, move the mouse to the dotted line below the HelloWorldApp element, and click the mouse on the dotted line.
      3. An arrow appears stemming from the main() method activation box to the printWelcomeMessage() activation box.
      4. A Message Properties dialog appears. From the Message drop-down list, select printWelcomeMessage() and type text in the “Parameter Values” field.
      5. A call to showMessageDialog() is made from within printWelcomeMessage. We illustrate this by selecting the Message icon, , and then dragging from the HelloWorldApp lifeline to the JOptionPane lifeline.
      6. Select the first showMessageDialog() from the drop-down menu and type null, “The message is…” in the “Parameter Values” field.
      7. EA forces the message to originate in the main() method's activation box instead of the printWelcomeMessage() method's activation box, where it should be. To fix this, select the message arrow. A small arrow will appear. Click on this arrow to “Raise the activation level.”
    9. To illustrate the invocation of the printDate() method from the main() method, repeat the above procedure to create a self-message for the printDate() method.
    10. Again, examine the source code for the Java program. Note that the printDate() method creates a Date object named today:
      1. Expand the java/util package under Logical View. The Date class icon should appear. Left-click the Date class and drag the icon onto the Sequence Diagram.
      2. When you release the mouse, the Paste Element dialog appears. Select As an instance of element (object) and press the OK button. You select As an instance of element when you are working with a class that must be instantiated as an object.
      3. The Date element appears in the Sequence diagram. Reposition it towards the left of the window by dragging it with the mouse.
      4. Double-click the Date element, and in the subsequent dialog, enter the name today of the Date object.
      5. Repeat the preceding steps to create an object named “formatter” from the SimpleDateFormat class, which is found in the java/text package.
    11. To illustrate the construction of the today Date object within the printDate() method,
      1. Within the Interaction Relationships list, select Message, , by clicking on it.
      2. Once selected, move the mouse to the activation box of the printDate() method of the HelloWorldApp element, and click and hold the left mouse button.
      3. Move the mouse to the dotted line below the Date element and release the mouse button.
      4. A Message Properties dialog appears. From the Message drop-down list, select Date() indicating the call to the Date constructor.
      5. Enter “today” in the Assigned To field to indicate that the reference returned by the constructor will be assigned to a variable called today.
      6. Select “New” from the Lifecycle drop-down menu to indicate that the object is being created at this step, and select OK.
      7. Raise the call's activation level up one so that it originates from within the printDate() method.
    12. Continue to add other elements to the sequence diagram as shown below.
  7. If there is an asterisk (*) next to the diagram name on the tab at the bottom of the EA window, save your recent changes by selecting Save from the Diagram menu. (Many changes will be saved automatically, but some will not.)
  8. You can save the sequence diagram by selecting Save Image to File from the Diagram menu. Alternatively, you can copy the class diagram to the clipboard by selecting Save Image to Clipboard from the Diagram menu.

When you're done, you should have something that looks like this:

se1020labs/umlsequence.txt · Last modified: 2010/03/09 20:55 (external edit)
 

This website is not owned or managed by the Milwaukee School of Engineering.

© 2003-2010 Dr. Christopher C. Taylor, et. al. • Office: L-343 • Phone: 277-7339 • npǝ˙ǝosɯ@ɹolʎɐʇ • -> RSS <-