Web Application Design Using UML

1
Web Application Design Using UML

• How to model ASP applications with the Unified
  Modeling Language
• jim conallen, Rational Software Corporation

2
Who are you?

• Architects
• Learn how to express all the business logic of a
  system even if some of it is implemented in web
  specific components.
• Designers
• Learn how to express detailed web application
  designs with UML notation.
• Implementers
• Learn how to map these UML models into ASP code.
• Analyst and Project Managers
• Have time to fetch the rest of us coffee and
  snacks during the presentation.

3
Assumptions

• Familiar with object oriented principles.
• Familiar with the Unified Modeling Language (UML)
• Understand the architecture of page based web
  applications (ASP, JSP, CF, etc.)

4
Why were here.

• Web applications are becoming more complex and
  mission critical.
• Modeling helps us manage complexity.
• We are using (or considering the use of) UML to
  model are existing systems.
• It is cheaper to extend and modify an existing
  site than re-create it.

5
Web Applications

• A web application is a web site where user input
  (navigation through the site and data input)
  effects the state of the business.
• This definition defines the focus for our
  modeling efforts.
• Sophisticated user interfaces can be represented
  by their own and separate models. This allows
  the presentation and business logic to evolve at
  their own separate paces.

6
Modeling

• Models are abstractions that simplify our
  understanding of systems.
• The choice of what to model has an enormous
  effect on the understanding of the problem and
  the shape of the solution.
• There are many different types of models that can
  be used to express a software system (Use Case,
  Deployment, Implementation, Security, User
  Interface, etc.)
• One model unique to web systems is the site map.

7
Modeling Goals

• Make the system easier to understand.
• Express the appropriate level of abstraction and
  detail suitable to the users of the model (for
  the design model this means the architects,
  designers, and implementers).
• Have a single model and notation express the
  entirety of the business logic of a web
  application.

8
What to Model

• Web pages
• Hyperlinks
• Page scripts (JavaScript and VBScript)
• Relationships between pages and other components
  of the system.
• Applets, ActiveX controls, plug-ins, etc.

9
What Not To Model

• Internals of the web server or browser. If the
  designers dont design it, or the implementers
  implement it doesnt need to be modeled. The
  Analysis and Design Models need to remain focused
  on the expression of the business logic in the
  system.
• Presentation constructs (fly over hints, animated
  buttons, etc.). These belong in a separate UI
  model (which may or may not be expressed with
  UML).

10
A First Attempt

• Hyperlinks map to associations well.
• Scripted pages can map to classes.
• Filename is the class name.
• VBScript functions and subs in the page are class
  operations.
• Where do client side scripts get modeled?
• Relationships to this class are with
• Server side resources (databases, TPMs, middle
  tier components, etc.).
• Client side resources (Applets, ActiveX controls,
  DOM, etc.)

11
UML Falls Short, But Comes Back

• UML, out of the box, does not have the
  appropriate semantics to represent scripted web
  pages at the level of abstraction appropriate to
  web application designers.
• UML can be extended to allow us to add new
  semantics to the notation.
• Stereotypes allow us to define new semantics to
  specific modeling elements
• Tagged Values allow us to tag additional
  information to modeling elements.
• Constraints define rules for working with
  stereotyped elements.

12
The Web Application Extension for UML

• A set of stereotypes, tagged values and
  constraints that allow us to model the design of
  page based web applications.
• Principal class stereotypes
• ltltServer Pagegtgt The logical abstraction of a web
  page as it is recognized by the server. Server
  pages contain scripts or executable code that
  runs on the server.
• ltltClient Pagegtgt The logical abstraction of a web
  page as seen by the client. Client pages are
  formatted with HTML and contain scripts that run
  on the client (JavaScript).
• ltltFormgtgt The representation of an HTML form. Its
  attributes are the forms elements (ltinputgt,
  lttextareagt, ltselectgt ).

13
Stereotyped Associations

• ltltbuildgtgt A relationship between a client page
  and the server page that builds it.
• ltltlinkgtgt A hyperlink relationship from a client
  page to another page in the system.
• ltltsubmitgtgt A relationship between a form and the
  server page that processes it.

14
Stereotype Icons
15
Component Stereotypes

• Components map one to one to web pages in the
  system.
• ltltHTML Pagegtgt A static web page in the system.
  This page is not dynamically prepared by the
  server, but may contain a form field.
• ltltASP Pagegtgt A dynamic web page that contains
  scripts interpreted by the ASP engine.

16
Components Realize Classes

• HTML pages realize only client pages, and forms.
• ASP pages realize server pages, client pages and
  forms.

17
Glossary Application Example

• Glossary is a simple ASP based web application
  that acts as a simple software project glossary.
• Use Case Model

18
Browse Glossary Sequence Diagram
19
Analysis Objects Map to Design Objects

• Boundary objects tend to evolve into client pages
• Controller objects tend to evolve into server
  pages
• Entity objects become middle tier components

20
Overview Class Diagrams
21
Detail Class Diagram
22
Client Events

• Tagged values on ltltclient pagesgtgt are used to
  define event handlers.

23
Server Page Implementation
lt _at_Language"VBScript" gt Dim SearchChar
'(String) Dim nl '(String ' Sub GetEntries '
Description ' Uses the Glossary server API to
find ' all entries find all entries ... Sub
GetEntries Dim entries ' as variant Dim id '
as long Dim word ' as string Dim description
' as string Dim bgColor ' as color
Response.Write( "lttable width""80""gt")
Response.Write( " lttrgt" ) ...
24
Client Page Implementation
lthtmlgt ltscript language"JavaScript"gtlt!-- var
itemCount // (integer) no. items in the cart var
subTotal // (currency) sub total of the
items var tax // (currency) taxes for items in
the cart var total // (currency) total cost for
the items var taxRate // (currency) The tax rate
to be applied //////////////////////////////////
/////////////////// // Function
recalculateTotals // Description // Recompute
the totals, based on the current qty // values
for the items in the cart. function
recalculateTotals() //TODO insert your code
here ltbody onLoad"bodyOnLoad()"gt ...
25
Form Implementation
ltform name"SearchForm" method"POST"
action"ProcessSearch.asp"gt ltinput name"Word"
type"text" size"30"gt ltinput
name"Description" type"text" size"30"gt
ltinput name"Search" type"submit"
value"Search"gt lt/formgt
26
An Example

• Rational Rose 98i
• Manages the UML Model
• Scripts create components in the model from the
  logical classes.
• Scripts can forward engineer ASP pages.
• Visual Interdev 6
• Establishes the ASP Framework
• ASP Page Editor
• Deployment Tool

27
Conclusions

• Web pages are architecturally significant
  elements that belong in the Design Model.
• UML can be extended to model web specific
  components like pages, hyperlinks, client scripts
  and forms at the level of abstraction and detail
  suitable for web application designers and
  architects.