HTML to UML

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

Tagged Value	Value
title	My home page
id	RID0A4F52E4
class	info
onload	alert('hi!')

The

element has the following attributes.

Attribute	Description	Tagged Value
onload	Occurs when the user agent finishes loading a window or all frames within a .	onload
onunload	Occurs when the user agent removes a document from a window or a frame.	onunload

The core HTML attributes follow.

Attribute	Description	Tagged Value
id	Assigns a name to an element. This name must be unique in a document.	id
class	Assigns a class to the body.	class

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

Attribute	Description	Tagged Value
onclick	Occurs when the pointing device button is clicked over an element.	onclick
ondblclick	Occurs when the pointing device button is double clicked over an element.	ondblclick
onmousedown	Occurs when the pointing device button over an element is clicked.	onmousedown
onmouseup	Occurs when the pointing device button is released over an element.	onmouseup
onmouseover	Occurs when the pointing device is moved onto an element.	onmouseover
onmousemove	Occurs when the pointing device is moved while over an element.	onmousemove
onmouseout	Occurs when the pointing device is moved away from an element.	onmouseout
onkeypress	Occurs when a key is pressed and released over an element.	onkeypress
onkeydown	Occurs when a key is pressed over an element.	onkeydown
onkeyup	Occurs when a key is released over an element.	onkeyup

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.

Attribute	Description	Tagged Value
onfocus	Occurs when an element receives focus either by the pointing device or by tabbing navigation.	onfocus
onblur	Occurs when an element loses focus either by the pointing device or by tabbing navigation.	onblur

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

Attribute	Description	Tagged Value
type	Gives an advisory hint as to the content type of the content available at the link target address. This attribute allows user agents to use a fallback mechanism rather than to fetch the content if they are advised that they will get content in a content type they do not support. Authors who use this attribute take responsibility for managing the risk that it may become inconsistent with the content available at the link target address.	type
rel	Describes the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space-separated list of link types. Sanctioned valid values are alternate | appendix | bookmark | chapter | contents | copyright | glossary | help | index | next | prev | section | start | stylesheet | subsection.	rel
rev	Describes a reverse link from the anchor specified by the href attribute to the current document. The value of this attribute is a space-separated list of link types (see valid values for rel).	rev
	Although there is no formal attribute for the link type, the tagged value link type indicates whether this association was generated from the	element or from an or an element.	elements appear only in the	element and represent document structural relationships that are not directly rendered in the main window. The three possible values for this tagged value are anchor | area | link (see the	and the element descriptions for more information). Also note that this tagged value has no connection with the term link type used to define the rel and the rev attributes; it's another case of too many concepts and two few words to describe them.	link type
innerText	(Optional): The value of the anchor element. This text appears between the opening and closing tags.	innerText

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.

Attribute	Description	Tagged Value
shape	Controls the interpretation of the coordinates. Acceptable values are rect | circle | poly | default.	shape
coords	A comma-separated list of lengths that define the limits of the bounds of the area region. Used in conjunction with the shape.	coords

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

Attribute	Description	Tagged Value
action	In the case of non-HTTP URI references, this tagged value captures the URI as a string. For example, the action attribute might be a mailto reference: action="mailto:jconallen@ rational.com".	action
method	Indicates how the form's data should be sent to the server. The two valid values are POST | GET. POST is the default if none is specified.	method

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.

