Component Design and
Implementation Diagrams
Design Diagrams
1.
2.
3.
4.
5.
6.
7.
Use Case Diagram can model the whole system but
usually it models subsystem/component
(relate actors to major functions)
Activity Diagram is usually used to model the whole
system or subsystem/component (it shows the sequence
of major functions)
Use case Detail is used to model a single function or
service/component interface
Class Diagram (discovered by analyzing the Usecase
Detail and main business document) is used to model a
subsystem / component static view
Sequence/ Collaboration Diagram (is used to show
the sequence of action between classes to perform a
single function/ component interface
State Diagram (usually done for the most critical
object/component )
Implementation Diagrams
• Component Diagrams:
– The component diagram is one of the easier-tounderstand diagrams,
– set of components and their relationships
– Illustrate static implementation view
– Component maps to one or more classes,
• Package Diagram:
• Organizing element to group
• Can group components
• Deployment Diagrams:
– Set of nodes and their relationships
– Illustrate static deployment view of architecture
– Node typically encloses one or more components
Review of Analysis and Design
Methodologies
1.
2.
Structural Approach (Context Diagram, DFD,
Structural Chart, Structural English)
Object Oriented Approach ( Use Case Diagram, Use
Case detail, Activity diagram, Class diagram,
Sequence diagram, Collaboration Diagram, Package
diagram
Use-Case Diagrams
• Interaction of Users with System Components
• Actors
– External Entity that Interacts with Software
– Promote Simulation of Events
– Can be People, Software Tools, etc.
• Use-Case Diagram
– Graph of Actors and Set of Use Cases Enclosed by
System (High-Level) or Class Boundary
– Black Box View of System Components
– Derived via User Interviews
Use-Case Diagrams
Supermarket Example
HTSS: System View
HTSS
Scan Items
Ring Order
Cashier
Buy Items
Customer
Catalog
Check Status
Sales Person
Place Order
Customer
Catalog: Class View
Fill Order
Estb. Credit
Supervisor
Use-Case Diagrams Clinic
Activity Diagram
-Granularity Level of Use-Cases is Variable
© Makoto Nakayama, Ph.D.
8
Use Case Detail for the FindProduct Interface within a Store
component (usually done for components that have User
Interface, eg. OCX
•
Main Flow
1. The customer selects the “find Product”
2. The customer selects the search criteria
3. The Component returns a list of matching
product
•
Alternative flow
4-a if there is no product, the component will return no
match string
* customer can cancel at any time
•
Ways to identify and classes and class
attributes and methods
1. Use cases detail
•
The Nouns in the Use Case Help Determine Class
attributes
•
The Verbs in the Use Case Help Determine Class
Methods
2. Major Business documents
3. Major Business process
Getting classes form business document
Order ( what is the most important Document
What entities are related to this document
Getting classes from Business process
Sequence Diagram for Supermarket
component’s ordering interface
Collaboration Diagram
• Convey Same Info as Sequence
Diagrams but Focus on Object Roles
instead of messages
• Object Roles are Rectangles
• E.g., aHotel, aChain, etc.
Your Turn
For eye glass store
– Create a use case diagram and a set of detail usecase descriptions for the process of buying glasses
from the viewpoint of the patient, but do not bother
to identify the flow of events within each use case.
The first step is to see an eye doctor who will give
you a prescription. Once you have a prescription,
you go to a optical dispensary, where you select
your frames and place the order for your glasses.
Once the glasses have been made, you return to
the store for a fitting and pay for the glasses. The
store manger should be able to view daily and
monthly reports
© Makoto Nakayama, Ph.D.
26
Complete
Use Case Diagram
Set Appointment
Make Backorder
extend
View Appointment
Make Order
Make Prescription
Dr
include
Make Production Order
Staff
extend
View Reports
Make Adjustment Order
Manager
Make completion
notice
Process Payment
Techn
Componentized Use Case Diagram
Set Appointment
Appointment
Make Backorder
View Appointment
Make Order
Make Prescription
Dr
include
Make Production Order
Staff
extend
View Reports
Make Adjustment Order
Manager
Make completion
notice
Process Payment
Techn
Activity
Diagram
between
components
describing the
major process
sequence
•
Use Case Detail for
Set Appointment Interface
Main Flow
1.
2.
3.
4.
•
Staff click on the appointment page
Staff enter patient ID number
Staff enter the Appointment date
The system confirm the appointment
Alternative flow
2-a If patient is new then the staff will enter patient
details (name, address, ages,etc)
4-a if the date is reserved then a message will be
shown and the system return to step 3
* Staff can cancel at any time
Class found in
Staff
Enter
Appointment
Doctor
Staff
Enter
Appointment
Enter
Prescription
Doctor
View
Staff
Enter
Appointment
Enter
Prescription
Doctor
View
View
Staff
Enter
Appointment
Enter
Order
Enter
Prescription
Doctor
View
View
Staff
Enter
Enter
Appointment
include
Enter
Order
Prescription
Doctor
View
View
Staff
Enter
Enter
Appointment
include
Enter
Order
include
Product
EF
Lenses
Prescription
Doctor
Prescription
View
View
Staff
Enter
Enter
Appointment
Complete
Technician
Enter
Order
Invoice
Product
EF
Lenses
(Status of the order)
(Status of the order)
(Status of the order)
Doctor
Prescription
View
View
Staff
Enter
Enter
Appointment
Complete
Technician
Enter
Order
Reports
Invoice
Manager
View
Product
EF
Lenses
(Status of the order)
Doctor
Prescription
View
View
Staff
Enter
Enter
Appointment
Complete
Technician
Enter
Order
Reports
Invoice
Manager
View
Product
EF
Lenses
Componentizing class
•
Use Case Detail for
Set Appointment Interface
Main Flow
1.
2.
3.
4.
•
Staff click on the appointment page
Staff enter patient ID number
Staff enter the Appointment date
The system confirm the appointment
Alternative flow
2-a If patient is new then the staff will enter patient
details (name, address, ages,etc)
4-a if the date is reserved then a message will be
shown and the system return to step 3
* Staff can cancel at any time
Patient
View
Staff
Enter
Doctor
Enter
Prescription
View
Appointment
Complete
Technician
Enter
Order
Reports
Invoice
Manager
View
Product
EF
Lenses
•
Sequence Diagram for
Set Appointment interface
Main Flow
1.
2.
3.
4.
•
Staff click on the appointment page
Staff enter patient ID number
Staff enter the Appointment date
The system confirm the appointment
Alternative flow
2-a If patient is new then the staff will enter patient
details (name, address, ages,etc)
4-a if the date is reserved then a message will be
shown and the system return to step 3
* Staff can cancel at any time
Apontm
Page
<UI>
Staff
Apont
patient
DB
Click
New Apt
(Pat ID)
Enter Date
Get Patent Info (Pat ID)
Return
results
Confirm
Add appointment (Pat ID, date)
Main Flow
1. Staff click on the appointment page
2. Staff enter patient ID number
3. Staff enter the Appointment date
4. The system confirm the appointment
Now you update this diagram by adding the alternative flow
elements
State Diagram
(usually done for the most critical object)
It should done for ORDER component
Entered
Production
Confirm
[ if item is
missing]
Back order
Wait
Prod
ready
Paid
First Assignment • “Your Turn you are a software engineer who met an agency
who requires you to build a software application for their
business (major process)
•
•
•
•
•
•
•
•
Examples
E book stores
E money transfer
E hotel reservation
E course registration
E Pizza order
You can come with idea
Note at least you need to have 4 classes or entity
© Makoto Nakayama, Ph.D.
48
Use Smart Draw or Rational Rose or Visio
for your drawing
•
For this system,
1. Define the business process steps
2. Develop use case diagram.
3. Draw an activity diagram for the main process.
4. Draw a class Diagram
5. Develop one use case detail
6. Draw a sequence diagram for this case
© Makoto Nakayama, Ph.D.
49
Component design principles.
Principle
Acyclic Dependencies
Common Closure
Description
Allow no cycles in the dependencies graph between components. For
example disallow A BC A because it includes a cycle.
The classes of a component should be closed together against the same
kinds of changes. A change that affects a class within a component
should not affect classes outside that component. In other words your
components should be cohesive in that sweeping changes across
several components are not required.
Common Reuse
The classes in a component are reused together. If you reuse one class
in a component you reuse them all. This is another principle addressing
cohesion.
Dependency Inversion
Abstractions should not depend on details, instead details should
depend on abstractions.
Software elements should be open for extension but closed for
modification.
The granule of reuse is the granule of release. In other words you
should not reuse only part of a released software element.
A component should be as abstract as it is stable. A component should
be sufficiently abstract so that it can be extended without affecting its
stability.
Open-Closed
Release-Reuse
Equivalency
Stable Abstractions
Stable Dependencies
Depend on the direction of stability – If component A depends on
component B, then B should be more stable (e.g. less likely to change)
than A.
Component Interfaces
Provides
interface
•
•
•
•
component
Requires
interface
Requires interface defines the services that must be available for the
component to operate correctly
Provides interface defines the services that the component provides
For example, the Order component provides two interfaces: OrderEntry
and AccountPayable, and the Order component requires the Person
interface.
An interface is the definition of a collection of one or more methods, and
zero or more attributes, ideally one that defines a cohesive set of
behaviors
Component Interfaces
Provides
interface
DB
component
orderEntery.Customer
orderEntery.date
orderEntery.itemList
orderEntery.Create
orderEntery.Change
e.g
Button- up Design Method
Requires
interface
Example of eye glass componentized
Button- up Design Method
Doctor
Prescription
View
View
Staff
Enter
Enter
Appointment
Complete
Technician
Enter
Order
Reports
Invoice
Manager
View
Product
EF
Lenses
Example of eye glass componentized
Define Business Entities (fine-grained Business component)
Doctor
Enter
Appointment√
Complete
Enter
Invoice √
Prescription√
View
View
Staff
Enter
Order√
Technician
Reports√
Manager
View
Product√
EF
Lenses
Example of eye glass componentized
Define the most important interface
Example of eye glass componentized
Define the required interface (sequential composition)
Using the sequence diagram (as dynamic
view) for implementation of MakeAppt()
interface
Apontm
Page
<UI>
Staff
Apont
DB
Click
New Apt
(Pat ID)
Enter Date
Get Patent Info (Pat ID)
Return results
Add appointment (Pat ID, date)
Confirm
Main Flow
1. Staff click on the appointment page
2. Staff enter patient ID number
3. Staff enter the Appointment date
4. The system confirm the appointment
Using the sequence diagram (as static
view) for implementation of MakeAppt()
interface
Enter Date
Staff
Apontm
Page
<UI>
Apont
New Apt
Example of eye glass componentized
For more reusability, Define a coarse-grained Business Component
Example of eye glass componentized
Define dependency
Sketch the components and
interfaces corresponding to
the given services
Top- Down Method
Flight Booking
service
Hotel Promotional Service
Car Hire Promotional
Service
Software Systems
Requirements
• After you book a holiday, the company
shall provide the holidaymaker with
promotional services, which include Flight
Booking, hotel deals and car rent
promotional service at the destination and
for the duration of her/his stay
Answer: Flight Booking
Provides
Requires
Flight Information
Customer data
Flight Booking
Customer
Preference
Information
Promotional Hotel Booking
Service..
Provides
Requires
List of available
Hotels
Flight Information
Customer Preference
Information
Promotional
Hotel Booking
Service
You can even provide more
services..
Provides
Requires
List of available
Hotels
Flight Information
Customer Preference
Information
List of Budget
Hotel
Promotional
Hotel Booking
Service
List of Five stars
List of 4 stars
List of 3 stars
Car Hire Promotional Service
Provides
Requires
Flight Information
Customer Preference
Information
List of available
Car agents
Car Hire
Promotional
Service
List of cars deals
Gluing the Components
Provides
Requires
Provides
Requires
Customer
data
Flight
Booking
Flight Information
Customer
Preference
Information
Flight
Information
Customer
Preference
Information
Customer
Preference
Information
List of
cars
deals
Provides
Requires
Flight
Information
Car Hire
Promotional
Service
List of
available
Car agents
List of available
Hotels
List of Budget
Hotel
Promotional
Hotel
Booking
Service
List of Five star
List of B&B
List of 3 stars
Another way of simplified example of
binding holiday reservation system
Component Diagram (Adding Actors) - Example
Example
• Store's component inner structure composition.
Component Diagram Guidelines
• Use Descriptive Names for Components
– Use Environment-Specific Naming Conventions for Detailed Design
Components
– Apply Textual Stereotypes to Components Consistently
– Delay Modeling Data and User Interface Components
• • Interfaces
– Prefer Lollipop Notation To Indicate Realization of Interfaces By
Components
– Prefer the Left-Hand Side of A Component for Interface Lollipops
– Show Only Relevant Interfaces
• • Dependencies and Inheritance
– Model Dependencies From Left To Right
– Place Child Components Below Parent Components
– Components Should Only Depend on Interfaces (no direct calls between
components objects)
Basic Notation Used in Component Diagrams
• When drawing a component on a diagram, it is important that
you always include the component stereotype text (the word
"component" inside double angle brackets, as shown in Figure
below) and/or icon.
• The reason? In UML, a rectangle without any stereotype
classifier is interpreted as a class element.
Stereotypes
• <<UI>>:
• – A “front-end” of your system, such as the
collection of HTML pages and ASP/JSPs that
work with them for a browser-based system or
the collection of screens and controller classes
for a GUI-based system.
• <<database>>:
• – A hierarchical, relational, object-relational,
network, or object-oriented database.
• <<page>>:
• – HTML page.
Stereotypes
• <<executable>>:
• – A software component that can be executed
on a node.
• • <<file>>:
• – A data file.
• • <<infrastructure>>:
• – A technical component within your system
such as a service Security, Persistence or an
audit logger.
• • <<library>>:
• – An object or function library.
Stereotypes
• <<source code>> :
• – A source code file, such as a .java file or a
.cpp file.
• • <<table>>:
• – A data table within a database.
• • <<web service>>
• – One or more web services.
• • <<XML DTD>>
• – An XML DTD
Component Diagram - Example
Component Diagram Example in UML 2
Packages
• Packages Contain Multiple components and are
Associated and Linked to One Another
– Dependency Arrow is Dashed
– Indicates that One Package Depends on Another
What is a Deployment Diagram
• The deployment diagram shows how a system will be
physically deployed in the hardware environment.
• Its purpose is to show where the different important
components/packages of the system will physically run
and how they will communicate with each other.
• The notation in a deployment diagram includes the
notation elements used in a component diagram, with a
couple of additions, including the concept of a node.
– A node represents either a physical machine or a virtual machine
node (e.g., a mainframe node).
– To model a node, simply draw a three-dimensional cube with the
name of the node at the top of the cube.
Steps of modeling
• Identify nodes that represent system’s client and
server processors
• Highlight those devices that are essential to the
behavior E.g.: special devices (credit card
readers, badge readers, special display devices)
• Use stereotyping to visually distinguish
• Model Only Vital Software Components/
packages
• Indicate Communication Protocols Via
Stereotypes
• Model Only Critical Dependencies Between
Components
Example : Deployment Diagram
•
Users access the Reporting Tool by using a browser running on their local
machine and connecting via HTTP over their company's intranet to the
Reporting Tool.
This tool physically runs on the Application
Server named w3reporting.myco.com.
The diagram shows the Reporting Tool
component drawn inside of IBM
WebSphere,
•
•
The Reporting Tool connects to its reporting database using the Java language
to IBM DB2's JDBC interface, which then communicates to the actual DB2
database running on the server named db1.myco.com using native DB2
communication.
.
In addition to talking to the reporting
database, the Report Tool component
communicates via SOAP over HTTPS to
the Billboard Service
Communication Protocols Stereotypes
• • <<Asynchronous>>:
• – An asynchronous connection, perhaps via a
message bus or message queue.
• • <<HTTP>>:
• – HyperText Transport Protocol, an Internet
protocol.
• • <<JDBC>>:
• – Java Database Connectivity, a Java API for
database access.
• • <<ODBC>>:
• – Open Database Connectivity, a Microsoft API
for database access.
• • <<RMI>>:
• – Remote Method Invocation, a Java communication
protocol.
• • <<RPC>>:
• – Communication via remote procedure calls.
• • <<Synchronous>>:
• – A synchronous connect where the senders waits for a
response from the receiver.
• • <<web services>>:
• – Communication is via Web Services protocols such as
Simple Object Access Protocol (SOAP) and Universal
Description, Discovery, and Integration (UDDI) used for
building service registry centers
Network Diagrams
• Network diagrams are often drawn using software-based
drawing tools (figure below was drawn using Microsoft
Visio)
Example : Rational Rose
Component Tool
Example : Rational Rose
Deployment Tool
Assignment 2
5 mark- Use Smart Draw or Rational Rose or
Visio for your drawing
For the previous assignment
•Draw Structural chart (system, subsystem, component)
•Draw a component diagram
• 1user interface components (e.g. calculator, Calendar, currency
exchanger, etc)+
•At least three business components
•1 Database Component
•1security or persistence Components
•use stereotypes
• Draw the package diagram for that domain
• Draw deployment diagrams for this system (important component /
packages+ client +servers + web services + communication protocol
stereotype)
• Identify the reusable component (you might change their names)