XUL Compact Syntax Study

To make the XUL syntax more compact and more accesible to newcomers who mighty shy away from the "complexity" of XML, I have created four non-XML syntax alternatives (that is, C style, Python style, Lisp style, Pascal style).

For interoperability all non-XML syntax alternatives can easily be translated to classic XML syntax and classic XML syntax can be translated to a more compact alternative.

For a first glance check out the bed order form in five syntax flavours:

• Classic XML Syntax
• C-Style Compact Syntax
• Python Style Compact Syntax
• Lisp Style Compact Syntax
• Pascal Style Compact Syntax

Id Promoted. By promoting the all-important id attribute as second-in-rank (surpassed only by the tag itself) instead of treating it just like any other attribute the structure becomes clearer (the id always follows the tag) and the markup shrinks by five chars (that is, id=""). You can ditch the quotes because ids contain no whitespaces.

No quotes. By stripping quotes from numbers, constants or reference ids the markup shrinks by two chars for every non-string literal and the structure becomes clearer (quoted string literals standout in a non-quoted world).

Prefixed attributes. To avoid confusion between attribute names and non-quoted attribute values (such as constants or reference ids), attribute names sprout a dot prefix (e.g. .type instead of type) other possible alternative prefixes include @ or - ( e.g. @type or -type).

No root tag. Compact syntax files don't mix easily with other markup and therefore don't require a single root tag (that is, xul). Use file extensions or other means to identify non-xml compact syntax files.

True dropped. By dropping true and assuming true as the default value for empty attributes, the markup shrinks by another four characters (e.g. .skipbody true becomse .skipbody).

Unify attributes and CSS properties. Instead of squeezing CSS properties into attributes using yet another syntax, use a single syntax (e.g. style="font: 5 italic bold serif; background: gold;" becomes .font 5 italic bold serif .background gold).

To avoid mixing of style and non-style attributes enclose style attributes in a tag-like style section. Example:

label { .value="Hello" style { .font 5 italic bold serif .background gold } }

Allow user-defined patterns. To avoid cut-and-paste and foster reuse allow user-defined patterns. Example:

addressbox = hbox
  {
    label .value "City:"
    textbox city
    label .value "State:"
    textbox state .cols 2
    label .value "Zipcode:"
    textbox zip .cols 5
    label .value "Customer Code:"
    password code .cols 8
  }  

Once defined, you can use addressbox like a built-in tag. Example:

vbox
{
  hbox
  {
    label .value "Given Name:"
    textbox name
    label .value "Family Name:"
    textbox name .cols 30
  }
  addressbox
}

Prefix Ids. To avoid confusion when more than one tag is squeezed into a single line, mark the id with a percentage (%) character. For example, is the second textbox a tag or an id?

textbox textbox

It should be an id. To sequeeze two tags into a single line use the semicolon "statement" separator. Example

textbox; textbox 

Back to the hash character. Here's the conflict resolved without a statement separator.

textbox %textbox
textbox textbox %textbox textbox

That's it.

- Gerald Bauer, Vienna, December 2002

Classic XUL Syntax

<xul>
 <groupbox id="bedView">
   <caption label="Ordering Your New Bed" />
 
   <hbox>
     <label value="Name:"/>
     <textbox id="name" />

     <label value="Address:"/>
     <textbox id="address" cols="30" />
   </hbox>
       
   <hbox>
     <label value="City:" />
     <textbox id="city" />

     <label value="State:" />
     <textbox id="state" cols="2" />

     <label value="Zipcode:" />
     <textbox id="zip" cols="5" />

     <label value="Customer Code:" />
     <password id="code" cols="8" />
   </hbox>

   <hbox>
     <label value="Type of wood:" />
     <choice id="woodtype" list="woodtype" />

     <label value="Size:" />
     <choice id="size" list="size" type="radio" />
   </hbox>

   <hbox>
     <label value="Extras:" />

     <checkbox label="Footband" />
     <checkbox label="Drawers (for underneath)" />
     <checkbox label="Casters" />
     <checkbox label="Squeak proofing" />
   </hbox>

   <vbox>
     <label value="Please share any suggestions or comments with us:" />
     <textarea id="comments" rows="3" cols="65" />
   </vbox>

   <hbox>
     <button id="submit" label="Order Bed" />
     <button id="reset" label="Start Over" />
   </hbox>

 </groupbox>
