XUL with HAML?

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:
xul_haml

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.

Advertisements

1 thought on “XUL with HAML?”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s