UML to HTML

This section describes the mapping of UML into HTML code in order to implement client page contributions to the code. The icon for each component package, component, and class is shown.

Component Packages

«physical root» Package

A physical root package contains components that map directly to HTTP responding resources: static or dynamic pages. These resources can be requested directly by client browsers or other dynamic pages. Not all components under the physical root package may be requested directly by clients; most can, however. The package structure under a physical root mirrors the file system directory structure of the resources as they are placed on the Web server.

A physical root may define the tagged value "server", which contains the domain name of the server to which this physical root acts as a virtual root. This value is used to resolve URLs' references to logical-view elements, when no «virtual root» package is present.

«virtual root» Package

A virtual root package represents a top-level URL server and path. All elements under this package represent valid URLs.

The virtual root is used to resolve URL references in the logical view. In the logical view, a «client page» class will have a «link» relationship to a class that is realized by an «HttpResource» component that resides under a «virtual root» package.

To resolve a URL, the client class first determines which HTTP resource component realizes the target class. The HTTP resource component is combined with the «virtual root» server tag value and any subpackages in the hierarchy that appear above the HTTP resource. They are all combined to produce a single URL that maps to the logical-view class and that provides a value for generating anchor and form action tag parameters.

Components

«static page» Component

This component maps directly to an HTML, or any static file. This component does not undergo processing before being sent to the client. The file name of the component is the component name. A .html extension is applied by default to names without one.

The content of the HTML file depends on the classes that the component realizes. This component can realize at most one «client page» or «frameset» class but not a «server page» class.

«dynamic page» Component

A dynamic page component is an abstract stereotype indicating that the component requires processing on the server and that it produces dynamic content in the page. Language- and environment-specific profiles will define concrete instances of stereotypes.

«style sheet» Component

When a

element in the

of an HTML document specifies a style sheet (rel = "stylesheet", type="text/css"), the href attribute of the

identifies a style sheet component. A «style sheet» class and a «style sheet» component are forward engineered into the model. The URL and the physical location of the file are determined by the component package hierarchy and the «virtual root».

«script library» Component

A «script library» stereotyped component maps directly to a file with the extension .js. This file contains JavaScript code that is included in an HTML page or document at the request of the browser. That is, a separate browser request is made to obtain the JavaScript file.

A «script library» component can realize only «script library» classes in the logical view. The file name for the component is determined in the same way as «HTML Page» components, using the «virtual root» package to define the root physical directory.

To implement a «script library» component, all the «script library» classes that it realizes are combined. The result is a set of JavaScript var and function declarations. See the section «Client Page» Class for a description of generating <SCRIPT> elements.

«HTTP Resource» Component

An HTTP resource component maps to a requestable URL in the web server. An HTTP resource component must be owned by a «virtual root» package or by a package under a «virtual root» package hierarchy.

An absolute URL identifier can be derived from the model by using the server name identified in the server tag value of the «virtual root» and using the package hierarchy as the path, with the HTTP resource component name as the final part of the URL.

Classes

«Server Page» Class

This class is the logical abstraction of a Web page as seen by the server. A server page, a Web page that undergoes processing by the Web application server, has relationships with server-side components: databases, middle-tier components, and so on. A server page can stream HTML output as a client page. This relationship is modeled with a «build» relationship to the «client page» class. Server pages can also be used to stream XML or WML (Wireless Markup Language) output. A detailed description of these specifications, however, is beyond the scope of this document.

The implementation and the interpretation of the attributes and operations defined in this class are dependent on the architecture and the technology. The implementation is typically a form of scripted page, such as JSP, ASPX, or PHP. In these technologies, «server page» attributes typically map to primitive variables that are accessible by operations or functions defined within the scope of the page. Operations defined in the page are typically implemented as functions.

«Client Page» Class

A «client page» class, logically, represents the

element, which has two principal child elements:

and

. The element represents structural information about the HTML page, and the information in it is generally not rendered. The element represents the majority of the displayed content.

• Attributes: All nonstereotyped attributes map to JavaScript var declarations. If an attribute has a type defined that matches the list of standard JavaScript objects, the variable declaration can be initialized with the new operator. See Figure A-24. In Figure A-25, an association is made to a JavaScript Librarysupplied object.

  Figure A-24. Client page scripting variables as attributes

  Figure A-25. Client page scripting variables as associations

• Associations: Code created from directed stereotyped associations from a «client page» depends on the specific association.
• Operations: Nonstereotyped operations specified in a «client page» map to JavaScript operations. The function bodies of these unstereotyped operations are derived from an examination of any sequence and activity diagrams associated with the class and its collaborations.

«HTML Form» Class

«HTML Form» stereotyped classes exist only in the context of a «client page» or, theoretically, «framesets». These classes map directly to a

element. The name of the form is used for the name attribute of the element. The tagged value for method is used to set the method attribute; POST is the default.

One «submit» stereotyped association is allowed to a page stereotyped class, most likely a «server page». This association is used to determine the action attribute, which is set to the URL of the component that realizes the supplier class of the «submit» association (Figure A-26).

Figure A-26. An HTML tag modeled as a stereotyped class

Attributes of the form map to form child elements. Only attributes that map to predefined form attribute types are forward engineered. See Figure A-27.

Figure A-27. HTML fields modeled as attributes