HTML Frames

One of the most difficult Web elements to model is the frame. Frames enable the Web designer to divide a browser window into subrectangular areas, each with a different Web page. On the Internet, frames are commonly used to divide the window into a navigational pane and a content pane. The navigational pane, or index window, displays an index of all the site's pages. Each item in the index is a hyperlink to a page. When the user clicks on one of these links, another pane is filled with the page. This type of link, a targeted link, requests Web pages for another pane or even another browser window instead of its own.

A frameset is a special type of Web page that divides its viewing area into multiple panes, each containing its own Web page. A frameset defines a rectangular grid of frames. Each frameset defines the number of rows and columns that divide its display area. Each of these frames is a potential target. A target is a named frame in a frameset that other client pages can request Web pages for. A frame can also be defined without a name, in which case the only way pages are rendered in it is via JavaScript calls to the DOM or by initializing the frame with a specific Web page and then calling normal hyperlinks in the page.

WAE Stereotypes for Modeling Framesets

Name	Frameset.
Metamodel class	Class.
Description	Abstracts an HTML page that contains a frameset element. This page divides the user interface into rectangular frames, or regions, in which each frame is rendered with a separate client page. Frames are optionally identified by a target.
Icon(s)
Constraints	Must contain at least one «client page» or «target» stereotyped class.
Tagged values	Rowsthe number of rows of frames to be defined. Colsthe number of columns of frames to be defined.

WAE Stereotypes for Modeling Targets

Name	Target.
Metamodel class	Class.
Description	A specific named frame in a frameset. It is the "target" of hyperlinks, a targeted link class.
Icon(s)
Constraints	None.
Tagged Values	Rowthe row number that this frame is rendered in. Colthe column number that this frame is rendered in.

WAE Stereotypes for Modeling Targeted Links

Name	Targeted link.
Metamodel class	n-ary association.
Description	The target of a standard «link» association; however, instead of rendering the requested Web page in the same container that the request came from, the page is rendered in the referenced target.
Icon
Constraints	Must reference exactly one «target» class. Must have a directional relationship pointing to exactly one Web page class: client, server, or frameset.
Tagged Values	None.

Figure 12-1 shows a conceptual metamodel of the WAE elements for framesets. This diagram shows that a frameset is a client page class, which is itself an abstract Web page, that adds containment associations to other client pages, which are potentially other framesets, and targets. A target is contained by a frameset and, optionally, references a Web pageclient or server pagewith a directional relationship. When a target references a Web page class, this page is used to initialize the frame when it is first loaded. It is also possible for an HTML form to submit an HTTP request that is targeted for a specific frame.

Figure 12-1. Conceptual metamodel for UML frameset elements

When a frameset contains a Web page, the Web page is rendered in one of the defined frames of the page but is not named. This means that the Web page cannot be used as a target. When a frameset contains a target, however, other client pages can draw normal «link» stereotyped associations to the target, with the result that the hyperlink request does not replace the current client page, as is the norm, but the response of that link is rendered in the frame that the target represents. This frame is resolved by examining the row and column tag values of the target and the number of rows and columns defined by the frameset that contains the frame.

The most common use of frames on the Internet is to implement a book outline metaphor. An index frame, or table of contents, occupies the left, or top, frame, with the main content displayed in the remaining space. This is similar to the Windows Explorer interface. The user clicks links in the index pane, and the requested pages are loaded in the content pane. Using the Web application extensions for UML, this arrangement of pages is shown in Figure 12-2.

Figure 12-2. Modeling framesets

The Book page is a frameset, and its tagged values define the size and the shape of the frames. A frameset aggregates client pages and targets. When the content of a frame remains a single page, as an index page might, there is no need to define a target for this frame, because it will never be used in a targeted link relationship. The content frame, however, is loaded with any number of pages and therefore requires a target to identify it. The index page defines a number of link relationships, each of which points to a targeted link. The «targeted link» n-ary association points to the requested page and the target for rendering.

The fact that a frameset class is a specialization of a client page is important when non-frames-capable browsers are used. In these cases, the browser renders a single normal client page. This alternative "normal" client page is modeled by the frameset class itself. So if a frameset class defines client-side scripts or has «link» associations to other Web pages, these are in effect only when the client browser renders the page as a single "normal" page. This page is often used to allow the user to navigate to a nonframes version of the application. In Figure 12-3, the frameset defines its own «link» to another page, and the main target defines an initial page to load.

Figure 12-3. Frameset «link» associations and targets that define an initial page to load

If a target class is not contained by a frameset, that frame is not part of a frameset but rather a separate browser window instance. Targeted links can reference this target as they do other targets.

Another type of frame that some browsers support is the </TT>, an inset frame in a page. Instead of defining a rectangular grid for individual frames, it is possible to specify a single rectangular area that floats with the rest of the page's HTML content.</P> <P>The idea behind an i-frame is simple. It defines a rectangular region of the current page and renders a separate client page. The size of the i-frame is controlled by the <<TT>IFRAME</TT>> tag in the containing page. In UML, this is modeled with a simple «iframe» stereotyped containment relationship. The name of the i-frame can, optionally, be specified with the association role identifier. Figure 12-4 shows a simple example of an «iframe» association. In this diagram, the <TT>CDReview</TT> client page contains a single i-frame that renders the dynamic page <TT>Comment</TT>.</P> <CENTER><H5>Figure 12-4. Modeling inset frames</H5><p><img border="0" width="500" height="291" data-cke-saved-src="books/2/141/1/html/2/files/12fig04.gif" src="books/2/141/1/html/2/files/12fig04.gif" alt="graphics/12fig04.gif"></p> </CENTER> <!--{cke_protected}{C}%3C!%2D%2Dpixel%2D%2D%3E--> </td> </tr> </table> <td></td><!--{cke_protected}{C}%3C!%2D%2Dpage%3D100%20end%2D%2D%3E--><!--{cke_protected}{C}%3C!%2D%2Dpage%3D101%20start%2D%2D%3E--><br> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"><H3>Advanced Client Side Scripting</H3>