Unit 06: The Web Application Extension for UML

1 dsbw 2011/2012 q1

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

Unit 6: The Web Application Extension for UML

2 dsbw 2011/2012 q1

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.

UML Mechanisms To Extend UML

3 dsbw 2011/2012 q1

WAE Stereotypes

Class Stereotypes:

Server Page

Client Page

Form

Frameset

Target

Script Library

Association Stereotypes:

Link

Build

Submit

Redirect

Forward

Object

Include

Script

4 dsbw 2011/2012 q1

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

5 dsbw 2011/2012 q1

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.

6 dsbw 2011/2012 q1

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

7 dsbw 2011/2012 q1

Case Study: Micro Blog Example

8 dsbw 2011/2012 q1

Micro Blog Example (cont.)

9 dsbw 2011/2012 q1

Micro Blog Example: UX Model

10 dsbw 2011/2012 q1

Main WAE Stereotypes: Micro Blog Example

UX Model

Internal

Design

11 dsbw 2011/2012 q1

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


<<Server Page>> <<forward>>

Makes the browser request the target resource


<<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


UX Model <<Screen>>

<<Client Page>> <<link>>

Description Target Source Association Stereotype

12 dsbw 2011/2012 q1

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>

13 dsbw 2011/2012 q1

Link Parameters (cont.)

14 dsbw 2011/2012 q1

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/

/link/

/forward/

insertIntoDB()

/build/

queryDB()

queryDB()

/build/

/navigate/

/follow link/

/fill form/

15 dsbw 2011/2012 q1

WAE Stereotypes To Represent Client-Side Processing

16 dsbw 2011/2012 q1

Case Study: Lab’s WoT (Main Page)

No AJAX!

17 dsbw 2011/2012 q1

Lab’s WoT: Logged User Page

18 dsbw 2011/2012 q1

Lab’s Wall: Registration Page

19 dsbw 2011/2012 q1

Lab’s Wall: Error Page

20 dsbw 2011/2012 q1

Lab’s WoT: UX Model

21 dsbw 2011/2012 q1

Lab’s WoT: Internal Design with WAE (Lab 3.1 reengineered. Velocity templates as Server Pages)

22 dsbw 2011/2012 q1

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

References

Unit 06: The Web Application Extension for UML

Technology

Transcript of Unit 06: The Web Application Extension for UML