XUL-in-HTML experimentations

January 5th, 2007 by Cedric Savarese

Strange things happen during the holidays. Maybe it’s because I am more relaxed and less busy, but it seems that each time, a crazy idea about some web technology will cross my mind and I’ll end up spending hours exploring it.

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.

If you are not using the Firefox browser, you will not see anything interesting, so here’s a screenshot of the second panel, viewed in Firefox (XUL powered).

XUL Tabbed Panel example

The first panel in the example uses HTML+Javascript (a.k.a DHTML). It is very basic, there are better DHTML panel widgets of course. The idea is that you could enhance an existing javascript UI library to render widgets with XUL on XUL-compatible browsers…

You can check out the source code if you want to see how it’s done.

Update: As whoughton pointed out, it doesn’t degrades to DHTML as it should in Safari. I will fix that soon, it’s probably not a serious bug.

Update 2: The problem in Safari is caused by its user-agent. To detect whether I should render with XUL or DHTML, I look at the user-agent string. If it contains the word “gecko”, I assume the browser uses the Gecko rendering engine and therefore supports XUL… Well it turns out Safari’s user-agent string includes “Gecko” even though it’s not based on Gecko at all. Weird. Anyway, I’ll just have to fix the detection code.

Update 3. It’s fixed in Safari, thanks to Boris tips.

« Previous post | Next Post »

18 Responses

  1. whoughton says:

    Doesn’t seem to be working in Safari for me, not even the nightly build.

  2. Edwin Martin says:

    Very cool. But *a lot* of source code.

    Next step is to make it usable for browsers without JavaScript (Just show the contents beneath each other with the tabs as headers).

  3. [...] Cédric Savarese has a demos of using XUL to make a richer HTML form. Cédric’s approach is different than my XUL-in-Internet Explorer idea. His method only uses XUL in a XUL-enabled browser (Firefox, SeaMonkey or Netscape). In other browsers, it falls back to DHTML elements. [...]

  4. Craig Bovis says:

    Doesn’t work here in Safari either, back to the drawing board? :-)

  5. cedric says:

    I updated the post regarding the Safari bug, thanks for pointing it out.

  6. Boris says:

    If you sniff for “Gecko/” that should catch actual Geckos but not Safari…

  7. whoughton says:

    Wanted to note that I still think it’s a really cool idea, and love the tip!

  8. Anders says:

    It seems to me that it would be more developer friendly if the developers could just embed the xul-markup in the html. Mozilla would just use it and in other browsers a javascript handler would find all the xul elements and replace them with the dhtml equivalents.

  9. [...] XUL-in-HTML experimentations You can write XUL UI widgets that degrades gracefully to DHTML widgets in browsers that do not support XUL (IE, Safari, Opera). The XUL version is multi-colored virsus plain-Jane. (tags: XUL DHTML HTML Widgets) [...]

  10. Sam G.Brown says:

    I wonder, how could the application logic (written most probably in JS) be reused in the application that has this kind of degradable DHTML UI created in IE/Safari/Opera, and XUL UI created in Gecko-based browser. Two different approaches have two completely different APIs and furthermore – coding styles.

  11. cedric says:

    Sam, there’s more explanation over here:
    http://www.veerwest.com/hXUL/

    The (experimental) library provides a unified API to implement the widget, which is then rendered using XUL or DHTML depending on the browser capabilities.

  12. Sam G.Brown says:

    Do you mean there will be no markup way of laying out interfaces (that is 1-faster to type, 2-faster to process (by browser)) and the developer will need to use your custom API? BTW: I doubt it will also be possible to expose every single method/property available on XUL DOM, to your API.

  13. cedric says:

    Sam, it is possible to use HTML markup and let the library generate the widget. The tabbed panel in the hXUL library already does that to an extent (see the new post on this blog), but keep in mind this is still experimental. Regarding the API interface, there is no need to provide a full compatibility with XUL. Exposing a few methods and properties for each UI widget should be sufficient (for instance, get the selected tab or tree element, etc..)

  14. Sean says:

    Great idea and I was surprised that it worked…
    I’ve tried embedding XUL in HTML with varying degrees of success. xul:hbox, xul:vbox was fine. xul:tree just created a table, and the columns weren’t even in the right order.

    But I never thought of adding the xul:tree with javascript. I’m going to give it a go ASAP.

  15. matt says:

    Hi, I just realized that if one of the tabs is imensly huge, the other ones will be so, even if there’s not much in there.
    I was unsuccessfull in changing that :( .

    Can you give some light on doing this?

  16. Ha! Holiday brain storms spin pure coding gold sometimes. Great post, Cedric, and thanks for the tip and links at the end. I followed along, and that finally got it working for me.

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

  18. Leon Victor says:

    I have used XUL many times for developing Firefox plugins but never used XUL with HTML, so quite curious to know the end results.

Leave a Reply