XUL Tutorial Study Notes - Simple Element

Creating a Window

1. window tag: Each user interface window is described in a separate file, like html tag in html file.

2. The orient attribute specifies the arrangement of the items in the window, the default value is vertical.

Adding Buttons

<button
id="identifier"
class="dialog"
label="OK"
image="images/image.jpg"
disabled="true"
accesskey="t"/>

Adding Labels and Images

1. Tag for image: <image src = "some URL">.

Input Controls

1. <textbox>: type(password/number)

2. <checkbox> uses checked attribute, and <radio> uses selected attribute.

3. <radiogroup> used to group radio buttons together.

Numeric Controls

1. <scale>: orient attribute and dir attribute.

2. <datepicker> type attribute(grid/popup)

3. <timepicker>

List Controls

1. <listbox> <listitem>

2. <listcols> <listcol> <listcell>

3. <listhead> <listheader>

4. <menulist> <menupopup> <menuitem>

Progress Meters

<progressmeter>mode attribute

Adding HTML Elements

1. You should avoid using HTML elements in XUL files if you can.

Using Spacers

1. <spacer>flexattribute.

More Button Features

1. Add button image: imageattribute, CSS list-style-image style.

2. The dir attribute(default normal or reverse) controls the direction of text and the image, theorient attribute(default horizontal or vertical) used to place the image above or below the text.

3. Menu popup inside the button: type attribute(menu or menu-button)

2. Specifying a flex value of 0 has the same effect as leaving the flex attribute out entirely. It means that the element is not flexible at all. You may also sometimes see a flex value specified as a percentage. This has no special meaning and is treated as if the percent sign was not there.