Xul

I was part of a session at CHI 2007 on Thursday titled “User Interface Description Languages: XUL & XAML.” The session covered some of the benefits of declarative UIs, especially with respect to the designer/developer iterative process. Scott Stanfield and myself demonstrated building UIs in XAML and XUL, respectively. We tried to show how easy it was to create and modify UI prototypes. Also, how the prototype markup could be used by developers to create the production UI, even while designers tweaked pieces along the way.

I was just goofing around, trying to see what spiffy new UI patterns we could make using XUL. I thought I’d try creating an Office 2007 ribbon style toolbar. My current result is shown here:

I came across an interesting application of XUL and the new Yahoo email web services via Ryan Kennedy. The application is called Tapestry and its a neat little XUL-based email client. From Ryan’s post:

Just thought I’d point out some new content appearing on the Mozilla Developer Center (MDC).

I finally spent some time to make a DMG for XUL Explorer. It doesn’t have fancy background images, but it seems to work. One thing that surprised me was the size, even when compressed - 18MB. Also, I find it hard to believe that the “standard” way of distributing software for the Mac is a disk image that the user needs to “drag-n-drop” on the Applications folder. Anyway.

How to create a rich text or HTML WYSIWYG type editor in Mozilla has come up a few times so I thought a post was in order. Mozilla has a rich text editing system (called Midas) and an API similar to Internet Explorer’s. Mozilla, like Internet Explorer, supports the ability to make an entire document editable by setting the designMode property of the document object. Once in design mode, the document can be manipulated using various DHTML commands.

After getting sidetracked for a while, I have finally made some progress on XUL Explorer. I have been tinkering around with the editor and integrating the XUL validator. I also reorganized the code a little so I could support sidebars in the future.