Unit 06: The Web Application Extension for UML
-
Upload
dsbw-20112002-carles-farre-barcelona-tech -
Category
Technology
-
view
3.026 -
download
3
description
Transcript of 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
<<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>>
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