Input Type	Description	Attribute Stereotype
text	A one-line field for typing text that gets submitted as the value of the element. For a multiple-line field, see the </TT> element.</TD> <TD valign="top"><TT>text</TT></TD> </TR> <TR> <TD valign="top"><TT>password</TT></TD> <TD valign="top">A text field that presents bullets or asterisks for each typed character to ensure over-the-shoulder privacy for the user. The plain-language text is submitted as the value for this element.</TD> <TD valign="top"><TT>password</TT></TD> </TR> <TR> <TD valign="top"><TT>checkbox</TT></TD> <TD valign="top">A free-standing check box that provides two states: active and inactive. Its label is created by HTML text before or after the <TT><INPUT></TT> element tag. The value attribute value is submitted with a form, so multiple check boxes can have the same name but different values if the server script wants its data that way.</TD> <TD valign="top"><TT>checkbox</TT></TD> </TR> <TR> <TD valign="top"><TT>radio</TT></TD> <TD valign="top">One of a related group of On/off buttons. Assigning the same value to the <TT>name</TT> attribute of multiple radio buttons assembles them in a related group. Clicking one button in the group activates it and unhighlights all others. The <TT>value</TT> attribute is submitted with a form.</TD> <TD valign="top"><TT>radio</TT></TD> </TR> <TR> <TD valign="top"><TT>submit</TT></TD> <TD valign="top">The button for submitting the form. A custom label can be assigned by the <TT>value</TT> attribute. If <TT>name</TT> and <TT>value</TT> attributes are assigned for the element, their values are submitted with the form.</TD> <TD valign="top"><TT>submit</TT></TD> </TR> <TR> <TD valign="top"><TT>reset</TT></TD> <TD valign="top">The button for reverting the form's elements to the values they had when the form initially loaded into the client. A custom label can be assigned via the <TT>value</TT> attribute.</TD> <TD valign="top"><TT>reset</TT></TD> </TR> <TR> <TD valign="top"><TT>file</TT></TD> <TD valign="top">A button and a field that let the user select a local file for eventual uploading to the server. A click of the button generates a File dialog, and the name, or pathname, of the selected file appears in the field. The server must have a script running to accept the incoming file at submission time.</TD> <TD valign="top"><TT>file</TT></TD> </TR> <TR> <TD valign="top"><TT>hidden</TT></TD> <TD valign="top">An invisible field often used to carry over database or state data from submission to submission without having to store the temporary data on the server. The name/value pair is submitted with the form.</TD> <TD valign="top"><TT>hidden</TT></TD> </TR> <TR> <TD valign="top"><TT>image</TT></TD> <TD valign="top">A button that submits the form. The coordinate points <TT>x</TT>, <TT>y</TT> of the clicked image are submitted as two name/value pairs.</TD> <TD valign="top"><TT>image</TT></TD> </TR> <TR> <TD valign="top"><TT>button</TT></TD> <TD valign="top">A clickable button whose action must be scripted. Its label is assigned by the <TT>value</TT> attribute. If you want to use HTML to format the label of a button, use the <TT><BUTTON></TT> element instead.</TD> <TD valign="top"><TT>button</TT></TD> </TR> </COLGROUP> </TABLE></P> <P><TT><INPUT></TT> tags map to attributes of the «HTML form» stereotyped class. Each attribute of the class is itself stereotyped to indicate the input type. Each input attribute defined for the «HTML form» responds to the standard events listed in the section <TT><cke:BODY></TT> Element Attributes and shares the same core tagged values described in that section.</P> <P>The following attributes and tagged values are associated with <TT><INPUT></TT>-generated «HTML form» class attributes.</P> <P><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1" WIDTH="100%"> <COLGROUP span="3"> <TR> <TH align="left" valign="top"><span>Attribute</span></TH> <TH align="left" valign="top"><span>Description</span></TH> <TH align="left" valign="top"><span>Tagged Value</span></TH> </TR> <TR> <TD valign="top"><TT>checked</TT></TD> <TD valign="top">For check box and radio button input types, this Boolean value indicates whether the button is turned on when first rendered. Scripts can modify this value.</TD> <TD valign="top"><span><TT>checked</TT></span></TD> </TR> <TR> <TD valign="top"><TT>disabled</TT></TD> <TD valign="top">A Boolean value that if true, disablesor makes inactive yet viewableand is therefore unable to respond to user events.</TD> <TD valign="top"><span><TT>disabled</TT></span></TD> </TR> <TR> <TD valign="top"><TT>maxlength</TT></TD> <TD valign="top">Defines the maximum number of characters that may be typed into a text field. Typically, the browser beeps when this limit is exceeded. This should not be confused with the <TT>size</TT> attribute.</TD> <TD valign="top"><span><TT>maxlength</TT></span></TD> </TR> <TR> <TD valign="top"><TT>readonly</TT></TD> <TD valign="top">A Boolean value indicating that the control cannot be changed by the user.</TD> <TD valign="top"><span><TT>readonly</TT></span></TD> </TR> <TR> <TD valign="top"><TT>size</TT></TD> <TD valign="top">Sets the character width of text input types.</TD> <TD valign="top"><span><TT>size</TT></span></TD> </TR> <TR> <TD valign="top"><TT>src</TT></TD> <TD valign="top">A URL reference to image data to be rendered in an image-type input control.</TD> <TD valign="top"><span><TT>src</TT></span></TD> </TR> <TR> <TD valign="top"><TT>tabindex</TT></TD> <TD valign="top">A number that indicates the sequence of this element within the tabbing order of all focusable elements in the document.</TD> <TD valign="top"><span><TT>tabindex</TT></span></TD> </TR> </COLGROUP> </TABLE></P> <P>The <TT>type</TT> attribute maps directly to the data type of the «HTML form» class attribute. The <TT>value</TT> attribute maps to the class attribute's initial value. If the <TT>name</TT> attribute is not specified, one is derived from the name of the form, or client page, name and the input data type.</P> <P><TT><INPUT></TT> elements also respond to the following events.</P> <P><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1" WIDTH="100%"> <COLGROUP span="3"> <TR> <TH align="left" valign="top"><span>Attribute</span></TH> <TH align="left" valign="top"><span>Description</span></TH> <TH align="left" valign="top"><span>Tagged Value</span></TH> </TR> <TR> <TD valign="top"><TT>onfocus</TT></TD> <TD valign="top">Occurs when an element receives focus either by the pointing device or by tabbing navigation.</TD> <TD valign="top"><span><TT>onfocus</TT></span></TD> </TR> <TR> <TD valign="top"><TT>onblur</TT></TD> <TD valign="top">Occurs when an element loses focus either by the pointing device or by tabbing navigation.</TD> <TD valign="top"><span><TT>onblur</TT></span></TD> </TR> <TR> <TD valign="top"><TT>onselect</TT></TD> <TD valign="top">Occurs when a user selects some text in a text field.</TD> <TD valign="top"><span><TT>onselect</TT></span></TD> </TR> <TR> <TD valign="top"><TT>onchange</TT></TD> <TD valign="top">Occurs when a control loses the input focus and its value has been modified since gaining focus.</TD> <TD valign="top"><span><TT>onchange</TT></span></TD> </TR> </COLGROUP> </TABLE></P> <P>The following HTML code is modeled by an «HTML form» class. HTML forms do not specify operations, only attributes, since any scripts defined in a form element are visible in page scope: global object scope. See Figure A-12.</P> <pre> <form name="Profile" method=POST action="updatedata"> <input type="button" value="Toggle Sound" onClick="toggleSnd()"> <input type="checkbox" data-cke-saved-name="connections" name="connections" value="ISDN">ISDN <input type="checkbox" data-cke-saved-name="connections" name="connections" value="DSL">ADSL/DSL <input type="checkbox" data-cke-saved-name="connections" name="connections" value="T1">T1 (fractional) <input type="file" data-cke-saved-name="uploadFile" name="uploadFile"> <input type="hidden" data-cke-saved-name="prevState" name="prevState" value="modify"> <input type="image" data-cke-saved-name="graphicSubmit" name="graphicSubmit" data-cke-saved-src="books/2/141/1/html/2/submit.jpg" src="books/2/141/1/html/2/submit.jpg" height=40 width=40> <input type="password" data-cke-saved-name="pwd" name="pwd" maxlength=12 size=20> <input type="radio" data-cke-saved-name="creditcard" name="creditcard" value="Mastercard">Mastercard <input type="radio" data-cke-saved-name="creditcard" name="creditcard" value="Visa">Visa <input type="reset"> SSN: <input type="text" data-cke-saved-name="ssn" name="ssn" value="###-##-####" onclick="validateSSN(this)"> <button name="Check" type="button" value="CheckMe">Check it</button> <select name="Role" MULTIPLE> <option value="0">Admin</option> <option value="1">Dev</option> <option value="2">Guest</option> </select> <input type="submit" value="Send Encrypted"> </form> </pre> <CENTER><H5>Figure A-12. HTML form</H5><p><img border="0" width="500" height="624" data-cke-saved-src="books/2/141/1/html/2/files/afig12.jpg" src="books/2/141/1/html/2/files/afig12.jpg" alt="graphics/afig12.jpg"></p> </CENTER> <P>For the most part, the modeling rules are to use the element <TT>name</TT> attribute as the name of the class attribute and the <TT>value</TT> element attribute as the initial value of the class attribute. The <TT>type</TT> of the input element sets the type of the class attribute. When an element <TT>name</TT> attribute is not specified, one is derived from the stereotype and the number of occurrences in the form, to maintain uniqueness.</P> <P>Unfortunately, HTML does not require uniqueness with field names in a <TT><FORM></TT>. This is typically the case with radio buttons. To define a radio group in an HTML form, the same name is used for the attribute of the input element. UML maintains a uniqueness constraint on attribute names; the use of array syntax can provide unique attribute names. The index of the arraybracketsis used to define an attribute's ordinal value.</P> <P>Some browsers allow <TT><INPUT></TT> elements to be defined and used outside a <TT><FORM></TT>. In these cases, the element maps to a stereotyped attribute of the «client page».</P> <H5> <TT><SELECT></TT> Element</H5> <P>The <TT><SELECT></TT> element is an input control that allows the user to select from a list of options. Each option is identified by a string, which is displayed in either a scrolling listlist boxor a pop-up menu, or combo box.</P> <P>This element maps directly to a class attribute whose data type is <TT>select</TT>. This attribute is typically an attribute of an «HTML form» class. Some browsers, such as Internet Explorer, however, allow <TT><SELECT></TT> elements to be defined outside the context of a form, in which case this element is an attribute of the «client page» class.</P> <P>The individual <TT><OPTION></TT> elements typically found as children of a <TT><SELECT></TT> element are not considered architecturally significant. The reason is that they are often dynamically generated or constructed as a result of domain knowledge, not for structural reasons. See Figure A-13.</P> <CENTER><H5>Figure A-13. An HTML <TT><FORM></TT> modeled with a «form» stereotype</H5><p><img border="0" width="500" height="293" data-cke-saved-src="books/2/141/1/html/2/files/afig13.jpg" src="books/2/141/1/html/2/files/afig13.jpg" alt="graphics/afig13.jpg"></p> </CENTER> <P>The <TT><SELECT></TT> element maps directly to an «HTML Form» class attribute with a data type of <TT>select</TT>. If the name attribute is not specified, one is derived from the stereotype name and the ordinal value of the number of <TT>select</TT> elements is specified in the form: <TT>Select1</TT>, <TT>Select2</TT>, and so on.</P> <P>The <TT><SELECT></TT> element also uses the core HTML attributes and the standard HTML event attributes (see the section <TT><cke:BODY></TT> Element Attributes). In addition to these attributes and tagged values, the <TT><SELECT></TT> element uses the following element attributes.</P> <P><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1" WIDTH="100%"> <COLGROUP span="3"> <TR> <TH align="left" valign="top"><span>Attribute</span></TH> <TH align="left" valign="top"><span>Description</span></TH> <TH align="left" valign="top"><span>Tagged Value</span></TH> </TR> <TR> <TD valign="top"><TT>disabled</TT></TD> <TD valign="top">Indicates that the control is initially rendered as disabled.</TD> <TD valign="top"><span><TT>disabled</TT></span></TD> </TR> <TR> <TD valign="top"><TT>size</TT></TD> <TD valign="top">Specifies the number of rows the list box should display. The value 1 indicates that the selection is rendered as a pop-up menu, or combo box.</TD> <TD valign="top"><span><TT>size</TT></span></TD> </TR> <TR> <TD valign="top"><TT>tabindex</TT></TD> <TD valign="top">A number indicating the sequence of this element within the tabbing order of all focusable elements in the document.</TD> <TD valign="top"><span><TT>tabindex</TT></span></TD> </TR> </COLGROUP> </TABLE></P> <P>The <TT><SELECT></TT> element also responds to the following events.</P> <P><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1" WIDTH="100%"> <COLGROUP span="3"> <TR> <TH align="left" valign="top"><span>Attribute</span></TH> <TH align="left" valign="top"><span>Description</span></TH> <TH align="left" valign="top"><span>Tagged Value</span></TH> </TR> <TR> <TD valign="top"><TT>onfocus</TT></TD> <TD valign="top">Occurs when an element receives focus either by the pointing device or by tabbing navigation.</TD> <TD valign="top"><span><TT>onfocus</TT></span></TD> </TR> <TR> <TD valign="top"><TT>onblur</TT></TD> <TD valign="top">Occurs when an element loses focus either by the pointing device or by tabbing navigation.</TD> <TD valign="top"><span><TT>onblur</TT></span></TD> </TR> <TR> <TD valign="top"><TT>onchange</TT></TD> <TD valign="top">Occurs when a control loses the input focus and its value has been modified since gaining focus.</TD> <TD valign="top"><span><TT>onchange</TT></span></TD> </TR> </COLGROUP> </TABLE></P> <H5> <TT><TEXTAREA></TT> Element</H5> <P>The <TT><TEXTAREA></TT> element is a multiline text input control that captures from the user text input that spans multiple lines or that is of sufficient length to make single-line text inputs unusable. <TT><TEXTAREA></TT> elements require an end tag, and their field value is the inner HTML text.</P> <P>The <TT><TEXTAREA></TT> element defines the attributes <TT>rows</TT> and <TT>cols</TT> to indicate the number of lines deep and the number of characters wide the text box should be. The <TT><TEXTAREA></TT> element maps directly to an «HTML form» class attribute with a data type of <TT>Textarea</TT>, or when not in the context of a form, as an attribute of the «client page». The <TT><TEXTAREA</TT> element supports the core HTML attributes and the standard HTML event attributes (see the section <TT><cke:BODY></TT> Element Attributes). In addition to these events, the <TT><TEXTAREA></TT> element responds to the following events.</P> <P><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1" WIDTH="100%"> <COLGROUP span="3"> <TR> <TH align="left" valign="top"><span>Attribute</span></TH> <TH align="left" valign="top"><span>Description</span></TH> <TH align="left" valign="top"><span>Tagged Value</span></TH> </TR> <TR> <TD valign="top"><TT>onfocus</TT></TD> <TD valign="top">Occurs when an element receives focus either by the pointing device or by tabbing navigation.</TD> <TD valign="top"><span><TT>onfocus</TT></span></TD> </TR> <TR> <TD valign="top"><TT>onblur</TT></TD> <TD valign="top">Occurs when an element loses focus either by the pointing device or by tabbing navigation.</TD> <TD valign="top"><span><TT>onblur</TT></span></TD> </TR> <TR> <TD valign="top"><TT>onselect</TT></TD> <TD valign="top">Occurs when a user selects some text in a text field.</TD> <TD valign="top"><span><TT>onselect</TT></span></TD> </TR> <TR> <TD valign="top"><TT>onchange</TT></TD> <TD valign="top">Occurs when a control loses the input focus and its value has been modified since gaining focus.</TD> <TD valign="top"><span><TT>onchange</TT></span></TD> </TR> </COLGROUP> </TABLE></P> <P>Additional <TT><TEXTAREA></TT> attributes and tagged values follow.</P> <P><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1" WIDTH="100%"> <COLGROUP span="3"> <TR> <TH align="left" valign="top"><span>Attribute</span></TH> <TH align="left" valign="top"><span>Description</span></TH> <TH align="left" valign="top"><span>Tagged Value</span></TH> </TR> <TR> <TD valign="top"><TT>disabled</TT></TD> <TD valign="top">Indicates that the control is initially rendered as disabled.</TD> <TD valign="top"><span><TT>disabled</TT></span></TD> </TR> <TR> <TD valign="top"><TT>size</TT></TD> <TD valign="top">Specifies the number of rows the list box should display. The value 1 indicates that the selection is rendered as a pop-up menu, or combo box.</TD> <TD valign="top"><span><TT>size</TT></span></TD> </TR> <TR> <TD valign="top"><TT>tabindex</TT></TD> <TD valign="top">A number indicating the sequence of this element within the tabbing order of all of the focusable elements in the document.</TD> <TD valign="top"><span><TT>tabindex</TT></span></TD> </TR> <TR> <TD valign="top"><TT>readonly</TT></TD> <TD valign="top">A Boolean value indicating that the control cannot be changed by the user.</TD> <TD valign="top"><span><TT>readonly</TT></span></TD> </TR> </COLGROUP> </TABLE></P> <H5> <TT><BUTTON></TT> Element</H5> <P>The <TT><BUTTON></TT> element is similar to the <TT><INPUT></TT> button but offers some additional control. This element maps directly to an «HTML form» attribute or, when not in the context of a form, the «client page». The data type of the «HTML Form» class attribute is <TT>"ButtonElement"</TT> to distinguish it from the <TT><INPUT></TT> element type <TT>"Button"</TT>.</P> <P>The <TT>name</TT> attribute of the element is used as the class attribute name. If no name is specified in HTML, one is derived from the stereotype and the ordinal value of the number of <TT><BUTTON></TT> elements defined in the context. The <TT>value</TT> attribute of the element is modeled as the attribute's initial value.</P> <P>This element supports the core HTML events and the standard HTML attributes and tagged values (see the section <TT><cke:BODY></TT> Element Attributes). <TT><BUTTON></TT> elements also support the following events.</P> <P><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1" WIDTH="100%"> <COLGROUP span="3"> <TR> <TH align="left" valign="top"><span>Attribute</span></TH> <TH align="left" valign="top"><span>Description</span></TH> <TH align="left" valign="top"><span>Tagged Value</span></TH> </TR> <TR> <TD valign="top"><TT>onfocus</TT></TD> <TD valign="top">Occurs when an element receives focus either by the pointing device or by tabbing navigation.</TD> <TD valign="top"><span><TT>onfocus</TT></span></TD> </TR> <TR> <TD valign="top"><TT>onblur</TT></TD> <TD valign="top">Occurs when an element loses focus either by the pointing device or by tabbing navigation.</TD> <TD valign="top"><span><TT>onblur</TT></span></TD> </TR> </COLGROUP> </TABLE></P> <P>This element supports the following additional element attributes. See Figure A-14.</P> <CENTER><H5>Figure A-14. An HTML <TT><BUTTON></TT> modeled as an attribute of a «form» class</H5><p><img border="0" width="500" height="173" data-cke-saved-src="books/2/141/1/html/2/files/afig14.jpg" src="books/2/141/1/html/2/files/afig14.jpg" alt="graphics/afig14.jpg"></p> </CENTER> <P><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1" WIDTH="100%"> <COLGROUP span="3"> <TR> <TH align="left" valign="top"><span>Attribute</span></TH> <TH align="left" valign="top"><span>Description</span></TH> <TH align="left" valign="top"><span>Tagged Value</span></TH> </TR> <TR> <TD valign="top"><TT>disabled</TT></TD> <TD valign="top">Indicates that the control is initially rendered as disabled.</TD> <TD valign="top"><span><TT>disabled</TT></span></TD> </TR> <TR> <TD valign="top"><TT>type</TT></TD> <TD valign="top">Defines the internal style of browser button. The allowable set of values is <TT>button | reset | submit</TT>; default value is <TT>button</TT>.</TD> <TD valign="top"><span><TT>type</TT></span></TD> </TR> <TR> <TD valign="top"><TT>tabindex</TT></TD> <TD valign="top">A number indicating the sequence of this element within the tabbing order of all focusable elements in the document.</TD> <TD valign="top"><span><TT>tabindex</TT></span></TD> </TR> <TR> <TD valign="top"><TT>readonly</TT></TD> <TD valign="top">A Boolean value indicating that the control cannot changed by the user.</TD> <TD valign="top"><span><TT>readonly</TT></span></TD> </TR> </COLGROUP> </TABLE></P> <H5> <TT><cke:OBJECT></TT> Element</H5> <P>The <TT><cke:OBJECT></TT> element supplies the browser with information to load and to render data types that are not natively supported by the browser. If the browser must load an external program, such as an applet or a plug-in, the information about the content that is to be rendered is contained by the object element, its attributes and, optionally, associated <TT><cke:PARAM></cke:PARAM></TT> elements nested inside it. Note that the <TT><APPLET></TT> and the <TT><cke:EMBED></cke:EMBED></TT> elements have been deprecated in favor of the <TT><cke:OBJECT></TT> element.</P> <P>The <TT>code</TT> attribute is used by IE to enable the <TT><cke:OBJECT></TT> element to load applets. It is hoped that in the future, the <TT>classid</TT> attribute will be the single source for identifying an object resource. Today, however, the <TT>classid</TT> attribute, with a <TT>classid</TT> protocol specified, typically indicates an ActiveX control resource. The <TT>code</TT> attribute typically specifies a Java class.</P> <P>The <TT><cke:OBJECT></TT> element is modeled as a stereotyped containment association from a «client page». The stereotype is «object». The element and the association support the core HTML attributes and the standard HTML event attributes (see the section <TT><cke:BODY></TT> Element Attributes). If the element's <TT>name</TT> attribute is specified, it is used as the association name. If the <TT>classid</TT> attribute specifies a <TT>classid:</TT> protocol resource, it is modeled as a relationship to an ActiveX (or COM) object. See Figure A-15.</P> <CENTER><H5>Figure A-15. <TT><cke:OBJECT></TT> element specifying an ActiveX control</H5><p><img border="0" width="500" height="174" data-cke-saved-src="books/2/141/1/html/2/files/afig15.jpg" src="books/2/141/1/html/2/files/afig15.jpg" alt="graphics/afig15.jpg"></p> </CENTER> <P>The <TT>clsid</TT> attribute is captured as a tagged value. This allows the developer to give a more meaningful name to the class after reverse engineering it, without losing important semantical information. The <TT>name</TT> attribute of the <TT><cke:OBJECT></TT> element is used as the supplier role name. If the component's <TT>«coclass»</TT><sup>[4]</sup> exists in the model with the <TT>«classid»</TT> specified, a directional containment association is drawn to the <TT>«coclass»</TT><span>,</span> instead of to the «ActiveX» stereotyped placeholder class.</P> <blockquote><p><sup>[4]</sup> This stereotype is part of Rational Rose's COM Profile.</p></blockquote> <P>The following element attributes are modeled as tagged values.</P> <P><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1" WIDTH="100%"> <COLGROUP span="3"> <TR> <TH align="left" valign="top"><span>Attribute</span></TH> <TH align="left" valign="top"><span>Description</span></TH> <TH align="left" valign="top"><span>Tagged Value</span></TH> </TR> <TR> <TD valign="top"><TT>classid</TT></TD> <TD valign="top">Specifies the location of an object's implementation via a URI. The attribute may be used with or as an alternative to the <TT>data</TT> attribute, depending on the type of object involved.</TD> <TD valign="top"><span><TT>classid</TT></span></TD> </TR> <TR> <TD valign="top"><TT>data</TT></TD> <TD valign="top">Specifies the location of the object's data: for instance, image data for objects defining images or, more generally, a serialized form of an object that can be used to recreate it. If given as a relative URI, it should be interpreted relative to the <TT>codebase</TT> attribute.</TD> <TD valign="top"><span><TT>data</TT></span></TD> </TR> <TR> <TD valign="top"><TT>codebase</TT></TD> <TD valign="top">Specifies the base path used to resolve relative URIs specified by the <TT>classid</TT>, <TT>data</TT>, and <TT>archive</TT> attributes. When absent, its default value is the base URI of the current document.</TD> <TD valign="top"><span><TT>codebase</TT></span></TD> </TR> <TR> <TD valign="top"><TT>type</TT></TD> <TD valign="top">Specifies the content type for the data specified by <TT>data</TT>. This attribute is optional but recommended when <TT>data</TT> is specified; it allows the user agent to avoid loading information for unsupported content types. If the value of this attribute differs from the HTTP content type returned by the server when the object is retrieved, the HTTP content type takes precedence.</TD> <TD valign="top"><span><TT>type</TT></span></TD> </TR> <TR> <TD valign="top"><TT>codetype</TT></TD> <TD valign="top">Specifies the content type of data expected when downloading the object specified by <TT>classid</TT>. This attribute is optional but recommended when <TT>classid</TT> is specified because it allows the user agent to avoid loading information for unsupported content types. When absent, it defaults to the value of the <TT>type</TT> attribute.</TD> <TD valign="top"><span><TT>codetype</TT></span></TD> </TR> <TR> <TD valign="top"><TT>archive</TT></TD> <TD valign="top">Used to specify a space-separated list of URIs for archives containing resources relevant to the object, which may include the resources specified by the <TT>classid</TT> and <TT>data</TT> attributes. Preloading archives will generally result in reduced load times for objects. Archives specified as relative URIs should be interpreted relative to the <TT>codebase</TT> attribute.</TD> <TD valign="top"><span><TT>archive</TT></span></TD> </TR> <TR> <TD valign="top"><TT>tabindex</TT></TD> <TD valign="top">Specifies the position of the current element in the tabbing order for the current document. This value must be a number between 0 and 32,767. User agents should ignore leading zeros.</TD> <TD valign="top"><span><TT>tabindex</TT></span></TD> </TR> </COLGROUP> </TABLE></P> <H5> <TT><cke:PARAM></cke:PARAM></TT> Element</H5> <P>The <TT><cke:PARAM></cke:PARAM></TT> element, always nested in either an <TT><cke:OBJECT></TT> or an <TT><APPLET></TT> element, identifies a parameter and a value that should be passed through to the object as it is being loaded. Each <TT><cke:PARAM></cke:PARAM></TT> element maps to an attribute of a special link class on the «object» association. This link class is stereotyped «object parameters». Each attribute of this class represents a <TT><cke:PARAM></cke:PARAM></TT> element. The <TT>name</TT> attribute of the element is mapped to the name of the attribute of the link class. Its <TT>value</TT> attribute is mapped to the initial value of the <TT>class</TT> attribute. There is no WAE definition for the link class's operations. The <TT>object</TT> tag that is modeled is shown in Figure A-16.</P> <CENTER><H5>Figure A-16. An HTML <TT><cke:OBJECT></TT> tag modeled as an association class</H5><p><img border="0" width="500" height="477" data-cke-saved-src="books/2/141/1/html/2/files/afig16.gif" src="books/2/141/1/html/2/files/afig16.gif" alt="graphics/afig16.gif"></p> </CENTER> <H5> <TT><APPLET></TT> Element</H5> <P>Because the <TT><APPLET></TT> element is being deprecated and the <TT><cke:OBJECT></TT> tag is now the preferred way to include an applet in a page, this element is modeled with the «object» association. See the preceding section, <cke:OBJECT> Element, for details.</P> <H5> <TT><!--{cke_protected}%3CSCRIPT%3E%3C%2FTT%3E%20Element%3C%2FH5%3E%0A%3CP%3EThis%20element%20is%20a%20container%20for%20lines%20of%20script%20code%2C%20typically%20written%20in%20JavaScript%2C%20although%20any%20scripting%20language%20can%20be%20defined.%20If%20another%20client-side%20scripting%20language%20is%20supported%2C%20the%20default%20scripting%20language%20should%20be%20a%20tagged%20value%20of%20the%20class.%20Additionally%2C%20the%20default%20scripting%20language%20should%20be%20a%20tagged%20value%20of%20all%20nonstereotyped%20attributes%20and%20operations%20of%20a%20%C2%ABclient%20page%C2%BB%20and%20a%20%C2%ABframeset%C2%BB%20stereotyped%20class.%3C%2FP%3E%0A%3CP%3EBecause%20it%20is%20not%20HTML%2C%20the%20inner%20text%20in%20a%20%3CTT%3E%3CSCRIPT%3E%3C%2FTT%3E%20element%20is%20parsed%20differently.%20The%20language%20of%20the%20script%20is%20identified%20by%20the%20language%20attribute%20of%20the%20%3CTT%3E%3CSCRIPT%3E%3C%2FTT%3E%20element%2C%20JavaScript%20being%20the%20most%20common%20default.%3C%2FP%3E%0A%3CP%3EThe%20only%20portions%20of%20script%20modeled%20in%20UML%20are%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3E%3CP%3EVariable%20declarations%3C%2FP%3E%3C%2FLI%3E%0A%3CLI%3E%3CP%3EFunction%20definitions%3C%2FP%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3EVariable%20declarations%20begin%20with%20the%20keyword%20%3CTT%3Evar%3C%2FTT%3E%2C%20followed%20by%20the%20variable%20name.%20Variables%20defined%20within%20the%20scope%20of%20the%20pagenot%20within%20a%20function%20definitionare%20reverse%20engineered%20into%20an%20attribute%20of%20the%20%C2%ABclient%20page%C2%BB%20class.%3C%2FP%3E%0A%3CP%3EJavaScript%20variables%20are%20typeless%2C%20so%20no%20type%20information%20is%20reverse%20engineered%20into%20UML.%20If%20the%20variable%20is%20initialized%20with%20a%20primitive%20value%2C%20this%20is%20reverse%20engineered%20as%20the%20initial%20value%20of%20the%20attribute.%20Variables%20initialized%20with%20the%20results%20of%20a%20statement%20are%20not%20reverse%20engineered%3A%20for%20example%2C%20%3CTT%3Evar%20foo%20%3D%20fcn()%3B%3C%2FTT%3E.%3C%2FP%3E%0A%3CP%3EWhen%20a%20variable%20is%20initialized%20with%20a%20JavaScript%20or%20DOM%20object%2C%20however%2C%20useful%20type%20information%20can%20be%20identified%20for%20the%20class%20attribute.%20For%20example%2C%20%3CTT%3EImage%3C%2FTT%3E%20is%20a%20standard%20object%20type%20available%20with%20most%20JavaScript%20implementations.%20The%20following%20statement%20should%20be%20reverse%20engineered%20into%20an%20attribute%20of%20type%20%3CTT%3EImage%3C%2FTT%3E%20or%20as%20an%20association%20to%20an%20%3CTT%3EImage%3C%2FTT%3E%20class%20with%20a%20role%20name%20of%20%3CTT%3Echart%3C%2FTT%3E%3A%3C%2FP%3E%0A%3Cpre%3E%0Avar%20chart%20%3D%20new%20Image()%3B%0A%3C%2Fpre%3E%0A%3CP%3EThe%20decision%20to%20reverse%20engineer%20into%20an%20attribute%20or%20an%20association%20should%20be%20a%20reverse-engineering%20option.%20For%20example%2C%20if%20the%20JavaScript%20framework%20library%20was%20loaded%20and%20the%20reverse-engineering%20option%20for%20reverse%20engineering%20known%20objects%20into%20associations%2C%20this%20statement%20would%20reverse%20engineer%20into%20an%20association%20with%20the%20role%20name%20of%20%3CTT%3Echart%3C%2FTT%3E.%3C%2FP%3E%0A%3CP%3EIt%20is%20possible%20to%20declare%20a%20variable%20without%20the%20%3CTT%3Evar%3C%2FTT%3E%20statement%20by%20simply%20using%20it.%20However%2C%20this%20type%20of%20variable%20declaration%20should%20not%20be%20modeled%20as%20an%20attribute%2C%20by%20default.%3C%2FP%3E%0A%3CP%3EA%20function%20is%20defined%20with%20the%20%3CTT%3Efunction%3C%2FTT%3E%20statement.%20The%20%3CTT%3Efunction%3C%2FTT%3E%20statement%20is%20followed%20by%20the%20name%20of%20the%20function%20and%20an%20optional%20list%20of%20comma-separated%20parameter%20names%20enclosed%20in%20parentheses.%20The%20body%20of%20function%20statements%2C%20enclosed%20in%20braces%2C%20follows.%3C%2FP%3E%0A%3CP%3EOnly%20functions%20defined%20in%20the%20scope%20of%20the%20page%3Csup%3E%5B5%5D%3C%2Fsup%3E%20need%20be%20modeled.%20In%20JavaScript%201.2%2C%20a%20function%20can%20be%20defined%20in%20the%20scope%20of%20another%20function.%20This%20embedded%20function%20is%20not%20usually%20modeled%3B%20nor%20are%20functions%20defined%20in%20the%20scope%20of%20an%20%3CTT%3Eif%2Felse%3C%2FTT%3E%20statement%20block%2C%20%3CTT%3Edo%2Fwhile%3C%2FTT%3E%20statement%20block%2C%20%3CTT%3Efor%3C%2FTT%3E%20statement%20block%2C%20%3CTT%3Ewhile%3C%2FTT%3E%20statement%20block%2C%20or%20%3CTT%3Eswitch%3C%2FTT%3E%20statement%20block.%20The%20only%20functions%20modeled%20are%20those%20declared%20in%20the%20%3CTT%3Eglobal%20object%3C%2FTT%3E%2C%3Csup%3E%5B6%5D%3C%2Fsup%3E%20where%20the%20reference%20%3CTT%3Ethis%3C%2FTT%3E%20resolves%20to%20the%20global%20object%2C%20or%20within%20a%20statement%20block%20or%20a%20compound%20statementbrace-enclosed%20collection%20of%20statementsof%20the%20global%20object.%20UML%20cannot%20model%20nested%20functions%20easily.%20All%20functions%20declared%20in%20this%20global%20object%20scope%20reverse%20engineer%20into%20an%20operation%20of%20the%20%C2%ABclient%20page%C2%BB.%3C%2FP%3E%0A%3Cblockquote%3E%3Cp%3E%3Csup%3E%5B5%5D%3C%2Fsup%3E%20JavaScript%20global%20object%20scope.%3C%2Fp%3E%3C%2Fblockquote%3E%0A%3Cblockquote%3E%3Cp%3E%3Csup%3E%5B6%5D%3C%2Fsup%3E%20See%20Section%204.6.1%20in%20David%20Flanagan%2C%20%3Cspan%3EJavaScript%3A%20The%20Definitive%20Reference%3C%2Fspan%3E%20(Sebastopol%2C%20CA%3A%20O'Reilly%20%26%20Assoociates%2C%201998).%3C%2Fp%3E%3C%2Fblockquote%3E%0A%3CP%3EThe%20modeling%20of%20dynamically%20assigned%20event%20handlers%20is%20not%20appropriate%20for%20a%20structural%20model.%20For%20example%2C%20the%20following%20is%20%3Cspan%3Enot%3C%2Fspan%3E%20modeled%20in%20structural%20diagrams%3A%3C%2FP%3E%0A%3Cpre%3E%0A%3Cscript%20...%20%3E%0A%20function%20initialize()%20%7B%20%2F*%20do%20something%20*%2F%20%7D%0A%20..%0A%20onload%20%3D%20initialize%3B%0A%3C%2Fscript%3E--> </pre> <P>See the JavaScript reference document for a complete discussion of JavaScript syntax, the rules for comments, and string definition escape characters.</P> <P>The following fragment reverse engineers into a single «client page» class with a single operation called <TT>imageChange</TT>. The operation also defines four typeless parameters (not seen in Figure A-17).</P> <pre> <!--{cke_protected}%3CSCRIPT%20LANGUAGE%3D%22JavaScript%22%3E%0A%2F%2FBelow%20is%20the%20code%20that%20pre-loads%20the%20graphics%0A%7B%0A%2F%2FThese%20are%20the%20large%20images%0Avar%20alt0%20%3D%20new%20Image()%3B%0Aalt0.src%3D%22%7B%7Bxpath%7D%7Dwhite.gif%22%3B%0A%0A%2F%2FThese%20are%20the%20button%20images%0Avar%20alt1%20%3D%20new%20Image()%3B%0Aalt1.src%3D%22%7B%7Bxpath%7D%7Dhg_banner.gif%22%3B%0Avar%20alt2%20%3D%20new%20Image()%3B%0Aalt2.src%3D%22%7B%7Bxpath%7D%7Djg_banner.gif%22%3B%0A%0A%2F%2FThese%20are%20the%20first%20button%20graphics%0Avar%20graphic1%20%3D%20new%20Image()%3B%0Agraphic1.src%3D%22%7B%7Bxpath%7D%7Dbut1.gif%22%3B%0Agraphic1on%20%3D%20new%20Image()%3B%0Agraphic1on.src%3D%22%7B%7Bxpath%7D%7Dbut1b.gif%22%3B%0A%0A%2F%2FThese%20are%20the%20second%20button%20graphics%0A%0Avar%20graphic2%20%3D%20new%20Image()%3B%0Agraphic2.src%3D%22%7B%7Bxpath%7D%7Dbut2.gif%22%3B%0Agraphic2on%20%3D%20new%20Image()%3B%0Agraphic2on.src%3D%22%7B%7Bxpath%7D%7Dbut2b.gif%22%3B%20%7D%0A%0A%2F%2FThis%20is%20the%20function%20that%20calls%20for%20the%20change%20in%20the%20button's%0Afunction%20imageChange(imageID%2CimageName%2CimageID2%2CimageName2)%20%7B%0A%20document.images%5BimageID%5D.src%20%3D%20eval(imageName%20%2B%20%22.src%22)%3B%0A%20document.images%5BimageID2%5D.src%20%3D%20eval(imageName2%20%2B%20%22.src%22)%3B%0A%7D%0A%0A%3C%2FSCRIPT%3E--> ... <A data-cke-saved-HREF="http://www.htmlgoodies.com" HREF="http://www.htmlgoodies.com" onMouseOver="imageChange('global','alt1','one','graphic1on')" onMouseOut="imageChange('global','alt0','one','graphic1')"> <IMG data-cke-saved-src="books/2/141/1/html/2/but1.gif" src="books/2/141/1/html/2/but1.gif" BORDER="0" data-cke-saved-NAME="one" NAME="one"></A> <A data-cke-saved-HREF="http://www.javagoodies.com" HREF="http://www.javagoodies.com" onMouseOver="imageChange('global','alt2','two','graphic2on')" onMouseOut="imageChange('global','alt0','two','graphic2')"> <IMG data-cke-saved-src="books/2/141/1/html/2/but2.gif" src="books/2/141/1/html/2/but2.gif" BORDER="0" data-cke-saved-NAME="two" NAME="two"></A> <IMG data-cke-saved-src="books/2/141/1/html/2/white.gif" src="books/2/141/1/html/2/white.gif" WIDTH="130" HEIGHT="130" data-cke-saved-NAME="global" NAME="global"> </pre> <CENTER><H5>Figure A-17. JavaScript variables modeled as associations</H5><p><img border="0" width="500" height="252" data-cke-saved-src="books/2/141/1/html/2/files/afig17.gif" src="books/2/141/1/html/2/files/afig17.gif" alt="graphics/afig17.gif"></p> </CENTER> <P>JavaScript variables can be modeled as attributes or as associations. Semantically, the two are the same; however, diagrams modeled as attributes make the variables more compact, yet the connections to the common JavaScript framework are not immediately apparent. The preceding code modeled with associations is shown in Figure A-17. If the variables are modeled as attributestreated as primitivesthe class of Figure A-18 is drawn.</P> <CENTER><H5>Figure A-18. JavaScript variables as attributes</H5><p><img border="0" width="353" height="456" data-cke-saved-src="books/2/141/1/html/2/files/afig18.gif" src="books/2/141/1/html/2/files/afig18.gif" alt="graphics/afig18.gif"></p> </CENTER> <P>Note that the <TT>Image</TT> class definition comes from the JavaScript Object Library Framework. The «read only» stereotype is used only by this framework and is not part of the WAE.</P> <P>All reverse-engineered operations and attributes are by default public because the DOM does not support encapsulation.</P> <P>A <TT><!--{cke_protected}%3CSCRIPT%3E%3C%2FTT%3E%20element%20may%20specify%20an%20%3CTT%3Esrc%3C%2FTT%3E%20attribute.%20If%20this%20attribute%20is%20set%2C%20the%20URL%20resolves%20to%20a%20file%20with%20the%20%3CTT%3E.js%3C%2FTT%3E%20extension%2C%20required%20in%20HTML%204.%20Then%20a%20%C2%ABscript%20library%C2%BB%20component%20is%20expressed%20in%20the%20component%20view%2C%20and%20a%20%C2%ABscript%20library%C2%BB%20stereotyped%20class%20is%20drawn%20in%20the%20logical%20view.%3C%2FP%3E%0A%3CP%3EA%20%C2%ABscript%C2%BB%20stereotyped%20association%20is%20created%20from%20the%20%C2%ABclient%20page%C2%BB%20class%20and%20the%20%C2%ABscript%20library%C2%BB%20class.%20All%20JavaScript%20%3CTT%3Evar%3C%2FTT%3E%20and%20function%20definitions%20are%20reverse%20engineered%20into%20the%20%C2%ABscript%20library%C2%BB%20class%2C%20not%20the%20%C2%ABclient%20page%C2%BB.%20See%20Figure%20A-19.%3C%2FP%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-19.%20Client-side%20JavaScript%20includes%3C%2FH5%3E%3Cp%3E%3Cimg%20border%3D%220%22%20width%3D%22500%22%20height%3D%22271%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fafig19.gif%22%20alt%3D%22graphics%2Fafig19.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%3CH5%3E%20%3CTT%3E%3CFRAMESET%3E%3C%2FTT%3E%20Element%3C%2FH5%3E%0A%3CP%3ESetting%20the%20%3CTT%3Eanchor%3C%2FTT%3E%20element%20attribute%20%3CTT%3Etarget%3C%2FTT%3E%20indicates%20that%20the%20results%20of%20the%20page%20request%20should%20be%20rendered%20in%20a%20specific%20browser%20frame%20or%20window.%20The%20frame%20or%20window%20is%20referenced%20by%20name%2C%20with%20the%20following%20names%20reserved.%3C%2FP%3E%0A%3CP%3E%3CTABLE%20BORDER%3D%221%22%20CELLSPACING%3D%220%22%20CELLPADDING%3D%221%22%20WIDTH%3D%22100%25%22%3E%0A%3CCOLGROUP%20span%3D%222%22%3E%0A%3CTR%3E%0A%3CTH%20align%3D%22left%22%20valign%3D%22bottom%22%3E%3Cspan%3EReserved%20Name%3C%2Fspan%3E%3C%2FTH%3E%0A%3CTH%20align%3D%22left%22%20valign%3D%22bottom%22%3E%3Cspan%3EDescription%3C%2Fspan%3E%3C%2FTH%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20valign%3D%22top%22%3E%3CTT%3E_blank%3C%2FTT%3E%3C%2FTD%3E%0A%3CTD%20valign%3D%22top%22%3EThe%20user%20agent%20should%20load%20the%20designated%20document%20in%20a%20new%2C%20unnamed%20window.%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20valign%3D%22top%22%3E%3CTT%3E_sel%3C%2FTT%3E%3C%2FTD%3E%0A%3CTD%20valign%3D%22top%22%3EThe%20user%20agent%20should%20load%20the%20document%20in%20the%20same%20frame%20as%20the%20element%20that%20refers%20to%20this%20target.%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20valign%3D%22top%22%3E%3CTT%3E_parent%3C%2FTT%3E%3C%2FTD%3E%0A%3CTD%20valign%3D%22top%22%3EThe%20user%20agent%20should%20load%20the%20document%20into%20the%20immediate%20%3CTT%3E%3CFRAMESET%3E%3C%2FTT%3E%20parent%20of%20the%20current%20frame.%20This%20value%20is%20equivalent%20to%20%3CTT%3E_self%3C%2FTT%3E%20if%20the%20current%20frame%20has%20no%20parent.%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%3E%0A%3CTD%20valign%3D%22top%22%3E%3CTT%3E_top%3C%2FTT%3E%3C%2FTD%3E%0A%3CTD%20valign%3D%22top%22%3EThe%20user%20agent%20should%20load%20the%20document%20into%20the%20full%2C%20original%20window%2C%20thereby%20canceling%20all%20other%20frames.%20This%20value%20is%20equivalent%20to%20%3CTT%3E_self%3C%2FTT%3E%20if%20the%20current%20frame%20has%20no%20parent.%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3C%2FCOLGROUP%3E%0A%3C%2FTABLE%3E%3C%2FP%3E%0A%3CP%3EThe%20%3CTT%3Etarget%3C%2FTT%3E%20parameter%20is%20typically%20used%20in%20the%20context%20of%20a%20%3CTT%3Eframeset%3C%2FTT%3E.%20The%20only%20other%20use%20is%20when%20the%20target%20represents%20a%20separate%20window%2C%20or%20browser%20instance.%20In%20either%20case%2C%20an%20anchor%20link%20with%20a%20%3CTT%3Etarget%3C%2FTT%3E%20attribute%20specified%20indicates%20a%20%3Cspan%3Etargeted%20link%3C%2Fspan%3E.%20In%20the%20case%20of%20a%20targeted%20link%2C%20the%20anchor%20element%20is%20modeled%20by%20a%20standard%20%C2%ABlink%C2%BB%20association%20to%20a%20%C2%ABtargeted%20link%C2%BB%20stereotyped%20%3Cspan%3En%3C%2Fspan%3E-ary%20association.%20The%20%C2%ABtargeted%20link%C2%BB%20association%20connects%20a%20link%20request%20with%20a%20resource%20to%20a%20target.%20For%20example%2C%20a%20%3CTT%3Ebook.html%3C%2FTT%3E%20fragment%20follows%3A%3C%2FP%3E%0A%3Cpre%3E%0A%3Cframeset%20cols%3D%22150%2C*%22%3E%0A%20%3Cframe%20src%3D%22%7B%7Bxpath%7D%7Dtoc.html%22%3E%0A%20%3Cframe%20name%3D%22content%22%20src%3D%22%7B%7Bxpath%7D%7Djavascript%3Aparent.blank()%22%3E%0A%3C%2Fframeset%3E%0A%3C%2Fpre%3E%0A%3CP%3EA%20%3CTT%3Etoc.html%3C%2FTT%3E%20fragment%20follows%3A%3C%2FP%3E%0A%3Cpre%3E%0A%3Ca%20href%3D%22chap1.html%22%20target%3D%22content%22%3EChapter%201%3C%2Fa%3E%0A%3Ca%20href%3D%22chap2.html%22%20target%3D%22content%22%3EChapter%202%3C%2Fa%3E%0A%3Ca%20href%3D%22chap3.html%22%20target%3D%22content%22%3EChapter%203%3C%2Fa%3E%0A%3C%2Fpre%3E%0A%3CP%3EThe%20resulting%20UML%20model%20is%20expressed%20in%20the%20class%20diagram%20of%20Figure%20A-20.%3C%2FP%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-20.%20Class%20diagram%20of%20%3CTT%3E%3CFRAMESET%3E%3C%2FTT%3E%3C%2FH5%3E%3Cp%3E%3Cimg%20border%3D%220%22%20width%3D%22500%22%20height%3D%22457%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fafig20.gif%22%20alt%3D%22graphics%2Fafig20.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%3CP%3EModeling%20these%20HTML%20fragments%20creates%20a%20%C2%ABframeset%C2%BB%20stereotyped%20class%20named%20%3CTT%3EBook%3C%2FTT%3E%20that%20maps%20directly%20to%20the%20%3CTT%3E%3CFRAMESET%3E%3C%2FTT%3E%20element.%20The%20name%20of%20the%20%C2%ABframeset%C2%BB%20class%20is%20derived%20from%20the%20page%20name.%20The%20frameset%20contains%20two%20elements%3A%20a%20%3CTT%3Etarget%3C%2FTT%3E%20named%3CTT%3E%20content%3C%2FTT%3E%20and%20a%20%C2%ABclient%20page%C2%BB%20named%20%3CTT%3Etoc.html%3C%2FTT%3E.%3C%2FP%3E%0A%3CP%3EBecause%20only%20the%20second%20%3CTT%3E%3Cframe%3E%3C%2FTT%3E%20defines%20a%20name%2C%20only%20one%20%C2%ABtarget%C2%BB%20stereotyped%20class%20is%20identified.%20This%20can%20be%20confusing%20since%20two%20frames%20are%20defined.%20The%20%3CTT%3E%3CFRAME%3E%3C%2FTT%3E%20element%20maps%20to%20the%20containment%20relationship%2C%20not%20to%20any%20stereotyped%20class.%20Thus%2C%20if%20the%20frameset%20defines%20four%20frame%20elements%2C%20there%20should%20be%20four%20aggregations%20from%20the%20%C2%ABframeset%C2%BB%20class.%20This%20example%20also%20demonstrates%20how%20the%20%3CTT%3Esrc%3C%2FTT%3E%20might%20be%20used%20to%20define%20a%20non-HTTP%20URI.%20The%20effective%20behavior%20is%20to%20ensure%20that%20the%20content%20frame%20is%20blank%20when%20loaded.%20In%20this%20situation%2C%20the%20%3CTT%3Esrc%3C%2FTT%3E%20attribute%20reverse%20engineers%20into%20the%20%3CTT%3Esrc%3C%2FTT%3E%20tagged%20value%20of%20the%20%C2%ABtarget%C2%BB%20class.%3C%2FP%3E%0A%3CP%3EIn%20general%2C%20if%20the%20%3CTT%3E%3CFRAME%3E%3C%2FTT%3E%20defines%20a%20name%2C%20this%20containment%20relationship%20is%20to%20a%20%C2%ABtarget%C2%BB%20stereotyped%20class%20of%20that%20same%20name.%20If%20the%20frame%20defines%20only%20an%20%3CTT%3Esrc%3C%2FTT%3E%20attribute%2C%20with%20a%20qualified%20HTTP%20URI%2C%20the%20containment%20relationship%20points%20directly%20to%20the%20page%20that%20the%20URL%20points%20to%3A%20%C2%ABclient%20page%C2%BB%2C%20%C2%ABserver%20page%C2%BB%2C%20or%20even%20another%20%C2%ABframeset%C2%BB.%20If%20the%20%3CTT%3E%3CFRAME%3E%3C%2FTT%3E%20defines%20both%20%3CTT%3Ename%3C%2FTT%3E%20and%20%3CTT%3Esrc%3C%2FTT%3E%20attributes%2C%20this%20maps%20to%20a%20%C2%ABtarget%C2%BB%20stereotyped%20class%20with%20an%20additional%20%C2%ABsrc%C2%BB%20stereotyped%20directional%20association%20to%20the%20page%3A%20%C2%ABclient%20page%C2%BB%2C%20%C2%ABserver%20page%C2%BB%2C%20or%20%C2%ABframeset%C2%BB.%20When%20the%20%3CTT%3Esrc%3C%2FTT%3E%20attribute%20points%20to%20a%20non-HTTP%20URI%2C%20no%20associations%20are%20created%2C%20and%20the%20value%20of%20the%20%3CTT%3Esrc%3C%2FTT%3E%20is%20captured%20only%20in%20a%20tagged%20value.%3C%2FP%3E%0A%3CP%3EFigure%20A-21%20shows%20two%20code%20samplesfor%20%3CTT%3Eworkspace.html%3C%2FTT%3E%20and%20%3CTT%3Emenu.html%3C%2FTT%3E%2C%20respectively%2C%20and%20a%20diagram%20of%20the%20two%20framesets.%3C%2FP%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-21.%20Framesets%20with%20initial%20content%20specified%3C%2FH5%3E%3Cp%3E%3Cimg%20border%3D%220%22%20width%3D%22500%22%20height%3D%22468%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fafig21.gif%22%20alt%3D%22graphics%2Fafig21.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%3CP%3EIn%20this%20example%2C%20both%20frames%20define%20%3CTT%3Esrc%3C%2FTT%3E%20attributes%2C%20one%20to%20a%20dynamic%20page%20that%20has%20a%20parameter%20defined.%20Only%20two%20unique%20%C2%ABlink%C2%BB%20associations%20are%20detected%20in%20the%20menu%20%C2%ABclient%20page%C2%BB.%20Both%20are%20to%20the%20detail%20%C2%ABserver%20page%C2%BB.%20Because%20they%20reference%20different%20targets%2C%20however%2C%20they%20are%20modeled%20by%20two%20separate%20%C2%ABlink%C2%BB%20associations.%3C%2FP%3E%0A%3CH5%3E%20%3CTT%3E%3CFRAME%3E%3C%2FTT%3E%20Element%3C%2FH5%3E%0A%3CP%3ESee%20the%20section%20%3CFRAMESET%3E%20Element.%3C%2FP%3E%0A%3CH5%3E%20%3CTT%3E%3CIFRAME%3E%3C%2FTT%3E%20Element%3C%2FH5%3E%0A%3CP%3EThe%20%3CTT%3E%3CIFRAME%3E%3C%2FTT%3E%20element%20creates%20an%20in-line%20frame%20within%20the%20natural%20flow%20of%20a%20document's%20content.%20This%20frame%20is%20a%20rectangular%20space%20in%20which%20another%20page%20is%20loaded.%3C%2FP%3E%0A%3CP%3EAn%20%3CTT%3E%3CIFRAME%3E%3C%2FTT%3E%20element%20is%20reverse%20engineered%20into%20a%20containment%20relationship%20stereotyped%20%C2%ABiframe%C2%BB.%20The%20width%20and%20height%20attributes%20are%20pretty%20much%20a%20presentation%20issue%20and%20can%2C%20optionally%2C%20be%20captured%20in%20tagged%20values.%3C%2FP%3E%0A%3CP%3EBecause%20a%20separate%20page%20occupies%20the%20contents%20of%20an%20%3CTT%3E%3CIFRAME%3E%3C%2FTT%3E%2C%20the%20frame%20itself%20is%20not%20responsible%20for%20responding%20to%20any%20events.%20The%20only%20applicable%20element%20attributes%20and%20associated%20tagged%20values%20are%20the%20%3CTT%3Ewidth%3C%2FTT%3E%20and%20%3CTT%3Eheight%3C%2FTT%3E%20attributes%20and%20the%20core%20HTML%20attributes%20of%20the%20section%20%3CTT%3E%3CBODY%3E%3C%2FTT%3E%20Element%20Attributes.%20See%20Figure%20A-22.%3C%2FP%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-22.%20The%20%3CTT%3E%3CIFRAME%3E%3C%2FTT%3E%20element%3C%2FH5%3E%3Cp%3E%3Cimg%20border%3D%220%22%20width%3D%22500%22%20height%3D%22135%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fafig22.gif%22%20alt%3D%22graphics%2Fafig22.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%3CP%3EIf%20the%20%3CTT%3Ename%3C%2FTT%3E%20attribute%20was%20specified%20in%20the%20%3CTT%3E%3CIFRAME%3E%3C%2FTT%3E%20element%2C%20this%20represents%20a%20referenceable%20target%20that%20can%20be%20the%20result%20of%20a%20targeted%20link.%20In%20this%20situation%2C%20a%20%C2%ABtarget%C2%BB%20stereotyped%20class%20is%20reverse%20engineered%2C%20and%20an%20%C2%ABsrc%C2%BB%20association%20is%20created%20from%20the%20target%20and%20the%20intial%20page%20to%20load%20in%20the%20frame.%20See%20Figure%20A-23.%3C%2FP%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-23.%20An%20HTML%20%3CTT%3E%3CIFRAME%3E%3C%2FTT%3E%20element%20modeled%20with%20a%20stereotyped%20containment%20association%3C%2FH5%3E%3Cp%3E%3Cimg%20border%3D%220%22%20width%3D%22500%22%20height%3D%22282%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fafig23.gif%22%20alt%3D%22graphics%2Fafig23.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%0A%3C%2Ftd%3E%0A%3C%2Ftr%3E%0A%3C%2Ftable%3E%0A%3Ctd%3E%3C%2Ftd%3E%3C!%2D%2Dpage%3D115%20end%2D%2D%3E%3C!%2D%2Dpage%3D116%20start%2D%2D%3E%3Cbr%3E%0A%3Ctable%20width%3D%22100%25%22%20border%3D%220%22%20cellspacing%3D%220%22%20cellpadding%3D%220%22%3E%0A%3Ctr%3E%0A%3Ctd%20valign%3D%22top%22%3E%3CH3%3EUML%20to%20HTML%3C%2FH3%3E%09%09-->