SlideShare a Scribd company logo
1 of 16
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 = 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
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

More Related Content

What's hot

Learning to run
Learning to runLearning to run
Learning to rundominion
 
Learning To Run - XPages for Lotus Notes Client Developers
Learning To Run - XPages for Lotus Notes Client DevelopersLearning To Run - XPages for Lotus Notes Client Developers
Learning To Run - XPages for Lotus Notes Client DevelopersKathy Brown
 
Serious Sencha - Using Sencha ExtJS/Touch for Enterprise Applications
Serious Sencha - Using Sencha ExtJS/Touch for Enterprise ApplicationsSerious Sencha - Using Sencha ExtJS/Touch for Enterprise Applications
Serious Sencha - Using Sencha ExtJS/Touch for Enterprise ApplicationsKlaus Hofeditz
 
HTL(Sightly) - All you need to know
HTL(Sightly) - All you need to knowHTL(Sightly) - All you need to know
HTL(Sightly) - All you need to knowPrabhdeep Singh
 
Introduction To Dot Net Siddhesh
Introduction To Dot Net SiddheshIntroduction To Dot Net Siddhesh
Introduction To Dot Net SiddheshSiddhesh Bhobe
 
Web components
Web componentsWeb components
Web componentsNoam Kfir
 
Web programming and development - Introduction
Web programming and development - IntroductionWeb programming and development - Introduction
Web programming and development - IntroductionJoel Briza
 
Things I wish web graduates knew
Things I wish web graduates knewThings I wish web graduates knew
Things I wish web graduates knewLorna Mitchell
 
Orbitz and Spring Webflow Case Study
Orbitz and Spring Webflow Case StudyOrbitz and Spring Webflow Case Study
Orbitz and Spring Webflow Case StudyMark Meeker
 
WebLogic Developer Webcast 1: JPA 2.0
WebLogic Developer Webcast 1: JPA 2.0WebLogic Developer Webcast 1: JPA 2.0
WebLogic Developer Webcast 1: JPA 2.0Jeffrey West
 
JSF Component Behaviors
JSF Component BehaviorsJSF Component Behaviors
JSF Component BehaviorsAndy Schwartz
 
AD301: Introducing the Composite Application Container Framework - Lotusphere...
AD301: Introducing the Composite Application Container Framework - Lotusphere...AD301: Introducing the Composite Application Container Framework - Lotusphere...
AD301: Introducing the Composite Application Container Framework - Lotusphere...Brian O'Gorman
 
Session 35 - Design Patterns
Session 35 - Design PatternsSession 35 - Design Patterns
Session 35 - Design PatternsPawanMM
 
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008Association Paris-Web
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresherIvano Malavolta
 
Session 36 - JSP - Part 1
Session 36 - JSP - Part 1Session 36 - JSP - Part 1
Session 36 - JSP - Part 1PawanMM
 

What's hot (20)

Learning to run
Learning to runLearning to run
Learning to run
 
Learning To Run - XPages for Lotus Notes Client Developers
Learning To Run - XPages for Lotus Notes Client DevelopersLearning To Run - XPages for Lotus Notes Client Developers
Learning To Run - XPages for Lotus Notes Client Developers
 
Serious Sencha - Using Sencha ExtJS/Touch for Enterprise Applications
Serious Sencha - Using Sencha ExtJS/Touch for Enterprise ApplicationsSerious Sencha - Using Sencha ExtJS/Touch for Enterprise Applications
Serious Sencha - Using Sencha ExtJS/Touch for Enterprise Applications
 
HTL(Sightly) - All you need to know
HTL(Sightly) - All you need to knowHTL(Sightly) - All you need to know
HTL(Sightly) - All you need to know
 
Introduction To Dot Net Siddhesh
Introduction To Dot Net SiddheshIntroduction To Dot Net Siddhesh
Introduction To Dot Net Siddhesh
 
HTML literals, the JSX of the platform
HTML literals, the JSX of the platformHTML literals, the JSX of the platform
HTML literals, the JSX of the platform
 
Web components
Web componentsWeb components
Web components
 
Web programming and development - Introduction
Web programming and development - IntroductionWeb programming and development - Introduction
Web programming and development - Introduction
 
Things I wish web graduates knew
Things I wish web graduates knewThings I wish web graduates knew
Things I wish web graduates knew
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
 
Orbitz and Spring Webflow Case Study
Orbitz and Spring Webflow Case StudyOrbitz and Spring Webflow Case Study
Orbitz and Spring Webflow Case Study
 
WebLogic Developer Webcast 1: JPA 2.0
WebLogic Developer Webcast 1: JPA 2.0WebLogic Developer Webcast 1: JPA 2.0
WebLogic Developer Webcast 1: JPA 2.0
 
JSF Component Behaviors
JSF Component BehaviorsJSF Component Behaviors
JSF Component Behaviors
 
AngularJS By Vipin
AngularJS By VipinAngularJS By Vipin
AngularJS By Vipin
 
Introduction to Web Services
Introduction to Web ServicesIntroduction to Web Services
Introduction to Web Services
 
