Skip to main content

By clicking Submit, you agree to the developerWorks terms of use.

The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

  • Close [x]

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

By clicking Submit, you agree to the developerWorks terms of use.

All information submitted is secure.

  • Close [x]

developerWorks Community:

  • Close [x]

Hello World: Rational Software Architect

Design a simple phone book application

Tinny Ng (tng@ca.ibm.com), Advisory Software Developer, IBM Toronto
Tinny Ng
Tinny Ng is a scenario architect at the IBM SWG Scenario Analysis Lab, whose mission is to improve the cross-brand integration capability of IBM SWG products. She has more than 10 years of experience in software development, from design to implementation, including application building, packaging, testing, and support.
(An IBM developerWorks Contributing Author)

Summary:  Welcome to the first tutorial in the "Hello, World! Series", which will provide high-level overviews of various IBM software products. This tutorial introduces you to IBM Rational Software Architect, and highlights some basic features of Rational Software Architect with a hands-on exercise. Learn how to design an application using UML diagrams, publish the model information into a Web page, and transform the design to Java code using Rational Software Architect.

View more content in this series

Date:  05 May 2006
Level:  Introductory PDF:  A4 and Letter (703 KB | 24 pages)Get Adobe® Reader®

Activity:  48713 views
Comments:  

Creating a class diagram

Class diagrams are the blueprints of your system. Use class diagrams to model the objects that make up the system, to display the relationships between the objects, and to describe what those objects do and the services they provide.

Design the simple phone book application using the Model-View-Controller (MVC) architecture pattern, as shown in Figure 7. (See Resources for information on MVC.) The following three classes will be created:

  • PhoneBookModel - A class that manages the phone book entries and captures the state of the application. Whenever the state is changed, it notifies PhoneBookView, which should then refresh the user interface based on the state of the application.
  • PhoneBookView - A class that manages the graphical or textual interface to the user based on the state of the application, and notifies PhoneBookController when an input is received.
  • PhoneBookController - A class that controls the operation of the entire application. It changes the model state of the application and updates the data model based on user input.

The purpose of this exercise is to show the use of Rational Software Architect when designing an application. The design itself is not the focus, and you can proceed with a different design.


Figure 7. MVC design
MVC design

Would you like to see these steps demonstrated for you?

Show me Show me

Let's create a class diagram that reflects the design in Figure 7.

  1. In the Model Explorer view, right-click Phone Book UML Model and select Add Diagram > Class Diagram.
  2. Enter Class Diagram as the name of the generated diagram to replace the default name Diagram1.
  3. Select Class in the Palette, then click anywhere in the diagram to create a class. Name it PhoneBookModel.
  4. Right click the created class PhoneBookModel and select Add UML > Operation to create an operation for this class. Name it setState.
  5. Similarly, create the rest of the elements as shown in Table 2. The operation names are chosen without any programming language assumptions.

    Table 2. Class information

    ClassOperation(s)
    PhoneBookModel addAnEntry
    searchPhoneNumber
    getSearchResult
    getState
    PhoneBookView stateHasChanged
    changeView
    getUserInput
    PhoneBookController userHasInput
    start
  6. Now create some associations to relate these three classes together. As shown in Figure 8, click the arrow that appears next to Association] from the Palette and select Directed Association.

    Figure 8. Directed association relationship
    Phone book application
  7. Draw the directed association relationship line from the class PhoneBookController to PhoneBookModel (the order is important) to initiate a Directed Association relationship between these two classes. A Directed Association relationship means the first one is aware of the latter, but not the other way round.
  8. Similarly, create the following relationships:
    • Create an Association relationship between the class PhoneBookModel and PhoneBookView.
    • Create an Association relationship between the class PhoneBookView and PhoneBookController.

    An Association relationship without any direction means the two connected classes are aware of each other.

  9. The complete class diagram should look similar to Figure 9. Select Ctrl-S to save the diagram.

    Figure 9. Complete class diagram
    Complete class diagram

7 of 14 | Previous | Next

Comments



static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Rational, Java technology
ArticleID=110599
TutorialTitle=Hello World: Rational Software Architect
publish-date=05052006
author1-email=tng@ca.ibm.com
author1-email-cc=