web development 2 1 and franchise colleges name :mansha nawaz room :g 0/32 email :...
TRANSCRIPT
Web Development 2 1
And Franchise Colleges
Name : MANSHA NAWAZroom : G 0/32 email : [email protected]
Modelling for Web Development - 2
Web Development 2 2
Learning Objectives
Outline a range of UML stereotypes available for the modelling of web applications
Using a set of UML models illustrate the modelling of web applications based on the architecture patterns:– Thin Web Client– Thick Web Client– Web Delivery
Demonstrate the use of UML extensions in web application models
Web Development 2 3
Stereotypes for Web Application Modelling
«server page» Class «builds» Association
«client page» Class «redirect» Association
«form» Class «iiop» Association
«frameset» Class «rmi» Association
«target» Class «input element» Attribute
«java script object»
Class «select element» Attribute
«client script object»
Class «target area element»
Attribute
«link» Association «web page» Component
«targeted link» Association «asp page» Component
«frame content» Association «jsp page» Component
«submit» Association «servlet» Component
<<dcom>> Association «script library» Component
Web Development 2 4
Reminder - Web Application Architecture Patterns
1. Thin Web Client: • Little control of client’s configuration• Standard web browser• All business logic executed on the server
2. Thick Web Client:• Significant business logic executed on the client
using dynamic HTML, Java applets etc.• HTTP used for communication with server
3. Web Delivery:• May support distributed objects where web browser
acts as a delivery and container device for the objects
• Uses additional protocols such as RMI, IIOP and DCOM
Web Development 2 5
Thin Web Client Design
Thin web client actors only interact with client pages & server pages only interact with server resources– Need to incorporate client & server pages in
sequence diagrams– Boundary objects from analysis model
become client pages– Transform controller objects become server
pages
Web Development 2 6
Sequence Diagram for Thin Web Client
Online Customer : Shopping Cart : Checkout : Session : Cart
: Order Summary
The customer tells the system to check out.
The system examines the content of the shopping cart and produces an itemised list of all the items that are ready to be purchased.
The customer confirms the order and tells the system to process the order
checkout( )Checkout( )
Item("cart")
CheckOut( )
WriteLineItem
For eachline item
WriteSubTotal
Write Tax
WriteShopping
WriteTotal
Display
Confirm
Conallen, J. (2000)
Web Development 2 7
Thin Web Client Design
Server-side objects can be overloaded – Executing business logic – Building user interface to send to client
Can alleviate this by separating business logic processing from interface building– Conceptual web pages and business
objects
Web Development 2 8
Separating Server Page Responsibilities
Online Customer : Shopping Cart : Checkout : Session : Cart
: Order Summary : Build Order Summary
The customer tells the system to check out.
The system examines the content of the shopping cart and produces an itemised list of all the items that are ready to be purchased.
The customer confirms the order and tells the system to process the order
For eachline item
checkout( )Checkout( )
Item("cart")
CheckOut( )
Display
Confirm
Redirect( )
WriteLineItem( )
Create( )
WriteSubTotal( )
WriteTax( )
WriteShipping( )
WriteTotal( )
Web Development 2 9
Logical-view classes related to checking-out a shopping cart
Session
Item()
Check Out Checkout
<<link>>
Cart
CheckOut()GetItemCount()AddItem()RemoveItem()SubTotal()Tax()Shipping()Total()GetItems()
11
+Cart
Build Order Summary
<<redirect>>
Order Summary
<<build>>
Web Development 2 10
Forms & Frames
<<Form>> objects are aggregates of client pages– Standard input elements submitted for
processing by server page– Stereotypes & tagged values can add
information Frames <<framesets>> allow browser
windows to be subdivided into panes each containing its own webpage– Each pane is a target that other client pages
can request web pages for
Web Development 2 11
Shipping address collection form
Shipping Information
Ship Address
<<input>> name : String<<input>> street : String<<input>> city : String<<selection>> county : Long<<input>> postCode : String
<<form>>
Process Ship Address
<<submit>>
Conallen, J. (2000)
Web Development 2 12
Thick Web Client Design
Client-side scripting allows processing on client– e.g. recalculation of shopping cart after quantity
changes Functionality can also be provided by ActiveX
controls, Java applets & JavaBeans components – client pages can invoke operations on them
Server objects interact with server-side resources to provide functionality
Web Development 2 13
Alternative ways to express Scripts in a Client Page
Online Customer : Shopping Cart
changeQuantity( )
recalculate( )
The customer changes the quantity of one of the line items.
The customer clicks the recalculate button.
The system recalculates the subtotal, tax and total for the order. The new values are displayed in the page
recalculateTotals( )
updateForm( )
updateItem( )
Online Customer : Shopping Cart : Cart Form
The customer changes the quantity of one of the line items.
The customer clicks the recalculate button.
The system recalculates the subtotal, tax and total for the order. The new values are displayed in the page
changeQuantity( )
updateForm( )
updateItem( )
recalculate.Click( )
recalculateTotals( )
Web Development 2 14
Class Diagram with Client Page that uses ActiveX components
Description<<target>>
Schedule<<frame>>
Season Descr
Calendar
day()month()year()value()nextMonth()today()refresh()
<<ActiveX Control>>
Growing Schedule
descrURL [ ] : StringmovieURI [ ] : String
dateChanged()movieAvailable()showMovie()showDescription()
{parameters=date}
<<targeted link>>
calendar
IRealAudio
getSource()setSource()doPlayPause()doStop()doGoToURL()doPlay()doPause()getTitle()
moviePlayer
Conallen, J. (2000)
Web Development 2 15
Sequence diagram involving client-side components
Online Customer : Growing Schedule : Calendar : IRealAudio Build Season
Description
: Season Descr
: Description
selectDate( )
dateChanged( )
targetedLink( description, "date")
lookupDescr()
create
display( )
hasMovie( )
doGoToURL( )
doPlay( )
Customer selects a date from the calendar.
The system loads a description of the growing season for the selected date and displays it. If a movie is available it is started.
Web Development 2 16
Web Delivery Design
Distributed objects can provide real flexibility– RMI/IIOP or DCOM provides additional
communication protocols Direct communication between client &
server objects improves efficiency Frequently business logic is initially
modelled without deployment to simplify developer understanding– Deployment view of architecture covers these
issues
Web Development 2 17
Class diagram with Distributed Objects
Product Maintenance
Data Grid<<ActiveX >>
IRecordSet<<Interface>>1<<DCOM>>
+recordSet
1
Web Development 2 18
Web Delivery Deign – Sequence Diagram (without deployment shown)
Online Sporting Event System – Conallen (2000)
Online Viewer : Game Page : On Line Game : Sports Event : SportsCaster : Playing Field
Navigate
activate( )
getServer( )
newListener(anOnlineGame )
getAllEvents( )
newEvent(aSportsEvent )
visualUpdate( )
update( )
addVisualCommentary( )
Web Development 2 19
Web Delivery Deign – Class Diagram (deployment shown)
Sports Event
description : StringoccurTime : TimesequenceNo : Long
Game Page
Playing Field
update()
On Line Game
newsEvent()refreshEvents()gameOver()
<<Applet>>SportsCaster
broadcastEvent()newListener()getAllEvents()
<<RMI>>
Web Development 2 20
Summary
Outlined a range of UML stereotypes available for the modelling of web applications
Using a set of UML models illustrated the modelling of web applications based on the architecture patterns:– Thin Web Client– Thick Web Client– Web Delivery
Demonstrated the use of UML extensions in web application models
Web Development 2 21
References
Conallen, J. (2000) Building Web Applications with UML Addison Wesley
Conallen, J. (1999) Modelling Web Application Architectures with UML Communications of the ACM volume 42, number 10
Ceri, S., Fraternali, P. & Matera, M. (2002) Conceptual modelling of data-intensive Web applications IEEE Internet Computing volume 6, number 4