Web Development 2 1 And Franchise Colleges Name :MANSHA NAWAZ room :G 0/32 email : [email protected] Modelling for Web Development - 2

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


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)


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


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( )


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)


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


Class diagram with Distributed Objects

Product Maintenance

Data Grid<<ActiveX >>

IRecordSet<<Interface>>1<<DCOM>>

+recordSet

1


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


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


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

Documents

Web Development 2 1 And Franchise Colleges Name :MANSHA NAWAZ room :G 0/32 email : [email protected] Modelling for Web Development - 2