XUL improvements in Firefox 3

  • Revision slug: XUL_improvements_in_Firefox_3
  • Revision title: XUL improvements in Firefox 3
  • Revision id: 125235
  • Created:
  • Creator: Masayuki
  • Is current revision? No
  • Comment /* Other improvements */ Adding keypress event changing

Revision Content

{{template.Fx_minversion_header(3)}}

Firefox 3 provides a number of new XUL elements, as well as improvements to existing elements. While this material is documented in detail elsewhere, this article provides a convenient list of these improvements as well as links to the detailed documentation.

New elements

  • The new <scale> element lets you create sliding scales that let the user select any value in a specified range. This widget would typically be used, for example, to create a volume control.
  • A new value, number, for the type attribute of textboxes creates a textbox in which only numbers may be entered. In addition, arrow buttons appear to one side which may be used to step through values. {{mediawiki.interwiki('wikimo', 'XUL:Specs:NumberBox', 'More information about numeric textboxes')}} ({{template.Bug(345510)}})
  • A <dropmarker> element is added which is useful when creating menu-like widgets using XBL bindings. ({{template.Bug(348614)}})
  • A <spinbuttons> element is added which can be used when creating widgets using XBL bindings. ({{template.Bug(155053)}})
  • Two widgets, <datepicker> and <timepicker>, can be used to allow the entry of dates and times. The datepicker is available in a number of styles by setting the type attribute, to allow entry with textboxes or a calendar grid. {{mediawiki.interwiki('wikimo', 'XUL:Specs:DateTimePickers', 'More information about date pickers')}} Datepicker Reference Timepicker Reference
  • The <panel> element is new and designed for popups that are not menus. They can support any type of content. The <menupopup> element should be used for menus. Menus provide keyboard navigation and support opening and closing submenus.
  • A guide has been created for menus and popups describing new features available.

Improvements to trees

  • Trees can now be scrolled horizontally. If the columns don't fit into the available width, a horizontal scrollbar appears. This happens if the columns' specified widths add up to more than the available space. See {{template.Bug(212789)}} for details.
  • A new selection style allows cells to be selected individually, instead of entire rows. To use this selection style, set the tree's seltype attribute to cell.
  • Trees now support editing of individual cells. When the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell. See {{mediawiki.interwiki('wikimo', 'XUL:Tree', 'these notes')}} for details.
  • <treecol> elements now support an overflow attribute which may be set to true to allow the text of cells within that column to expand to neighbouring blank cells if the text is too large to fit into that single cell.

Improvements to menus

  • The image attribute is now used consistently for setting images.
  • Menulists fire the select event when selecting an item.
  • The inputField and editable properties have been added to menulist
  • The <menu>, <menuitem> and <menuseparator> elements now have a readonly selected property which retrieves whether the item is selected in a <menulist>
  • The <menu>, <menuitem> and <menuseparator> elements now have a readonly control property which returns the enclosing <menulist>
  • The <menu>, <menuitem> and <menuseparator> elements now support the accessKey, disabled, crop, image and label properties which set the corresponding attribute
  • The <menu> element now has methods to append, insert and remove menuitems. ({{template.Bug(372552)}})
  • Editable menulists now offer an editor property to get the internal {{template.Interface("nsIEditor")}} for its text field.
  • Menus may now be made translucent on platforms that support it ({{template.Bug(70798)}}).

Improvements to textboxes

  • Setting a textbox's spellcheck attribute to true enables inline spellchecking for that textbox.
  • The <textbox> now has a reset() method to reset the value of the textbox to the default value. The defaultValue property may be used to retrieve and modify the default value of the textbox.
  • An editor property is now offered, which lets you get the internal {{template.Interface("nsIEditor")}} for the text field.
  • textbox now supports a newlines attribute which specifies how line breaks in pasted text are handled. Possible values are:
    • pasteintact - paste everything as is
    • pastetofirst - (default value) paste only up to the first line break
    • replacewithspaces - replace line breaks with spaces
    • replacewithcommas - replace line breaks with commas
    • strip - strip out all line breaks
    • stripsurroundingwhitespace - strip out all line breaks and surrounding whitespace

