I was playing around with XUL today. I was modifying a my ffkiosk application I made a little while ago and experimenting with adding some buttons and a toolbar to it. While XUL is relatively simple stuff, I find its pretty verbose, and as an on and off user of HAML, I also find it ugly.
Then it hit me; I wonder if you can use HAML to write XUL?
The answer is yes:
!!! xml
<?xml-stylesheet href="chrome://ffkiosk/skin/main.css" type="text/css" ?>
%window{id: "main", title: "ffkiosk", onload: "onload();", sizemode: "fullscreen", height: "768", width: "1024", xmlns: "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"}
%script{type: "application/javascript", src: "chrome://ffkiosk/content/jquery-1.7.2.js"}
%script{type:"application/javascript", src: "chrome://ffkiosk/content/io.js"}
%script{type: "application/javascript", src: "chrome://ffkiosk/content/main.js"}
%toolbar
%toolbaritem
%toolbarbutton{label: "I'm a button"}/
%toolbaritem
%toolbarbutton{label:"Foo", type:"menu-button"}
%menupopup
%menuitem{label: "Bar"}/
%menuitem{label: "Baz"}/
%browser{id: "browser", type: "content-primary", flex: "1"}/
Apart from the xml-stylesheet line which HAML can’t deal with (but cheerfully lets pass through) it works really well. The output is totally legit XUL:
<?xml version='1.0' encoding='utf-8' ?>
<?xml-stylesheet href="chrome://ffkiosk/skin/main.css" type="text/css" ?>
<window height='768' id='main' onload='onload();' sizemode='fullscreen' title='ffkiosk' width='1024' xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'>
<script src='chrome://ffkiosk/content/jquery-1.7.2.js' type='application/javascript'></script>
<script src='chrome://ffkiosk/content/io.js' type='application/javascript'></script>
<script src='chrome://ffkiosk/content/main.js' type='application/javascript'></script>
<toolbar>
<toolbaritem>
<toolbarbutton label="I'm a button" />
</toolbaritem>
<toolbaritem>
<toolbarbutton label='Foo' type='menu-button'>
<menupopup>
<menuitem label='Bar' />
<menuitem label='Baz' />
</menupopup>
</toolbarbutton>
</toolbaritem>
</toolbar>
<browser flex='1' id='browser' type='content-primary' />
</window>
Sure enough XULRunner happily renders it:

At the moment I can’t decide if this is a great idea or totally ridiculous. Hell, I know plenty of people that think that any usage of HAML is ridiculous. I can imagine with a complex UI the typing saved and the clarity gained might be worth it… until someone points out a decent XUL IDE.
An interesting experiment if nothing else.
Reblogged this on Sutoprise Avenue, A SutoCom Source.