administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon

 

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.

The goal

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.

Demo

You can play around with the live demo of the panels mentioned above here. The source code can be downloaded here

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:

Index.htm

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)

The onclick event of the toggle images are used to call a Javascript function that expands/collapses the panels.

Panels.js

This Javascript file has the functions to toggle the visibility of the panels. The setPanel function does most of the work. You pass it what you want to see or hide. It can hide the whole panel, only the header or only the body. The files also has two utility functions to show and hide HTML elements in a page.

Panels.css

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 .

Summary

In summary, creating web panels is plain simple. With the Javascript logic in place, all you need to do is create tables and give them the correct ID value. The content you put in the header and body of the panel is entirely up to you. As simple as it may be, it is another step in the direction of the "desktop" web. Of course, web panels are only a fraction of a true desktop experience on the web, but I think they are a user-friendly one.

Share |

Comments: 6
Reviews: 1
Average rating: rating
Highest rating: 5
Lowest rating: 5

COMMENT: VAL

OCT 2, 11:09:08 AM

comment » Great article Ferdy, as usual simple but very useful ! «

COMMENT: VICTOR HUERTA email

OCT 2, 03:43:43 PM

comment » Thanks for sharing. I really like your approach to make it modular by parsing the id of each element. Very useful. «

COMMENT: ANDY DAVIES emailhomepage

OCT 4, 12:26:19

comment » Ferdy, your site is looking cool - love the new banner. I really need to work on my own site to bring it up to scratch.

I liked your article, but I'm trying to get away from tables. As such I fiddled about with some definition lists and some DOM scripting and produced my own take on web panels - You're free have a look/download click here.

Did you design your own site background? If not where did you get it? «

COMMENT: FERDY

OCT 5, 07:27:12 PM

comment » Andy, thanks. Original site you have yourself, not to mention the capture of a scene of my favorite movie ever! , Your link to your version of the web panels is lost. If you post a link in the comments here, do not include the a href tags and it should convert to a link automatically , I got my site's background from here: http://www.squidfingers.com/patterns/?type=patterns&id=4 , I picked one that I like and then added a color overlay layer in Photoshop to blend it in with my design. «

COMMENT: ANDY DAVIES emailhomepage

OCT 9, 15:32:37

comment » OK, here we go: http://zedzdead.net/A5599F/acd.nsf/varticles/B0870A73807DE22C862571FD0039BF74?OpenDocument - Those old fashioned domino urls are just super aren't they?

Thanks for the link to squidfingers...and the PS tip! «

COMMENT: BRAD BURNS emailhomepagerating

NOV 17, 12:12:24 AM

comment » Ferdy Christant, your not only a programming artist, but a very analytical programmer in general. I read your website almost weekly, I'm using this on my website. Great job! «

RATE THIS CONTENT (OPTIONAL)
Was this document useful to you?
 
rating Awesome
rating Good
rating Average
rating Poor
rating Useless
CREATE A NEW COMMENT
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.