- Introduction
- XUL Is XML
- XUL Does Easily What XHTML Does Clumsily
- XUL GUI Construction Goes Beyond Forms
- The Template Factor
- Over the XUL Rainbow
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
XUL Does Easily What XHTML Does Clumsily
A serious problem with traditional web-based applications is the way in which they abuse HTML. The HTML standard is designed for display of hypertext documents—documents containing links to other documents. The form-like aspects of HTML have nothing to do with hypertext; they exist in the HTML standards merely because they're too useful to leave out. Web-based applications try to make HTML pages look more like a paper form than like a hypertext document. This is a perversion of HTML's original purpose.
XUL is a language for expressing forms away from the hypertext environment. Stripped of the underlying hypertext requirement, XUL is able to offer more flexible form-construction options, as well as everything that HTML offers the form builder. This table shows that XUL can do everything that HTML's form and menu tags can do:
Simple HTML and XUL Tags Compared
|
HTML Tag |
XUL Tag |
|---|---|
|
<BUTTON> |
<button> |
|
<INPUT TYPE="button"> |
<button> |
|
<INPUT TYPE="text"> |
<textbox> |
|
<INPUT TYPE="radio"> |
<radio> |
|
<INPUT TYPE="checkbox"> |
<checkbox> |
|
<INPUT TYPE="password"> |
<textbox type="password"> |
|
<INPUT TYPE="image"> |
<image> or <button> |
|
<SELECT> |
<menulist> or <listbox> |
|
<OPTGROUP> |
<menuseparator> |
|
<OPTION> |
<menuitem> |
|
<TEXTAREA> |
<textbox multiline="true"> |
|
<LABEL> |
<label> |
|
<FIELDSET> |
<groupbox> |
|
<LEGEND> |
<caption> |
|
<INPUT TYPE="radio" NAME=> |
<radiogroup> |
XUL doesn't have a <FORM> tag because XUL is explicitly about forms. It doesn't have a Submit button because form operations are run from JavaScript. Such operations don't usually have the security restrictions that HTML forms have.
XUL also has some very sophisticated form-like tags. <listbox> and <tree> are more powerful than anything HTML has to offer. <listbox> is a more flexible version of <SELECT>. <tree> implements a user-navigable tree structure, like that of Microsoft's Windows Explorer or the Macintosh Finder. One of these trees appears in the Bookmark Manager screenshot above (Figure 3).
In HTML, tags like <P>, <IMG>, and <A> are the central concepts; form tags are secondary. In XUL, these roles are reversed. The <button> tag is central to XUL; the <description> and <image> tags (equivalent to <P> and <IMG>, respectively) are very much secondary. XUL is not very useful for displaying long streams of text, although it can get by. It's better at constructing highly interactive data-entry interfaces.
The most fundamental tags in HTML's layout system are <DIV> and <SPAN>. XUL has a fundamental tag that's equivalent: <box>. <box> has <vbox> and <hbox> variants. These tags control how content is laid out, just as their HTML equivalents do. Where a line of HTML text will be wrapped to fit an existing window's dimensions, an XUL document will sometimes force a new window to a suitable size. So there are some points of difference between HTML and XUL layout.
Just like XHTML-based applications, XUL applications are part of a multi-technology environment. The features of CSS2, JavaScript, and the DOM standards are all available to a XUL programmer. Some standards components aren't there, such as the HTML part of the DOM 1 standard, because it's XUL and not XHTML. In general terms, however, the environment is the same. This kind of XHTML code:
<input type="button" style="font-size:large" onclick="alert('Hi')">Press Me</input>
works just as well when used in XUL:
<button style="font-size:large" onclick ="alert('Hi')">Press Me</button>
This flexible environment, plus XUL's emphasis on "forms first, text second," means that it's easy to create XUL documents that are laid out and aligned in a bulletproof way. This process is made especially easy by XUL's <spacer> tag and its flex attribute. These features act like the placement features of a GUI design tool. No one-pixel GIFs, graphic designers, or other nasties are required. Add a CSS2 stylesheet (called a theme or skin in XUL) if you want extra control over appearances.