[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 = \"aludsbw\" 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 = \"******\" d b P a s s w o r d : S t r i n g dbUri : String = \"mysql://mysqlServ/BDdsbw\" 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)

0 comments

Notes on slide 1

3 Favorites