This section describes the modeling of HTML code with UML. All HTML elements in our context have two common attributes: ID and class. ID is a unique identifier that distinguishes the element from all the others in the document. The nonunique identifier CLASS assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class element attribute has two roles in HTML:

• As a style sheet selector, when an author wishes to assign style information to a set of elements
• For general-purpose processing by user agents

The placement of logical-view classes in the package hierarchy is not important. Those classes can be placed in whatever package makes logical sense and supports the team development strategies. It is expected that during the model's evolution, classes may get moved into other packages. Placement of components, however, is semantically important and they should not be arbitrarily moved. The location of a WAE stereotyped component in the «physical root» is used to resolve URLs.

URL Resolution

When working with hyperlinks to URLs it is necessary to define a model package that will map to a Web context: www.myserver.com/context. The term universal resource identifier (URI) is a broad term for an address of content on the Web. A URI is a way of unambiguously identifying a resource on the Internet. A universal resource locator (URL), a type of URI, is a pointer to a particular resource on the Internet at a particular location and is the one used most frequently in Web applications. Universal resource names (URNs) are persistent, location-independent resource identifiers. So given a URN, a client will be able to retrieve it from any server that has the resource. The JavaScript protocol probably fits into this category, that is, javascript:parent.blank(). Because HTTP deals exclusively with URLs, we will consider making semantic interpretations only of URLs.

URL resolution begins with the «physical root» component package, which contains all the component files that can be directly requested by the client. If an additional layer of mapping is used to map HTTP resources to the physical files, a «virtual root» is needed with «HTTP Resource» elements underneath organized in a virtual URL hierarchy, and dependencies on the physical resources are needed.

The process for resolving a URL into the component that will service it begins by first looking at any «virtual root» package that has defined in its tag values the host and context that match the URL. If found, the package hierarchy under the virtual root is navigated, looking for an «HTTP Resource» element match. If the HTTP resource specifies a dependency on a «physical root» component, it is responsible for servicing the HTTP request. If the HTTP resource element realizes a logical-view class, that is, screen, the screen class is examined to determine which set of logical-view client and server pages created it. Following these relationships to their realizing components returns the total set of components that service the requested URL.

When looking at the sample code and models in this document, it is important to remember that when an href or a src HTML element attribute is specified, its value is not determined by the name of the class but rather by the component and the URL resolution process as a whole. In many cases, the class name and the component name are the same; therefore, at times it may appear that the value used for the href or the src is taken directly from the logical-view class.

Elements

and

Elements

Every valid HTML page should contain a single HTML element with closing tag. This element is the container element for the entire page's document. The

element is the container of the rendered content of the page. It is where window object event handlers are placed.

Each

/ combination maps to a single «client page» stereotyped class in the logical view. The name of the class should be a derivative of the page name. The page name maps to the name of the component that realizes this «client page». The name of the «client page» class does not map directly to any HTML element and should be considered strictly a modeling artifact.

The following attributes are captured as tagged values of the «client page». The values of the HTML attributes are captured in the tagged value exactly as they appear in the HTML code. For example, the following HTML document defines an id, class, and onload handler.

My home page

Welcome to my home page.

This HTML fragment maps to a single «client page» whose name is derived from the page component name (home.html).

The

element has the following attributes.

The core HTML attributes follow.

The following standard events are also captured as tagged values of the «client page».

Element

See the

element description. The inner text of the element, located within the element, maps to the title tagged value of the «client page» class.

Element

The anchor element () can be an anchor or a link to another URI. As an anchor, this element defines a named location in a document, typically done to allow other links to specify and to reference a specific location within a document. Anchors also define selections of text that can capture and handle events. In a sense, it is a way to name a text region for use by DHTML scripts. To be used as an anchor, the element must define the name and/or id attributes.

As a link,[1] the anchor element represents a navigational path to another URI. The anchor element functions as a link only when the href attribute is defined. The value of the href attribute is the URL that the browser will request when the user activates the anchor, or clicks it. If the target attribute is defined, the requested URL is directed to a specific frame or window. The value of the target indicates the window location to load the URL into.

[1] This is not to be confused with the

element, which is similar to but not the same as an anchor link.

Only anchor elements functioning as links are mapped to UML associations. Anchor-only elements are generally not considered structural elements at the UML logical-view level; however, in some circumstances, they might be. For example, event handlers might be assigned by the element, and those scripts might be part of significant client-side logic. The use of elements might also identify something within a document that may be of significance, that may be directly referenced by something outside the page. The modeling of anchor-only elements should be an option. When turned on, an element without an href attribute specified will map to a «client page» attribute whose data type is Anchor.

Anchor links elements with href attributes specifiedmap to directed associations, stereotyped «link» from «client page» classes to other classes in the logical view. The supplier class must be a «client page», «server page», «frameset», or «targeted link» stereotyped class.

The following HTML fragment is from a page whose URL is http://www.myco.com/cart.asp.

<a href="www.myco.com/policies/shipping.html">Shipping Policies</a> ... <a href="checkout.jsp">Checkout current shopping cart</a> ... <a href="/catalog/cover.html" name="shop"> Shop for more</a>

This document is modeled with the UML elements shown in Figure A-3.

Figure A-3. Anchors in UML

Element Attributes

Anchor elements share the common HTML attributes, and the UML «link» association defines the same tagged values as in the core HTML attributes. Anchor elements also share the standard events in the common HTML event attributes. In addition to these events, the anchor link accepts the following events.

The following anchor attributes are also captured and stored as tagged values.

HTTP URL Parameters

