Design

Building Web Applications with UML

Source: Building Web Applications with UML Second Edition By Jim Conallen, 2002 Modeling Web Application Architecture with UML By:: Jim Conallen, 1999

Starts with
the analysis model, the user experience model, and the software architecture document

The principal activity is to refine the analysis model such that it can be implemented with the components that obey the rules of the architecture Design activities revolve around the class and interaction diagrams
Classes become more defined, with fully qualified propertiesname and typeand operationscomplete signatures
September 2007 IF4061 2

IF4061 STEI ITB - 2007

The Component View

During design, a new viewthe component viewand diagram are introduced A component is something that realizes a set of interfaces The realization of a component is done with the classes and collaborations expressed in the logical view
Every class in the logical view is implemented by at least one component; abstract classes defining interfaces may be implemented by many components

The Component View (2)

The interface needs to be elaborated into:
a set of specific interfaces capable of handling the communication between the actors and the system, as well as supporting the flow of activity of business processes.

Component diagrams visualize components, interfaces, and their relationships

September 2007 IF4061 3 September 2007 IF4061 4

Web App Architecture

In addition to elaborating the classes and collaborations, design activities include
Partitioning objects into client, server, and other tiers Separating and defining user interfaces, or Web pages

Web App Architecture (2)

The basic architectural patterns of Web applications involve Web pages
Web pages act as generalized user interface containers; Web pages are the glue that connects the browser with the rest of the system.

For example, a Web application that uses only the thin Web client architectural pattern is not capable of supporting user-defined objects on the client.
Therefore, all objects must exist somewhere in the server's tier

It is vital to capture Web pages as first-class elements in the model and to represent them alongside the classes and components
We need to represent Web pages in the model

The building blocks of UML are not sufficient to express the necessary subtleties of scripted Web pages as objects in a class diagram
To accommodate this, the UML creators defined an extension mechanism for UML

September 2007

IF4061

September 2007

IF4061

Web Application Extension (WAE)

The WAE to UML enables us to represent Web pages and other architecturally significant elements in the model alongside the "normal" classes of the model.
Only by doing this can we accurately express the entirety of the system in a model and maintain its traceability and integrity

WAE Logical View

The WAE defines three core class stereotypes and various association stereotypes. Core class stereotypes:
Server Page; represents a dynamic Web page that contains content assembled on the server each time it is requested Client Page; an HTML-formatted Web page with a mix of data, presentation, and even logic
rendered by client browsers and may contain scripts that are interpreted by the browser

An extension to UML is expressed in terms of:

Stereotype, an extension to the vocabulary of the language, allows us to attach a new semantic meaning to a model element. Tagged value, an extension to a property of a model element, is the definition of a new property that can be associated with a model element. Constraint, an extension to the semantics of the language, specifies the conditions under which the model can be considered well formed.

HTML Form; a collection of input fields that are part of a client page

September 2007

IF4061

September 2007

IF4061

WAE Logical View (2)

Association stereotypes:
<< link>> <<build>> <<submit>> <<redirect>> <<forward>> <<object>> is an abstraction of the HTML anchor element, when the href attribute is defined a directional relationship between a server page and a client page a directional relationship between an HTML form and a server page indicates a command to the client to request another resource represents the delegation of processing a client's request for a resource to another server-side page a containment relationship drawn from a client page to another logical class, typically one that represents an applet, ActiveX control, or other embeddable component indicates that the included page gets processed, if dynamic, and that its contents or by-products are used by the parent

Web Class Stereotypes

<<include>>

September 2007

IF4061

September 2007

IF4061

10

Association Stereotypes

Server pages build the client pages

September 2007

IF4061

11

September 2007

IF4061

12

Using hyperlink parameter

Form submit to server page

September 2007

IF4061

13

September 2007

IF4061

14

WAE Component View

Static Page
A resource that can be directly requested by a client browser

Identifying web pages

While the objects are being partitioned, Web pages are also being defined.
Involves the discovery of Web pages and their relationships with one another and with the objects of the system.

Dynamic Page
A resource that can be requested by a client browser. When requested or delegated to via a forward relationship, server-side processing takes place. The results of this processing can change the state of the server and be used to construct some of the HTML that is streamed out to the requesting client. Dynamic pages can accept user input submitted by forms.

Physical Root
An abstraction of a file hierarchy that contains requestable resources. A physical root package maps directly to a Web server file system directory. Tag values in this element identify the host name and the application context, which are necessary for resolving a component under this directory into a valid URL

Web page design elementsclient and server pagesare discovered by first looking at the UX model and understanding the software architecture document The early generations of Web applications, Web pages mapped one to one to UX model screens
Each page was responsible for preparing its output by interacting with server-side objects

Today's development environments and frameworks enable us to build more robust, sophisticated Web applications
The two predominant Web architecture frameworks available today are J2EE and .NET.
15 September 2007 IF4061 16

September 2007

IF4061

Client-Side Scripting
Designing Web applications that have dynamic client pages requires careful attention to the partitioning of the objects Thick Web client applications can have all sorts of objects and activity on the client

Client Collaboration

September 2007

IF4061

17

September 2007

IF4061

18

Server Collaboration

Mapping to the UX Model

Mappings directly between use case and design models to the UX model Show which Web page classes realize which UX model screens Simple architectures have a one-to-one mapping between a Web page classclient or server pageand the screen. In more complex architectures, Web page classes are responsible for delivering multiple screens

September 2007

IF4061

19

September 2007

IF4061

20

Guidelines for Web Application Design

Be wary of using the latest capabilities of browsers
The browser wars continue, and it is difficult to predict which features will eventually become standard

Think about how the page is going to be tested

Don't use visual cues to let the actor know when the page is safe to interact with unless these same cues are accessible by an automated testing tool

Avoid the temptation to use multiple browser windows simultaneously

Although a useful feature for some applications, designing and maintaining two client interfaces requires more than double the effort

Keep the focus of server pages on the construction of the user interface
Avoid placing business logic code in the server page. Use external objects to encapsulate this type of logic

September 2007

IF4061

21