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

«HTML Form» Attribute Type	HTML Element
text
password
checkbox
radio
submit
reset
file
hidden
image
button
button element
textarea	</TT></TD> </TR> <TR> <TD valign="top"><TT>select</TT></TD> <TD valign="top"><TT><select></TT></TD> </TR> </COLGROUP> </TABLE></P> <P>All «HTML Form» attributes share the following tagged values and element attributes that are forward engineered.</P> <P><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="1" WIDTH="100%"> <COLGROUP span="2"> <TR> <TH align="left" valign="top"><span>Tagged Value</span></TH> <TH align="left" valign="top"><span>Element Attribute</span></TH> </TR> <TR> <TD valign="top"><span><TT>id</TT></span></TD> <TD valign="top"><TT>Id</TT></TD> </TR> <TR> <TD valign="top"><span><TT>name</TT></span></TD> <TD valign="top"><TT>Name</TT></TD> </TR> <TR> <TD valign="top"><span><TT>disabled</TT></span></TD> <TD valign="top"><TT>Disabled</TT></TD> </TR> <TR> <TD valign="top"><span><TT>tabindex</TT></span></TD> <TD valign="top"><TT>Tabindex</TT></TD> </TR> </COLGROUP> </TABLE></P> <P>For any attribute that specifies a single number in array syntax at the end of its name, such as <TT>[2]</TT>, the array syntax is stripped from the name before it is used as an element name. Remember, this syntax was used to resolve the issue of attribute name uniqueness in UML, when it isn't required in HMTL.</P> <P>If the attribute name is followed by <TT>"[0..n]"</TT>, the attributes should have multiple instances in the form, probably to be determined at runtime.</P> <pre> ... <form name="stateoption" method=POST action="setstate"> <% for(int i=0; i<states.count(); i++ ){ String name = states.getName(i); String value = states.getValue(i); %> <input type="checkbox" data-cke-saved-name="state" name="state" value="<%=value%>"><%=name%><br> <% } %> <input type="submit" value="Set State"> </form> </pre> <P>A brief description of the forward-engineering actions for each value «HTML Form» attribute type follows.</P> <UL> <LI><p> <TT>text</TT>: An <TT><INPUT></TT> element is created with the <TT>type</TT> attribute set to <TT>"text"</TT>. If the class attribute has an initial value specified, it sets the element's <TT>value</TT> attribute. If the class attribute's tagged values for <TT>maxlength</TT> and <TT>size</TT> are specified, they are forward engineered as element attributes.</p> </LI> <LI><p> <TT>password</TT>: An <TT><input></TT> element is created with the <TT>type</TT> attribute set to <TT>"password"</TT>. If the class attribute's tagged values for <TT>maxlength</TT> and <TT>size</TT> are specified, they are coded as element attributes.</p> </LI> <LI><p> <TT>Checkbox</TT>: An <TT><input></TT> element is created with the <TT>type</TT> attribute set to <TT>"checkbox"</TT>. If the class attribute's tagged value for <TT>readonly</TT> is set to true, it is coded as an element attribute, or one without a specified value. If the class attribute's tagged value <TT>checked</TT> is set to <TT>true</TT>, the attribute <TT>CHECKED</TT> is coded as a valueless element attribute.</p> </LI> <LI><p> <TT>Radio</TT>: An <TT><input></TT> element is created with the <TT>type</TT> attribute set to <TT>"radio"</TT>. If the class attribute's tagged value for <TT>readonly</TT> is set to <TT>true</TT>, it is coded as an element attribute, or one without a specified value. <span>Optional feature:</span> The first time this is forward engineered, the attribute value appends the tag.</p> </LI> <LI><p> <TT>Submit</TT>: An <TT><input></TT> element is created with the <TT>type</TT> attribute set to <TT>"submit"</TT>. If the class attribute's tagged value for <TT>disabled</TT> is specified, it is coded as an element attribute. If the class attribute has an initial value specified, it sets the element's <TT>value</TT> attribute.</p> </LI> <LI><p> <TT>Reset</TT>: An <TT><input></TT> element is created with the <TT>type</TT> attribute set to <TT>"reset"</TT>. If the class attribute's tagged value for <TT>disabled</TT> is specified, it is coded as an element attribute. If the class attribute has an initial value specified, it sets the element's <TT>value</TT> attribute.</p> </LI> <LI><p> <TT>FileUpload</TT>: An <TT><input></TT> element is created with the <TT>type</TT> attribute set to <TT>"file"</TT>. If the class attribute's tagged value for <TT>disabled</TT> is specified, it is coded as a valueless element attribute.</p> </LI> <LI><p> <TT>Hidden</TT>: An <TT><input></TT> element is created with the <TT>type</TT> attribute set to <TT>"hidden"</TT>. If the class attribute has an initial value specified, it sets the element's <TT>value</TT> attribute.</p> </LI> <LI><p> <TT>Image</TT>: An <TT><input></TT> element is created with the <TT>type</TT> attribute set to <TT>"image"</TT>. If the class attribute's tagged value for <TT>disabled</TT> is specified, it is coded as a valueless element attribute.</p> </LI> <LI><p> <TT>Button</TT>: An <TT><input></TT> element is created with the <TT>type</TT> attribute set to <TT>"button"</TT>. If the class attribute's tagged value for <TT>disabled</TT> is specified, it is coded as a valueless element attribute.</p> </LI> <LI><p> <TT><button></TT>: A <TT><button></TT> element is created. By default, a closing tag is created for this element, and the element's value is used as the inner text. If the class attribute's tagged value for <TT>disabled</TT> is specified, it is coded as a valueless element attribute. The tagged value for <TT>type</TT> sets the element's button type attribute. The default is <TT>"button"</TT>. The allowable values are <TT>"button"</TT>, <TT>"submit"</TT>, and <TT>"reset"</TT>.</p> </LI> <LI><p> <TT>Textarea</TT>: A <TT><textarea></TT> element is created. A closing tag is required for this element, and the element's initial value is used as the initial inner text. This element is sensitive to white space in the inner text, so when forward engineering this element, do not add character returns or line feeds in the inner text. If the class attribute's tagged value for <TT>disabled</TT> is specified, it is coded as a valueless element attribute. The tagged values for <TT>rows</TT> and <TT>cols</TT> are generated as attributes in the element's opening tag.</p> </LI> <LI><p> <TT>Select</TT>: A <TT><select></TT> element is created. A closing tag is required for this element. If the class attribute's tagged value for <TT>disabled</TT> is specified, it is forward engineered as a valueless element attribute. If the class attribute's tagged value for <TT>multiple</TT> is set to <TT>true</TT>, the valueless element attribute <TT>MULTIPLE</TT> is coded. The tagged value for <TT>size</TT> is coded as an attribute in the element's opening tag.</p> </LI> </UL> <H5> «Targeted Link» <span>n</span>-ary Association</H5><img border="0" width="29" height="29" data-cke-saved-src="books/2/141/1/html/2/files/targetedlink.gif" src="books/2/141/1/html/2/files/targetedlink.gif" alt="graphics/targetedlink.gif"> <P>A «targeted link» <span>n</span>-ary association acts as a ternary association that connects a requestable Web pagea «client page», a «server page», or a «frameset»to a «target» class. All valid «targeted link» classes have two directional associations: one to the requestable page class«client page», «server page» or «frameset»and one to a «target» stereotyped class. The target class represents a named frame in a frameset or a separate browser window. The page class represents the content that is to be requested for the target.</P> <P>This class does not directly map to an element of HTML code; rather, the «link» association that uses it does. A «link» association that points to a «targeted link» class uses the name of the target class as the value for the target attribute in the anchor element. The <TT>href</TT> is specified by the URL that realizes the page that the «targeted link» class points to. See Figure A-28.</P> <CENTER><H5>Figure A-28. Targeted link</H5><p><img border="0" width="500" height="240" data-cke-saved-src="books/2/141/1/html/2/files/afig28.gif" src="books/2/141/1/html/2/files/afig28.gif" alt="graphics/afig28.gif"></p> </CENTER> <H5> «Target» Class</H5><img border="0" width="140" height="134" data-cke-saved-src="books/2/141/1/html/2/files/target.gif" src="books/2/141/1/html/2/files/target.gif" alt="graphics/target.gif"> <P>A target class represents a named window on the client and is either a frame in a frameset or a window in another browser instance. When contained by a «frameset» class, the target forward engineers into the <TT>name</TT> attribute of a <TT><FRAME></TT> element. The <TT>name</TT> attribute is set to the class name of the «target» class.</P> <P>If this class has an «src» stereotyped association to a page classa «client page», a «server page», or a «frameset», this translates to the <TT>src</TT> attribute of the <TT><FRAME></TT> element. The value is set to the URL that the page class resolves to.</P> <P>Target classes can be contained only by a «frameset» class. Therefore, the <TT><FRAME></TT> element is always a child element of a <TT><FRAMESET></TT>.</P> <P>When not contained by a frameset, the target represents an independent window. In this case, it is used only by the «link» forward-engineering operation and does not contribute to a code itself.</P> <P>See the sections «Frameset» Class and «Targeted Link» Class for examples.</P> <H5> «Frameset» Class</H5><img border="0" width="134" height="135" data-cke-saved-src="books/2/141/1/html/2/files/framset.gif" src="books/2/141/1/html/2/files/framset.gif" alt="graphics/framset.gif"> <P>A frameset is a container of frames. The <TT><FRAMESET></TT> element defines a set of rectangular regions within a browser window. In the logical view, a «frameset» class is a specialization of a «client page» and therefore has the potential to have the same code that a «client page» does, although this is typically not the case. A «frameset» codes to a <TT><FRAMESET></TT> element just inside the opening <TT><cke:BODY></TT> tag. In a frames-capable browser, the rendered page becomes a frameset. In a non-frames-capable browser, the rendered page is the rest of the content in the <TT><cke:BODY></TT> element.</P> <P><TT><FRAMESET></TT> elements may be nested. Each <TT><FRAMESET></TT> element has a corresponding «frameset» stereotyped class.</P> <P>Each nonstereotyped containment association that originates from a «frameset» class represents a frame. The <TT>noresize</TT> and the <TT>scrolling</TT> tagged values of the containment association are coded as <TT><FRAME></TT> element attributes. See Figure A-29.</P> <CENTER><H5>Figure A-29. An HTML <FRAMESET> modeled with a stereotyped class</H5><p><img border="0" width="500" height="397" data-cke-saved-src="books/2/141/1/html/2/files/afig29.gif" src="books/2/141/1/html/2/files/afig29.gif" alt="graphics/afig29.gif"></p> </CENTER> <H5> «Script Library» Class</H5><img border="0" width="180" height="179" data-cke-saved-src="books/2/141/1/html/2/files/scriptlibrary.gif" src="books/2/141/1/html/2/files/scriptlibrary.gif" alt="graphics/scriptlibrary.gif"> <P>A «script library» class must be realized by a «script library» component that resides in or under a «physical root» package in the component view. All attributes and operations of the class are forward engineered into <TT>var</TT> and <TT>function</TT> declarations. Because the file is a <TT>.js</TT> file, <TT><!--{cke_protected}%3CSCRIPT%3E%3C%2FTT%3E%20elements%20do%20not%20need%20to%20be%20created%20in%20the%20file.%3C%2FP%3E%0A%3CP%3EAny%20associations%20from%20the%20class%20are%20ignored%3B%20only%20attributes%20and%20operations%20of%20the%20class%20are%20used%20during%20implementation.%20See%20the%20section%20%C2%ABClient%20Page%C2%BB%20Class%20for%20a%20description%20of%20coding%20class%20attributes%20and%20operations.%3C%2FP%3E%0A%3CH5%3E%20%C2%ABScreen%C2%BB%20Class%3C%2FH5%3E%3Cimg%20border%3D%220%22%20width%3D%22180%22%20height%3D%22145%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fscreen.gif%22%20alt%3D%22graphics%2Fscreen.gif%22%3E%0A%3CP%3EA%20screen%2C%20an%20abstraction%20of%20a%20rendered%20Web%20page%20in%20a%20client%20browser%2C%20represents%20the%20final%20visualized%20user%20interface%20presented%20to%20the%20system%20user.%20A%20screen%20element%20is%20part%20of%20the%20UX%20model.%20Screen%20stereotyped%20classes%20are%20typically%20not%20realized%20by%20elements%20in%20the%20design%20or%20implementation%20models.%20However%2C%20in%20architectures%20in%20which%20the%20virtual%20URL%20and%20physical%20resource%20hierarchies%20are%20different%2C%20it%20can%20be%20useful%20to%20realize%20screens%20with%20%C2%ABHTTP%20Resource%C2%BB%20components.%3C%2FP%3E%0A%3CH5%3E%20%C2%ABScreen%20Compartment%C2%BB%20Class%3C%2FH5%3E%3Cimg%20border%3D%220%22%20width%3D%22180%22%20height%3D%22144%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fscreencompartment.gif%22%20alt%3D%22graphics%2Fscreencompartment.gif%22%3E%0A%3CP%3EA%20screen%20compartment%20is%20a%20well-defined%20screen%20region%20that%20is%20reused%20by%20multiple%20screens.%20A%20screen%20is%20an%20abstraction%20of%20a%20part%20of%20a%20rendered%20Web%20page%20in%20a%20client%20browser.%20A%20screen%20compartment%20element%20is%20part%20of%20the%20UX%20model%20and%20typically%20is%20not%20directly%20realized%20by%20a%20component.%20However%2C%20in%20certain%20architectures%20it%20is%20not%20unreasonable%20to%20have%20a%20%C2%ABstatic%20page%C2%BB%20or%20a%20%C2%ABdynamic%20page%C2%BB%20component%20realize%20screen%20compartments.%3C%2FP%3E%0A%3CH5%3E%20%C2%ABInput%20Form%C2%BB%20Class%3C%2FH5%3E%3Cimg%20border%3D%220%22%20width%3D%22169%22%20height%3D%22169%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Finputform.gif%22%20alt%3D%22graphics%2Finputform.gif%22%3E%0A%3CP%3EAn%20input%20form%20screen%20compartment%20is%20a%20well-defined%20screen%20region%20that%20is%20reused%20by%20multiple%20screens.%20It%20is%20an%20abstraction%20of%20a%20part%20of%20a%20rendered%20Web%20page%20in%20a%20client%20browser.%20A%20screen%20compartment%20element%20is%20part%20of%20the%20UX%20model.%20A%20screen%20compartment%20can%20be%20realized%20by%20a%20%C2%ABstatic%20page%C2%BB%20or%20a%20%C2%ABdynamic%20page%C2%BB%20component.%3C%2FP%3E%0A%3CH5%3E%20%C2%ABStyle%20Sheet%C2%BB%20Class%3C%2FH5%3E%3Cimg%20border%3D%220%22%20width%3D%22180%22%20height%3D%22192%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fstylesheet.gif%22%20alt%3D%22graphics%2Fstylesheet.gif%22%3E%0A%3CP%3ESee%20the%20section%20%C2%ABlink%C2%BB%20Association%20later%20in%20this%20appendix%20for%20a%20description.%3C%2FP%3E%0A%3CH4%3E%20Association%20Class%3A%20%C2%ABURL%20Parameters%C2%BB%3C%2FH4%3E%0A%3CP%3EUsing%20this%20association%20class%20is%20an%20optional%20way%20to%20model%20HTTP%20parameters.%20It%20is%20useful%20when%20the%20parameters%20are%20relatively%20complex%20or%20have%20special%20semantics%20and%20extra%20documentation%20is%20needed.%20For%20a%20description%2C%20see%20the%20section%20%C2%ABlink%C2%BB%20Association.%3C%2FP%3E%0A%3CH4%3E%20Associations%3C%2FH4%3E%0A%3CH5%3E%20%C2%ABlink%C2%BB%20Association%3C%2FH5%3E%0A%3CP%3EA%20%C2%ABlink%C2%BB%20association%20in%20the%20logical%20view%20is%20represented%20in%20code%20by%20one%20of%20two%20HTML%20elements%3A%20a%20%3CTT%3E%3CLINK%3E%3C%2FTT%3E%20or%20an%20anchor%20%3CTT%3E%3CA%3E%3C%2FTT%3E.%20If%20the%20association's%20supplier%20class%20is%20%3CTT%3E%22stylesheet%22%3C%2FTT%3E%20or%20if%20the%20%3CTT%3Erel%3C%2FTT%3E%20and%20%3CTT%3Erev%3C%2FTT%3E%20tagged%20values%20are%20set%2C%20the%20association%20codes%20into%20a%20%3CTT%3E%3CLINK%3E%3C%2FTT%3E%20element%20that%20is%20placed%20in%20the%20%3CTT%3E%3CHEAD%3E%3C%2FTT%3E%20element.%20The%20%3CTT%3Erel%3C%2FTT%3E%20and%20the%20%3CTT%3Erev%3C%2FTT%3E%20tagged%20values%20set%20their%20corresponding%20element%20attribute%20values.%20If%20the%20supplier%20class%20is%20stereotyped%20%C2%ABstyle%20sheet%C2%BB%2C%20the%20%3CTT%3Erel%3C%2FTT%3E%20element%20attribute%20is%20set%20to%20%3CTT%3E%22stylesheet%22%3C%2FTT%3E%20and%20the%20%3CTT%3Etype%3C%2FTT%3E%20element%20attribute%20is%20set%20to%20%3CTT%3E%22text%2Fcss%22%3C%2FTT%3E.%20If%20the%20supplier%20class%20is%20a%20normal%20page%20class%C2%ABclient%20page%C2%BB%2C%20%C2%ABserver%20page%C2%BB%2C%20or%20%C2%ABframeset%C2%BBthe%20class%20association%20is%20coded%20as%20an%20anchor%20element.%20In%20either%20case%2C%20the%20URL%20that%20resolves%20to%20the%20supplier%20class%20is%20used%20as%20the%20%3CTT%3Ehref%3C%2FTT%3E%20element%20attribute%20value.%20See%20Figure%20A-30.%3C%2FP%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-30.%20An%20HTTP%20parameter%20modeled%20as%20constraints%20on%20the%20%C2%ABlink%C2%BB%20association%3C%2FH5%3E%3Cp%3E%3Cimg%20border%3D%220%22%20width%3D%22500%22%20height%3D%22114%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fafig30.gif%22%20alt%3D%22graphics%2Fafig30.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%3CP%3EThe%20tagged%20value%20%3CTT%3Eparameters%3C%2FTT%3E%20lists%20in%20ampersand-separated%20form%20all%20the%20parameters%20that%20%3CTT%3Ehref%3C%2FTT%3E%20URL%20uses.%20See%20Figure%20A-31%3C%2FP%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-31.%20Multiple%20HTTP%20parameters%20modeled%20with%20a%20single%20constraint%20but%20separated%20with%20ampersands%3C%2FH5%3E%3Cp%3E%3Cimg%20border%3D%220%22%20width%3D%22500%22%20height%3D%22101%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fafig31.gif%22%20alt%3D%22graphics%2Fafig31.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%3CP%3EAn%20equivalent%20way%20of%20expressing%20link%20parameters%20is%20with%20a%20link%20class%20stereotyped%20%C2%ABlink%20parameter%C2%BB.%20Figure%20A-32%20shows%20an%20equivalent%20representation%20of%20this%20URL.%20Using%20link%20associations%20offers%20the%20opportunity%20to%20specify%20attribute%20data%20types.%20These%20data%20types%20are%20not%20used%20for%20coding%20and%20are%20of%20use%20to%20the%20designer%20only%20in%20the%20context%20of%20the%20model.%20See%20Figure%20A-33.%3C%2FP%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-32.%20Links%20using%20link%20classes%3C%2FH5%3E%3Cp%3E%3Cimg%20border%3D%220%22%20width%3D%22500%22%20height%3D%22227%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fafig32.gif%22%20alt%3D%22graphics%2Fafig32.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-33.%20Style%20sheet%20links%20modeled%20with%20%C2%ABinclude%C2%BB%20associations%3C%2FH5%3E%3Cp%3E%3Cimg%20border%3D%220%22%20width%3D%22500%22%20height%3D%22475%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fafig33.gif%22%20alt%3D%22graphics%2Fafig33.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%3CH5%3E%20%C2%ABredirect%C2%BB%20Association%3C%2FH5%3E%0A%3CP%3EA%20redirection%20association%20indicates%20that%20the%20client%20page%20should%20be%20automatically%20replaced%20with%20another%20client%20page.%20This%20is%20typically%20done%20as%20a%20temporary%20measure%20as%20a%20site%20is%20redesigned%20or%20moves%20to%20a%20new%20domain.%3C%2FP%3E%0A%3CP%3EThis%20association%20codes%20into%20a%20%3CTT%3E%3CMETA%3E%3C%2FTT%3E%20element%20with%20the%20%3CTT%3Ehttp-equiv%3C%2FTT%3E%20attribute%20set%20to%20%3CTT%3E%22refresh%22%3C%2FTT%3E.%20The%20content%20attribute%20contains%20the%20delay%20in%20seconds%2C%20followed%20by%20a%20comma%20and%20the%20URL%20of%20the%20page%20to%20redirect%20to.%20The%20%3CTT%3Edelay%3C%2FTT%3E%20is%20a%20tagged%20value%20of%20the%20%C2%ABredirect%C2%BB%20association.%20This%20element%20belongs%20in%20the%20%3CTT%3E%3CHEAD%3E%3C%2FTT%3E%20element.%20See%20Figure%20A-34.%3C%2FP%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-34.%20Client-side%20redirection%20modeled%20as%20a%20stereotyped%20association%3C%2FH5%3E%3Cp%3E%3Cimg%20border%3D%220%22%20width%3D%22500%22%20height%3D%22117%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fafig34.gif%22%20alt%3D%22graphics%2Fafig34.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%3CH5%3E%20%C2%ABsubmit%C2%BB%20Association%3C%2FH5%3E%0A%3CP%3EForms%20submit%20their%20data%20to%20other%20Web%20pages%2C%20although%20there%20are%20no%20restrictions%20on%20submitting%20themselves%20to%20other%20instances%20of%20their%20containing%20pages.%20This%20relationship%20codes%20into%20the%20%3CTT%3Eaction%3C%2FTT%3E%20parameter%20of%20the%20%3CTT%3E%3CFORM%3E%3C%2FTT%3E%20element.%20See%20the%20section%20%C2%ABHTML%20Form%C2%BB%20Class%20for%20more%20information.%3C%2FP%3E%0A%3CH5%3E%20%C2%ABobject%C2%BB%20Association%3C%2FH5%3E%0A%3CP%3EThe%20%C2%ABobject%C2%BB%20containment%20association%20represents%20a%20contained%20data%20type%20or%20object%20in%20the%20context%20of%20an%20HTML%20page.%20This%20object%20is%20not%20necessarily%20visual%2C%20although%20it%20is%20usually%20rendered%20in%20the%20display.%20The%20%C2%ABobject%C2%BB%20association%20can%20be%20used%20to%20specify%20many%20types%20of%20embedded%20objects%2C%20most%20commonly%20applets%20and%20ActiveX%20controls.%20See%20Figure%20A-35.%20In%20this%20example%2C%20the%20%C2%ABobject%C2%BB%20association%20defines%20the%20%3CTT%3Eid%3C%2FTT%3E%20and%20%3CTT%3Eclassid%3C%2FTT%3E%20tagged%20values%2C%20which%20are%20coded%20in%20the%20%3CTT%3E%3COBJECT%3E%3C%2FTT%3E%20element.%20The%20parameters%20for%20the%20object%20are%20specified%20by%20a%20link%20class.%3C%2FP%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-35.%20Example%20of%20an%20ActiveX%20object%3C%2FH5%3E%3Cp%3E%3Cimg%20border%3D%220%22%20width%3D%22500%22%20height%3D%22330%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fafig35.gif%22%20alt%3D%22graphics%2Fafig35.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%3CH5%3E%20%C2%ABiframe%C2%BB%20Association%3C%2FH5%3E%0A%3CP%3EThe%20%C2%ABiframe%C2%BB%20stereotyped%20association%20represents%20an%20inset%20frame%20in%20an%20HTML%20page.%20This%20association%20forward%20engineers%20into%20a%20single%20%3CTT%3E%3CIFRAME%3E%3C%2FTT%3E%20element.%20The%20%3CTT%3Esrc%3C%2FTT%3E%20attribute%20of%20the%20element%20is%20the%20URL%20of%20the%20supplier%20class.%20An%20%C2%ABiframe%C2%BB%20association%20always%20originates%20from%20a%20%C2%ABclient%20page%C2%BB%20or%20a%20%C2%ABframeset%C2%BB%20and%20is%20directed%20to%20another%20page%20class.%20The%20%3CTT%3Ewidth%3C%2FTT%3E%20and%20the%20%3CTT%3Eheight%3C%2FTT%3E%20tagged%20values%20are%20generated%20into%20corresponding%20element%20attributes.%20See%20Figure%20A-36.%20Note%20that%20the%20end%20tag%20is%20required%20for%20the%20%3CTT%3E%3CIFRAME%3E%3C%2FTT%3E%20element%2C%20although%20for%20the%20life%20of%20me%2C%20I%20don't%20know%20why.%20See%20Figure%20A-37.%3C%2FP%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-36.%20An%20HTML%20%3CTT%3E%3CIFRAME%3E%3C%2FTT%3E%20modeled%20with%20a%20containment%20association%3C%2FH5%3E%3Cp%3E%3Cimg%20border%3D%220%22%20width%3D%22500%22%20height%3D%22124%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fafig36.gif%22%20alt%3D%22graphics%2Fafig36.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-37.%20%3CTT%3E%3CIFRAME%3E%3C%2FTT%3E%20elements%20with%20an%20src%20parameter%20specified%20and%20modeled%20with%20an%20additional%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%2Fafig37.gif%22%20alt%3D%22graphics%2Fafig37.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%3CH5%3E%20%C2%ABinclude%C2%BB%20Dependency%3C%2FH5%3E%0A%3CP%3EOnly%20dependencies%20stereotyped%20%C2%ABinclude%C2%BB%20are%20coded.%20The%20supplier%20class%2C%20a%20%C2%ABscript%20library%C2%BB%20stereotyped%20class%2C%20must%20be%20realized%20by%20a%20valid%20%C2%ABscript%20library%C2%BB%20stereotyped%20component%20in%20the%20model.%3C%2FP%3E%0A%3CP%3EFigure%20A-38%20shows%20a%20dependency%20stereotyped%20%C2%ABinclude%C2%BB%20drawn%20from%20the%20%C2%ABclient%20page%C2%BB%20page%20to%20the%20%C2%ABscript%20library%C2%BB%20%3CTT%3EstringParseLib%3C%2FTT%3E.%20This%20forward%20engineers%20into%20a%20%3CTT%3E%3CSCRIPT%3E%3C%2FTT%3E%20element%20with%20the%20%3CTT%3Elanguage%3C%2FTT%3E%20and%20%3CTT%3Esrc%3C%2FTT%3E%20attributes%20specified.%20The%20determination%20of%20the%20URL%20for%20the%20%3CTT%3Esrc%3C%2FTT%3E%20is%20made%20by%20looking%20at%20the%20%C2%ABclientscript%C2%BB%20component%20that%20realizes%20the%20class%20%3CTT%3EstringParseLib%3C%2FTT%3E.%20In%20this%20example%2C%20it%20happens%20to%20exist%20in%20the%20same%20virtual%20directory%20as%20the%20component%20that%20realizes%20the%20%C2%ABclient%20page%C2%BB%20page.%3C%2FP%3E%0A%3CCENTER%3E%3CH5%3EFigure%20A-38.%20Example%20of%20an%20%C2%ABinclude%C2%BB%20dependency%3C%2FH5%3E%3Cp%3E%3Cimg%20border%3D%220%22%20width%3D%22500%22%20height%3D%22358%22%20src%3D%22%7B%7Bxpath%7D%7Dfiles%2Fafig38.gif%22%20alt%3D%22graphics%2Fafig38.gif%22%3E%3C%2Fp%3E%0A%3C%2FCENTER%3E%0A%3C!%2D%2Dpixel%2D%2D%3E%0A%3C%2Ftd%3E%0A%3C%2Ftr%3E%0A%3C%2Ftable%3E%0A%3Ctd%3E%3C%2Ftd%3E%3C!%2D%2Dpage%3D116%20end%2D%2D%3E%3C!%2D%2Dpage%3D117%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%3EMapping%20Web%20Elements%20to%20UML%2C%20and%20Vice%20Versa%3C%2FH3%3E%09%09-->