AD301: Introducing the Composite Application Container Framework - Lotusphere...
AD301: Introducing the Composite Application Container Framework - Lotusphere...AD301: Introducing the Composite Application Container Framework - Lotusphere...
AD301: Introducing the Composite Application Container Framework - Lotusphere...
 
Session 35 - Design Patterns
Session 35 - Design PatternsSession 35 - Design Patterns
Session 35 - Design Patterns
 
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
IE 8 et les standards du Web - Chris Wilson - Paris Web 2008
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
 
Session 36 - JSP - Part 1
Session 36 - JSP - Part 1Session 36 - JSP - Part 1
Session 36 - JSP - Part 1
 

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

[DSBW Spring 2009] Unit 04: From Requirements to the UX Model
[DSBW Spring 2009] Unit 04: From Requirements to the UX Model[DSBW Spring 2009] Unit 04: From Requirements to the UX Model
[DSBW Spring 2009] Unit 04: From Requirements to the UX ModelCarles Farré
 
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith
 
Using HTML5 and CSS3 today
Using HTML5 and CSS3 todayUsing HTML5 and CSS3 today
Using HTML5 and CSS3 todaythebeebs
 
Module 2 Lesson 1
Module 2 Lesson 1Module 2 Lesson 1
Module 2 Lesson 1claytors
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2fishwarter
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2fishwarter
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2fishwarter
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2fishwarter
 
Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Matthew Mobbs
 
OSDC 2009 Rails Turtorial
OSDC 2009 Rails TurtorialOSDC 2009 Rails Turtorial
OSDC 2009 Rails TurtorialYi-Ting Cheng
 
Lecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPLecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPyucefmerhi
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaverchowders
 
Hacking Movable Type Training - Day 2
Hacking Movable Type Training - Day 2Hacking Movable Type Training - Day 2
Hacking Movable Type Training - Day 2Byrne Reese
 
Decorating code (Research Paper)
Decorating code (Research Paper)Decorating code (Research Paper)
Decorating code (Research Paper)Jenna Pederson
 
Semantics & the Mobile Web
Semantics & the Mobile WebSemantics & the Mobile Web
Semantics & the Mobile Websurferroop
 

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

[DSBW Spring 2009] Unit 04: From Requirements to the UX Model
[DSBW Spring 2009] Unit 04: From Requirements to the UX Model[DSBW Spring 2009] Unit 04: From Requirements to the UX Model
[DSBW Spring 2009] Unit 04: From Requirements to the UX Model
 
Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
 
Using HTML5 and CSS3 today
Using HTML5 and CSS3 todayUsing HTML5 and CSS3 today
Using HTML5 and CSS3 today
 
Module 2 Lesson 1
Module 2 Lesson 1Module 2 Lesson 1
Module 2 Lesson 1
 
EPiServer Web Parts
EPiServer Web PartsEPiServer Web Parts
EPiServer Web Parts
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
 
HTML 5
HTML 5HTML 5
HTML 5
 
Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010Web design 2 - Basic HTML 2010
Web design 2 - Basic HTML 2010
 
HTML5
HTML5HTML5
HTML5
 
OSDC 2009 Rails Turtorial
OSDC 2009 Rails TurtorialOSDC 2009 Rails Turtorial
OSDC 2009 Rails Turtorial
 
HTML5 Fundamentals
HTML5 FundamentalsHTML5 Fundamentals
HTML5 Fundamentals
 
Lecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPLecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITP
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Hacking Movable Type Training - Day 2
Hacking Movable Type Training - Day 2Hacking Movable Type Training - Day 2
Hacking Movable Type Training - Day 2
 
Decorating code (Research Paper)
Decorating code (Research Paper)Decorating code (Research Paper)
Decorating code (Research Paper)
 
Semantics & the Mobile Web
Semantics & the Mobile WebSemantics & the Mobile Web
Semantics & the Mobile Web
 
Class2
Class2Class2
Class2
 

More from Carles Farré

Aplicacions i serveis web (ASW)
Aplicacions i serveis web (ASW)Aplicacions i serveis web (ASW)
Aplicacions i serveis web (ASW)Carles Farré
 
DSBW Final Exam (Spring Sementer 2010)
DSBW Final Exam (Spring Sementer 2010)DSBW Final Exam (Spring Sementer 2010)
DSBW Final Exam (Spring Sementer 2010)Carles Farré
 
Web Usability (Slideshare Version)
Web Usability (Slideshare Version)Web Usability (Slideshare Version)
Web Usability (Slideshare Version)Carles Farré
 
[DSBW Spring 2010] Unit 10: XML and Web And beyond
[DSBW Spring 2010] Unit 10: XML and Web And beyond[DSBW Spring 2010] Unit 10: XML and Web And beyond
[DSBW Spring 2010] Unit 10: XML and Web And beyondCarles Farré
 
[DSBW Spring 2009] Unit 09: Web Testing
[DSBW Spring 2009] Unit 09: Web Testing[DSBW Spring 2009] Unit 09: Web Testing
[DSBW Spring 2009] Unit 09: Web TestingCarles Farré
 
