Your SlideShare is downloading. ×
[DSBW Spring 2009] Unit 06: Conallen's Web Application Extension for UML (WAE2)
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. 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
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. Case Study: Micro Blog Example dsbw 2008/2009 2q 7
  • 8. Micro Blog Example (cont.) dsbw 2008/2009 2q 8
  • 9. Micro Blog Example: UX Model dsbw 2008/2009 2q 9
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. Wall v.2.1 dsbw 2008/2009 2q 14
  • 15. WAE Stereotypes To Represent Client-Side Processing dsbw 2008/2009 2q 15
  • 16. References  J. Conallen. Building Web Applications with UML. Second Edition. Addison-Wesley, 2003. dsbw 2008/2009 2q 16