XFrames: XHTML Frames?

A friend of mine was telling me how much he just, loves IFrames. So much, that an article I wrote earlier in my life still hasn’t persuaded him to change his mind. For people like him, I have written an article just for you! Seems like the W3C has a heart for you; XFrames, the possible new frames for the upcoming XHTML 2.0. NOTE: XFrames is a part of a working draft and is still under development of this writing. So all examples will NOT work on a browser. Article was originally written in April of 2005.

First of all, let’s define exactly what XFrames is intended for. XFrames is an XML application for composing documents together, replacing HTML frames. In other words, frames that conform to the DTD (probably in XHTML 2.0). For you “frame lovers” I know you are jumping out of your seats.

Now the question a lot of people are asking is, Why? Why not just use the old HTML frames that practically EVERY web designer/developer knows how to do?. Well here’s just a few of the reasons:

1. The [back] button works unintuitively in many cases.
2. You cannot bookmark a collection of documents in a frameset.
3. If you do a [reload], the result may be different to what you had.
4. [page up] and [page down] are often hard to do.
5. You can get trapped in a frameset.
6. Searching finds HTML pages, not Framed pages, so search results usually give you pages without the navigation context that they were intended to be in.
7. Since you can’t content negotiatiate, noframes element markup is necessary for user agents that don’t support frames. However, almost no one produces noframes element content, and so it ruins Web searches, since search engines are examples of user agents that do not support frames.
8. There are security problems caused by the fact that it is not visible to the user when different frames come from different sources.

So the W3C must create a standards compliant way of designing frames and they must also be able to be used on other forms of media (user-agents) such as PDAs, cell phones, etc. So far there are seven elements to the XFrames module. These are: frames, head, title, style, row, column, and frame.

The frames Element

First off, and XFrames document is like the old HTML frames document; a specification for composing several documents, potentially of different types, together in a view. The frames element is a container tag for creating the initial document. The collection of frames in an XFrames document is referred to as a frameset. Remember framesets? Of course you do, the structure and semantics have changed, but the idea (i DO mean idea, not algorithm) has changed. The frames element has the an additional attribute on top of the set of attributes that are common to all elements, xml:base, which is used for resolving relative URIs when populating frames within the document. Interesting, huh? Let’s continue…

The head Element

All that is really known about the head element is the fact that it uses the widely know tag, meta. The head tag includes style sheets, meta information, and/or a page title; just like a regular XHTML document.

The title Element

Need we really say? Yes, because I believe in an article that is well thought out and complete. So, yes you have guessed it; the title element is to assign a title to the document, as you do in a regular XHTML document to give the page a title. Also used for user agents to assign a document title.

The style Element

The style elements is, as you expected, a way to separate the presentation from the content; yes, just like a regular XHTML document. There is, however a required attribute of the style element, called type. You must include a type attribute, usually text/css as there is NO default value.

The row Element

The row element specifies a series of columns and single frames. The columns and single frames are placed next to each other horizontally, from left to right.

The column Element

The column element specifies a series of rows and single frames. The rows and single frames are placed one above the other, from top to bottom.

The frame Element

The frame element is a place holder for the content of a document. Remember not to get this mixed up with the frames element. There is an additional attribute to the frame element, and you have guessed it; the source attribute. The source attribute, src, specifies a URI-reference for a default document to populate the frame, if that is not done via a parameter to the frameset documents’ URI.

Common Attributes

Of course, you always have the basics; and thats what these are. id, class, and title are all common attributes for the frame element. The id attribute assigns a name to an element. This name must be unique in an XFrames document. It may be used as a style sheet selector, a target anchor for hypertext links or as a means to reference a particular element for general purpose processing by user agents. The class attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters. It may be used as a style sheet selector (when an author wishes to assign style information to a set of elements) or for general purpose processing by user agents. Finally, the title attribute offers advisory information about the element for which it is set. It may be used to document the purpose of a frame, and may be useful for non-visual user agents to help the user understand the structure of a set of frames.

Examples

Ah, now this is the time you have been waiting for. The time where you can see exactly how this works. Since there is no way to test this set of code in its entirety, I will show you graphically. The code will be displayed followed by what the browser should render as if this were a real specification. Right now, as stated before, this is a working draft and there is no browser that supports it at the time of this article writing. Instead of starting simple with a few frames, I’m going to go into a basic XFrames layout; practical application is what I have always thought was best.

Ok, let’s take this bit of code: (see the output here)

XHTML

<row>
    <column>
        <frame />
        <frame />
    </column>
    <frame />
</row>

This bit of code: (see the output here)

XHTML

<column>
    <row>
        <frame />
        <frame />
    </row>
    <frame />
</column>