[DSBW Spring 2009] Unit 08: WebApp Security
[DSBW Spring 2009] Unit 08: WebApp Security[DSBW Spring 2009] Unit 08: WebApp Security
[DSBW Spring 2009] Unit 08: WebApp SecurityCarles Farré
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)Carles Farré
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (2/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (2/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (2/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (2/3)Carles Farré
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (1/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (1/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (1/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (1/3)Carles Farré
 
[DSBW Spring 2009] Unit 05: Web Architectures
[DSBW Spring 2009] Unit 05: Web Architectures[DSBW Spring 2009] Unit 05: Web Architectures
[DSBW Spring 2009] Unit 05: Web ArchitecturesCarles Farré
 
[DSBW Spring 2009] Unit 03: WebEng Process Models
[DSBW Spring 2009] Unit 03: WebEng Process Models[DSBW Spring 2009] Unit 03: WebEng Process Models
[DSBW Spring 2009] Unit 03: WebEng Process ModelsCarles Farré
 
[DSBW Spring 2009] Unit 02: Web Technologies (1/2)
[DSBW Spring 2009] Unit 02: Web Technologies (1/2)[DSBW Spring 2009] Unit 02: Web Technologies (1/2)
[DSBW Spring 2009] Unit 02: Web Technologies (1/2)Carles Farré
 
[DSBW Spring 2009] Unit 01: Introducing Web Engineering
[DSBW Spring 2009] Unit 01: Introducing Web Engineering[DSBW Spring 2009] Unit 01: Introducing Web Engineering
[DSBW Spring 2009] Unit 01: Introducing Web EngineeringCarles Farré
 
[ABDO] Data Integration
[ABDO] Data Integration[ABDO] Data Integration
[ABDO] Data IntegrationCarles Farré
 
[ABDO] Logic As A Database Language
[ABDO] Logic As A Database Language[ABDO] Logic As A Database Language
[ABDO] Logic As A Database LanguageCarles Farré
 

More from Carles Farré (15)

Aplicacions i serveis web (ASW)
Aplicacions i serveis web (ASW)Aplicacions i serveis web (ASW)
Aplicacions i serveis web (ASW)
 
DSBW Final Exam (Spring Sementer 2010)
DSBW Final Exam (Spring Sementer 2010)DSBW Final Exam (Spring Sementer 2010)
DSBW Final Exam (Spring Sementer 2010)
 
Web Usability (Slideshare Version)
Web Usability (Slideshare Version)Web Usability (Slideshare Version)
Web Usability (Slideshare Version)
 
[DSBW Spring 2010] Unit 10: XML and Web And beyond
[DSBW Spring 2010] Unit 10: XML and Web And beyond[DSBW Spring 2010] Unit 10: XML and Web And beyond
[DSBW Spring 2010] Unit 10: XML and Web And beyond
 
[DSBW Spring 2009] Unit 09: Web Testing
[DSBW Spring 2009] Unit 09: Web Testing[DSBW Spring 2009] Unit 09: Web Testing
[DSBW Spring 2009] Unit 09: Web Testing
 
[DSBW Spring 2009] Unit 08: WebApp Security
[DSBW Spring 2009] Unit 08: WebApp Security[DSBW Spring 2009] Unit 08: WebApp Security
[DSBW Spring 2009] Unit 08: WebApp Security
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (3/3)
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (2/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (2/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (2/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (2/3)
 
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (1/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (1/3)[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (1/3)
[DSBW Spring 2009] Unit 07: WebApp Design Patterns & Frameworks (1/3)
 
[DSBW Spring 2009] Unit 05: Web Architectures
[DSBW Spring 2009] Unit 05: Web Architectures[DSBW Spring 2009] Unit 05: Web Architectures
[DSBW Spring 2009] Unit 05: Web Architectures
 
[DSBW Spring 2009] Unit 03: WebEng Process Models
[DSBW Spring 2009] Unit 03: WebEng Process Models[DSBW Spring 2009] Unit 03: WebEng Process Models
[DSBW Spring 2009] Unit 03: WebEng Process Models
 
[DSBW Spring 2009] Unit 02: Web Technologies (1/2)
[DSBW Spring 2009] Unit 02: Web Technologies (1/2)[DSBW Spring 2009] Unit 02: Web Technologies (1/2)
[DSBW Spring 2009] Unit 02: Web Technologies (1/2)
 
[DSBW Spring 2009] Unit 01: Introducing Web Engineering
[DSBW Spring 2009] Unit 01: Introducing Web Engineering[DSBW Spring 2009] Unit 01: Introducing Web Engineering
[DSBW Spring 2009] Unit 01: Introducing Web Engineering
 
[ABDO] Data Integration
[ABDO] Data Integration[ABDO] Data Integration
[ABDO] Data Integration
 
[ABDO] Logic As A Database Language
[ABDO] Logic As A Database Language[ABDO] Logic As A Database Language
[ABDO] Logic As A Database Language
 

Recently uploaded

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 

Recently uploaded (20)

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 

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

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