Article: Web 2.0 panels »
FERDY CHRISTANT - OCT 1, 2006 (01:18:22 PM)
One of the trends of the last years is the move of the desktop application to the web. A more recent development is to preserve typical desktop functionality in web applications. The AJAX and Web 2.0 hypes are proof of this. However, just having a fancy design and some AJAX scripts to prevent screen refreshes doesn't cut it. This article describes how to implement one typical desktop UI widget: a panel. A panel is simply a portion of a screen that groups information. Often it can be collapsed and expanded to optimize the use of screen space. A typical application of a panel is a property box, that displays information about the selected object.
Let's visualize what we try to accomplish. The following screenshot demonstrates the use of a panel on the web:
On the left, we see two panels that are expanded. Each panel has a header and a body. The header shows a button that expands or collapses the body of the panel, based on the current status. On the right, we see the same two panels, but now the top one is collapsed. The screen space that once was used by the body of the first panel is reclaimed. This is cool, because it allows you to cram more information on a single page, reducing the need to navigate to another page.
An additional goal of our technique is that it should work in all major browsers. The solution described in this article is working correctly in at least Internet Explorer 6, Firefox 1.5, and Opera 9.
Implementation (the theory)
Looking at the anatomy of a panel (header + body), a table seems to come close to our needs. We will want to have precise control over its positioning and width, and we also need the ability to interact with only the body part of the panel. HTML has the TBODY tag in place for this. This way we could have a full panel in a single TABLE element, hiding parts of the table based on the user action.
I have put a lot of effort into realizing the panels this way, but can't get it to work cross-browser. The problem is in Firefox. Upon hiding part of a table (the body part), it ignores all previous CSS rules applied to it. Even worse, when showing and hiding the body again, the body part of the table moves down one row. So each time you hide and show the panel body, it increases in vertical size.
Implementation (the practice)
The alternative approach is to split the panel table into two parts: one table for the header, and one table for the footer. It solves the Firefox problem and is still easy to implement. In fact, it is so easy that I'll only summarize the implementation details of each file. You can download the source code here and follow along:
This file contains the panel content. Each panel consists of two tables, one for the header and one for the table. Basically, each panel consists of three items: the header, the toggle controls and the body. Each item has an ID value to uniquely identify them. The naming convention for them is crucial, i.e. having a panel named "help" would result in the following IDs:
- help_header (table id of the header of the help panel)
- help_body (table id of the body of the help panel)
- help_up (image id to collapse the panel)
- help_down (image id to expand the panel)
This file is used to format the look and feel of the panels. It is not important for the purpose of this demo, but maybe it gives you some ideas .