[dsbw spring 2009] unit 06: conallen's web application extension for uml (wae2)

1dsbw 2008/2009 2q

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

2dsbw 2008/2009 2q

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.

3dsbw 2008/2009 2q

WAE Stereotypes Class Stereotypes:

Server Page

Client Page

Form

Frameset

Target

Script Library

Association Stereotypes: Link

Build

Submit

Redirect

Forward

Object

Include

Script

4dsbw 2008/2009 2q

Client Page

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.

Attributes: variables of the page scripts

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

5dsbw 2008/2009 2q

Server Page

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

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.

6dsbw 2008/2009 2q

Form

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.

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

Operations: none

7dsbw 2008/2009 2q

Case Study: Micro Blog Example

8dsbw 2008/2009 2q

Micro Blog Example (cont.)

9dsbw 2008/2009 2q

Micro Blog Example: UX Model

<<screen>>

Micro Blog

sortByAuthor()sortByTitle()sortByDate()newPost()

<<screen>>

Micro Blog Update

insertNewPost()

titleauthortextdate

Post

Insert New Post

<<input form>>

New Post Form

title : textauthor : textpassword : passwordtext : textarea

New Post

Sort By *

*

10dsbw 2008/2009 2q

<<server page>>

Updater

dbUser : String = "aludsbw"dbPassword : String = "******"dbUri : String = "mysql://mysqlServ/BDdsbw"

blog_update.html

<<client page>><<client page>>

blogger.html

Blogger

<<server page>>

dbUser : StringdbPassword : StringdbUri : String

<<form>>

newPostForm


<<link>>

<<forward>> <<submit>>

<<builds>>

Main WAE Stereotypes: Micro Blog Example

UX Model

Internal Design

<<screen>>

Micro Blog

sortByAuthor()sortByTitle()sortByDate()newPost()

<<screen>>

Micro Blog Update

insertNewPost()

titleauthortextdate

Post

Insert New Post

<<input form>>

New Post Form


New Post

Sort By *

*

11dsbw 2008/2009 2q

WAE Association Stereotypes

the included page gets processed, if dynamic, and its contents are incorporated in the container page.

<<Client Page>> <<Server Page><<Server Page>><<include>>

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

Abstraction of <object> o <applet>ActiveX, Applet Class<<Client Page>><<object>>

Delegation of processing a client's request for a resource to another server-side page

<<Client Page>> <<Server Page><<Server Page>><<forward>>

Makes the browser request the target resource

<<Client Page>> <<Server Page>

<<Client Page>> <<Server Page>><<redirect>>

Form data submission<<Server Page>><<Form>><<submit>>

Identifies the HTML output of a server page's execution.<<Client Page>><<Server Page>><<build>>

Abstraction of <a href= ...>

Tagged value: parameters

<<Client Page>> <<Server Page>

UX Model <<Screen>>

<<Client Page>><<link>>

DescriptionTargetSourceAssociation Stereotype

12dsbw 2008/2009 2q

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>

<<server page>>

Blogger

dbUser : StringdbPassword : StringdbUri : String

<<client page>>

blogger.html

<<link>>

<<builds>>

<<link parameter>>

SortParameter

order = "date"

{order = title}

<<link>>

{parameters="order=author"}

<<link>>

13dsbw 2008/2009 2q

Internal Design Sequence Diagram: Micro Blog Example

<<client page>>

:blog_update.html<<form>>

:newPostForm

<<client page>>

:blogger.html

<<client page>>

:blogger.html

<<server page>>

:Updater<<server page>>

: Blogger : User

/submit/

/navigate/

/navigate/

insertIntoDB()

/build/

queryDB()

queryDB()

/build/

/navigate/

/link/

/fill form/

14dsbw 2008/2009 2q

Wall v.2.1

<<form>>

deleteForm

messID : hidden = $messIDpassword : passwordaction : submit = "delete"

<<form>>

insertForm

content : textareaaction : submit = "new post"

wall_register.html

<<client page>>

captcha : image

<<form>>

registerForm

user : textpassword : passwordcaptchaText : textaction : submit = "register"

<<form>>

logoutForm

action : submit = "logout"

<<client page>>

wall.html

Session

user : String [0..1]userID : IntegervotedMessages : String [0..*]

<<form>>

loginForm

user : textpassword : passwordaction : submit = "login"

<<server page>>

Updater

<<server page>>

browser.vm

<<server page>>

Browser

<<client page>>

wall_error.html

<<server page>>

error.vm

Message

messID : Stringusername : Stringcontent : Stringdate : Datevotes : Integer

<<forward>>

<<forward>>

<<redirect>>

{voteFor= $messID}<<link>>

0..*

<<forward parameter>>

errors

errorMess : String [1..*]

<<use>>

<<submit>>

0..1

{errorMess:String [1..*]}

<<forward>>

0..1<<submit>>

<<submit>>

<<forward parameter>>

messages

<<use>>

0..1

<<submit>>

<<submit>>

<<link>><<builds>>

<<builds>>

*

0..*

15dsbw 2008/2009 2q

WAE Stereotypes To Represent Client-Side Processing

16dsbw 2008/2009 2q

References

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

[dsbw spring 2009] unit 06: conallen's web application extension for uml (wae2)

Technology

internal design model

web application extension

web pages

tagged values

html form

micro blog

string quot

model