CP363: UML Web Extensions

The Web Application Extension (WAE) standard for UML was first described by Jim Conallen, A Senior Software Engineer at IBM. Conallen designed semantics and constraints for modeling web architectural elements. Some aspects of WAE are described here.

The WAE Model

The foundation element of web applications is the web page. In WAE, a number of different stereotypes are applied to a web page depending on the role it plays in a web site. Web pages can be subdivided into various components depending on the functions of those components. (In implementation terms each of these components can be mapped to HTML elements.) There is a large set of WAE items defined for classes, components, packages, and other UML elements. Conallen suggests class descriptions for a number of other web elements not listed here, such as frames, client-side scripts, and java servelets. Further, he demonstrates the use of sequence diagrams, component diagrams, and other UML elements for describing the form and function of a web site. However, the narrow subset of WAE elements used here is sufficient as a basis for the topics under discussion. The following table present only those WAE items used in this course, with some minor modifications from the standard for simplicity's sake.

WAE Elements

A «server page» is a web page that contains operations executed by a web server or application server. The server page itself cannot be viewed - instead the execution of its operations builds a client page that is then viewed by a browser. In order for a form to submit its values it must know the address of its submission target (the form's action). The path tagged value provides this address. The ScriptingEngine tagged value lists either the language or engine that should be used to execute or interpret this page (PHP, Perl, Java, etc.)
A «client page» is what the user sees on their browser. It can be a simple web page or can be built by a server page. It may contain data, images, client operations, and further WAE elements such as forms. The title of a client page is normally used as its name. A client page may also have a path tagged value if it is an actual page and not built by a server page.
If you see this message, then your browser does not support SVG objects directly. Please switch to a browser that does, such as FireFox 3. A «form» is an element of a client page. In implementation terms it is a set of HTML input fields surrounded by a <form> tag. It has no operations since these are contained within its owning page. In UML forms are shown as part of their owning page through an aggregation association. The method tagged value is the HTML submission method used by the form. Forms cannot stand alone and must be part of a client page. One client page may contain many forms.
A «builds» association connects a server page to the client page it build when the server page's logic is executed. Because server pages may contain conditional logic, one server page may build more than one class of client pages.
A «submit» association shows the connection between a form and the server page its data is submitted to. A form may have only one «submit» association. A «submit» may have tagged values of parameters that are passed along with the submission request.
A «link» association shows hyperlinks between pages and is mapped to the HTML anchor element. Client pages may link to all other page types. (Not all server pages need form input data in order to be executed and may thus be linked to directly). Note that a server page cannot have an outgoing link, but the the client page that it builds can. A «link» may have tagged values of parameters that are passed along with the page request. A link association is always directional and points from one page to another.
«input» An «input» attribute stereotype maps to the HTML <imput> tag. It may have the tagged values: type - The type of input control to be used: one of text, number, hidden, password, checkbox, radio, submit, and reset. size - Specifies how large an area to allocate on screen, in characters. maxlength - The maximum number of characters the user can input..
«select» A «select» attribute stereotype maps to the HTML <select> tag. It may have the tagged values: size - Specifies the number of lines of text to display at once on screen. multiple - Specifies that multiple values may be selected at once.
«textarea» A «textarea» attribute stereotype maps to the HTML <textarea> tag. It may have the tagged values: rows - The number of visible text lines. cols - The visible width of the control in average character widths.