The specification for the HTTP GET request method specifies how parameters can be included with the page request. The URL is appended with a question mark (?) followed by ampersand-separated key/value pairs. The key represents the parameter name, followed by an equal sign and the value. Spaces in the values must be converted to '%20' or '+' characters (see specific Web server documentation for allowable sets). Most Web servers allow parameters to be captured with the HTTP POST request method as well.

The following example has an anchor link to the additem.asp page. The three parameters are prodid, qty, and color. The value for color is light blue, and because there is a space in it, a %20 replaces it in the HTML URL.

<a href="additem.asp?prodid=3921&qty=1&color=light%20blue"> </a>

<a href="additem.asp?prodid=3921&qty=1&color=light%20blue">There are two ways to model this anchor element. The parameters either map to a «link parameter» stereotyped association class (Figure A-4) or are simply captured as a single tagged value (Figure A-5). The link class should model as a nested class of the «client page» that owns the «link» association, that is, the client class.</a>

<a href="additem.asp?prodid=3921&qty=1&color=light%20blue">Figure A-4. Anchor link using link class</a>

<a href="additem.asp?prodid=3921&qty=1&color=light%20blue"></a>

<a href="additem.asp?prodid=3921&qty=1&color=light%20blue">Figure A-5. Anchor link using tagged value</a>

<a href="additem.asp?prodid=3921&qty=1&color=light%20blue"></a>

<a href="additem.asp?prodid=3921&qty=1&color=light%20blue">URL Uniqueness</a>

<a href="additem.asp?prodid=3921&qty=1&color=light%20blue">The determination of the complete set of «link» associations directed from a «client page» class is based on a combination of destination URL, parameter content, and specified target.[2] For example, the following code fragment is modeled with only two «link» associations, with one anchor's multiplicity set to 0..n.</a>

<a href="additem.asp?prodid=3921&qty=1&color=light%20blue">[2] See the section Element later in this appendix for a description of targets and frames.</a>

<a href="additem.asp?prodid=3921&qty=1&color=light%20blue"> </a><a href="add.asp?prodid=3921">sweater</a> <a href="add.asp?prodid=8327">shoes</a> <a href="add.asp?prodid=3832">gloves</a> <a href="add.asp?action=save">Complete transaction</a>

In this example (Figure A-6), two distinct «link» associations are made. Even though they reference the same page component, the combination of destination URL (add.asp) and parameter collection (prodid or action) is what defines unique «link» associations. When more than one anchor element maps to a class association, the multiplicity on the supplier role is set to 0..n.

Figure A-6. Anchor elements

In Figure A-7, the «link» elements are drawn from the client class («client page» cart html) to the supplier class («server page» add). It is important to point out that the URL additem.asp is constructed from the component that realizes the add «server page» class, not the class itself. This is how the class can be named add in the logical view yet be referenced by the URL additem.asp. The missing piece in this example is the component additem.asp in the component view that realizes the add class.

Figure A-7. Anchor elements using link classes

Targeted Links

See the section Element later in this appendix.

Element

An element is always a child element of a element. The only job of the element is to name and to contain a set of elements. The element identifies a region of main architectural significance in that it acts as a «link»; accordingly, it maps directly to a «link» stereotyped association. This association may, of course, be a targeted association. Some additional tagged values required for an element follow.

Because it maps to a «link» association, the element also captures the «link» events listed for anchor element event attributes in the section

Element Attributes earlier in this chapter. See Figure A-8.

Figure A-8. Area links

Element

The

element belongs in the element and is the place to establish links with external documents as style sheets and font definition files. The most common use of this tag is to reference an external style sheet definition. When the relationship is set to stylesheet, this element maps to a dependency relationship from the «client page» to the «style sheet» class. Otherwise, the elements map to «link» stereotyped associations where the tagged value of link type is set to link instead of to the more common anchor. Additionally, the rel and the rev tagged values are typically also set.

The «link» association is created only when a valid URL is referenced by the href attribute. In this case, a «link» association is created to the page: «client page», «server page», «frameset», or «style sheet». If the relationship type is "style sheet" and the file that the URL resolves to is found on the file system, a «style sheet» component and class are added to the model.

When the rel attribute (relationship) is set to style sheet, the URL referenced by the href attribute represents a dependency on an included Cascading Style Sheet (CSS) file.

Section 3

In this example, all the resulting «link» associations have their link type tagged value set to "link". The rev, rel, and type attributes are also captured as tagged values in the «link» associations. See Figure A-9.

Figure A-9. Class diagram for

elements

Element

A defined in an HTML page maps directly to an «HTML form» stereotyped class. An aggregation relationship indicates that the form is completely contained by the HTML page. The component that realizes the «client page» must also realize the «HTML form». The name of the «HTML form» class comes from the name attribute of the element.

The method attribute is captured as a tagged value. Its valid values are GET | POST. The default value is POST.[3]

[3] In reality, most browsers default to GET, which is, however, deprecated owing to internationalization problems. Nonetheless, it is likely that GET will be around for a long time to come.

When the action attribute contains a valid HTTP URL, the element maps to a «submit» stereotyped directed association. This directed association typically points to the «server page» that is realized by the component that the URL resolves to. It is still technically correct for the «submit» association to point to any stereotyped page that the component realizes: «server page», «client page», or «frameset». In the majority of situations, however, the relationship is most clearly indicated by a directed association to the «server page» class.

The attributes and tagged values associated with the «submit» association follow. See Figure A-10.

Figure A-10. HTML form

The results of a submitted form can be directed to another frame or window. As with targeted link associations, a «targeted link» class and a «target» stereotyped class are defined in the model. See Figure A-11.

Figure A-11. A targeted «submit» relationship

Element

The element is an overloaded input field control that is placed in a element. The element takes on many forms, depending on its type attribute, as follows.