Thursday, January 11th, 2007

XUL UI Widgets that Degrade

Category: JavaScript, UI

Cedric Savarese got creative over his winter break and decided to experiment with XUL in HTML.

It shows that you can write XUL UI widgets that degrades gracefully to DHTML widgets in browsers that do not support XUL (IE, Safari, Opera).

This time, I was thinking about the interface for the next version of the Form Builder (I know, somehow it’s always work related) and I was wondering if XUL could be of any help here.

A couple days later, I had this working: tabbed panel example.


Posted by Dion Almaer at 10:07 am

2.2 rating from 119 votes


Comments feed TrackBack URI

Doesn’t seem to work in Safari for me…

Comment by whoughton — January 11, 2007

If you read it they’re saying the xul only works in mozilla.

Comment by Dom — January 11, 2007

Isn’t the point of the demo, that it should work in all browsers. It works in IE, just doesn’t look as pretty as the screen shot above.

Comment by Richard Kimber — January 11, 2007

It should work in all browsers (at least that is the idea) and degrade to regular dhtml for browsers that dont support XUL. I think this is a great idea and great proof-of-concept. Don’t disreguard just becuase your current fav browser isnt supported. Its not a finished peace.

Comment by Mario — January 11, 2007

it looks exactly like the screen shot. The first set of tabs does at least. The second set looks identical to the first in IE becuase IE doesnt support XUL. How is this not getting across to devs? Its not that hard to understand. The second set of Tabs is what XUL looks like on a mac in firefox. There are screenshots on the site of XUL in windows too.

Comment by Mario — January 11, 2007

actually, it doesn’t degrade to DHTML as it should in Safari (my site even looks ugly in Safari.. got some work to do :) Thanks for pointing it out and thanks for the feedback.

Comment by cedric — January 11, 2007

If it’s degradable to dhtml, then why not use dhtml to begin with?

Comment by mikael bergkvist — January 11, 2007

Who ever rating spammed this is horrible. XUL Gives a GUI like look and should provide a richer end user experience. This deserves more than 1 Star.

Comment by Mario — January 11, 2007

Maybe tabs aren’t the best example to get the point across, as the look&feel in the XUL variant can pretty easily be achieved using just HTML/CSS. However, I’m interested to see to which level this can be taken. Nice work.

Comment by Ron — January 12, 2007

It’s certainly an interesting proof-of-concept, and I can easily see myself using it on admin section on several sites, especially those that I build for myself. That being said, it does remind me of people trying to accomplish all sorts of stuff with Microsofts proprietary extensions, and then doing all sorts of laborious scripting to get other browsers to do the same.

Don’t get me wrong, XUL is cool, and I do wish that it was widely supported, but it’s not something I am going to rely on being able to use anytime soon.

Comment by Morgan Roderick — January 12, 2007

@Mario: I do get it. Just describing my experiance.

Comment by Richard Kimber — January 12, 2007

mikael bergkvist: Same reason you might use Flash, Canvas, VML or WPF/e.

Comment by Richard Kimber — January 12, 2007

Richard, this is not a good answer. I agree with Mikael: Why would you want to use XUL? Flash and canvas can do things DHTML can not do (reasonable well). I have no idea what VML or WPF/e are.

What are the usage scenarios for this XUL hybrid? What does it do better than pure DHTML? Especially, if you have to create a DHTML version that does the same thing.

Comment by Martin — January 12, 2007

Well, for starters on a browser that could handle XUL natively it will operate as expected with no CSS, or javascript. Same reason “suckerfish” style dropdown menus attach :hover events in the CSS for list items.

Comment by Mike Ritchie — January 12, 2007

Martin.. I will post more info on this. One reason is that XUL performs much better than DHTML. It renders faster, it comes with built-in behaviors that you may not get in DHTML, and it requires less code/gfx to download (because it’s already in the browser’s chrome). It’s also supposted to be more accessible.

The tabbed panel is too simple of an example to see the benefits, but I’ll post again with a draggable tree view and some performance metrics.

PS: The Safari bug is fixed.

Comment by cedric — January 12, 2007

by the way.. I wouldn’t have noticed the post ratings if Mario didn’t point out that someone spent quite some time angrily submitting 90+ 1 start rating. Gotta be careful with those Safari users :-)

Comment by cedric — January 12, 2007

Thanks for the info, I am looking forward to some impressive demos :-)

There is one possible disadvantage: Some designers already cry loudly that they cannot control every visual aspect of form controls. And XUL controls always have a native look, I recon?

I grant that people are not used to seeing native tabs in the middle of a web page, so they might get confused (for now).

And as of being not needing extra stylesheet / JS files: Do you have a way to not download the parts needed for the DHTML emulation in browsers that know XUL?

Comment by Martin — January 12, 2007

Leave a comment

You must be logged in to post a comment.