Sie sind auf Seite 1von 26

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .

UserUser InterfaceInterface DesignDesign withwith UMLUML

FourthFourth WorkshopWorkshop OnOn UMLUML forfor EnterpriseEnterprise ApplicationsApplications ATC Enterprises, Inc.
FourthFourth WorkshopWorkshop OnOn UMLUML
forfor EnterpriseEnterprise ApplicationsApplications
ATC Enterprises, Inc.
7402 Borman Avenue
St. Paul, MN 55076
651.554.1771
www.atcenterprises.com
St. Paul, MN 55076 651.554.1771 www.atcenterprises.com UML Workshop 2003: User Interface Design with UML . .
St. Paul, MN 55076 651.554.1771 www.atcenterprises.com UML Workshop 2003: User Interface Design with UML . .
St. Paul, MN 55076 651.554.1771 www.atcenterprises.com UML Workshop 2003: User Interface Design with UML . .

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

ObjectivesObjectives

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Process overview and

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Tips for detailing use cases and how to handle user interface (UI) requirements

cases and how to handle user interface (UI) requirements Using UML collaborations for UI design •

Using UML collaborations for UI design

(UI) requirements Using UML collaborations for UI design • Identify UI elements • Identify their
(UI) requirements Using UML collaborations for UI design • Identify UI elements • Identify their

Identify UI elements

Identify their responsibilities

Identify their relationships

Using Rational Rose, RequisitePro, and SoDA

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

AdaptiveAdaptive TeamTeam CollaborativeCollaborative ProcessProcess SMSM (ATCP(ATCP TMTM ))

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. Extreme Programming (XP) Adaptive Software Development (ASD) Usage-Centered Design (UCD) Object-Oriented Analysis and Design (OOAD) Unified Modeling Language (UML) Rational Unified Process (RUP) Capability Maturity Model (CMM) UCD adopted ATCP Actor/Role UML notation – Oct 2002

.

.

.

.

.

.

.

.

.

.

.

.

Practical, agile, and iterative

Use case based and risk driven

• • • • • • • use26.htm
use26.htm

Customer-centric and adaptive

Applies practical UML guidance

Supports MDA through traceability strategy and tool usage

Based on Software Process Engineering Metamodel (SPEM)

Will be available open license/freeware

Leverages tool transparency for real-time measurement

http://www.foruse.com/newsletter/for

.

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

SampleSample ATCPATCP WorkflowWorkflow

. . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
UML Workshop 2003: User Interface Design with UML
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

. . . .
.
.
.
.

UserUser InterfaceInterface AnalysisAnalysis andand DesignDesign

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

ATCP recognizes user interface analysis and design as separate discipline

user interface analysis and design as separate discipline Follow very similar process pattern as in object-oriented

Follow very similar process pattern as in object-oriented analysis and design

However, do not focus on what happens “inside” system – just at the system boundary

Similar to steps 6-8 in Agile UCD process

Build the content model and navigation map using UML

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

ATCPATCP UserUser InterfaceInterface AndAnd MDAMDA

. . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Requirements
Use
Model
Cases
Fine-grained Fine-grained
traceability traceability
UI Analysis
Model
Platform Independent
Model (PIM)
UI UI Architecture Architecture / /
Transformation Transformation Rules Rules
UI Design
Model #1
(Platform A)
UI Design
Model #2
(Platform B)
Platform Specific Model
(PSM)

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

ATCPATCP UseUse CaseCase SpecificationSpecification

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

UML Workshop 2003: User Interface Design with UML

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

ATCPATCP UseUse CaseCase StepsSteps

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

! Actor-initiated step (user intention) " System response # Alternate condition $ Next step % Loop/iterate

# Alternate condition $ Next step % Loop/iterate UML Workshop 2003: User Interface Design with UML
# Alternate condition $ Next step % Loop/iterate UML Workshop 2003: User Interface Design with UML
# Alternate condition $ Next step % Loop/iterate UML Workshop 2003: User Interface Design with UML
# Alternate condition $ Next step % Loop/iterate UML Workshop 2003: User Interface Design with UML
# Alternate condition $ Next step % Loop/iterate UML Workshop 2003: User Interface Design with UML

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

UserUser InterfaceInterface AnalysisAnalysis

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Create user interface realization