This bit of code rendered: (see the output here)

XHTML

<column>
    <frame />
    <row>
        <frame />
        <frame />
    </row>
    <frame />
</column>

This bit of code: (see the output here)

XHTML

<column>
    <row>
        <frame />
        <frame />
    </row>
    <row>
        <frame />
        <frame />
    </row>
</column>

Let’s Populate It!

An XFrames document is refrenced by the URI of the document in the form of http://www.yourwebsitehere.com/test.frm#frames(id1=uri1,id2=uri2,…). Each id identifies a frame element within the document with an id attribute with that value and each associated URI is then assigned to that frame; if no frame with the any id specified, then the URI is ignored. If a frame within the document is not populated (because it has no id attribute, or because there is no parameter that uses its id), and it has a source attribute, the URI in that attribute is used instead. Another key point is that if an unpopulated frame has no source attribute, the frame is left blank. This might be a little confusing for some people, so here’s an example. Say you have an XFrames document you have marked-up, called test.xfm with this code: (see the output here)

XHTML

<row>
    <column>
        <frame id="a"/>
        <frame id="b"/>
    </column>
    <frame id="c" source="main.xml"/>
</row>

Now here’s the practical example that allows you to see how id elements effect output: (see the output here)

XHTML

home.xfm#frames(a=one.xhtml,b=two.xhtml,c=three.xhtml)

How this works is that the frames would be populated by assigning one.xhtml to the frame with id="a", two.xhtml to the frame with id="b", and three.xhtml to the frame with id="c":

Now, let’s test what we said about how the browser would ignore the files and/or make the URI’s blank if the id attribute was not specified. With an XFrame document populated like so:

XHTML

home.xfm#frames(a=one.xhtml,b=two.xhtml)

The frame with id=c is defaulted to the URI and thus populated with main.xml (or the main xml document specified in the head of the XFrame document).

Even this example, would even be different:

XHTML

home.xfm#frames(a=one.xhtml)

The frame with id=b would be left blank, because no id for b was specified.

Lastly, if you were to populate an XFrames document with:

XHTML

home.xfm#frames(z=nav.xml)

The frames with id=a and id=b would be left blank because no id was specified. Also, the frame with id=c would default to main.xml and nav.xml would be ignored, because there is no such thing.

Note: You may want to go get a cup of coffee or something of the sort, because we aren’t done yet; read on.

Linking and Targeting

If a document assigned to a frame contains hyperlinks, and one of these is activated by some means (such as by the user clicking on it), then the URI of that hyperlink is normally assigned to the frame instead, and the XFrames document is redisplayed. This is no suprise; this is just like HTML frames. The difference with XFrames is the fact that doing this changes the URI associated with the frameset, by adding or replacing an association between the frame and the URI for the frame document; this would normally be visible to the user. If the frame containing the document does not have an id attribute, so that such an association is not possible, the entire frameset is replaced by the linked-to document. So, you must make sure you assign id attributes; this is very important.

If the hyperlink is in some way targetted, then in the containing frameset a frame with an id equal to the target is located, and the URI is associated with that frame instead. If the current frameset contains no such id, but the frameset is associated with a frame in another frameset, then the process continues with that frameset; this can get confusing and that is why use of the id attributes is really important, I cannot stress this enough. If no matching id is found, then the targetted resource is processed in an entirely new environment (for instance, a visual browser might open a new window).

As you can tell, this is a well thought-out process in which it gives not only web users the ability to view it, but also user agents.

Let’s Style It!

It has been specified that styling, positioning, and sizing of the frames is done by using a style sheet in CSS or some other suitable styling language. This means that there is nothing normative in the names row and column except a suggestion on how they should be rendered, and a default presentation in the absence of a stylesheet. If the frames element contains only frame elements (and no row and column elements), the default is to render them as tabbed or overlapping panes. This is yet again, just like HTML frames, so not much new to learn here.

In the absence of height and width information from a style sheet, rows and columns are divided equally over the space available to them without regards to their content. This simply means that the frame sizes will be relative to the amount of content specified in the frames themselves.

NOTE: A stylesheet in an XFrames document has no effect on the contents of any frame.

Conclusion

For you “frame lovers”, this looks promising. To tell you the truth, I’ve never been much of a frames guy. I’ve always stuck to laying out a design with tables, and now I do it with div tags and stylesheets. Everyone’s different, and if you like frames, then XFrames might be your next best thing. I’m keeping an eye out on the status of this document. Any updates will be posted. Hope this was infomative and gives you insight in just one of the future ideas of XHTML 2.0.

NOTE: This document was refrenced by http://www.w3.org/TR/xframes/, this article was written by me with the knowlege of the URI specified.