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

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
costume and set research powerpoint presentation
costume and set research powerpoint presentationcostume and set research powerpoint presentation
costume and set research powerpoint presentationphoebematthew05
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 

Recently uploaded (20)

Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
costume and set research powerpoint presentation
costume and set research powerpoint presentationcostume and set research powerpoint presentation
costume and set research powerpoint presentation
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 

[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