Identify candidate UI elements

user interface realization Identify candidate UI elements • • • • Model role-boundary interaction Re-factor UI

Model role-boundary interaction

Re-factor UI responsibilities

Model UI navigation

Re-factor UI responsibilities Model UI navigation UML Workshop 2003: User Interface Design with UML . .
Re-factor UI responsibilities Model UI navigation UML Workshop 2003: User Interface Design with UML . .
Re-factor UI responsibilities Model UI navigation UML Workshop 2003: User Interface Design with UML . .
Re-factor UI responsibilities Model UI navigation UML Workshop 2003: User Interface Design with UML . .

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

ArchitectureArchitecture ProcessProcess PatternPattern

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Given the description of a set of related behaviors

Find candidate components

a set of related behaviors • Find candidate components • Describe their services • Describe how
a set of related behaviors • Find candidate components • Describe their services • Describe how

Describe their services

Describe how they interact

Group them into structures to support their interactions

such that their aggregate behavior constitutes the set of behaviors in question

This way of looking at software can be applied at all levels of abstraction and at all degrees of granularity; ATCP applies this viewpoint to derive one model from another

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

CreateCreate UserUser InterfaceInterface RealizationRealization

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Use UML collaboration to capture the behavior and structure of the user interface model

the behavior and structure of the user interface model use case Register for Event “realizes” Stereotype

use case Register for Event

of the user interface model use case Register for Event “realizes” Stereotype the collaboration as

“realizes”

Stereotype the collaboration as <<user interface realization>>

relationship

collaboration

Register for Event <<user interface realization>>

Connect to use case using realization relationship

Connect to use case using realization relationship UML Workshop 2003: User Interface Design with UML .

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

UIUI AnalysisAnalysis ModelModel StereotypesStereotypes

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

View

Form

List

Menu

. . . . . . • View • Form • List • Menu UML Workshop
. . . . . . • View • Form • List • Menu UML Workshop
. . . . . . • View • Form • List • Menu UML Workshop
. . . . . . • View • Form • List • Menu UML Workshop
. . . . . . • View • Form • List • Menu UML Workshop
. . . . . . • View • Form • List • Menu UML Workshop

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

ModelModel RoleRole--BoundaryBoundary InteractionInteraction

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Use UML collaboration diagram

System System Responsibilities Responsibilities
System System
Responsibilities Responsibilities
2: display event list( ) 4: display event info( ) 8: display confirmation( ) 1:
2: display event list( )
4: display event info( )
8: display confirmation( )
1: view event list( )
3: select event( )
5: register for event( )
6: enter attendee info( )
7: enter payment info( )
9: confirm registration( )
: Registrant
: Event Registration Form
User User Intentions Intentions
User User Intentions Intentions
: Event Registration Form User User Intentions Intentions . UML Workshop 2003: User Interface Design with
: Event Registration Form User User Intentions Intentions . UML Workshop 2003: User Interface Design with

.

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

AssignAssign UserUser InterfaceInterface ResponsibilitiesResponsibilities

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Use UML class diagram

Look messages that are going to objects

<<boundary>> Event Registration Form Registrant confirm registration() display confirmation() display
<<boundary>>
Event Registration Form
Registrant
confirm registration()
display confirmation()
display event info()
display event list()
enter attendee info()
enter payment info()
register for event()
select event()
view event list()

They become responsibilities of the destination object

Model as operations in a class icon

destination object Model as operations in a class icon • UML Workshop 2003: User Interface Design
destination object Model as operations in a class icon • UML Workshop 2003: User Interface Design
destination object Model as operations in a class icon • UML Workshop 2003: User Interface Design
destination object Model as operations in a class icon • UML Workshop 2003: User Interface Design
destination object Model as operations in a class icon • UML Workshop 2003: User Interface Design

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

ReRe--FactorFactor UserUser InterfaceInterface ResponsibilitiesResponsibilities

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

We followed a pretty simple guideline to get started

One boundary class per use case per actor

• • • One boundary class per use case per actor • Following this guidelines helps

Following this guidelines helps us focus on identifying responsibilities

Inspect them to see if they could be re-factored to a larger number of more fine-grained user interface elements

Support engineering principles

user interface elements Support engineering principles • Loosely coupled • Highly cohesive UML Workshop