</xul>

C-Style Compact Syntax

groupbox bedView
{
  caption .label "Ordering Your New Bed"
  hbox
  {
    label .value "Name:"
    textbox name
    label .value "Address:"
    textbox address .cols 30
  }
  hbox
  {
    label .value "City:"
    textbox city
    label .value "State:"
    textbox state .cols 2
    label .value "Zipcode:"
    textbox zip .cols 5
    label .value "Customer Code:"
    password code .cols 8
  }
  hbox
  {
    label .value "Type of wood:"
    choice woodtype .list woodtype
    label .value "Size:"
    choice size .list size .type radio
  }
  hbox
  {
    label .value "Extras:"
    checkbox .label "Footband"
    checkbox .label "Drawers (for underneath)"
    checkbox .label "Casters"
    checkbox .label "Squeak proofing"
  }
  vbox
  {
    label .value "Please share any suggestions or comments with us:"
    textarea comments .rows 3 .cols 65
  }
  hbox
  {
    button submit .label "Order Bed"
    button reset .label "Start Over"
  }
}

Python-Style Compact Syntax

groupbox bedView:
  caption .label "Ordering Your New Bed"
  hbox:
    label .value "Name:"
    textbox name
    label .value "Address:"
    textbox address .cols 30
  hbox:
    label .value "City:"
    textbox city
    label .value "State:"
    textbox state .cols 2
    label .value "Zipcode:"
    textbox zip .cols 5
    label .value "Customer Code:"
    password code .cols 8
  hbox:
    label .value "Type of wood:"
    choice woodtype .list woodtype
    label .value "Size:"
    choice size .list size .type radio
  hbox:
    label .value "Extras:"
    checkbox .label "Footband"
    checkbox .label "Drawers (for underneath)"
    checkbox .label "Casters"
    checkbox .label "Squeak proofing"
  vbox:
    label .value "Please share any suggestions or comments with us:"
    textarea comments .rows 3 .cols 65
  hbox:
    button submit .label "Order Bed"
    button reset .label "Start Over"

Lisp-Style Compact Syntax

(groupbox bedView
  (caption @label "Ordering Your New Bed" )
  (hbox
    (label @value "Name:" )
    (textbox name )
    (label @value "Address:" )
    (textbox address @cols 30 )
  )
  (hbox
    (label @value "City:" )
    (textbox city )
    (label @value "State:" )
    (textbox state @cols 2 )
    (label @value "Zipcode:" )
    (textbox zip @cols 5 )
    (label @value "Customer Code:" )
    (password code @cols 8 )
  )
  (hbox
    (label @value "Type of wood:" )
    (choice woodtype @list woodtype )
    (label @value "Size:" )
    (choice size @list size @type radio )
  )
  (hbox
    (label @value "Extras:" )
    (checkbox @label "Footband" )
    (checkbox @label "Drawers (for underneath)" )
    (checkbox @label "Casters" )
    (checkbox @label "Squeak proofing" )
  )
  (vbox
    (label @value "Please share any suggestions or comments with us:" )
    (textarea comments @rows 3 @cols 65 )
  )
  (hbox
    (button submit @label "Order Bed" )
    (button reset @label "Start Over" )
  )
)

Pascal-Style Compact Syntax

groupbox bedView
begin
  caption .label "Ordering Your New Bed"
  hbox
  begin
    label .value "Name:"
    textbox name
    label .value "Address:"
    textbox address .cols 30
  end
  hbox
  begin
    label .value "City:"
    textbox city
    label .value "State:"
    textbox state .cols 2
    label .value "Zipcode:"
    textbox zip .cols 5
    label .value "Customer Code:"
    password code .cols 8
  end
  hbox
  begin
    label .value "Type of wood:"
    choice woodtype .list woodtype
    label .value "Size:"
    choice size .list size .type radio
  end
  hbox
  begin
    label .value "Extras:"
    checkbox .label "Footband"
    checkbox .label "Drawers (for underneath)"
    checkbox .label "Casters"
    checkbox .label "Squeak proofing"
  end
  vbox
  begin
    label .value "Please share any suggestions or comments with us:"
    textarea comments .rows 3 .cols 65
  end
  hbox
  begin
    button submit .label "Order Bed"
    button reset .label "Start Over"
  end
end