Other improvements

  • The type attribute on a <button> may be set to repeat to create buttons which fire their command event repeatedly while the mouse button is held down.
  • The buttondisabledaccept attribute can now be used on the <dialog> element to have the accept (OK) button initially disabled.
  • The <titlebar> element now supports the allowevents attribute to allow events to be passed to the children of the titlebar.
  • The <splitter> now supports an additional value for the collapse attribute of 'both' which indicates that the splitter can collapse elements on both sides of it when dragged. The substate attribute will set to either before or after when one is collapsed. ({{template.Bug(337955)}})
  • The <richlistbox> element now supports multiple selection. Set the seltype attribute to 'multiple' to enable this.
  • The <radio> element has a group attribute which may be set to the id of a <radiogroup> element which the radio button belongs to. This allows the radio buttons to arranged in a manner that may not be as suitable when placing them all inside a radiogroup.
  • Menus, panels and tooltips support two additional methods, openPopup() and openPopupAtScreen(). These methods should be used instead of showPopup() which was found to be confusing to use.
  • Handling of <key> element improves for non-Latin keyboard layout users. See Gecko Keypress Event.

See also



{{ wiki.languages( { "es": "es/Mejoras_XUL_en_Firefox_3", "fr": "fr/Am\u00e9liorations_XUL_dans_Firefox_3", "ja": "ja/XUL_improvements_in_Firefox_3" } ) }}

Revision Source