Loosely coupled

Highly cohesive

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

ReRe--FactorFactor UserUser InterfaceInterface ResponsibilitiesResponsibilities

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

17: view( ) 1: view event list( ) : Registrant : Event Confirmation Message 4:
17: view( )
1: view event list( )
: Registrant
: Event Confirmation Message
4: sort by event by date( ) : Attendee View
5: select event( )
15: confirm registration( )
16: send( )
3: display event list( )
8: register for event( )
14: display confirmation( )
10: enter attendee info( )
11: enter payment info( )
12: submit registration( )
2: open( )
7: display event info( )
13: open( )
: Event List
9: open( )
6: open( )
: Event Confirmation Form
Six Six UI UI elements elements
instead instead of of one! one!
: Event Details
: Event Registration Form
Collaboration diagrams show patterns of interaction
• Shows relationships in addition to behavior
Easy to draw free hand
UML Workshop 2003: User Interface Design with UML
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved

ReRe--FactorFactor UserUser InterfaceInterface ResponsibilitiesResponsibilities

.

.

.

.

. . . .
.
.
.
.

.

.

.

. . . . . .
.
.
.
.
.
.

.

.

. . . . . .
.
.
.
.
.
.

.

.

. . . . . .
.
.
.
.
.
.

.

. . . . . .
.
.
.
.
.
.

.

.

. . . . . .
.
.
.
.
.
.

.

.

. . . . . .
.
.
.
.
.
.

.

.

: Registrant : Attendee : Event : Event : Registration : Confirmation : Confirmation View
: Registrant
: Attendee
: Event
: Event
: Registration
: Confirmation
: Confirmation
View
List
Details
Form
Form
Message
1: view event list( )
2: open( )
3: display event list( )
4: sort by event by
date( )
5: select event( )
6: open( )
7: display event info( )
8: register for event( )
9: open( )
10: enter attendee
info( )
11: enter payment
info( )
12: submit registration( )
13: open( )
14: display confirmation( )
15: confirm registration( )
16: send( )
17: view( )
Sequence diagrams can be easier to read
• Do not show relationships
UML Workshop 2003: User Interface Design with UML
.
.
.
.
• Not as easy to draw free hand
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Copyright  2001-2003 ATC Enterprises, Inc., All rights reserved

ModelModel UserUser InterfaceInterface NavigationNavigation

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

After creating several user interface realizations for a set of use cases

several user interface realizations for a set of use cases • Look for common responsibilities and

Look for common responsibilities and continue to re-factor

Use generalization and composition

Can create a navigation map that spans multiple use cases for overall flow

Use UML class diagram

cases for overall flow • Use UML class diagram • • UML Workshop 2003: User Interface
cases for overall flow • Use UML class diagram • • UML Workshop 2003: User Interface

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. . . .
.
.
.
.

ModelModel UserUser InterfaceInterface NavigationNavigation

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

<<boundary>> W W e e choose choose notto notto Attendee View <<boundary>> Event
<<boundary>>
W W e e choose choose notto notto
Attendee View
<<boundary>>
Event Confirmation Message
show any attributes
show any attributes
view event list()
atthistime atthistime
send()
view()
<<boundary>>
Event List
<<boundary>>
Event Confirmation Form
open()
display event list()
sort by event by date()
select event()
Registrant
open()
display confirmation()
confirm registration()
<<boundary>>
Event Details
<<boundary>>
Event Registration Form
open()
display event info()
register for event()
enter attendee info()
enter payment info()
submit registration()

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Use attributes to show which data elements to display .

.

.

.

.

.

.

. . . .
.
.
.
.

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Copyright 2001-2003 ATC Enterprises, Inc., All rights reserved

UserUser InterfaceInterface DesignDesign

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Platform-specific model

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Influenced by UI architecture, standards and conventions, and platform constraints

standards and conventions, and platform constraints • Many possible design models for one analysis model •

Many possible design models for one analysis model Apply similar technique as in analysis

Use collaborations!

Use new stereotypes for classes

Dependent on platform

<<web page>>, <<ASP>>, <<JSP>>, <<window>>

<<select>>, <<menu>>, <<tab>>, <<dialog>>, <<treeview>>

UML Workshop 2003: User Interface Design with UML

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.