| home / programming / xul / 1 |    [previous][next] |
|
|
|
Here, we use the fancy XUL
But to give this page the finishing touch, we'd have to use a touch of JavaScript to copy data from XUL to the HTML form, or to send the XUL data direct to the Web server.
Figure 3 show the contents of the other tabs in the tab box.
Figure 3: Contents of other tabs in the tab box.
Each tab is revealed with a single user click. All the content of the tabs is loaded at once, so there are no server CGI programs to write. Note how some XUL form elements are hidden "underneath" others. You can't do that in plain HTML, from either a design or a navigation point of view. Although most of the form elements look like HTML form elements, XUL has a wide variety of controls and widgets to choose from.
Finally, we come to the XUL content source itself. Listing 2 shows the code for the XUL document that contains a sole tabbox.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<window
title="Checkout Station"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<script src="checkout.js"/>
<tabbox>
<tabs>
<tab id="t1"
label="Sign In"/>
<tab id="t2"
label="Shipping"/>
<tab id="t3"
label="Payment"/>
<tab id="t4"
label="Gift Wrap"/>
</tabs>
<tabpanels>
<tabpanel>
<vbox>
<description>Please
enter your username and password.</description>
<textbox
id="username"/>
<textbox
type="password" id="password"/>
</vbox>
</tabpanel>
<tabpanel>
<grid>
<columns><column/><column/></columns>
<rows>
<row>
<description>Please
enter the delivery address.</description>
</row>
<row>
<description
pack="end">Full Name</description>
<textbox
id="fullname"/>
</row>
<row>
<description
pack="end">Full Address</description>
<textbox
id="address"/>
</row>
<row>
<description
pack="end">Contact Details</description>
<textbox
id="contact"/>
</row>
</rows>
</grid>
</tabpanel>
<tabpanel>
<vbox>
<description>Please
enter your credit card number</description>
<textbox
id="creditcard"/>
</vbox>
</tabpanel>
<tabpanel>
<vbox>
<description>Enter
your wrapping preference for the delivery</description>
<checkbox
id="wrapping" label="Wrap my delivery" checked="true"/>
<hbox
align="center">
<listbox
id="wraptype" seltype="single" rows="3">
<listitem
label="Brown Paper"/>
<listitem
label="Cellophane"/>
<listitem
label="Birthday Paper"/>
<listitem
label="Christmas Paper"/>
</listbox>
<description>Choose
your preferred wrapping</description>
</hbox>
</vbox>
</tabpanel>
</tabpanels>
</tabbox>
</window>
Listing 2. XUL document holding a four-tab tabbox
All the tags above are XUL tags. While they might seem unfamiliar, it's easy to guess what most of them are. <description> is a piece of text, <textbox> is, well, a textbox, and so on. There are a couple of things new at the top of this file, though. The string:
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
is Mozilla's geeky way of identifying an XUL document. XUL is sometimes pronounced
"zool", so this string is a pun on and a side-reference to the character
of that name from the movie Ghostbusters.
| home / programming / xul / 1 | [previous][next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: May 25, 2004
URL: http://webreference.com/programming/xul/1