<p>{{template.Fx_minversion_header(3)}}
</p><p>Firefox 3 provides a number of new <a href="en/XUL">XUL</a> elements, as well as improvements to existing elements.  While this material is documented in detail elsewhere, this article provides a convenient list of these improvements as well as links to the detailed documentation.
</p>
<h3 name="New_elements">New elements</h3>
<ul><li>The new <code><a href="en/XUL/scale">&lt;scale&gt;</a></code> element lets you create sliding scales that let the user select any value in a specified range. This widget would typically be used, for example, to create a volume control.
</li><li>A new value, <code>number</code>, for the <code>type</code> attribute of textboxes creates a textbox in which only numbers may be entered. In addition, arrow buttons appear to one side which may be used to step through values. {{mediawiki.interwiki('wikimo', 'XUL:Specs:NumberBox', 'More information about numeric textboxes')}} ({{template.Bug(345510)}})
</li><li>A <code><a href="en/XUL/dropmarker">&lt;dropmarker&gt;</a></code> element is added which is useful when creating menu-like widgets using XBL bindings. ({{template.Bug(348614)}})
</li><li>A <code><a href="en/XUL/spinbuttons">&lt;spinbuttons&gt;</a></code> element is added which can be used when creating widgets using XBL bindings. ({{template.Bug(155053)}})
</li><li>Two widgets, <code><a href="en/XUL/datepicker">&lt;datepicker&gt;</a></code> and <code><a href="en/XUL/timepicker">&lt;timepicker&gt;</a></code>, can be used to allow the entry of dates and times. The datepicker is available in a number of styles by setting the <code>type</code> attribute, to allow entry with textboxes or a calendar grid. {{mediawiki.interwiki('wikimo', 'XUL:Specs:DateTimePickers', 'More information about date pickers')}} <a href="en/XUL/datepicker">Datepicker Reference</a> <a href="en/XUL/timepicker">Timepicker Reference</a>
</li><li>The <code><a href="en/XUL/panel">&lt;panel&gt;</a></code> element is new and designed for popups that are not menus. They can support any type of content. The &lt;menupopup&gt; element should be used for menus. Menus provide keyboard navigation and support opening and closing submenus.
</li><li>A <a href="en/XUL/PopupGuide">guide</a> has been created for menus and popups describing new features available.
</li></ul>
<h3 name="Improvements_to_trees">Improvements to trees</h3>
<ul><li> Trees can now be scrolled horizontally.  If the columns don't fit into the available width, a horizontal scrollbar appears.  This happens if the columns' specified widths add up to more than the available space.  See {{template.Bug(212789)}} for details.
</li><li> A new selection style allows cells to be selected individually, instead of entire rows.  To use this selection style, set the tree's <code>seltype</code> attribute to <code>cell</code>.
</li><li> Trees now support editing of individual cells.  When the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell.  See {{mediawiki.interwiki('wikimo', 'XUL:Tree', 'these notes')}} for details.
</li><li>&lt;treecol&gt; elements now support an <code>overflow</code> attribute which may be set to true to allow the text of cells within that column to expand to neighbouring blank cells if the text is too large to fit into that single cell.
</li></ul>
<h3 name="Improvements_to_menus">Improvements to menus</h3>
<ul><li>The <code>image</code> attribute is now used consistently for setting images.
</li><li>Menulists fire the <code>select</code> event when selecting an item.
</li><li>The <code>inputField</code> and <code>editable</code> properties have been added to menulist
</li><li>The <code>&lt;menu&gt;</code>, <code>&lt;menuitem&gt;</code> and <code>&lt;menuseparator&gt;</code> elements now have a readonly <code>selected</code> property which retrieves whether the item is selected in a &lt;menulist&gt;
</li><li>The <code>&lt;menu&gt;</code>, <code>&lt;menuitem&gt;</code> and <code>&lt;menuseparator&gt;</code> elements now have a readonly <code>control</code> property which returns the enclosing &lt;menulist&gt;
</li><li>The <code>&lt;menu&gt;</code>, <code>&lt;menuitem&gt;</code> and <code>&lt;menuseparator&gt;</code> elements now support the <code>accessKey</code>, <code>disabled</code>, <code>crop</code>, <code>image</code> and <code>label</code> properties which set the corresponding attribute
</li><li>The &lt;menu&gt; element now has methods to append, insert and remove menuitems. ({{template.Bug(372552)}})
</li><li>Editable menulists now offer an <code>editor</code> property to get the internal {{template.Interface("nsIEditor")}} for its text field.
</li><li>Menus may now be made translucent on platforms that support it ({{template.Bug(70798)}}).
</li></ul>
<h3 name="Improvements_to_textboxes">Improvements to textboxes</h3>
<ul><li>Setting a <a href="en/XUL/textbox">textbox</a>'s <code>spellcheck</code> attribute to <code>true</code> enables inline spellchecking for that textbox.
</li><li>The <code>&lt;textbox&gt;</code> now has a <code>reset()</code> method to reset the value of the textbox to the default value. The <code>defaultValue</code> property may be used to retrieve and modify the default value of the textbox.
</li><li>An <code>editor</code> property is now offered, which lets you get the internal {{template.Interface("nsIEditor")}} for the text field.
</li><li><code><a href="en/XUL/textbox">textbox</a></code> now supports a <code>newlines</code> attribute which specifies how line breaks in pasted text are handled. Possible values are:
<ul><li><code>pasteintact</code> - paste everything as is
</li><li><code>pastetofirst</code> - (default value) paste only up to the first line break
</li><li><code>replacewithspaces</code> - replace line breaks with spaces
</li><li><code>replacewithcommas</code> - replace line breaks with commas
</li><li><code>strip</code> - strip out all line breaks
</li><li><code>stripsurroundingwhitespace</code> - strip out all line breaks and surrounding whitespace
</li></ul>
</li></ul>
<h3 name="Other_improvements">Other improvements</h3>
<ul><li>The <code>type</code> attribute on a <code>&lt;button&gt;</code> may be set to <code>repeat</code> to create buttons which fire their command event repeatedly while the mouse button is held down.
</li><li>The <code><a href="en/XUL/Attribute/buttondisabledaccept">buttondisabledaccept</a></code> attribute can now be used on the <code>&lt;dialog&gt;</code> element to have the accept (OK) button initially disabled.
</li><li>The <code>&lt;titlebar&gt;</code> element now supports the <code>allowevents</code> attribute to allow events to be passed to the children of the titlebar.
</li><li>The <code>&lt;splitter&gt;</code> now supports an additional value for the <code>collapse</code> attribute of <code>'both'</code> which indicates that the splitter can collapse elements on both sides of it when dragged. The <code>substate</code> attribute will set to either before or after when one is collapsed. ({{template.Bug(337955)}})
</li><li>The <code>&lt;richlistbox&gt;</code> element now supports multiple selection. Set the <code>seltype</code> attribute to <code>'multiple'</code> to enable this.
</li><li>The <code>&lt;radio&gt;</code> element has a <code>group</code> attribute which may be set to the id of a <code>&lt;radiogroup&gt;</code> element which the radio button belongs to. This allows the radio buttons to arranged in a manner that may not be as suitable  when placing them all inside a radiogroup.
</li><li>Menus, panels and tooltips support two additional methods, <code><a href="en/XUL/Method/openPopup">openPopup()</a></code> and <code><a href="en/XUL/Method/openPopupAtScreen">openPopupAtScreen()</a></code>. These methods should be used instead of <code>showPopup()</code> which was found to be confusing to use.
</li><li>Handling of <code>&lt;key&gt;</code> element improves for non-Latin keyboard layout users. See <a href="en/Gecko_Keypress_Event">Gecko Keypress Event</a>.
</li></ul>
<h3 name="See_also">See also</h3>
<ul><li> <a href="en/XUL">XUL</a>
</li><li> <a href="en/Firefox_3_for_developers">Firefox 3 for developers</a>
</li></ul>
<p><br>
</p><p><br>
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "es": "es/Mejoras_XUL_en_Firefox_3", "fr": "fr/Am\u00e9liorations_XUL_dans_Firefox_3", "ja": "ja/XUL_improvements_in_Firefox_3" } ) }}
Revert to this revision