[DSBW Spring 2009] Unit 06: Conallen's Web Application Extension for UML (WAE2)

Unit 6: The Web Application Extension for UML
 Web pages should be modeled as first-class elements in the
internal design model and represented alongside the classes and
components that make up the rest of the Web presentation layer.
 However, the default building blocks of UML are not sufficient to
express the necessary subtleties of Web pages as objects:
 Web pages may have scripts to be executed on the server, which
interact with server-side resources before being sent to the browser as
a completed Web page.
 Web pages may have scripts that execute on the browser as well.
 When processed by the server, the Web page does one thing; when
processed by the browser, it does a completely different thing.
 The Web Application Extension (WAE) to UML enables us to
represent Web pages and other architecturally significant
elements in the internal design model of the Web presentation
layer

dsbw 2008/2009 2q 1

UML Mechanisms To Extend UML
 In general, any extension to UML is expressed in terms of
stereotypes, tagged values, and/or constraints.
 Combined, these mechanisms extend the notation of UML, enabling
creating new types of building blocks to be used in the model.
 Stereotype: is an extension to the vocabulary of the language that
allows to attach a new semantic meaning to a UML model element
(a class, an association, etc).
 Tagged value: is the definition of a new property that can be
associated with a model element.
 UML Classes, for instance, have names, visibility, persistence, and
other properties associated with them.
 Constraint: specifies the conditions under which the model can be
considered well formed.

dsbw 2008/2009 2q 2

WAE Stereotypes
 Class Stereotypes:  Association Stereotypes:
Server Page Link
 

Client Page Build
 

Form Submit
 

Frameset Redirect
 

Target Forward
 

Script Library Object
 

Include


Script


dsbw 2008/2009 2q 3

Client Page

Attributes: variables of
the page scripts

Operations: functions defined by the page
scripts. They are private, they will never called
from outside

 A client page instance is an HTML-formatted Web page with a mix
of data, presentation, and even logic.
 Constraints: none
 Tagged values:
 TitleTag, the title of the page as displayed by the browser.
 BaseTag, the base URL for dereferencing relative URLs.
 BodyTag, the set of attributes for the <body> tag, which sets
background and default text attributes.
dsbw 2008/2009 2q 4

Server Page

Attributes: global
variables accessible by
all the operations
Operations: functions that interact with databases, business
components, etc. and/or build dynamic content. These
operations are private: they will never be called from outside.

 A server page represents a dynamic Web page that contains
content assembled on the server each time it is requested. Later it
can be implemented as a Servlet, JSP, ASP, or PHP page
 Constraints: Server pages can have only “normal” relationships with
objects on the server
 Tagged values: none

dsbw 2008/2009 2q 5

Form

Attributes: represent the
HTML form's input fields:
input boxes, text areas,
radio buttons, check Operations: none
boxes, hidden fields, etc.

 A form instance represents a HTML form in a client page.

 Constraints: none.

 Tagged values:
 Either GET or POST: the method used to submit data to the action
URL.

dsbw 2008/2009 2q 6

Case Study: Micro Blog Example

dsbw 2008/2009 2q 7

Micro Blog Example (cont.)

dsbw 2008/2009 2q 8

Micro Blog Example: UX Model

dsbw 2008/2009 2q 9

Main WAE Stereotypes: Micro Blog Example

UX Model

Internal <<client page>>
< < c l i e n t p a g e > > < < f o r m > >

Design blogger.html blog_update.html newPostForm
< < l i n k > >

title : text
author : text
password : password
text : textarea
< < b u i l d s > >

<<server page>> <<server page>>

Updater
B l o g g e r

dbUser : String = quot;aludsbwquot;
d b U s e r : S t r i n g

< < f o r w a r d > > < < s u b m i t > >

dbPassword : String = quot;******quot;
d b P a s s w o r d : S t r i n g

dbUri : String = quot;mysql://mysqlServ/BDdsbwquot;
d b U r i : S t r i n g

dsbw 2008/2009 2q 10

WAE Association Stereotypes
Association
Source Target Description
Stereotype
<<Client Page>>
<<Server Page> Abstraction of <a href= ...>
<<link>> <<Client Page>>
UX Model Tagged value: parameters
<<Screen>>
Identifies the HTML output of a server
<<build>> <<Server Page>> <<Client Page>>
page's execution.
<<submit>> <<Form>> <<Server Page>> Form data submission
<<Client Page>> <<Client Page>> Makes the browser request the target
<<redirect>> <<Server Page>> <<Server Page> resource
Delegation of processing a client's
<<Client Page>>
<<forward>> request for a resource to another server-
<<Server Page>>
<<Server Page>
side page
the included page gets processed, if
<<Client Page>>
<<include>> dynamic, and its contents are
<<Server Page>>
<<Server Page>
incorporated in the container page.
ActiveX, Applet
<<object>> <<Client Page>> Abstraction of <object> o <applet>
Class

<<script>> <<Client Page>> <<Script Library> Script Library import

dsbw 2008/2009 2q 11

Link Parameters

Sort posts by <a
href=blogger?order=author>author</a>, <a
href=blogger?order=title>title</a> or <a
href=blogger?order=date>date</a>

dsbw 2008/2009 2q 12

Internal Design Sequence Diagram: Micro Blog Example
: User <<server page>> <<client page>> <<form>> <<server page>>
:newPostForm
: Blogger :Updater
:blog_update.html

/navigate/
queryDB()

/build/ <<client page>>
:blogger.html

/link/
/navigate/

/fill form/
/submit/
insertIntoDB()

/navigate/
queryDB()

<<client page>>
/build/
:blogger.html

dsbw 2008/2009 2q 13

Wall v.2.1

dsbw 2008/2009 2q 14

WAE Stereotypes To Represent Client-Side Processing

dsbw 2008/2009 2q 15

References
 J. Conallen. Building Web Applications with UML. Second Edition.
Addison-Wesley, 2003.

dsbw 2008/2009 2q 16

[DSBW Spring 2009] Unit 06: Conallen's Web Application Extension for UML (WAE2)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to [DSBW Spring 2009] Unit 06: Conallen's Web Application Extension for UML (WAE2)

Similar to [DSBW Spring 2009] Unit 06: Conallen's Web Application Extension for UML (WAE2) (20)

More from Carles Farré

More from Carles Farré (15)

Recently uploaded

Recently uploaded (20)

[DSBW Spring 2009] Unit 06: Conallen's Web Application Extension for UML (WAE2)