Creating Applications with Mozilla
PrevChapter 7. Extending the UI with XBLNext

7.7. Resources for Bindings

This chapter stresses that bindings used in XUL documents are designed to be modular, self-contained widgets that have a certain appearance and carry out a specific set of functionality. This final section extends the notion of XBL as an organization of content, behavior, and event handling by describing extra resources (such as stylesheets and pictures) that are available in the XBL framework for use in your bindings. If you are creating templates, for example, you should consider using these approaches to application development.

7.7.1. Stylesheets in XBL

You can include stylesheets in an XBL document by using the XBL-specific element <stylesheet>. The example below shows the color-picker stylesheet as it would be included in a <resources>-containing element, allowing styles contained therein to be used by the bindings that referenced it. 

<stylesheet src="chrome://xfly/skin/color-picker.css" />

The <stylesheet> element is intended for the styling of bound elements and anonymous content. It can be used on anonymous content generated by the binding and in explicit children in documents that use the bindings. Typically, you would include this element in a binding and inherit it to style other bindings when there are many bindings that have a similar appearance. 

<binding id="popup-base">
  <resources>
    <stylesheet src="chrome://global/skin/popup.css" />
  </resources>
</binding>

Then you can access the stylesheet in your binding by using the extends attribute: 

<binding id="popup" extends="chrome://global/content/bindings/popup.xml#popup-base">

Beyond this static usage of stylesheets, two attributes, applyauthorstyles and styleexplicitcontent, can affect the appearance of a binding element if a stylesheet is applied to it. Although they are part of the XBL 1.0 specification, these attributes were not implemented at the time of writing. They are attributes of the <binding> element.

applyauthorstyles

A Boolean value that determines the use of stylesheets from the document that contains the bound element. The default is false.

styleexplicitcontent

A Boolean value that indicates whether the stylesheets loaded in the XBL document can be applied to a bound element's explicit children and not just the bound element itself. The default is false.

Stylesheets take effect from the inside scope and move outwards. This means that styles on a binding can be overridden easily by styles attached to elements contained in anonymous content.

The <image> XBL element works much like a XUL element and pulls in the image by using the src attribute. 

<binding id="images">
  <resources>
    <image src="plane.png"/>
    <image src="boat.png"/>
    <image src="bicycle.png"/>
  </resources>
</binding>

If an element calls this binding, the pictures would lay out side-by-side horizontally in the bound document.

PrevHomeNext
Event HandlingUpXPCOM