Diff for /books/www/chapters/ch07.html between versions 1.7 and 1.11

version 1.7, 2002/12/04 06:07:15 version 1.11, 2003/03/19 15:45:00
Line 1 Line 1
<HTML>    <link rel="prev" href="http://books.mozdev.org/chapters/ch06.html" />
<HEAD><TITLE>Chapter 7</TITLE></HEAD><BODY BGCOLOR=WHITE><H2>Chapter 7</H2>    <link rel="next" href="http://books.mozdev.org/chapters/ch08.html" />
<H1><A NAME="77027"></A> Extending the UI with XBL</H1> 
<P>You now know that XUL is the basic tool set for creating your application interface, but even it has limitations. It is just a finite set of widgets that your programming needs may transcend. If you find that you reimplement many of the same groups of widgets in different applications, or if you want to  <!--INDEX XBL (eXtensible Binding Language) --> extend your application's interface in some other way, you will find the eXtensible Binding Language (XBL) an invaluable tool. 
<P>This chapter describes what XBL is and how it is used. Basically, XBL provides a way to attach new content or behavior to your application by  
using XBL bindings. XBL can extend, add to, and reorganize user interfaces. XBL can also help you organize scattered XUL code into a set of self-contained widgets that make building and maintaining your Mozilla application much easier. <A HREF="appc.html#77003">Appendix C</A> provides a reference for the XBL element set, with which new elements can be created. 
<H2><A NAME="77028"></A> What Is XBL?</H2> 
<P>XBL is an XML markup  <!--INDEX XBL (eXtensible Binding Language):overview --> language invented specifically for creating widgets. XBL looks similar to XUL, and may even contain XUL or HTML and other markup (see the <A HREF="#77031">"Namespaces and XBL</A>" section later in this chapter for more information about how other markup is used in XBL bindings), but its purpose is different. Flexibility and interoperability are the point of XBL. 
<P>If the XUL <TT>textbox</TT> is inadequate, for example, you can use XBL to create and attach a new widget called <TT>&lt;datafield/&gt;</TT>, possibly based on <TT>textbox</TT>, that provides special attributes and functionality for validating input data against a database. 
<P>A <I>binding</I> is a single XBL language  <!--INDEX bindings --> entity that can contain content as other markup (such as XUL) behavior that is represented as methods and properties, and event-handling capabilities. Bindings can be anything from small widget objects to large, complex blocks of code with extensive functionality. <A HREF="#77002">Figure 7-1</A> shows the different components that make up a binding: fields, properties, functions, event handlers, and content. The section <A HREF="#77033">"Anatomy of a Binding</A>," later in this chapter, provides more detail about a binding's structure. 
<P><CENTER><IMG SRC="foo.gif"></CENTER> 
<P><I>Figure 7-1: <A NAME="77002"></A></I> 
<I>Mozilla XBL binding structure</I> 
   
<P>Bindings differ from XUL overlays because they are fully self-contained, reusable, and generally have no dependencies outside of the binding itself. Although XUL is used most often as content in an XBL binding, XBL can also bind to and from HTML and XML. If you have worked with Java or C#, you may recognize some parallels between XBL bindings and Java objects.    <style type="text/css">
<H3><A NAME="77029"></A> XBL Terminology</H3>      div.c19 {font-weight: bold; text-align: center}
<P>The following terms are used to describe XBL and its use in the XPFE:      div.c18 {text-align: center}
<DL><DT>XBL    </style>
<DD>An acronym for  <!--INDEX XBL (eXtensible Binding Language) --> the eXtensible Binding Language. In some contexts, the term XBL refers to actual code (e.g., "the XBL in this example . . . "). XBL is an XML syntax.<P>    <h2>Chapter 7</h2>
<DT>Binding
<DD>A single unit of  <!--INDEX bindings:XBL --> the XBL language, one  <!--INDEX XBL (eXtensible Binding Language):bindings --> or more of which is contained in a binding document. Most bindings are made up of content and implementation, although each are mutually exclusive; if you add event handlers to that list, each one can appear on its own in a binding.<P>    <h1><a name="77027"></a> Extending the UI with XBL</h1>
<DT>Binding document    <p>You now know that XUL is the basic tool set for creating
<DD>An XBL file with an <I>.xml</I> extension  <!--INDEX binding documents, XBL --> that  <!--INDEX XBL (eXtensible Binding Language):binding documents --> contains one or more bindings.<P>    your application interface, but even it has limitations. It is
<DT>Bound document    just a finite set of widgets that your programming needs may
<DD>A XUL (or HTML) document  <!--INDEX bound documents, XBL --> that  <!--INDEX XBL (eXtensible Binding Language):bound documents --> has one or more bindings attached to it as content.<P>    transcend. If you find that you reimplement many of the same
<DT>Bound element    groups of widgets in different applications, or if you want to 
<DD>A bound element is a widget  <!--INDEX bound elements:XBL;elements:bound elements:XBL --> or  <!--INDEX XBL (eXtensible Binding Language):bound elements --> element that uses a particular binding. It can be an existing element in the XUL or HTML set or a newly invented one.<P>    <!--INDEX XBL (eXtensible Binding Language) --> extend your
<DT>Anonymous content    application's interface in some other way, you will find the
<DD>Content (e.g., XUL elements)  <!--INDEX anonymous content, XBL -->  <!--INDEX XBL (eXtensible Binding Language):anonymous content --> contained in a binding that is hidden from the document object (DOM). Refer to the section <A HREF="#77047">"XBL and the DOM</A>," later in this chapter, for a more detailed discussion of its characteristics and how to programmatically gain access to the content.<P>    eXtensible Binding Language (XBL) an invaluable tool.</p>
<DT>Attachment and detachment    <p>This chapter describes what XBL is and how it is used.
<DD>Attachment is the process through  <!--INDEX attachment, XBL;XBL (eXtensible Binding Language):attachment --> which a  <!--INDEX detachment, XBL;XBL (eXtensible Binding Language):detachment --> binding is associated with a bound element. It is essentially a way of telling the element which binding to use. Detachment is the process of removing that link and with it, the binding display.<P>    Basically, XBL provides a way to attach new content or behavior
<DT>Insertion point    to your application by using XBL bindings. XBL can extend, add
<DD>The point in anonymous content at which  <!--INDEX insertion point, XBL;XBL (eXtensible Binding Language):insertion point --> children of the bound element are inserted. The section <A HREF="#77057">"Extra Binding Content and Insertion Points</A>," later in this chapter, details the insertion process.<P>    to, and reorganize user interfaces. XBL can also help you
<DT>Inheritance    organize scattered XUL code into a set of self-contained
<DD>During inheritance, characteristics of one object  <!--INDEX inheritance:XBL;XBL (eXtensible Binding Language):inheritance --> are passed on to another object. In XBL, this process is multifaceted. Bindings can inherit from other bindings, anonymous content can inherit attributes from the bound element, and a binding implementation can inherit the behavior of another widget. All concepts are explained in the section <A HREF="#77060">"Inheritance</A>," later in this chapter.<P></DL>    widgets that make building and maintaining your Mozilla
<H3><A NAME="77030"></A> An XBL Document</H3>    application much easier. <a href="appc.html#77003">Appendix
<P>XBL documents are files saved  <!--INDEX XBL documents;documents:XBL documents --> with an <I>.xml</I> filename extension. Most bindings implement XUL content and behavior with script, so XBL files reside in your XUL application's chrome content area and have full access to XPConnect-wrapped XPCOM objects.    C</a> provides a reference for the XBL element set, with which
<P>Several bindings often reside inside the same XBL file. Performance benefits from this arrangement, if you have multiple related bindings, because only one XBL document needs to be loaded, rather than multiple documents. Organization is another factor. Mozilla has dozens of bindings that are interrelated by either inheritance or filename identifiers. Individual pieces to a menu widget reside in a file called <I>menu.xml</I>, button bindings are in <I>button.xml</I>, and so forth. Keeping these bindings together is wise.    new elements can be created.</p>
<P>The XBL document's root container is the <TT> <!--INDEX bindings element, XBL --> &lt;bindings&gt;</TT> tag. Inside this element is one or more individual child bindings, defined by the <TT>&lt;binding&gt;</TT> tag. A simple XBL document is as follows:    <h2><a name="77028"></a> What Is XBL?</h2>
<PRE>&lt;?xml version="1.0"?&gt;    <p>XBL is an XML markup 
     <!--INDEX XBL (eXtensible Binding Language):overview -->
     language invented specifically for creating widgets. XBL looks
     similar to XUL, and may even contain XUL or HTML and other
     markup (see the <a href="#77031">"Namespaces and XBL</a>"
     section later in this chapter for more information about how
     other markup is used in XBL bindings), but its purpose is
     different. Flexibility and interoperability are the point of
     XBL.</p>
     <p>If the XUL <tt>textbox</tt> is inadequate, for example, you
     can use XBL to create and attach a new widget called
     <tt>&lt;datafield/&gt;</tt>, possibly based on
     <tt>textbox</tt>, that provides special attributes and
     functionality for validating input data against a database.</p>
     <p>A <i>binding</i> is a single XBL language 
     <!--INDEX bindings --> entity that can contain content as other
     markup (such as XUL) behavior that is represented as methods
     and properties, and event-handling capabilities. Bindings can
     be anything from small widget objects to large, complex blocks
     of code with extensive functionality. <a href="#77002">Figure
     7-1</a> shows the different components that make up a binding:
     fields, properties, functions, event handlers, and content. The
     section <a href="#77033">"Anatomy of a Binding</a>," later in
     this chapter, provides more detail about a binding's
     structure.</p>
     <div class="c18">
       <img src="foo.gif">
     </div>
     <p><i>Figure 7-1: <a name="77002"></a></i> <i>Mozilla XBL
     binding structure</i></p>
     <p>Bindings differ from XUL overlays because they are fully
     self-contained, reusable, and generally have no dependencies
     outside of the binding itself. Although XUL is used most often
     as content in an XBL binding, XBL can also bind to and from
     HTML and XML. If you have worked with Java or C#, you may
     recognize some parallels between XBL bindings and Java
     objects.</p>
     <h3><a name="77029"></a> XBL Terminology</h3>
     <p>The following terms are used to describe XBL and its use in
     the XPFE:</p>
     <dl>
       <dt>XBL</dt>
       <dd>An acronym for 
       <!--INDEX XBL (eXtensible Binding Language) --> the
       eXtensible Binding Language. In some contexts, the term XBL
       refers to actual code (e.g., "the XBL in this example . . .
       "). XBL is an XML syntax.</dd>
       <dt>Binding</dt>
       <dd>A single unit of <!--INDEX bindings:XBL --> the XBL
       language, one 
       <!--INDEX XBL (eXtensible Binding Language):bindings --> or
       more of which is contained in a binding document. Most
       bindings are made up of content and implementation, although
       each are mutually exclusive; if you add event handlers to
       that list, each one can appear on its own in a binding.</dd>
       <dt>Binding document</dt>
       <dd>An XBL file with an <i>.xml</i> extension 
       <!--INDEX binding documents, XBL --> that 
       <!--INDEX XBL (eXtensible Binding Language):binding documents -->
       contains one or more bindings.</dd>
       <dt>Bound document</dt>
       <dd>A XUL (or HTML) document 
       <!--INDEX bound documents, XBL --> that 
       <!--INDEX XBL (eXtensible Binding Language):bound documents -->
       has one or more bindings attached to it as content.</dd>
       <dt>Bound element</dt>
       <dd>A bound element is a widget 
       <!--INDEX bound elements:XBL;elements:bound elements:XBL -->
       or 
       <!--INDEX XBL (eXtensible Binding Language):bound elements -->
       element that uses a particular binding. It can be an existing
       element in the XUL or HTML set or a newly invented one.</dd>
       <dt>Anonymous content</dt>
       <dd>Content (e.g., XUL elements) 
       <!--INDEX anonymous content, XBL --> 
       <!--INDEX XBL (eXtensible Binding Language):anonymous content -->
       contained in a binding that is hidden from the document
       object (DOM). Refer to the section <a href="#77047">"XBL and
       the DOM</a>," later in this chapter, for a more detailed
       discussion of its characteristics and how to programmatically
       gain access to the content.</dd>
       <dt>Attachment and detachment</dt>
       <dd>Attachment is the process through 
       <!--INDEX attachment, XBL;XBL (eXtensible Binding Language):attachment -->
       which a 
       <!--INDEX detachment, XBL;XBL (eXtensible Binding Language):detachment -->
       binding is associated with a bound element. It is essentially
       a way of telling the element which binding to use. Detachment
       is the process of removing that link and with it, the binding
       display.</dd>
       <dt>Insertion point</dt>
       <dd>The point in anonymous content at which 
       <!--INDEX insertion point, XBL;XBL (eXtensible Binding Language):insertion point -->
       children of the bound element are inserted. The section <a
       href="#77057">"Extra Binding Content and Insertion
       Points</a>," later in this chapter, details the insertion
       process.</dd>
       <dt>Inheritance</dt>
       <dd>During inheritance, characteristics of one object 
       <!--INDEX inheritance:XBL;XBL (eXtensible Binding Language):inheritance -->
       are passed on to another object. In XBL, this process is
       multifaceted. Bindings can inherit from other bindings,
       anonymous content can inherit attributes from the bound
       element, and a binding implementation can inherit the
       behavior of another widget. All concepts are explained in the
       section <a href="#77060">"Inheritance</a>," later in this
       chapter.</dd>
     </dl>
     <h3><a name="77030"></a> An XBL Document</h3>
     <p>XBL documents are files saved 
     <!--INDEX XBL documents;documents:XBL documents --> with an
     <i>.xml</i> filename extension. Most bindings implement XUL
     content and behavior with script, so XBL files reside in your
     XUL application's chrome content area and have full access to
     XPConnect-wrapped XPCOM objects.</p>
     <p>Several bindings often reside inside the same XBL file.
     Performance benefits from this arrangement, if you have
     multiple related bindings, because only one XBL document needs
     to be loaded, rather than multiple documents. Organization is
     another factor. Mozilla has dozens of bindings that are
     interrelated by either inheritance or filename identifiers.
     Individual pieces to a menu widget reside in a file called
     <i>menu.xml</i>, button bindings are in <i>button.xml</i>, and
     so forth. Keeping these bindings together is wise.</p>
     <p>The XBL document's root container is the <tt>
     <!--INDEX bindings element, XBL --> &lt;bindings&gt;</tt> tag.
     Inside this element is one or more individual child bindings,
     defined by the <tt>&lt;binding&gt;</tt> tag. A simple XBL
     document is as follows:</p>
 <pre>
 &lt;?xml version="1.0"?&gt;
 &lt;bindings id="dataBindings" ...&gt;  &lt;bindings id="dataBindings" ...&gt;
 &lt;binding /&gt;  &lt;binding /&gt;
 &lt;binding /&gt;  &lt;binding /&gt;
&lt;/bindings&gt;</PRE>&lt;/bindings&gt;
<P>An XBL document is  <!--INDEX XML documents;XBL documents;XBL documents:XML documents --> a valid XML document. The XML preamble you are used to seeing in XUL files is present. It also contains the single root element (in this case, <TT>&lt;bindings&gt;</TT>) and the child nodes that define the bindings (empty).</pre>
<P>Bindings are the  <!--INDEX bindings:XBL:XBL documents;XBL documents:bindings --> atomic units of an XBL document. An XBL document may define any number of individual bindings, each of which is bound (i.e., associated with other XML/XUL elements by way of CSS class definitions) somewhere in the interface. In other words, an XBL document may be a set of unrelated or barely related bindings that are picked up by the XUL interface.    <p>An XBL document is 
<H3><A NAME="77031"></A> Namespaces and XBL</H3>    <!--INDEX XML documents;XBL documents;XBL documents:XML documents -->
<P>Because XBL is  <!--INDEX namespaces:XBL and;XBL (eXtensible Binding Language):namespaces --> a binding language for other markup, remember to distinguish between the XBL markup (such as <TT>&lt;binding&gt;</TT> and <TT>&lt;handler&gt;</TT>) and markup from another language (such as XUL). Namespaces are a feature of the XML language that was invented to handle this separation of intermingled markup, and XBL uses namespaces. For more information on namespaces, refer to the W3C at <I><A HREF="http://www.w3.org/TR/REC-xml-names/">http://www.w3.org/TR/REC-xml-names/</A></I>.    a valid XML document. The XML preamble you are used to seeing
<P>Namespaces are declared in the root element of an XML document. The most common implementation is the declaration of two namespaces: a default namespace for XBL and a namespace for the other markup. This code shows the root of a bindings document in which the XUL namespace declaration (<TT>xmlns:xul</TT>) and the XBL default namespace are declared:    in XUL files is present. It also contains the single root
<PRE>&lt;bindings id="dataBindings"    element (in this case, <tt>&lt;bindings&gt;</tt>) and the child
xmlns=<A HREF="http://www.mozilla.org/xbl">http://www.mozilla.org/xbl</A>    nodes that define the bindings (empty).</p>
     <p>Bindings are the 
     <!--INDEX bindings:XBL:XBL documents;XBL documents:bindings -->
     atomic units of an XBL document. An XBL document may define any
     number of individual bindings, each of which is bound (i.e.,
     associated with other XML/XUL elements by way of CSS class
     definitions) somewhere in the interface. In other words, an XBL
     document may be a set of unrelated or barely related bindings
     that are picked up by the XUL interface.</p>
     <h3><a name="77031"></a> Namespaces and XBL</h3>
     <p>Because XBL is 
     <!--INDEX namespaces:XBL and;XBL (eXtensible Binding Language):namespaces -->
     a binding language for other markup, remember to distinguish
     between the XBL markup (such as <tt>&lt;binding&gt;</tt> and
     <tt>&lt;handler&gt;</tt>) and markup from another language
     (such as XUL). Namespaces are a feature of the XML language
     that was invented to handle this separation of intermingled
     markup, and XBL uses namespaces. For more information on
     namespaces, refer to the W3C at <i><a href=
     "http://www.w3.org/TR/REC-xml-names/">http://www.w3.org/TR/REC-xml-names/</a></i>.</p>
     <p>Namespaces are declared in the root element of an XML
     document. The most common implementation is the declaration of
     two namespaces: a default namespace for XBL and a namespace for
     the other markup. This code shows the root of a bindings
     document in which the XUL namespace declaration
     (<tt>xmlns:xul</tt>) and the XBL default namespace are
     declared:</p>
 <pre>
 &lt;bindings id="dataBindings"
 xmlns=<a href=
 "http://www.mozilla.org/xbl">http://www.mozilla.org/xbl</a>
 xmlns:xul=  xmlns:xul=
<A HREF="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&gt">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&gt</A>;</PRE><a href=
<P>An <I>NCName</I> is the  <!--INDEX NCName, namespace declaration and --> part of a namespace declaration that qualifies the markup type for that particular namespace. It is placed after a colon, and in many XPFE documents, is the markup language name (<TT>xul</TT>, <TT>xbl</TT>, or <TT>rdf</TT>). The XBL namespace is the default in this instance because it does not declare a namespace prefix (<TT>NCName</TT>)."http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul%3E">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul&gt;</a>;
<P>You can choose to namespace your document in a different way. For example, if you have a large mass of XUL code in your binding and do not wish to use the <TT>xul</TT>: prefix repeatedly, you can declare the XBL namespace as <TT>xmlns:xbl</TT>; you won't need to use prefixes on the XUL content since it is set as the default. Another option is to namespace a parent element:</pre>
<PRE>&lt;box xmlns="<A HREF="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</A>"&gt;</PRE>    <p>An <i>NCName</i> is the 
<P>This code enables all children inside the <TT>&lt;box&gt;</TT> to be in the scope of the XUL namespace; therefore the explicit <TT>xul</TT>: tag prefix declaration is not necessary.    <!--INDEX NCName, namespace declaration and --> part of a
<H3><A NAME="77032"></A> XBL and HTML</H3>    namespace declaration that qualifies the markup type for that
<P>Although XUL usually makes  <!--INDEX XBL (eXtensible Binding Language):HTML and;HTML (Hypertext Markup Language):XBL and --> up the content of an XBL binding in Mozilla, HTML is another valid and popular binding format. Using the XBL with HTML combination can be advantageous. With it, web pages (rendered in Mozilla) can be more feature-rich and move beyond the limitations of the HTML specification's finite element set. It means a possible mingling of one or many markup languages, including HTML, XUL, and RDF.    particular namespace. It is placed after a colon, and in many
<P>The following snippet, in which a simple binding defines the name of the browser in an HTML <TT>div</TT>, gives you a feel for its potential:    XPFE documents, is the markup language name (<tt>xul</tt>,
<PRE>&lt;binding id="browser"&gt;    <tt>xbl</tt>, or <tt>rdf</tt>). The XBL namespace is the
     default in this instance because it does not declare a
     namespace prefix (<tt>NCName</tt>).</p>
     <p>You can choose to namespace your document in a different
     way. For example, if you have a large mass of XUL code in your
     binding and do not wish to use the <tt>xul</tt>: prefix
     repeatedly, you can declare the XBL namespace as
     <tt>xmlns:xbl</tt>; you won't need to use prefixes on the XUL
     content since it is set as the default. Another option is to
     namespace a parent element:</p>
 <pre>
 &lt;box xmlns="<a href=
 "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</a>"&gt;
 </pre>
     <p>This code enables all children inside the
     <tt>&lt;box&gt;</tt> to be in the scope of the XUL namespace;
     therefore the explicit <tt>xul</tt>: tag prefix declaration is
     not necessary.</p>
     <h3><a name="77032"></a> XBL and HTML</h3>
     <p>Although XUL usually makes 
     <!--INDEX XBL (eXtensible Binding Language):HTML and;HTML (Hypertext Markup Language):XBL and -->
     up the content of an XBL binding in Mozilla, HTML is another
     valid and popular binding format. Using the XBL with HTML
     combination can be advantageous. With it, web pages (rendered
     in Mozilla) can be more feature-rich and move beyond the
     limitations of the HTML specification's finite element set. It
     means a possible mingling of one or many markup languages,
     including HTML, XUL, and RDF.</p>
     <p>The following snippet, in which a simple binding defines the
     name of the browser in an HTML <tt>div</tt>, gives you a feel
     for its potential:</p>
 <pre>
 &lt;binding id="browser"&gt;
 &lt;content&gt;  &lt;content&gt;
 &lt;html:div&gt;Mozilla 1.0&lt;/html:div&gt;  &lt;html:div&gt;Mozilla 1.0&lt;/html:div&gt;
 &lt;children /&gt;  &lt;children /&gt;
 &lt;/content&gt;  &lt;/content&gt;
&lt;/binding&gt;</PRE>&lt;/binding&gt;
<P>The bound element in HTML is called <TT>browser_name</TT> and is attached to the anonymous content in the HTML document's inline style.</pre>
<PRE>&lt;head&gt;    <p>The bound element in HTML is called <tt>browser_name</tt>
     and is attached to the anonymous content in the HTML document's
     inline style.</p>
 <pre>
 &lt;head&gt;
 &lt;title&gt;Browser Information&lt;/title&gt;  &lt;title&gt;Browser Information&lt;/title&gt;
 &lt;style&gt;  &lt;style&gt;
 browser_name  {  browser_name  {
Line 75  browser_name  { Line 260  browser_name  {
 &lt;/head&gt;  &lt;/head&gt;
 &lt;body&gt;  &lt;body&gt;
 &lt;h1&gt;&lt;browser_name /&gt; Guide&lt;/h1&gt;  &lt;h1&gt;&lt;browser_name /&gt; Guide&lt;/h1&gt;
...</PRE>...
<P>Although the <TT>&lt;browser_name/&gt;</TT> element is not a valid HTML element, one of XBL's great capabilities is that Mozilla finds the binding, reads the content there, and makes the substitution. The browser name can be included in several places in the HTML document. Like a poor man's DTD, the binding lets you change the definition of <TT>browser_name</TT> in one place and propagate that change to every instance of its use. This feature is useful because it requires the touching of fewer files during code maintenance.</pre>
<H2><A NAME="77033"></A> Anatomy of a Binding</H2>    <p>Although the <tt>&lt;browser_name/&gt;</tt> element is not a
<P>The best way to understand a binding  <!--INDEX bindings:XBL --> is  <!--INDEX XBL (eXtensible Binding Language):bindings --> to watch one evolve from start to finish. This section examines a binding from its inception, into the construction of the binding, and through its use in a XUL document. At the end of the section, you should be able to take the pieces and construct your own binding, so try to follow it like a step-by-step guide.    valid HTML element, one of XBL's great capabilities is that
<P>Design is important in XBL. The implementation can sometimes be tricky; for example, when you intend to reuse the binding elsewhere or when others use it in a way you don't foresee. Ideally, a binding should be as small as possible to facilitate reuse. And it's a good idea to separate your binding into smaller pieces-perhaps smaller "subbindings"-so you can recombine when necessary. You could design the <TT>&lt;datafield/&gt;</TT> widget mentioned in the introduction-for example, as a combination of the XUL <TT>&lt;textfield/&gt;</TT> widget and your own new binding, <TT>&lt;validator/&gt;</TT>, which you could then use elsewhere.    Mozilla finds the binding, reads the content there, and makes
<P>The widget constructed in this section is a good example of a small, reusable binding. It is a special text input widget called <TT>inputfield-</TT>a self-contained extension to a XUL textbox that can be used on its own or as part of another binding. The binding combines a <TT> <!--INDEX label element, XUL --> &lt;label&gt;</TT> and a <TT> <!--INDEX textbox element, XUL --> &lt;textbox&gt;</TT>, allows child elements, and offers functions that work with the data and style of the <TT>&lt;textbox&gt;</TT>.    the substitution. The browser name can be included in several
<H3><A NAME="77034"></A> CSS Attachment</H3>    places in the HTML document. Like a poor man's DTD, the binding
<P><I>Attachment</I> is the process  <!--INDEX attachment, XBL:CSS;XBL (eXtensible Binding Language):attachment:CSS;CSS (Cascading Style Sheets):attachment, XBL --> through which the binding is connected to the bound document that uses it. This process is most commonly achieved through CSS, but can also be done by using the DOM. The section <A HREF="#77047">"XBL and the DOM</A>," later in this chapter, details the interaction between XBL and the document object model. The CSS connection begins where the bound element is placed in the XUL file:    lets you change the definition of <tt>browser_name</tt> in one
<PRE>&lt;inputfield/&gt;</PRE>    place and propagate that change to every instance of its use.
<P>Remember that XML ignores  <!--INDEX XML (Extensible Markup Language):elements, ignoring --> elements it doesn't recognize, so this new element won't be rendered until you add information to the stylesheet; a binding is attached with the special <TT>-moz-binding</TT> attribute. The style selector must be associated with the bound element in the XUL file. In the following example, the binding is attached to every <TT>&lt;inputfield&gt;</TT> tag because the element name itself is used as the style selector. However, <TT>-moz-binding</TT> can also be inside a class selector, an ID selector, or any other CSS selector you wish to use:    This feature is useful because it requires the touching of
<PRE>inputfield {    fewer files during code maintenance.</p>
     <h2><a name="77033"></a> Anatomy of a Binding</h2>
     <p>The best way to understand a binding 
     <!--INDEX bindings:XBL --> is 
     <!--INDEX XBL (eXtensible Binding Language):bindings --> to
     watch one evolve from start to finish. This section examines a
     binding from its inception, into the construction of the
     binding, and through its use in a XUL document. At the end of
     the section, you should be able to take the pieces and
     construct your own binding, so try to follow it like a
     step-by-step guide.</p>
     <p>Design is important in XBL. The implementation can sometimes
     be tricky; for example, when you intend to reuse the binding
     elsewhere or when others use it in a way you don't foresee.
     Ideally, a binding should be as small as possible to facilitate
     reuse. And it's a good idea to separate your binding into
     smaller pieces-perhaps smaller "subbindings"-so you can
     recombine when necessary. You could design the
     <tt>&lt;datafield/&gt;</tt> widget mentioned in the
     introduction-for example, as a combination of the XUL
     <tt>&lt;textfield/&gt;</tt> widget and your own new binding,
     <tt>&lt;validator/&gt;</tt>, which you could then use
     elsewhere.</p>
     <p>The widget constructed in this section is a good example of
     a small, reusable binding. It is a special text input widget
     called <tt>inputfield-</tt>a self-contained extension to a XUL
     textbox that can be used on its own or as part of another
     binding. The binding combines a <tt>
     <!--INDEX label element, XUL --> &lt;label&gt;</tt> and a <tt>
     <!--INDEX textbox element, XUL --> &lt;textbox&gt;</tt>, allows
     child elements, and offers functions that work with the data
     and style of the <tt>&lt;textbox&gt;</tt>.</p>
     <h3><a name="77034"></a> CSS Attachment</h3>
     <p><i>Attachment</i> is the process 
     <!--INDEX attachment, XBL:CSS;XBL (eXtensible Binding Language):attachment:CSS;CSS (Cascading Style Sheets):attachment, XBL -->
     through which the binding is connected to the bound document
     that uses it. This process is most commonly achieved through
     CSS, but can also be done by using the DOM. The section <a
     href="#77047">"XBL and the DOM</a>," later in this chapter,
     details the interaction between XBL and the document object
     model. The CSS connection begins where the bound element is
     placed in the XUL file:</p>
 <pre>
 &lt;inputfield/&gt;
 </pre>
     <p>Remember that XML ignores 
     <!--INDEX XML (Extensible Markup Language):elements, ignoring -->
     elements it doesn't recognize, so this new element won't be
     rendered until you add information to the stylesheet; a binding
     is attached with the special <tt>-moz-binding</tt> attribute.
     The style selector must be associated with the bound element in
     the XUL file. In the following example, the binding is attached
     to every <tt>&lt;inputfield&gt;</tt> tag because the element
     name itself is used as the style selector. However,
     <tt>-moz-binding</tt> can also be inside a class selector, an
     ID selector, or any other CSS selector you wish to use:</p>
 <pre>
 inputfield {
 -moz-binding: url("inputfield.xml#inputfield");  -moz-binding: url("inputfield.xml#inputfield");
}</PRE>}
<P>It also can be from an inline style:</pre>
<PRE>&lt;inputfield    <p>It also can be from an inline style:</p>
 <pre>
 &lt;inputfield
 id="ifd"  id="ifd"
style="-moz-binding: url("inputfield.xml#inputfield")"/&gt;</PRE>style="-moz-binding: url("inputfield.xml#inputfield")"/&gt;
<P>The constituent parts of this style rule are the <TT>-moz-binding</TT> property, the <TT>url</TT> binding locator that takes the bindings file (and possibly the path to it) as a parameter, and the <TT>id</TT> of the binding denoted with the <TT>#</TT> notation. For the binding to take, the XBL file must contain a binding with the same <TT>id</TT>.</pre>
<PRE>&lt;binding id="inputfield"&gt;    <p>The constituent parts of this style rule are the
     <tt>-moz-binding</tt> property, the <tt>url</tt> binding
     locator that takes the bindings file (and possibly the path to
     it) as a parameter, and the <tt>id</tt> of the binding denoted
     with the <tt>#</tt> notation. For the binding to take, the XBL
     file must contain a binding with the same <tt>id</tt>.</p>
 <pre>
 &lt;binding id="inputfield"&gt;
 &lt;!-- binding content / behavior / handlers --&gt;  &lt;!-- binding content / behavior / handlers --&gt;
&lt;/binding&gt;</PRE>&lt;/binding&gt;
<P>The ID of <TT>inputfield</TT> matches the value specified in the URL after the <TT>#</TT> symbol. When the UI is drawn in Mozilla, the binding content, behavior, and handlers are applied to the bound document at the point where the <TT> <!--INDEX inputfield element, XBL --> &lt;inputfield&gt;</TT> element appears in the document. <A HREF="#77004">Figure 7-2</A> shows a visual representation of the constituent parts of a binding attachment occurring via CSS.</pre>
<P><CENTER><IMG SRC="foo.gif"></CENTER>    <p>The ID of <tt>inputfield</tt> matches the value specified in
<P><I>Figure 7-2: <A NAME="77004"></A></I>    the URL after the <tt>#</tt> symbol. When the UI is drawn in
<I>CSS binding attachment components</I>    Mozilla, the binding content, behavior, and handlers are
    applied to the bound document at the point where the <tt>
<P>In this example, we use our own new element name called <TT>&lt;inputfield&gt;</TT>, but you can also extend existing XUL widgets by including:    <!--INDEX inputfield element, XBL --> &lt;inputfield&gt;</tt>
<PRE>&lt;box id="inputfield" flex="1"/&gt;</PRE>    element appears in the document. <a href="#77004">Figure
<P>Because they are bound through CSS, bindings cannot be guaranteed to be loaded until the whole document is loaded, which means that any inline scripts accessing bindings should be considered incorrect because you cannot guarantee that the binding is loaded.    7-2</a> shows a visual representation of the constituent parts
<P>XBL content  <!--INDEX XBL (eXtensible Binding Language):invisible content --> is considered "invisible" in the context of the document object because it is not contained directly in the XUL document. Refer to the later section <A HREF="#77047">"XBL and the DOM</A>" for more information on this concept.    of a binding attachment occurring via CSS.</p>
<BLOCKQUOTE><CENTER><B>NOTE</B></CENTER>    <div class="c18">
<P>Because a document binding can have multiple instances, something must happen to make the content unique in each one. When a binding is attached to a document, its content is automatically cloned in memory. Every instance of a binding shares the same fields, properties, methods, and event handlers because separate copies of those are simply not necessary. These elements cannot be changed dynamically, but the content document model can.<P></BLOCKQUOTE>      <img src="foo.gif">
<H3><A NAME="77035"></A> The XBL Content Element</H3>    </div>
<P>The <TT> <!--INDEX binding element, XBL --> &lt;binding&gt;</TT> element  <!--INDEX XBL (eXtensible Binding Language):content element;content element, XBL --> requires an <TT>id</TT> attribute to make the binding unique within the entire document. In the general XML specification, there can only be one element in a document that has a certain ID string. As in XUL, if you use an ID twice, the last one parsed is the only one seen. This situation can lead to unexpected behavior. <A HREF="#77006">Figure 7-3</A> shows the appearance of an <TT>inputfield</TT> binding.    <p><i>Figure 7-2: <a name="77004"></a></i> <i>CSS binding
<P><CENTER><IMG SRC="foo.gif"></CENTER>    attachment components</i></p>
<P><I>Figure 7-3: <A NAME="77006"></A></I>    <p>In this example, we use our own new element name called
<I>The inputfield alone in the XUL document</I>    <tt>&lt;inputfield&gt;</tt>, but you can also extend existing
    XUL widgets by including:</p>
<P>An <TT> <!--INDEX inputfield element, XBL --> &lt;inputfield&gt;</TT> has a <TT>&lt;label&gt;</TT> attached  <!--INDEX XBL (eXtensible Binding Language):input --> to it, shown here as "Input Field." It also has a regular <TT>&lt;textbox&gt;</TT>. The "Eric's" label is not part of the binding, but is still displayed inside of it as a child. Child content is discussed later in the section "Extra Binding Content and Insertion Points." The binding content is defined as:<pre>
<PRE>&lt;content&gt;&lt;box id="inputfield" flex="1"/&gt;
 </pre>
     <p>Because they are bound through CSS, bindings cannot be
     guaranteed to be loaded until the whole document is loaded,
     which means that any inline scripts accessing bindings should
     be considered incorrect because you cannot guarantee that the
     binding is loaded.</p>
     <p>XBL content 
     <!--INDEX XBL (eXtensible Binding Language):invisible content -->
     is considered "invisible" in the context of the document object
     because it is not contained directly in the XUL document. Refer
     to the later section <a href="#77047">"XBL and the DOM</a>" for
     more information on this concept.</p>
     <blockquote>
       <div class="c19">
         NOTE
       </div>
       <p>Because a document binding can have multiple instances,
       something must happen to make the content unique in each one.
       When a binding is attached to a document, its content is
       automatically cloned in memory. Every instance of a binding
       shares the same fields, properties, methods, and event
       handlers because separate copies of those are simply not
       necessary. These elements cannot be changed dynamically, but
       the content document model can.</p>
     </blockquote>
     <h3><a name="77035"></a> The XBL Content Element</h3>
     <p>The <tt><!--INDEX binding element, XBL -->
     &lt;binding&gt;</tt> element 
     <!--INDEX XBL (eXtensible Binding Language):content element;content element, XBL -->
     requires an <tt>id</tt> attribute to make the binding unique
     within the entire document. In the general XML specification,
     there can only be one element in a document that has a certain
     ID string. As in XUL, if you use an ID twice, the last one
     parsed is the only one seen. This situation can lead to
     unexpected behavior. <a href="#77006">Figure 7-3</a> shows the
     appearance of an <tt>inputfield</tt> binding.</p>
     <div class="c18">
       <img src="foo.gif">
     </div>
     <p><i>Figure 7-3: <a name="77006"></a></i> <i>The inputfield
     alone in the XUL document</i></p>
     <p>An <tt><!--INDEX inputfield element, XBL -->
     &lt;inputfield&gt;</tt> has a <tt>&lt;label&gt;</tt> attached 
     <!--INDEX XBL (eXtensible Binding Language):input --> to it,
     shown here as "Input Field." It also has a regular
     <tt>&lt;textbox&gt;</tt>. The "Eric's" label is not part of the
     binding, but is still displayed inside of it as a child. Child
     content is discussed later in the section "Extra Binding
     Content and Insertion Points." The binding content is defined
     as:</p>
 <pre>
 &lt;content&gt;
 &lt;children/&gt;  &lt;children/&gt;
 &lt;xul:label xbl:inherits="value=label"/&gt;  &lt;xul:label xbl:inherits="value=label"/&gt;
 &lt;xul:textbox anonid="input" flex="1"/&gt;  &lt;xul:textbox anonid="input" flex="1"/&gt;
&lt;/content&gt;</PRE>&lt;/content&gt;
<P><TT>&lt;children/&gt;</TT>, the first element in the binding, lets any elements that existed in the original XUL document pass through the binding's display if it exists inside the <TT>&lt;inputfield&gt;</TT> tag.</pre>
<PRE>&lt;inputfield id="ifd" label="Input Field"&gt;    <p><tt>&lt;children/&gt;</tt>, the first element in the
     binding, lets any elements that existed in the original XUL
     document pass through the binding's display if it exists inside
     the <tt>&lt;inputfield&gt;</tt> tag.</p>
 <pre>
 &lt;inputfield id="ifd" label="Input Field"&gt;
 &lt;label value="Eric's"/&gt;  &lt;label value="Eric's"/&gt;
&lt;/inputfield&gt;</PRE>&lt;/inputfield&gt;
<P>In this case, the XUL label is inserted into the anonymous content at the point of the <TT>&lt;children/&gt;</TT> element when the binding is rendered. This ability is useful for changing the ordering of content and adding extra content within a binding.</pre>
<BLOCKQUOTE><CENTER><B>NOTE</B></CENTER>    <p>In this case, the XUL label is inserted into the anonymous
<P>You can limit which tags are displayed as child content by using something like:<P></BLOCKQUOTE>    content at the point of the <tt>&lt;children/&gt;</tt> element
&lt;children includes="treehead|treechildren"/&gt;    when the binding is rendered. This ability is useful for
<BLOCKQUOTE><P>These filtering capabilities open the possibility of multiple <TT>&lt;children/&gt;</TT> in your binding.<P></BLOCKQUOTE>    changing the ordering of content and adding extra content
<P>The next content element is <TT>&lt;xul:label/&gt;</TT>. Notice how the XML namespace of <TT>xul</TT> is used in the content. Using this notation is the most common way to apply namespace XUL elements in bindings.    within a binding.</p>
<P>The <TT>label</TT> element has an XBL-namespaced <TT>inherits</TT> attribute. This code translates an attribute used on the original bounded tag into something usable by a content element:    <blockquote>
<PRE>&lt;inputfield id="ifd" label="Input Field"&gt;</PRE>      <div class="c19">
<P>The final element in the content is a typical XUL <TT>textbox</TT> that has a namespace like the label. The <TT>anonid</TT> attribute on the textbox is fabricated and used here to avoid bugs and scope issues with the <TT>id</TT> attribute in content. The <TT>id</TT> attribute should be used only on the <TT>&lt;binding&gt;</TT> and <TT>&lt;bindings&gt;</TT> tags, but <TT>anonid</TT> works well as direct DOM access to this element and is shown in the next section.        NOTE
<H3><A NAME="77036"></A> The Implementation Element</H3>      </div>
<P>The next part of the  <!--INDEX XBL (eXtensible Binding Language):implementation element --> binding, and also the most complex, is the behavior. The <TT> <!--INDEX implementation element, XBL --> &lt;implementation&gt;</TT> element contains the <TT>&lt;constructor&gt;</TT>, <TT>&lt;destructor&gt;</TT>, <TT>&lt;field&gt;</TT>, <TT>&lt;property&gt;</TT>, and <TT>&lt;method&gt;-</TT>all of which handle the binding's implementation features.      <p>You can limit which tags are displayed as child content by
<P>All elements can contain JavaScript, which changes the binding into a dynamic widget that does more than display content on the screen. The binding implementation accepts user input, dynamically changes the UI, interacts with remote sites through web protocols, and surfaces Mozilla library functions in widgets.      using something like:</p>
<H4><A NAME="77037"></A> Constructor</H4>    </blockquote>
<P>In the example binding, some  <!--INDEX constructors:implementation element, XBL --> variables and style rules are set up for access by the rest of the binding to make the code cleaner. These rules are set up by using the <TT>constructor</TT>:    &lt;children includes="treehead|treechildren"/&gt; 
<PRE>&lt;constructor&gt;&lt;![CDATA[    <blockquote>
       <p>These filtering capabilities open the possibility of
       multiple <tt>&lt;children/&gt;</tt> in your binding.</p>
     </blockquote>
     <p>The next content element is <tt>&lt;xul:label/&gt;</tt>.
     Notice how the XML namespace of <tt>xul</tt> is used in the
     content. Using this notation is the most common way to apply
     namespace XUL elements in bindings.</p>
     <p>The <tt>label</tt> element has an XBL-namespaced
     <tt>inherits</tt> attribute. This code translates an attribute
     used on the original bounded tag into something usable by a
     content element:</p>
 <pre>
 &lt;inputfield id="ifd" label="Input Field"&gt;
 </pre>
     <p>The final element in the content is a typical XUL
     <tt>textbox</tt> that has a namespace like the label. The
     <tt>anonid</tt> attribute on the textbox is fabricated and used
     here to avoid bugs and scope issues with the <tt>id</tt>
     attribute in content. The <tt>id</tt> attribute should be used
     only on the <tt>&lt;binding&gt;</tt> and
     <tt>&lt;bindings&gt;</tt> tags, but <tt>anonid</tt> works well
     as direct DOM access to this element and is shown in the next
     section.</p>
     <h3><a name="77036"></a> The Implementation Element</h3>
     <p>The next part of the 
     <!--INDEX XBL (eXtensible Binding Language):implementation element -->
     binding, and also the most complex, is the behavior. The <tt>
     <!--INDEX implementation element, XBL -->
     &lt;implementation&gt;</tt> element contains the
     <tt>&lt;constructor&gt;</tt>, <tt>&lt;destructor&gt;</tt>,
     <tt>&lt;field&gt;</tt>, <tt>&lt;property&gt;</tt>, and
     <tt>&lt;method&gt;-</tt>all of which handle the binding's
     implementation features.</p>
     <p>All elements can contain JavaScript, which changes the
     binding into a dynamic widget that does more than display
     content on the screen. The binding implementation accepts user
     input, dynamically changes the UI, interacts with remote sites
     through web protocols, and surfaces Mozilla library functions
     in widgets.</p>
     <h4><a name="77037"></a> Constructor</h4>
     <p>In the example binding, some 
     <!--INDEX constructors:implementation element, XBL -->
     variables and style rules are set up for access by the rest of
     the binding to make the code cleaner. These rules are set up by
     using the <tt>constructor</tt>:</p>
 <pre>
 &lt;constructor&gt;&lt;![CDATA[
 this.input=document.getAnonymousElementByAttribute  this.input=document.getAnonymousElementByAttribute
 (this,"anonid","input");  (this,"anonid","input");
 // Initialize color and backgroundColor to something besides a "" value  // Initialize color and backgroundColor to something besides a "" value
 this.input.inputField.style.backgroundColor="white";  this.input.inputField.style.backgroundColor="white";
 this.input.inputField.style.color="black";  this.input.inputField.style.color="black";
 this.input.inputField.setAttribute("onchange","");  this.input.inputField.setAttribute("onchange","");
]]&gt;&lt;/constructor&gt;</PRE>]]&gt;&lt;/constructor&gt;
<P>The first JavaScript command accesses the <TT>&lt;textbox&gt;</TT> with the <TT>anonid</TT> label and puts it into the <I>this.input</I> variable. <TT>getAnonymousElementByAttribute</TT> is a custom DOM method used to access anonymous content. The section <A HREF="#77048">"The XBL DOM Interfaces</A>," later in this chapter, talks more about the XBL DOM methods.</pre>
<P>The use of the <TT>this</TT> keyword and the "dot notation" comes from Java. If you have programmed in Java, these bindings can be considered similar to Java classes. They are self-contained and can be extended. Using <TT>this</TT> is not necessary but it's common practice and clarifies that the variable or property is a member of the binding, especially if you define elements in the binding's constructor.    <p>The first JavaScript command accesses the
<P>In the next two commands, an object called <TT>inputField</TT> contains the <TT>style</TT> object property. You may be familiar with this structure in HTML elements, and in fact, this <TT>inputField</TT> is a version of the HTML <TT>&lt;input&gt;</TT> textbox. The <TT>&lt;textbox&gt;</TT> in XUL derives from that HTML element.    <tt>&lt;textbox&gt;</tt> with the <tt>anonid</tt> label and
<P>The <TT>color</TT> and <TT>backgroundColor</TT> are set here manually to return something other than the initial value of a blank string when they are accessed. The last line in the <TT>&lt;constructor&gt;</TT> sets up the <TT>onchange</TT> event handler for the textbox. This event handler is also used in a property for this binding.    puts it into the <i>this.input</i> variable.
<H4><A NAME="77038"></A> Destructor</H4>    <tt>getAnonymousElementByAttribute</tt> is a custom DOM method
<P>This section of a binding  <!--INDEX destructors, XBL implementation element --> executes anything that needs to be done immediately before a binding is unloaded. Here is an example:    used to access anonymous content. The section <a href=
<PRE>&lt;destructor&gt;    "#77048">"The XBL DOM Interfaces</a>," later in this chapter,
     talks more about the XBL DOM methods.</p>
     <p>The use of the <tt>this</tt> keyword and the "dot notation"
     comes from Java. If you have programmed in Java, these bindings
     can be considered similar to Java classes. They are
     self-contained and can be extended. Using <tt>this</tt> is not
     necessary but it's common practice and clarifies that the
     variable or property is a member of the binding, especially if
     you define elements in the binding's constructor.</p>
     <p>In the next two commands, an object called
     <tt>inputField</tt> contains the <tt>style</tt> object
     property. You may be familiar with this structure in HTML
     elements, and in fact, this <tt>inputField</tt> is a version of
     the HTML <tt>&lt;input&gt;</tt> textbox. The
     <tt>&lt;textbox&gt;</tt> in XUL derives from that HTML
     element.</p>
     <p>The <tt>color</tt> and <tt>backgroundColor</tt> are set here
     manually to return something other than the initial value of a
     blank string when they are accessed. The last line in the
     <tt>&lt;constructor&gt;</tt> sets up the <tt>onchange</tt>
     event handler for the textbox. This event handler is also used
     in a property for this binding.</p>
     <h4><a name="77038"></a> Destructor</h4>
     <p>This section of a binding 
     <!--INDEX destructors, XBL implementation element --> executes
     anything that needs to be done immediately before a binding is
     unloaded. Here is an example:</p>
 <pre>
 &lt;destructor&gt;
 this.input=null;  this.input=null;
&lt;/destructor&gt;</PRE>&lt;/destructor&gt;
<P>The code you see here is not necessary in this binding, but it shows you the format for executing code in the destructor. Destructors are great to use when you have loaded a component in the binding and want to set the variable representing the component to null to avoid memory leaks. If you have a lot of bindings that load and then unload components while a Mozilla session is still running, a significant amount of memory can be eaten up unless you take this kind of step.</pre>
<H4><A NAME="77039"></A> Properties</H4>    <p>The code you see here is not necessary in this binding, but
<P>Like Java properties,  <!--INDEX properties:XBL;XBL (eXtensible Binding Language):properties --> an XBL <TT> <!--INDEX property element, XBL --> &lt;property&gt;</TT> has getters and setters, so they can behave differently when you read or write data. Here is a subset of properties used in this binding:    it shows you the format for executing code in the destructor.
<PRE>&lt;property name="value" readonly="true"&gt;    Destructors are great to use when you have loaded a component
     in the binding and want to set the variable representing the
     component to null to avoid memory leaks. If you have a lot of
     bindings that load and then unload components while a Mozilla
     session is still running, a significant amount of memory can be
     eaten up unless you take this kind of step.</p>
     <h4><a name="77039"></a> Properties</h4>
     <p>Like Java properties, 
     <!--INDEX properties:XBL;XBL (eXtensible Binding Language):properties -->
     an XBL <tt><!--INDEX property element, XBL -->
     &lt;property&gt;</tt> has getters and setters, so they can
     behave differently when you read or write data. Here is a
     subset of properties used in this binding:</p>
 <pre>
 &lt;property name="value" readonly="true"&gt;
 &lt;getter&gt;  &lt;getter&gt;
 return this.input.value;  return this.input.value;
 &lt;/getter&gt;  &lt;/getter&gt;
Line 172  return this.input.inputField.style.backg Line 569  return this.input.inputField.style.backg
 this.input.inputField.style.backgroundColor=val;  this.input.inputField.style.backgroundColor=val;
 return val;  return val;
 &lt;/setter&gt;  &lt;/setter&gt;
&lt;/property&gt;</PRE>&lt;/property&gt;
<P>At this point, the characteristics of properties to watch out for include the <TT>readonly</TT> attribute, the getter and setter elements, and the existence of a <TT>val</TT> keyword that is used internally for accessing a property's current value. For your reference, this binding's property extracts are used for getting the value of the input field, returning an uppercase version of the inputted text, and getting or setting the input field's background color.</pre>
<H4><A NAME="77040"></A> Methods</H4>    <p>At this point, the characteristics of properties to watch
<P>Methods in XBL are  <!--INDEX methods:XBL;XBL (eXtensible Binding Language):methods --> self-contained functions represented by the <TT>&lt;method&gt;</TT> tag and encapsulated within the <TT>&lt;implementation&gt;</TT> element. They usually provide a binding object with a specific function like copying and saving some data or showing and hiding widget controls. Like properties, they can be called from within the binding, from another binding that subclasses that binding, and directly from the bound element.    out for include the <tt>readonly</tt> attribute, the getter and
<PRE>&lt;method name="clear"&gt;    setter elements, and the existence of a <tt>val</tt> keyword
     that is used internally for accessing a property's current
     value. For your reference, this binding's property extracts are
     used for getting the value of the input field, returning an
     uppercase version of the inputted text, and getting or setting
     the input field's background color.</p>
     <h4><a name="77040"></a> Methods</h4>
     <p>Methods in XBL are 
     <!--INDEX methods:XBL;XBL (eXtensible Binding Language):methods -->
     self-contained functions represented by the
     <tt>&lt;method&gt;</tt> tag and encapsulated within the
     <tt>&lt;implementation&gt;</tt> element. They usually provide a
     binding object with a specific function like copying and saving
     some data or showing and hiding widget controls. Like
     properties, they can be called from within the binding, from
     another binding that subclasses that binding, and directly from
     the bound element.</p>
 <pre>
 &lt;method name="clear"&gt;
 &lt;body&gt;  &lt;body&gt;
 this.input.value='';  this.input.value='';
 &lt;/body&gt;  &lt;/body&gt;
Line 186  this.input.value=''; Line 601  this.input.value='';
 &lt;body&gt;  &lt;body&gt;
 this.input.value=newValue;  this.input.value=newValue;
 &lt;/body&gt;  &lt;/body&gt;
&lt;/method&gt;</PRE>&lt;/method&gt;
<P>The method code is contained in a <TT>&lt;body&gt;</TT> tag, and each method can have 0 or more parameters, which gather the values passed into the method when called.</pre>
<H3><A NAME="77041"></A> Handlers</H3>    <p>The method code is contained in a <tt>&lt;body&gt;</tt> tag,
<P>Handlers in XBL mimic  <!--INDEX handlers, XBL;XBL (eXtensible Binding Language):handlers --> regular document events like <TT>onclick</TT> and <TT>onmousedown</TT>, and provide a means for trapping them within your binding and carrying out tasks associated with them.    and each method can have 0 or more parameters, which gather the
<PRE>&lt;handlers&gt;    values passed into the method when called.</p>
     <h3><a name="77041"></a> Handlers</h3>
     <p>Handlers in XBL mimic 
     <!--INDEX handlers, XBL;XBL (eXtensible Binding Language):handlers -->
     regular document events like <tt>onclick</tt> and
     <tt>onmousedown</tt>, and provide a means for trapping them
     within your binding and carrying out tasks associated with
     them.</p>
 <pre>
 &lt;handlers&gt;
 &lt;handler event="mouseover"&gt;  &lt;handler event="mouseover"&gt;
 this.input.focus( );  this.input.focus( );
 &lt;/handler&gt;  &lt;/handler&gt;
&lt;/handlers&gt;</PRE>&lt;/handlers&gt;
<P>Each handler is contained in a <TT> <!--INDEX handler element, XBL --> &lt;handler&gt;</TT> tag and the event name is placed in the <TT>event</TT> attribute-minus the "on" prefix. The handler in the code shown above places the focus in the <TT>inputfield</TT> when the mouse goes over it. See the section "Event Handling," later in this chapter, for more details.</pre>
<H3><A NAME="77042"></A> Style</H3>    <p>Each handler is contained in a <tt>
<P>The sample binding's last piece  <!--INDEX styles:XBL;XBL (eXtensible Binding Language):styles --> of the puzzle is style. Any XUL elements used in the content inherit the default styles for those widgets, but if you want to add more, you can include your own stylesheet like this:    <!--INDEX handler element, XBL --> &lt;handler&gt;</tt> tag and
<PRE>&lt;resources&gt;    the event name is placed in the <tt>event</tt> attribute-minus
     the "on" prefix. The handler in the code shown above places the
     focus in the <tt>inputfield</tt> when the mouse goes over it.
     See the section "Event Handling," later in this chapter, for
     more details.</p>
     <h3><a name="77042"></a> Style</h3>
     <p>The sample binding's last piece 
     <!--INDEX styles:XBL;XBL (eXtensible Binding Language):styles -->
     of the puzzle is style. Any XUL elements used in the content
     inherit the default styles for those widgets, but if you want
     to add more, you can include your own stylesheet like this:</p>
 <pre>
 &lt;resources&gt;
 &lt;stylesheet src="inputfield.css"/&gt;  &lt;stylesheet src="inputfield.css"/&gt;
&lt;/resources&gt;</PRE>&lt;/resources&gt;
<P>Notice the <TT> <!--INDEX resources container element, XBL --> &lt;resources&gt;</TT> container element, which is a prerequisite for this feature. The use of stylesheets in bindings is covered more thoroughly at the end of the chapter in the section <A HREF="#77066">"Resources for Bindings</A>."</pre>
<P>At this point, you should be familiar with the pieces that make up a binding, which, at the top level, are the content, implementation, event handlers, and extra resources. The binding that you have constructed is small, yet it shows all the main concepts involved in structuring a binding. With some personalizing, it could be included in potentially any application.    <p>Notice the <tt>
<H2><A NAME="77043"></A> Adding Behavior to Bindings</H2>    <!--INDEX resources container element, XBL -->
<P>Like XUL widgets, XBL uses JavaScript  <!--INDEX bindings:XBL:behaviors;XBL (eXtensible Binding Language):bindings:behaviors --> to provide functionality to bindings by accessing XPCOM methods via XPConnect. Like binding content, behavior is optional in a binding. Each can exist without the other. At times, you might want only implementations, such as a base binding that contains certain properties that are inherited by other bindings.    &lt;resources&gt;</tt> container element, which is a
<P>The <TT>&lt;implementation&gt;</TT> element is the container for all other elements that make up a binding's behavioral portion. <A HREF="#77008">Example 7-1</A> shows an empty implementation shell that highlights the element's contained hierarchy.    prerequisite for this feature. The use of stylesheets in
    bindings is covered more thoroughly at the end of the chapter
<P><I>Example 7-1: <A NAME="77008"></A></I>    in the section <a href="#77066">"Resources for
<I>XBL implementation element</I>    Bindings</a>."</p>
<PRE> &lt;implementation&gt;    <p>At this point, you should be familiar with the pieces that
     make up a binding, which, at the top level, are the content,
     implementation, event handlers, and extra resources. The
     binding that you have constructed is small, yet it shows all
     the main concepts involved in structuring a binding. With some
     personalizing, it could be included in potentially any
     application.</p>
     <h2><a name="77043"></a> Adding Behavior to Bindings</h2>
     <p>Like XUL widgets, XBL uses JavaScript 
     <!--INDEX bindings:XBL:behaviors;XBL (eXtensible Binding Language):bindings:behaviors -->
     to provide functionality to bindings by accessing XPCOM methods
     via XPConnect. Like binding content, behavior is optional in a
     binding. Each can exist without the other. At times, you might
     want only implementations, such as a base binding that contains
     certain properties that are inherited by other bindings.</p>
     <p>The <tt>&lt;implementation&gt;</tt> element is the container
     for all other elements that make up a binding's behavioral
     portion. <a href="#77008">Example 7-1</a> shows an empty
     implementation shell that highlights the element's contained
     hierarchy.</p>
     <p><i>Example 7-1: <a name="77008"></a></i> <i>XBL
     implementation element</i></p>
 <pre>
  &lt;implementation&gt;
    &lt;constructor /&gt;     &lt;constructor /&gt;
    &lt;destructor /&gt;     &lt;destructor /&gt;
    &lt;method name=""&gt;     &lt;method name=""&gt;
Line 221  this.input.focus( ); Line 680  this.input.focus( );
      &lt;setter /&gt;       &lt;setter /&gt;
    &lt;/property&gt;     &lt;/property&gt;
    &lt;field /&gt;     &lt;field /&gt;
 &lt;/implementation&gt;</PRE> &lt;/implementation&gt;
</pre>
<P>The code in <A HREF="#77008">Example 7-1</A> shows the <TT>&lt;implementation&gt;</TT> element having a constructor, destructor, method, property, and field as possible children. Each component can exist in quantities of zero or more, with the exception of the constructor and destructor, of which there can be only zero or one. The rest of this section describes each binding implementation component in more detail.    <p>The code in <a href="#77008">Example 7-1</a> shows the
<H3><A NAME="77044"></A> Binding Methods</H3>    <tt>&lt;implementation&gt;</tt> element having a constructor,
<P>Bindings can exist solely as content  <!--INDEX bindings:XBL:methods;XBL (eXtensible Binding Language):bindings:methods;methods:XBL bindings --> generators, acting passively when they are drawn. But you can also create bindings that provide new capabilities and more interactive functions or that execute routines in your application.    destructor, method, property, and field as possible children.
<P>In the spirit of self-containment, functions can be added to a binding that carry out functionality related to that binding. These functions are the behavior of a binding. The ideal way to add behavior is to add methods to your binding with the <TT>&lt;method&gt;</TT> element. Each parameter for a method defined in the <TT> <!--INDEX method element, XBL --> &lt;method&gt;</TT> element is contained within its own <TT>&lt;parameter&gt;</TT> tag.    Each component can exist in quantities of zero or more, with
<PRE>&lt;method name="dumpString"&gt;    the exception of the constructor and destructor, of which there
     can be only zero or one. The rest of this section describes
     each binding implementation component in more detail.</p>
     <h3><a name="77044"></a> Binding Methods</h3>
     <p>Bindings can exist solely as content 
     <!--INDEX bindings:XBL:methods;XBL (eXtensible Binding Language):bindings:methods;methods:XBL bindings -->
     generators, acting passively when they are drawn. But you can
     also create bindings that provide new capabilities and more
     interactive functions or that execute routines in your
     application.</p>
     <p>In the spirit of self-containment, functions can be added to
     a binding that carry out functionality related to that binding.
     These functions are the behavior of a binding. The ideal way to
     add behavior is to add methods to your binding with the
     <tt>&lt;method&gt;</tt> element. Each parameter for a method
     defined in the <tt><!--INDEX method element, XBL -->
     &lt;method&gt;</tt> element is contained within its own
     <tt>&lt;parameter&gt;</tt> tag.</p>
 <pre>
 &lt;method name="dumpString"&gt;
 &lt;parameter name="aString1"/&gt;  &lt;parameter name="aString1"/&gt;
 &lt;parameter name="aString2"/&gt;  &lt;parameter name="aString2"/&gt;
 &lt;body&gt;  &lt;body&gt;
Line 237  return; Line 715  return;
 return dump(aString1+" "+aString2+"\n");  return dump(aString1+" "+aString2+"\n");
 ]]&gt;  ]]&gt;
 &lt;/body&gt;  &lt;/body&gt;
&lt;/method&gt;</PRE>&lt;/method&gt;
<P>To use the method to print text to the command shell, call the name that is specified in the <TT>name</TT> attribute. All methods created in a binding are added to the binding element object and called as members of that object, as shown here:</pre>
<PRE>&lt;mybinding id="myNewWidget"&gt;    <p>To use the method to print text to the command shell, call
&lt;image src="<A HREF="http://www.mozdev.org/sharedimages/header.gif">http://www.mozdev.org/sharedimages/header.gif</A>" /&gt;    the name that is specified in the <tt>name</tt> attribute. All
     methods created in a binding are added to the binding element
     object and called as members of that object, as shown here:</p>
 <pre>
 &lt;mybinding id="myNewWidget"&gt;
 &lt;image src="<a href=
 "http://www.mozdev.org/sharedimages/header.gif">http://www.mozdev.org/sharedimages/header.gif</a>" /&gt;
 &lt;/mybinding&gt;  &lt;/mybinding&gt;
 &lt;button label="test method"  &lt;button label="test method"
 oncommand="document.getElementById('myNewWidget')  oncommand="document.getElementById('myNewWidget')
.dumpString('hello', 'there!');"/&gt;</PRE>.dumpString('hello', 'there!');"/&gt;
<P>Using the &lt;![CDATA XML entity is also important. The purpose of &lt;![CDATA is to escape JavaScript that may otherwise cause conflicts with the XML parser. Having characters like quotes and slashes in XML is problematic when they are not escaped. Using <TT>&lt;!CDATA</TT> with large portions of JavaScript in a binding can improve performance and minimize bugs.</pre>
<P>Methods were designed for language neutrality with the <TT>type</TT> attribute and getter and setter elements. Currently, bindings support only JavaScript, which is the default when no type is specified. However, this may change as other scripting engines are plugged into Gecko.    <p>Using the &lt;![CDATA XML entity is also important. The
<H4><A NAME="77045"></A> Attachment and detachment</H4>    purpose of &lt;![CDATA is to escape JavaScript that may
<P>Two special methods exist in XBL that  <!--INDEX bindings:XBL:methods;XBL (eXtensible Binding Language):bindings:methods;methods:XBL bindings:attachment;methods:XBL:detachment --> allow  <!--INDEX attachment, XBL:methods;detachment, XBL:methods --> you to manipulate what happens when a binding is added or removed from a document. These methods use the native <TT>&lt;constructor&gt;</TT> and <TT>&lt;destructor&gt;</TT> tags. A constructor is valuable, for example, when you need to initialize a binding object or prefill the UI based on stored values. Destructors can clean up when a binding is discarded.    otherwise cause conflicts with the XML parser. Having
<P>When bindings are attached, their content is inserted into the document at the point you specify. After insertion-or, more specifically, after the attachment occurs-the code in the <TT>&lt;constructor&gt;</TT> executes. Similarly, you can use the <TT>&lt;destructor&gt;</TT> element to execute functions when a binding is destroyed.    characters like quotes and slashes in XML is problematic when
<PRE>&lt;implementation&gt;    they are not escaped. Using <tt>&lt;!CDATA</tt> with large
     portions of JavaScript in a binding can improve performance and
     minimize bugs.</p>
     <p>Methods were designed for language neutrality with the
     <tt>type</tt> attribute and getter and setter elements.
     Currently, bindings support only JavaScript, which is the
     default when no type is specified. However, this may change as
     other scripting engines are plugged into Gecko.</p>
     <h4><a name="77045"></a> Attachment and detachment</h4>
     <p>Two special methods exist in XBL that 
     <!--INDEX bindings:XBL:methods;XBL (eXtensible Binding Language):bindings:methods;methods:XBL bindings:attachment;methods:XBL:detachment -->
     allow 
     <!--INDEX attachment, XBL:methods;detachment, XBL:methods -->
     you to manipulate what happens when a binding is added or
     removed from a document. These methods use the native
     <tt>&lt;constructor&gt;</tt> and <tt>&lt;destructor&gt;</tt>
     tags. A constructor is valuable, for example, when you need to
     initialize a binding object or prefill the UI based on stored
     values. Destructors can clean up when a binding is
     discarded.</p>
     <p>When bindings are attached, their content is inserted into
     the document at the point you specify. After insertion-or, more
     specifically, after the attachment occurs-the code in the
     <tt>&lt;constructor&gt;</tt> executes. Similarly, you can use
     the <tt>&lt;destructor&gt;</tt> element to execute functions
     when a binding is destroyed.</p>
 <pre>
 &lt;implementation&gt;
 &lt;constructor&gt;  &lt;constructor&gt;
 &lt;![CDATA[ dump("\n********\nCreate\n********\n");]]&gt;  &lt;![CDATA[ dump("\n********\nCreate\n********\n");]]&gt;
 &lt;/constructor&gt;  &lt;/constructor&gt;
 &lt;destructor&gt;  &lt;destructor&gt;
 &lt;![CDATA[ dump("\n********\nDestroy\n********\n");]]&gt;  &lt;![CDATA[ dump("\n********\nDestroy\n********\n");]]&gt;
 &lt;/destructor&gt;  &lt;/destructor&gt;
&lt;/implementation&gt;</PRE>&lt;/implementation&gt;
<P>This example prints some text to output, but you can include code that carries out variable initialization or anything else you want to occur at these stages of the binding's life. Bound elements constructed before the document <TT>load</TT> event execute this script before the document <TT>load</TT> event fires. In the case of extended bindings, base handlers are fired first, followed by derived handlers.</pre>
<H3><A NAME="77046"></A> Binding Properties</H3>    <p>This example prints some text to output, but you can include
<P>Properties on a binding are  <!--INDEX bindings:XBL:properties;XBL (eXtensible Binding Language):bindings:properties;properties:XBL:bindings --> included by using the <TT> <!--INDEX property element, XBL --> &lt;property&gt;</TT> element. Fundamentally, properties are used to hold and manipulate values that are used elsewhere in the binding, such as when a text widget has its displayed value changed periodically by the application. Currently, there are two classifications for properties, one of which gets a raw value directly on the element.    code that carries out variable initialization or anything else
<PRE>&lt;property name="someAttribute"&gt;    you want to occur at these stages of the binding's life. Bound
     elements constructed before the document <tt>load</tt> event
     execute this script before the document <tt>load</tt> event
     fires. In the case of extended bindings, base handlers are
     fired first, followed by derived handlers.</p>
     <h3><a name="77046"></a> Binding Properties</h3>
     <p>Properties on a binding are 
     <!--INDEX bindings:XBL:properties;XBL (eXtensible Binding Language):bindings:properties;properties:XBL:bindings -->
     included by using the <tt><!--INDEX property element, XBL -->
     &lt;property&gt;</tt> element. Fundamentally, properties are
     used to hold and manipulate values that are used elsewhere in
     the binding, such as when a text widget has its displayed value
     changed periodically by the application. Currently, there are
     two classifications for properties, one of which gets a raw
     value directly on the element.</p>
 <pre>
 &lt;property name="someAttribute"&gt;
 false;  false;
&lt;/property&gt;</PRE>&lt;/property&gt;
<P>This example always sets the attribute named <TT>someAttribute</TT> to false. Though still supported, this use of the <TT>&lt;property&gt;</TT> element was replaced by a new element called <TT>&lt;field&gt;</TT>. Although it is not in the XBL 1.0 specification, the <TT>&lt;field&gt;</TT> element is implemented and used in the Mozilla code base. It has the same syntax but a different name. We recommend using the <TT>&lt;field&gt;</TT> element.</pre>
<PRE>&lt;field name="someAttribute"&gt;    <p>This example always sets the attribute named
     <tt>someAttribute</tt> to false. Though still supported, this
     use of the <tt>&lt;property&gt;</tt> element was replaced by a
     new element called <tt>&lt;field&gt;</tt>. Although it is not
     in the XBL 1.0 specification, the <tt>&lt;field&gt;</tt>
     element is implemented and used in the Mozilla code base. It
     has the same syntax but a different name. We recommend using
     the <tt>&lt;field&gt;</tt> element.</p>
 <pre>
 &lt;field name="someAttribute"&gt;
 false;  false;
&lt;/field&gt;</PRE>&lt;/field&gt;
<P>The second property usage defines functions that are carried out when getting and setting a property's value. Take this anonymous content with a <TT>label</TT> child:</pre>
<PRE>&lt;xul:box align="left" flex="1"&gt;    <p>The second property usage defines functions that are carried
     out when getting and setting a property's value. Take this
     anonymous content with a <tt>label</tt> child:</p>
 <pre>
 &lt;xul:box align="left" flex="1"&gt;
 &lt;xul:label xbl:inherits="value=title"/&gt;  &lt;xul:label xbl:inherits="value=title"/&gt;
 &lt;xul:spacer flex="1"/&gt;  &lt;xul:spacer flex="1"/&gt;
&lt;/xul:box&gt;</PRE>&lt;/xul:box&gt;
<P>This content simply shows some text on the screen. The bound element that uses this content looks like this:</pre>
<PRE>&lt;mybinding id="my-binding" title="For Those Who Love to Use XBL" /&gt;</PRE>    <p>This content simply shows some text on the screen. The bound
<P>The XUL <TT>label</TT> used in the binding inherits the <TT>title</TT> attribute value that is set on the bound element. <A HREF="#77010">Example 7-2</A> shows how to set this title and its retrieval. Both access the bound element, and any changes filter down to the label.    element that uses this content looks like this:</p>
<pre>
<P><I>Example 7-2: <A NAME="77010"></A></I>&lt;mybinding id="my-binding" title="For Those Who Love to Use XBL" /&gt;
<I>An XBL property setting and getting a value</I></pre>
<PRE> &lt;property name="title"&gt;    <p>The XUL <tt>label</tt> used in the binding inherits the
     <tt>title</tt> attribute value that is set on the bound
     element. <a href="#77010">Example 7-2</a> shows how to set this
     title and its retrieval. Both access the bound element, and any
     changes filter down to the label.</p>
     <p><i>Example 7-2: <a name="77010"></a></i> <i>An XBL property
     setting and getting a value</i></p>
 <pre>
  &lt;property name="title"&gt;
    &lt;setter&gt;     &lt;setter&gt;
     &lt;!</TD>[CDATA[     &lt;!&lt;/td&gt;[CDATA[
       this.setAttribute('title',val); return val</TD>;       this.setAttribute('title',val); return val&lt;/td&gt;;
      ]]&gt;       ]]&gt;
    &lt;/setter&gt;     &lt;/setter&gt;
    &lt;getter&gt;     &lt;getter&gt;
     &lt;!</TD>[CDATA[     &lt;!&lt;/td&gt;[CDATA[
        return this.getAttribute('title');         return this.getAttribute('title');
      ]]&gt;       ]]&gt;
    &lt;/getter&gt;     &lt;/getter&gt;
 &lt;/property&gt;</PRE> &lt;/property&gt;
</pre>
<P>The script keyword <TT>val</TT> is used  <!--INDEX val keyword, XBL and;XBL (eXtensible Binding Language):val keyword --> internally to represent the latest property value. The request to change the property or retrieve its value can come from another property in the same binding (<TT>this.&lt;propertyName&gt;</TT>), from a binding method, or from a method in the bound document that accesses the binding object directly. This Java-Script sets the value of a property named <TT>title</TT> on the binding object:    <p>The script keyword <tt>val</tt> is used 
<PRE>var titleElement = document.getElementById("my-binding");    <!--INDEX val keyword, XBL and;XBL (eXtensible Binding Language):val keyword -->
titleElement.title = "The Adventures of an XBL hacker";</PRE>    internally to represent the latest property value. The request
<P>You can use the <TT>onget</TT> and <TT>onset</TT> attribute as an alternative to <TT>&lt;getter&gt;</TT> and <TT>&lt;setter&gt;</TT> elements. Properties are initialized after the content is generated but before the binding attached event is set off. This ensures that all properties are available once that event occurs.    to change the property or retrieve its value can come from
<P>Although it is most commonly used just for getting and setting values on the property, nothing stops you from putting more code in the <TT>&lt;properties&gt;</TT> element that carries out other actions on the binding. One scenario shown in <A HREF="#77012">Example 7-3</A> is if you have a property that holds a search value, you can send that text to the Google <A NAME="b253"></A><A HREF="#253">[*]</A> API, and fill another widget in the UI with the results every time the value is updated. <A NAME="b254"></A><A HREF="#254">[*]</A>    another property in the same binding
    (<tt>this.&lt;propertyName&gt;</tt>), from a binding method, or
<P><I>Example 7-3: <A NAME="77012"></A></I>    from a method in the bound document that accesses the binding
<I>Performing a Google search when setting a property</I>    object directly. This Java-Script sets the value of a property
<PRE> &lt;property name="searchString"&gt;    named <tt>title</tt> on the binding object:</p>
 <pre>
 var titleElement = document.getElementById("my-binding");
 titleElement.title = "The Adventures of an XBL hacker";
 </pre>
     <p>You can use the <tt>onget</tt> and <tt>onset</tt> attribute
     as an alternative to <tt>&lt;getter&gt;</tt> and
     <tt>&lt;setter&gt;</tt> elements. Properties are initialized
     after the content is generated but before the binding attached
     event is set off. This ensures that all properties are
     available once that event occurs.</p>
     <p>Although it is most commonly used just for getting and
     setting values on the property, nothing stops you from putting
     more code in the <tt>&lt;properties&gt;</tt> element that
     carries out other actions on the binding. One scenario shown in
     <a href="#77012">Example 7-3</a> is if you have a property that
     holds a search value, you can send that text to the Google <a
     name="b253"></a><a href="#253">[*]</a> API, and fill another
     widget in the UI with the results every time the value is
     updated. <a name="b254"></a><a href="#254">[*]</a></p>
     <p><i>Example 7-3: <a name="77012"></a></i> <i>Performing a
     Google search when setting a property</i></p>
 <pre>
  &lt;property name="searchString"&gt;
    &lt;setter&gt;     &lt;setter&gt;
     &lt;!</TD>[CDATA[     &lt;!&lt;/td&gt;[CDATA[
        var s = new SOAPCall( );         var s = new SOAPCall( );
       </TD>var q = val;       &lt;/td&gt;var q = val;
        if (!s)         if (!s)
          return "Error creating SOAPCall object";           return "Error creating SOAPCall object";
        var soapversion = 0;         var soapversion = 0;
        var method = "doGoogleSearch";         var method = "doGoogleSearch";
        var object = "urn:GoogleSearch";         var object = "urn:GoogleSearch";
       var headers = </TD>[ ];       var headers = &lt;/td&gt;[ ];
       var params = </TD>[       var params = &lt;/td&gt;[
          new SOAPParameter(this.googleKey, "key"),           new SOAPParameter(this.googleKey, "key"),
          new SOAPParameter(q, "q"),           new SOAPParameter(q, "q"),
          new SOAPParameter(this.start, "start"),           new SOAPParameter(this.start, "start"),
Line 325  titleElement.title = "The Adventures of  Line 896  titleElement.title = "The Adventures of 
        ];         ];
        s.encode(soapversion, method, object, headers.length, headers,         s.encode(soapversion, method, object, headers.length, headers,
          params.length, params);           params.length, params);
       s.transportURI = "<A HREF="http://api.google.com/search/beta2">http://api.google.com/search/beta2</A>"       s.transportURI = "<a href=
 "http://api.google.com/search/beta2">http://api.google.com/search/beta2</a>"
        var response = s.invoke( );         var response = s.invoke( );
        if (response.fault)         if (response.fault)
          return { msg : "SOAP call error", fault : response.fault };           return { msg : "SOAP call error", fault : response.fault };
Line 333  titleElement.title = "The Adventures of  Line 905  titleElement.title = "The Adventures of 
        return response.message;         return response.message;
      ]]&gt;       ]]&gt;
    &lt;/setter&gt;     &lt;/setter&gt;
 &lt;/property&gt;</PRE> &lt;/property&gt;
</pre>
<P>The value of the search string is set to the value that has been given to the property: <TT>var q = val</TT>. This value is then added to the parameter list (<TT>SOAPParameter</TT>) for the SOAP call, along with other parameters that are obtained from other properties in the binding (e.g., <TT>this.maxResults</TT>).    <p>The value of the search string is set to the value that has
<H2><A NAME="77047"></A> XBL and the DOM</H2>    been given to the property: <tt>var q = val</tt>. This value is
<P>This section introduces  <!--INDEX XBL (eXtensible Binding Language):DOM and;DOM (Document Object Model):XBL and --> the DOM interfaces in XBL, illustrates how they work, and explains the core concepts involved in XBL interaction with the DOM, such as scope characteristics and insertion points.    then added to the parameter list (<tt>SOAPParameter</tt>) for
<H3><A NAME="77048"></A> The XBL DOM Interfaces</H3>    the SOAP call, along with other parameters that are obtained
<P>XBL has two  <!--INDEX DocumentXBL interface;ElementXBL interface;DOM (Document Object Model):DocumentXBL interface;DOM (Document Object Model):ElementXBL interface --> core DOM interfaces, <TT>DocumentXBL</TT> and <TT>ElementXBL</TT>. These extensions to the <I>Document</I> and <I>Element</I> interfaces are not part of the formal DOM specifications. All methods can be accessed and used from JavaScript. Here is a list of these interface methods.    from other properties in the binding (e.g.,
<H4><A NAME="77049"></A> DocumentXBL methods</H4>    <tt>this.maxResults</tt>).</p>
<P>The <I> <!--INDEX DocumentXBL interface:methods;methods:DocumentXBL interface --> DocumentXBL</I> interface gains access to and interacts with an XBL document. The methods of this interface are as follows:    <h2><a name="77047"></a> XBL and the DOM</h2>
<DL><DT>loadBindingDocument(URL)    <p>This section introduces 
<DD>XBL documents are loaded  <!--INDEX loadBindingDocument( ) method, DocumentXBL interface --> only the first time a bound document uses a binding from it. You can get around this problem and load the binding documents synchronously by using this method. It returns an XBL document for use within a bound document. If your document is large and you need to optimize performance, this method may provide better performance.<P></DL>    <!--INDEX XBL (eXtensible Binding Language):DOM and;DOM (Document Object Model):XBL and -->
document.loadBindingDocument('chrome://package/content/myBindings.xml');    the DOM interfaces in XBL, illustrates how they work, and
<DL><DT>getBindingParent(element)    explains the core concepts involved in XBL interaction with the
<DD>For use only within a binding, this  <!--INDEX getBindingParent( ) method, DocumentXBL interface --> method returns the bound element-i.e., the top-level node of the binding, when passed an element within a binding.<P></DL>    DOM, such as scope characteristics and insertion points.</p>
var listbox = document.getBindingParent(this);    <h3><a name="77048"></a> The XBL DOM Interfaces</h3>
var cellValue = listbox.childNodes[3].firstChild.label;    <p>XBL has two 
<DL><DT>getAnonymousNodes(element)    <!--INDEX DocumentXBL interface;ElementXBL interface;DOM (Document Object Model):DocumentXBL interface;DOM (Document Object Model):ElementXBL interface -->
<DD>Returns an array with the input  <!--INDEX getAnonymousNodes( ) method, XBL --> binding's top-level content nodes. Refer to the section <A HREF="#77054">"Accessing Anonymous Nodes</A>," later in this chapter, for more details.<P>    core DOM interfaces, <tt>DocumentXBL</tt> and
<DT>getAnonymousElementByAttribute(element, attribute, value)    <tt>ElementXBL</tt>. These extensions to the <i>Document</i>
<DD>Returns a single anonymous  <!--INDEX getAnonymousElementByAttribute( ) method, XBL --> element when passed an element, an attribute from that element, and its value. Refer to the section <A HREF="#77054">"Accessing Anonymous Nodes</A>" for more details.<P></DL>    and <i>Element</i> interfaces are not part of the formal DOM
<H4><A NAME="77050"></A> ElementXBL methods</H4>    specifications. All methods can be accessed and used from
<P>The <I>ElementXBL</I> interface adds and  <!--INDEX ElementXBL interface --> removes bindings from a bound element. The methods of this interface are as follows:    JavaScript. Here is a list of these interface methods.</p>
<DL><DT>addBinding(element, URL)    <h4><a name="77049"></a> DocumentXBL methods</h4>
<DD>Dynamically attaches a binding,  <!--INDEX addBinding( ) method, ElementXBL interface --> given as a parameter, to an element. Refer to the following sections for more details.<P>    <p>The <i>
<DT>removeBinding(element, URL)    <!--INDEX DocumentXBL interface:methods;methods:DocumentXBL interface -->
<DD>Dynamically removes the  <!--INDEX removeBinding( ) method, ElementXBL interface --> given binding. Refer to the following sections for more details.<P></DL>    DocumentXBL</i> interface gains access to and interacts with an
<H4><A NAME="77051"></A> Dynamically adding a binding</H4>    XBL document. The methods of this interface are as follows:</p>
<P>The section <A HREF="#77033">"Anatomy of a Binding</A>" covered the attachment of a binding to a bound element using CSS. This technique  <!--INDEX bound elements:bindings:adding dynamically;bindings:bound elements:adding dynamically --> is the most common method, but you can also attach bindings with the <TT>addBinding</TT> method.    <dl>
<P>Using this method as an alternative to CSS attachment is useful when you do not want to attach a binding in all circumstances. In an application based on user input, you may not want to load a binding until certain values are entered. For example, in a membership database, the information that appears on screen may depend on the user's level of membership. The following snippets show how it is used.      <dt>loadBindingDocument(URL)</dt>
<PRE>&lt;mybinding id="myNewWidget" class="attached" /&gt;</PRE>      <dd>XBL documents are loaded 
<P>To load a binding, add these two lines in your script.      <!--INDEX loadBindingDocument( ) method, DocumentXBL interface -->
<PRE>var binding = document.getElementById("myNewWidget");      only the first time a bound document uses a binding from it.
document.addBinding(binding, "chrome://mypackage/content/myBindings.xml#super");</PRE>      You can get around this problem and load the binding
<P>Notice that the URL used to access the binding takes the same format as in the CSS property-i.e., the path to the file and the <TT>id</TT> of the binding qualified by <TT>#</TT>.      documents synchronously by using this method. It returns an
<BLOCKQUOTE><CENTER><B>NOTE</B></CENTER>      XBL document for use within a bound document. If your
<P>Neither <TT>addBinding</TT> nor <TT>removeBinding</TT> are implemented at the time of writing. They are covered because they are part of the XBL 1.0 specification. When implemented, they offer crucial alternatives for attaching and detaching bindings, making XBL a more interactive technology.<P></BLOCKQUOTE>      document is large and you need to optimize performance, this
<H4><A NAME="77052"></A> Removing bindings</H4>      method may provide better performance.</dd>
<P>The best way to remove a binding  <!--INDEX bound elements:bindings:removing;bindings:bound elements:removing from --> attached via CSS is to change the style rule for that element. You can change the <TT>class</TT> to one that does not have a different or null binding reference, for example. Then a stylesheet can be set up to provide binding references for both an attached and unattached element.    </dl>
<P>This example shows how to remove a reference to a binding by resetting it to an empty reference:    document.loadBindingDocument('chrome://package/content/myBindings.xml');
<PRE>mybinding.attached {    
     <dl>
       <dt>getBindingParent(element)</dt>
       <dd>For use only within a binding, this 
       <!--INDEX getBindingParent( ) method, DocumentXBL interface -->
       method returns the bound element-i.e., the top-level node of
       the binding, when passed an element within a binding.</dd>
     </dl>
     var listbox = document.getBindingParent(this); var cellValue =
     listbox.childNodes[3].firstChild.label; 
     <dl>
       <dt>getAnonymousNodes(element)</dt>
       <dd>Returns an array with the input 
       <!--INDEX getAnonymousNodes( ) method, XBL --> binding's
       top-level content nodes. Refer to the section <a href=
       "#77054">"Accessing Anonymous Nodes</a>," later in this
       chapter, for more details.</dd>
       <dt>getAnonymousElementByAttribute(element, attribute,
       value)</dt>
       <dd>Returns a single anonymous 
       <!--INDEX getAnonymousElementByAttribute( ) method, XBL -->
       element when passed an element, an attribute from that
       element, and its value. Refer to the section <a href=
       "#77054">"Accessing Anonymous Nodes</a>" for more
       details.</dd>
     </dl>
     <h4><a name="77050"></a> ElementXBL methods</h4>
     <p>The <i>ElementXBL</i> interface adds and 
     <!--INDEX ElementXBL interface --> removes bindings from a
     bound element. The methods of this interface are as
     follows:</p>
     <dl>
       <dt>addBinding(element, URL)</dt>
       <dd>Dynamically attaches a binding, 
       <!--INDEX addBinding( ) method, ElementXBL interface -->
       given as a parameter, to an element. Refer to the following
       sections for more details.</dd>
       <dt>removeBinding(element, URL)</dt>
       <dd>Dynamically removes the 
       <!--INDEX removeBinding( ) method, ElementXBL interface -->
       given binding. Refer to the following sections for more
       details.</dd>
     </dl>
     <h4><a name="77051"></a> Dynamically adding a binding</h4>
     <p>The section <a href="#77033">"Anatomy of a Binding</a>"
     covered the attachment of a binding to a bound element using
     CSS. This technique 
     <!--INDEX bound elements:bindings:adding dynamically;bindings:bound elements:adding dynamically -->
     is the most common method, but you can also attach bindings
     with the <tt>addBinding</tt> method.</p>
     <p>Using this method as an alternative to CSS attachment is
     useful when you do not want to attach a binding in all
     circumstances. In an application based on user input, you may
     not want to load a binding until certain values are entered.
     For example, in a membership database, the information that
     appears on screen may depend on the user's level of membership.
     The following snippets show how it is used.</p>
 <pre>
 &lt;mybinding id="myNewWidget" class="attached" /&gt;
 </pre>
     <p>To load a binding, add these two lines in your script.</p>
 <pre>
 var binding = document.getElementById("myNewWidget");
 document.addBinding(binding, "chrome://mypackage/content/myBindings.xml#super");
 </pre>
     <p>Notice that the URL used to access the binding takes the
     same format as in the CSS property-i.e., the path to the file
     and the <tt>id</tt> of the binding qualified by <tt>#</tt>.</p>
     <blockquote>
       <div class="c19">
         NOTE
       </div>
       <p>Neither <tt>addBinding</tt> nor <tt>removeBinding</tt> are
       implemented at the time of writing. They are covered because
       they are part of the XBL 1.0 specification. When implemented,
       they offer crucial alternatives for attaching and detaching
       bindings, making XBL a more interactive technology.</p>
     </blockquote>
     <h4><a name="77052"></a> Removing bindings</h4>
     <p>The best way to remove a binding 
     <!--INDEX bound elements:bindings:removing;bindings:bound elements:removing from -->
     attached via CSS is to change the style rule for that element.
     You can change the <tt>class</tt> to one that does not have a
     different or null binding reference, for example. Then a
     stylesheet can be set up to provide binding references for both
     an attached and unattached element.</p>
     <p>This example shows how to remove a reference to a binding by
     resetting it to an empty reference:</p>
 <pre>
 mybinding.attached {
 -moz-binding : url("mybindings.xml#my-binding");  -moz-binding : url("mybindings.xml#my-binding");
 }  }
 mybinding.unattached {  mybinding.unattached {
 -moz-binding : url("");  -moz-binding : url("");
}</PRE>}
<P>When you want to detach the binding from an element, you can do this:</pre>
<PRE>var mywidget = document.getElementById("binding1");    <p>When you want to detach the binding from an element, you can
mywidget.setAttribute("class","unattached");</PRE>    do this:</p>
<P>An element can have only one binding attached at a time, so this is a programmatic trick for knocking the "real" binding out of its place with an empty one, rather than actually removing it.<pre>
<BLOCKQUOTE><CENTER><B>NOTE</B></CENTER>var mywidget = document.getElementById("binding1");
<P><TT>-moz-binding:url("")</TT> can be used at this time as a hack around the <TT>-moz-binding:none</TT> binding. The later binding does not currently work in Mozilla.<P></BLOCKQUOTE>mywidget.setAttribute("class","unattached");
<P>The other method used to detach a binding, which is more intuitive from a DOM perspective, uses the <TT>removeBinding</TT> method:</pre>
<PRE>var binding = document.getElementById("myNewWidget");    <p>An element can have only one binding attached at a time, so
document.removeBinding(binding, "chrome://mypackage/content/myBindings.xml#super");</PRE>    this is a programmatic trick for knocking the "real" binding
<P>This method ensures that other style information is not lost if you have it attached to a particular class.    out of its place with an empty one, rather than actually
<P>When a binding is removed, the anonymous content is destroyed and the methods, properties, and event handlers no longer apply.    removing it.</p>
<P>In the case of an inheritance chain (see the <A HREF="#77060">"Inheritance</A>" section later in this chapter for more details), the bindings are destroyed from the bottom upwards. This means that if there is tear-down code in the form of a destructor, it is executed last on the base binding.    <blockquote>
<H3><A NAME="77053"></A> Binding Parents</H3>      <div class="c19">
<P>Although a document cannot access  <!--INDEX bindings:parents;parents, bindings;XBL (eXtensible Binding Language):bindings:parents --> the content of bindings attached to it, a binding can access the document it is attached to (bound document). This gives bindings the ability to provide more than just additional content to the document. It also means that you can find information about the context of bound element in a document and provide information about it from within the binding.        NOTE
<P>From the perspective of nodes inside the anonymous content, you can use DOM properties to find a higher-level node and then in turn use that to get to other nodes:      </div>
<DL><DT><TT>parentNode</TT>      <p><tt>-moz-binding:url("")</tt> can be used at this time as
<DD>This property is the bound element for the top-most element in the anonymous content. This bound element resides in the document that the binding is attached to.<P>      a hack around the <tt>-moz-binding:none</tt> binding. The
<DT><TT>ownerDocument</TT>      later binding does not currently work in Mozilla.</p>
<DD>For all elements in the anonymous content, this is the document the bound element resides in.<P></DL>    </blockquote>
<BLOCKQUOTE><CENTER><B>NOTE</B></CENTER>    <p>The other method used to detach a binding, which is more
<P>While higher-level nodes can be accessed from anonymous content, parents do not have explicit access to their anonymous children using the DOM <TT>childNodes</TT> property. Using <TT>firstChild</TT> or <TT>nextSibling</TT> will also not work.<P></BLOCKQUOTE>    intuitive from a DOM perspective, uses the
<P><A HREF="#77014">Example 7-4</A> illustrates both properties in use.    <tt>removeBinding</tt> method:</p>
<pre>
<P><I>Example 7-4: <A NAME="77014"></A></I>var binding = document.getElementById("myNewWidget");
<I>Accessing a bound document from a binding</I>document.removeBinding(binding, "chrome://mypackage/content/myBindings.xml#super");
<PRE> &lt;binding id="my-binding"&gt;</pre>
     <p>This method ensures that other style information is not lost
     if you have it attached to a particular class.</p>
     <p>When a binding is removed, the anonymous content is
     destroyed and the methods, properties, and event handlers no
     longer apply.</p>
     <p>In the case of an inheritance chain (see the <a href=
     "#77060">"Inheritance</a>" section later in this chapter for
     more details), the bindings are destroyed from the bottom
     upwards. This means that if there is tear-down code in the form
     of a destructor, it is executed last on the base binding.</p>
     <h3><a name="77053"></a> Binding Parents</h3>
     <p>Although a document cannot access 
     <!--INDEX bindings:parents;parents, bindings;XBL (eXtensible Binding Language):bindings:parents -->
     the content of bindings attached to it, a binding can access
     the document it is attached to (bound document). This gives
     bindings the ability to provide more than just additional
     content to the document. It also means that you can find
     information about the context of bound element in a document
     and provide information about it from within the binding.</p>
     <p>From the perspective of nodes inside the anonymous content,
     you can use DOM properties to find a higher-level node and then
     in turn use that to get to other nodes:</p>
     <dl>
       <dt><tt>parentNode</tt></dt>
       <dd>This property is the bound element for the top-most
       element in the anonymous content. This bound element resides
       in the document that the binding is attached to.</dd>
       <dt><tt>ownerDocument</tt></dt>
       <dd>For all elements in the anonymous content, this is the
       document the bound element resides in.</dd>
     </dl>
     <blockquote>
       <div class="c19">
         NOTE
       </div>
       <p>While higher-level nodes can be accessed from anonymous
       content, parents do not have explicit access to their
       anonymous children using the DOM <tt>childNodes</tt>
       property. Using <tt>firstChild</tt> or <tt>nextSibling</tt>
       will also not work.</p>
     </blockquote>
     <p><a href="#77014">Example 7-4</a> illustrates both properties
     in use.</p>
     <p><i>Example 7-4: <a name="77014"></a></i> <i>Accessing a
     bound document from a binding</i></p>
 <pre>
  &lt;binding id="my-binding"&gt;
    &lt;content&gt;     &lt;content&gt;
      &lt;xul:vbox&gt;       &lt;xul:vbox&gt;
        &lt;xul:button label="A" id="button1"         &lt;xul:button label="A" id="button1"
         oncommand="alert(this.parentNode.parentNode.nodeName)"</TD>/&gt;         oncommand="alert(this.parentNode.parentNode.nodeName)"&lt;/td&gt;/&gt;
        &lt;xul:button label="B" id="button2"         &lt;xul:button label="B" id="button2"
         oncommand="alert(this.ownerDocument.firstChild.nodeName)"</TD>/&gt;         oncommand="alert(this.ownerDocument.firstChild.nodeName)"&lt;/td&gt;/&gt;
      &lt;/xul:vbox&gt;       &lt;/xul:vbox&gt;
    &lt;/content&gt;     &lt;/content&gt;
 &lt;/binding&gt;</PRE> &lt;/binding&gt;
</pre>
<P><A HREF="#77014">Example 7-4</A> is a binding with two buttons, each of which brings up an alert when activated. The alert simply shows the name of an element that is accessed in the code attached to the button. In Button A, the parent node is the containing box. One level further is the bound element, <TT>&lt;mybinding&gt;-</TT>the parent node of the <TT>box</TT> parent. The alert dialog raised by the alert shows "mybinding." Once a binding is applied, the binding's owner (<TT>ownerDocument</TT>) is the bound document. Assuming that Button B is a XUL window, the alert, when activated, shows "window." This property can be used to access properties of the document object.    <p><a href="#77014">Example 7-4</a> is a binding with two
<H3><A NAME="77054"></A> Accessing Anonymous Nodes</H3>    buttons, each of which brings up an alert when activated. The
<P>Content bound to a document can  <!--INDEX anonymous nodes;nodes:anonymous, access -->  <!--INDEX XBL (eXtensible Binding Language):nodes, anonymous --> introduce different levels of scope. Some of the scope is available at the document level, and some is at the binding level. With content in different scopes, there are limits to which standard DOM methods can be used to access other elements and objects in and above a binding. XBL contains some special methods to help work around some of the limitations caused by these barriers, such as not being able to change binding content dynamically or access certain property values.    alert simply shows the name of an element that is accessed in
<P>The two XBL-specific interfaces that exist on the document to get a handle on this content are <I>getAnonymousNodes</I> and <I>getAnonymousElementByAttribute</I>. The advantage of using these interfaces is that they provide a bridge between behavior and content. Use them when you want to dynamically manipulate content or get a value-for example, when accessing a particular textbox contained in binding, reminiscent of the one used earlier in the chapter when you were introduced to the <TT>&lt;inputfield /&gt;</TT> binding.    the code attached to the button. In Button A, the parent node
<H4><A NAME="77055"></A> getAnonymousNodes</H4>    is the containing box. One level further is the bound element,
<P>The method <TT>getAnonymousNodes(element)</TT> takes  <!--INDEX getAnonymousNodes( ) method, XBL --> a node as a parameter and returns a list of nodes that are in the anonymous content. The following code uses script in the <TT>&lt;getter&gt;</TT> to access the anonymous node and return a value contained in it.    <tt>&lt;mybinding&gt;-</tt>the parent node of the <tt>box</tt>
<PRE>&lt;getter&gt;    parent. The alert dialog raised by the alert shows "mybinding."
     Once a binding is applied, the binding's owner
     (<tt>ownerDocument</tt>) is the bound document. Assuming that
     Button B is a XUL window, the alert, when activated, shows
     "window." This property can be used to access properties of the
     document object.</p>
     <h3><a name="77054"></a> Accessing Anonymous Nodes</h3>
     <p>Content bound to a document can 
     <!--INDEX anonymous nodes;nodes:anonymous, access --> 
     <!--INDEX XBL (eXtensible Binding Language):nodes, anonymous -->
     introduce different levels of scope. Some of the scope is
     available at the document level, and some is at the binding
     level. With content in different scopes, there are limits to
     which standard DOM methods can be used to access other elements
     and objects in and above a binding. XBL contains some special
     methods to help work around some of the limitations caused by
     these barriers, such as not being able to change binding
     content dynamically or access certain property values.</p>
     <p>The two XBL-specific interfaces that exist on the document
     to get a handle on this content are <i>getAnonymousNodes</i>
     and <i>getAnonymousElementByAttribute</i>. The advantage of
     using these interfaces is that they provide a bridge between
     behavior and content. Use them when you want to dynamically
     manipulate content or get a value-for example, when accessing a
     particular textbox contained in binding, reminiscent of the one
     used earlier in the chapter when you were introduced to the
     <tt>&lt;inputfield /&gt;</tt> binding.</p>
     <h4><a name="77055"></a> getAnonymousNodes</h4>
     <p>The method <tt>getAnonymousNodes(element)</tt> takes 
     <!--INDEX getAnonymousNodes( ) method, XBL --> a node as a
     parameter and returns a list of nodes that are in the anonymous
     content. The following code uses script in the
     <tt>&lt;getter&gt;</tt> to access the anonymous node and return
     a value contained in it.</p>
 <pre>
 &lt;getter&gt;
 &lt;![CDATA[  &lt;![CDATA[
 var list = document.getAnonymousNodes(this)[0];  var list = document.getAnonymousNodes(this)[0];
 return list.selectedItem.getAttribute('label');  return list.selectedItem.getAttribute('label');
 ]]&gt;  ]]&gt;
&lt;/getter&gt;</PRE>&lt;/getter&gt;
<P>If we assume that this binding's content is a XUL menu list, then this code gets the <TT>label</TT> attribute of the menu item that is currently selected in that list (<TT>list.selectedItem</TT>). The list variable contains the value returned by the <TT>getAnonymousNodes</TT> function, which is passed the binding node (<TT>this</TT>). The method returns an array, so the item is accessed via the first index of 0.</pre>
<H4><A NAME="77056"></A> getAnonymousElementByAttribute</H4>    <p>If we assume that this binding's content is a XUL menu list,
<P>The method <TT>getAnonymousElementByAttribute(element, attr, value) </TT>returns a single anonymous node rather than a list. This node is  <!--INDEX getAnonymousElementByAttribute( ) method, XBL --> qualified by an element name, a particular attribute, and the value of that attribute, and returns this specific node. This retrieval provides faster access to anonymous content elements when you know an attribute's value.    then this code gets the <tt>label</tt> attribute of the menu
<PRE>&lt;property name="emailID" onget="return document.getAnonymousElementByAttribute(this, 'id', 'emailAddressNode');" readonly="true"/&gt;</PRE>    item that is currently selected in that list
<P>This example uses an <TT>id</TT> attribute to retrieve a specific node. You can use this method when multiple elements of the same type exist and you need to get access to a particular one-for example, a particular field on a database entry submission form like an email address or a telephone number.    (<tt>list.selectedItem</tt>). The list variable contains the
<P>Although these two functions (<TT>getAnonymousNodes</TT> and <TT>getAnonymous-Elements-ByAttribute</TT>) were probably designed to be used within a binding scope, they can be used both inside and outside a binding to access anonymous content. Bindings are meant to be self-contained, and getting anonymous nodes outside a binding breaks this philosophy. However, these functions can act as a bridge between scopes if you are careful.    value returned by the <tt>getAnonymousNodes</tt> function,
<H3><A NAME="77057"></A> Extra Binding Content and Insertion Points</H3>    which is passed the binding node (<tt>this</tt>). The method
<P>All examples in the chapter have so far dealt with standard binding content rendering within a bound document. The processes outlined in this section can, in one sense, be seen as abnormal because they allow ordering of the content to change based on insertion points defined in the binding. This process is done with the XBL <TT>&lt;children&gt;</TT> element    returns an array, so the item is accessed via the first index
<H4><A NAME="77058"></A> Working with children of the bound element</H4>    of 0.</p>
<P>Zero or more children can be contained  <!--INDEX bound elements:children;XBL (eXtensible Binding Language):bound elements:children;elements:bound elements:children --> in anonymous content. These children are marked up with the XBL-specific <TT>&lt;children&gt;</TT> tag. They can be either the content of the element using the binding or anonymous content generated by the base binding. If the <TT> <!--INDEX children tag, XBL --> &lt;children&gt;</TT> tag contains its own elements, then it will be used as the default content. If the element the binding is attached to contains children, the default content will be ignored.    <h4><a name="77056"></a> getAnonymousElementByAttribute</h4>
<P>The location of the <TT>&lt;children&gt;</TT> tags determines the content's insertion point. Insertion points play an important role in the generation of content within a template because they affect how the content is displayed and accessed by the DOM.    <p>The method <tt>getAnonymousElementByAttribute(element, attr,
<PRE>&lt;binding id="my-binding"&gt;    value)</tt> returns a single anonymous node rather than a list.
     This node is 
     <!--INDEX getAnonymousElementByAttribute( ) method, XBL -->
     qualified by an element name, a particular attribute, and the
     value of that attribute, and returns this specific node. This
     retrieval provides faster access to anonymous content elements
     when you know an attribute's value.</p>
 <pre>
 &lt;property name="emailID" onget="return document.getAnonymousElementByAttribute(this, 'id', 'emailAddressNode');" readonly="true"/&gt;
 </pre>
     <p>This example uses an <tt>id</tt> attribute to retrieve a
     specific node. You can use this method when multiple elements
     of the same type exist and you need to get access to a
     particular one-for example, a particular field on a database
     entry submission form like an email address or a telephone
     number.</p>
     <p>Although these two functions (<tt>getAnonymousNodes</tt> and
     <tt>getAnonymous-Elements-ByAttribute</tt>) were probably
     designed to be used within a binding scope, they can be used
     both inside and outside a binding to access anonymous content.
     Bindings are meant to be self-contained, and getting anonymous
     nodes outside a binding breaks this philosophy. However, these
     functions can act as a bridge between scopes if you are
     careful.</p>
     <h3><a name="77057"></a> Extra Binding Content and Insertion
     Points</h3>
     <p>All examples in the chapter have so far dealt with standard
     binding content rendering within a bound document. The
     processes outlined in this section can, in one sense, be seen
     as abnormal because they allow ordering of the content to
     change based on insertion points defined in the binding. This
     process is done with the XBL <tt>&lt;children&gt;</tt>
     element</p>
     <h4><a name="77058"></a> Working with children of the bound
     element</h4>
     <p>Zero or more children can be contained 
     <!--INDEX bound elements:children;XBL (eXtensible Binding Language):bound elements:children;elements:bound elements:children -->
     in anonymous content. These children are marked up with the
     XBL-specific <tt>&lt;children&gt;</tt> tag. They can be either
     the content of the element using the binding or anonymous
     content generated by the base binding. If the <tt>
     <!--INDEX children tag, XBL --> &lt;children&gt;</tt> tag
     contains its own elements, then it will be used as the default
     content. If the element the binding is attached to contains
     children, the default content will be ignored.</p>
     <p>The location of the <tt>&lt;children&gt;</tt> tags
     determines the content's insertion point. Insertion points play
     an important role in the generation of content within a
     template because they affect how the content is displayed and
     accessed by the DOM.</p>
 <pre>
 &lt;binding id="my-binding"&gt;
 &lt;content&gt;  &lt;content&gt;
 &lt;xul:vbox&gt;  &lt;xul:vbox&gt;
 &lt;children /&gt;  &lt;children /&gt;
 &lt;/xul:vbox&gt;  &lt;/xul:vbox&gt;
 &lt;/content&gt;  &lt;/content&gt;
&lt;/binding&gt;</PRE>&lt;/binding&gt;
<P>This stripped-down binding has only a vertical box as its own content and looks to the children of the bound element for more content by using the <TT>&lt;children&gt;</TT> element. Here is the XUL content that uses the binding:</pre>
<PRE>&lt;mybinding id="myNewWidget" flex="1" class="attached"&gt;    <p>This stripped-down binding has only a vertical box as its
     own content and looks to the children of the bound element for
     more content by using the <tt>&lt;children&gt;</tt> element.
     Here is the XUL content that uses the binding:</p>
 <pre>
 &lt;mybinding id="myNewWidget" flex="1" class="attached"&gt;
 &lt;label value="this is child 1" /&gt;  &lt;label value="this is child 1" /&gt;
 &lt;label value="this is child 2" /&gt;  &lt;label value="this is child 2" /&gt;
&lt;/mybinding&gt;</PRE>&lt;/mybinding&gt;
<P>When the binding is attached and the content is drawn, the insertion point for the two labels is inside the container vertical box inside the binding. This scenario could be used when a binding is used multiple times. Each time, it needs to be rendered differently with extra content that can be provided this way.</pre>
<H4><A NAME="77059"></A> Selective inclusion</H4>    <p>When the binding is attached and the content is drawn, the
<P>Sometimes multiple siblings are located  <!--INDEX bound elements:children:selective inclusion;XBL (eXtensible Binding Language):bound elements:children;elements:bound elements:children --> within a box in the XUL, but you want to use only some of them in the binding, such as when a user logs into a system and content is displayed depending on its level of membership. In these cases, you can be selective about which children should be included in the binding. <A HREF="#77016">Example 7-5</A> shows how to use the <TT>includes</TT> attribute on the <TT>&lt;children&gt;</TT> element.    insertion point for the two labels is inside the container
    vertical box inside the binding. This scenario could be used
<P><I>Example 7-5: <A NAME="77016"></A></I>    when a binding is used multiple times. Each time, it needs to
<I>Selective inclusion of child content in a binding</I>    be rendered differently with extra content that can be provided
<PRE> &lt;binding id="my-binding"&gt;    this way.</p>
     <h4><a name="77059"></a> Selective inclusion</h4>
     <p>Sometimes multiple siblings are located 
     <!--INDEX bound elements:children:selective inclusion;XBL (eXtensible Binding Language):bound elements:children;elements:bound elements:children -->
     within a box in the XUL, but you want to use only some of them
     in the binding, such as when a user logs into a system and
     content is displayed depending on its level of membership. In
     these cases, you can be selective about which children should
     be included in the binding. <a href="#77016">Example 7-5</a>
     shows how to use the <tt>includes</tt> attribute on the
     <tt>&lt;children&gt;</tt> element.</p>
     <p><i>Example 7-5: <a name="77016"></a></i> <i>Selective
     inclusion of child content in a binding</i></p>
 <pre>
  &lt;binding id="my-binding"&gt;
    &lt;content&gt;     &lt;content&gt;
      &lt;xul:vbox class="insideBox"&gt;       &lt;xul:vbox class="insideBox"&gt;
        &lt;xul:description value="Top" /&gt;         &lt;xul:description value="Top" /&gt;
        &lt;xul:box&gt;         &lt;xul:box&gt;
         </TD>&lt;children includes="image" /&gt;         &lt;children includes="image" /&gt;
        &lt;/xul:box&gt;         &lt;/xul:box&gt;
        &lt;xul:description value="Bottom" /&gt;         &lt;xul:description value="Bottom" /&gt;
      &lt;/xul:vbox&gt;       &lt;/xul:vbox&gt;
    &lt;/content&gt;     &lt;/content&gt;
 &lt;/binding&gt;</PRE> &lt;/binding&gt;
</pre>
<P>The children element in <A HREF="#77016">Example 7-5</A> essentially tells, "Of all the content contained in the bound element, insert only the <TT>image</TT> element at this particular insertion point." Here is the XUL code that goes with this example:    <p>The children element in <a href="#77016">Example 7-5</a>
<PRE>&lt;mybinding id="myNewWidget" flex="1"&gt;    essentially tells, "Of all the content contained in the bound
&lt;image src="<A HREF="http://www.mozdev.org/sharedimages/header.gif">http://www.mozdev.org/sharedimages/header.gif</A>" /&gt;    element, insert only the <tt>image</tt> element at this
&lt;label value="a non includes element" /&gt;    particular insertion point." So for example:</p>
&lt;/mybinding&gt;</PRE><pre>
<P>The image is the only child taken from the XUL content and the label is ignored.&lt;mybinding id="myNewWidget" flex="1"&gt;
<P>If you have children that are not defined in the <TT>includes</TT> attribute, then the binding is discarded and not used. If the bound element uses another element in addition to an image element, the binding is discarded and only the explicit content is used. If the image element isn't used at all, the binding is discarded.  &lt;image src="http://www.mozdev.org/sharedimages/header.gif" /&gt;
<PRE>&lt;mybinding id="myNewWidget" flex="1"&gt;  &lt;label value="a non includes element" /&gt;
&lt;image src="<A HREF="http://www.mozdev.org/sharedimages/header.gif">http://www.mozdev.org/sharedimages/header.gif</A>" /&gt;&lt;/mybinding&gt;
&lt;label value="an element" /&gt;</pre>
&lt;/mybinding&gt;</PRE>    <p>The <tt>&lt;image&gt;</tt> is the only child inserted and
<P>This example renders the image and the label and discards the binding. The anonymous content does not appear because the binding is discarded and only the explicit content is used.    the <tt>&tl;label&gt;</tt> element is ignored.</p>
<H2><A NAME="77060"></A> Inheritance</H2>    <p>If you have children that are not defined in the
<P>In XBL, inheritance is the process in  <!--INDEX XBL (eXtensible Binding Language):inheritance;inheritance:XBL --> which one object included in another object is allowed to use properties from that parent object. These properties can be many things, depending on the implementation, ranging from methods to attribute property values. Inheritance is a concept familiar in programming languages, most notably object-oriented ones. It's not something alien to markup, however, and it is deployed effectively in XBL. This section examines three forms of XBL inheritance: binding, attribute, and implementation. As you will see, inheritance promotes self-contained (modular) and flexible bindings that permit shared content across and within XBL documents.    <tt>includes</tt> attribute, then the binding is discarded and
<H3><A NAME="77061"></A> Binding Inheritance</H3>    not used. 
<P>Binding inheritance occurs when one  <!--INDEX XBL (eXtensible Binding Language):inheritance:bindings --> binding  <!--INDEX inheritance:XBL:bindings --> is  <!--INDEX bindings:inheritance --> linked to another binding or XUL element and uses some or all properties of it, whether they are content or behavior. A binding can inherit from another binding that exists in the same or different file. In one way, this useful feature makes a binding like a class, with content and methods that can be used elsewhere. Bindings become modules, which prevents code duplication, makes maintenance easier, and gets slotted in and out of documents.<pre>
<P>Linkage or inheritance is enabled by the <TT>extends</TT> attribute on the<TT> &lt;binding&gt;</TT> element. This attribute contains the URL of the binding that you inherit from. This URL is made up of the location and name of the file that contains the binding (the <TT>#</TT> symbol), and the <TT>id</TT> of the specific binding being used. In this way, it is similar to the access method used in CSS attachment.&lt;mybinding id="myNewWidget" flex="1"&gt;
<P>Although it is in the XBL 1.0 specification, Mozilla hasn't fully implemented <TT>type="inherits"</TT> on the children tag yet, so the best way to work with binding inheritance is to use the <TT>extends</TT> attribute. <A HREF="#77018">Example 7-6</A> shows a few bindings used in the implementation of the <TT>listbox</TT> cell in the Mozilla tree. It illustrates how <TT>extends</TT> is used to inherit from another binding.  &lt;label value="a non includes element" /&gt;
&lt;/mybinding&gt;
<P><I>Example 7-6: <A NAME="77018"></A></I></pre>
<I>Binding inheritance</I>                <p>If the bound element uses another element in addition
<PRE> &lt;binding id="listbox-base"</TD>&gt;    to an image element, the binding is discarded and only the
     explicit content is used. If the image element isn't used at
     all, the binding is discarded.</p>
 <pre>
 &lt;mybinding id="myNewWidget" flex="1"&gt;
   &lt;image src="http://www.mozdev.org/sharedimages/header.gif" /&gt;
   &lt;label value="an element" /&gt;
 &lt;/mybinding&gt;
 </pre>
     <p>This example renders the image and the label and discards
     the binding. The anonymous content does not appear because the
     binding is discarded and only the explicit content is used.</p>
     <h2><a name="77060"></a> Inheritance</h2>
     <p>In XBL, inheritance is the process in 
     <!--INDEX XBL (eXtensible Binding Language):inheritance;inheritance:XBL -->
     which one object included in another object is allowed to use
     properties from that parent object. These properties can be
     many things, depending on the implementation, ranging from
     methods to attribute property values. Inheritance is a concept
     familiar in programming languages, most notably object-oriented
     ones. It's not something alien to markup, however, and it is
     deployed effectively in XBL. This section examines three forms
     of XBL inheritance: binding, attribute, and implementation. As
     you will see, inheritance promotes self-contained (modular) and
     flexible bindings that permit shared content across and within
     XBL documents.</p>
     <h3><a name="77061"></a> Binding Inheritance</h3>
     <p>Binding inheritance occurs when one 
     <!--INDEX XBL (eXtensible Binding Language):inheritance:bindings -->
     binding <!--INDEX inheritance:XBL:bindings --> is 
     <!--INDEX bindings:inheritance --> linked to another binding or
     XUL element and uses some or all properties of it, whether they
     are content or behavior. A binding can inherit from another
     binding that exists in the same or different file. In one way,
     this useful feature makes a binding like a class, with content
     and methods that can be used elsewhere. Bindings become
     modules, which prevents code duplication, makes maintenance
     easier, and gets slotted in and out of documents.</p>
     <p>Linkage or inheritance is enabled by the <tt>extends</tt>
     attribute on the <tt>&lt;binding&gt;</tt> element. This
     attribute contains the URL of the binding that you inherit
     from. This URL is made up of the location and name of the file
     that contains the binding (the <tt>#</tt> symbol), and the
     <tt>id</tt> of the specific binding being used. In this way, it
     is similar to the access method used in CSS attachment.</p>
     <p>Although it is in the XBL 1.0 specification, Mozilla hasn't
     fully implemented <tt>type="inherits"</tt> on the children tag
     yet, so the best way to work with binding inheritance is to use
     the <tt>extends</tt> attribute. <a href="#77018">Example
     7-6</a> shows a few bindings used in the implementation of the
     <tt>listbox</tt> cell in the Mozilla tree. It illustrates how
     <tt>extends</tt> is used to inherit from another binding.</p>
     <p><i>Example 7-6: <a name="77018"></a></i> <i>Binding
     inheritance</i></p>
 <pre>
  &lt;binding id="listbox-base"&lt;/td&gt;&gt;
    &lt;resources&gt;     &lt;resources&gt;
      &lt;stylesheet src="chrome://global/skin/listbox.css"/&gt;       &lt;stylesheet src="chrome://global/skin/listbox.css"/&gt;
    &lt;/resources&gt;     &lt;/resources&gt;
  &lt;/binding&gt;   &lt;/binding&gt;
  &lt;binding id="listcell"   &lt;binding id="listcell"
     extends="chrome://global/content/bindings/listbox.xml#listbox-base"</TD>&gt;     extends="chrome://global/content/bindings/listbox.xml#listbox-base"&lt;/td&gt;&gt;
    &lt;content&gt;     &lt;content&gt;
      &lt;children&gt;       &lt;children&gt;
        &lt;xul:label class="listcell-label"         &lt;xul:label class="listcell-label"
Line 504  return list.selectedItem.getAttribute('l Line 1372  return list.selectedItem.getAttribute('l
    &lt;/content&gt;     &lt;/content&gt;
  &lt;/binding&gt;   &lt;/binding&gt;
  &lt;binding id="listcell-iconic"   &lt;binding id="listcell-iconic"
     extends="chrome://global/content/bindings/listbox.xml#listcell"</TD>&gt;     extends="chrome://global/content/bindings/listbox.xml#listcell"&lt;/td&gt;&gt;
    &lt;content&gt;     &lt;content&gt;
      &lt;children&gt;       &lt;children&gt;
        &lt;xul:image class="listcell-icon" xbl:inherits="src=image"/&gt;         &lt;xul:image class="listcell-icon" xbl:inherits="src=image"/&gt;
Line 513  return list.selectedItem.getAttribute('l Line 1381  return list.selectedItem.getAttribute('l
            flex="1" crop="right"/&gt;             flex="1" crop="right"/&gt;
      &lt;/children&gt;       &lt;/children&gt;
     &lt;/content&gt;      &lt;/content&gt;
 &lt;/binding&gt;</PRE> &lt;/binding&gt;
</pre>
<P>In <A HREF="#77018">Example 7-6</A>,<TT> listcell-iconic </TT>inherits <TT>listcell</TT>. In turn, <TT>listcell</TT> inherits <TT>list-box-base</TT>, which holds resources. The <TT>listcell</TT> binding is a cell with text only and the <TT>listcell-iconic</TT> binding has text and an image. Thus, the user has a choice of using a list cell binding with an icon or no icon. Yet both of these bindings have access to the stylesheet resource declared in the base binding. If <TT>listcell-iconic</TT> is used, the duplicate <TT>xul:label</TT> is ignored in the inherited binding and the stylesheet inherited from the base binding via the inherited binding is used. We've used this technique to illustrate how resources in multiple bindings are shared.    <p>In <a href="#77018">Example 7-6</a>,
<P>With binding extensions that use the <TT>extends</TT> attribute, you can also extend a XUL element as a model, using extensions as a proxy to mimic that XUL element. The element may not be included directly in the anonymous content, but its characteristics are still present on the bound element. If you use the XUL namespace <TT>xul</TT>: in the same way you use it for XUL content in a binding, you can inherit the XUL element properties as illustrated in <A HREF="#77020">Example 7-7</A>.    <tt>listcell-iconic</tt> inherits <tt>listcell</tt>. In turn,
    <tt>listcell</tt> inherits <tt>list-box-base</tt>, which holds
<P><I>Example 7-7: <A NAME="77020"></A></I>    resources. The <tt>listcell</tt> binding is a cell with text
<I>Inheriting XUL widget characteristics using extends</I>    only and the <tt>listcell-iconic</tt> binding has text and an
<PRE> &lt;binding id="Widget1" extends="xul:vbox"</TD>&gt;    image. Thus, the user has a choice of using a list cell binding
     with an icon or no icon. Yet both of these bindings have access
     to the stylesheet resource declared in the base binding. If
     <tt>listcell-iconic</tt> is used, the duplicate
     <tt>xul:label</tt> is ignored in the inherited binding and the
     stylesheet inherited from the base binding via the inherited
     binding is used. We've used this technique to illustrate how
     resources in multiple bindings are shared.</p>
     <p>With binding extensions that use the <tt>extends</tt>
     attribute, you can also extend a XUL element as a model, using
     extensions as a proxy to mimic that XUL element. The element
     may not be included directly in the anonymous content, but its
     characteristics are still present on the bound element. If you
     use the XUL namespace <tt>xul</tt>: in the same way you use it
     for XUL content in a binding, you can inherit the XUL element
     properties as illustrated in <a href="#77020">Example
     7-7</a>.</p>
     <p><i>Example 7-7: <a name="77020"></a></i> <i>Inheriting XUL
     widget characteristics using extends</i></p>
 <pre>
  &lt;binding id="Widget1" extends="xul:vbox"&lt;/td&gt;&gt;
    &lt;content&gt;     &lt;content&gt;
      &lt;xul:description value="Top" /&gt;       &lt;xul:description value="Top" /&gt;
      &lt;children includes="image" /&gt;       &lt;children includes="image" /&gt;
      &lt;xul:description value="Bottom" /&gt;       &lt;xul:description value="Bottom" /&gt;
    &lt;/content&gt;     &lt;/content&gt;
 &lt;/binding&gt;</PRE> &lt;/binding&gt;
</pre>
<P>In <A HREF="#77020">Example 7-7</A>, the binding has all of the attributes and behavior of a XUL box. Because you extend a box element, the base widget <TT>&lt;mybinding&gt;</TT> is now a vertical box. The anonymous content is laid out according to the box model, and all attributes that are recognized on the bound element are applied to the box.    <p>In <a href="#77020">Example 7-7</a>, the binding has all of
<H3><A NAME="77062"></A> Attribute Inheritance</H3>    the attributes and behavior of a XUL box. Because you extend a
<P>Also known as "attribute forwarding," <I>attribute inheritance</I> is a way for anonymous content to link to the attributes from the  <!--INDEX inheritance:XBL:attributes -->  <!--INDEX XBL (eXtensible Binding Language):inheritance:attributes --> bound element. When the bound element attribute is changed, this modification filters down to the binding attribute list. The code in <A HREF="#77022">Example 7-8</A> shows anonymous content where multiple attributes are picked up by the <TT>xbl:inherits</TT> attribute, with each one separated by a comma.    box element, the base widget <tt>&lt;mybinding&gt;</tt> is now
    a vertical box. The anonymous content is laid out according to
<P><I>Example 7-8: <A NAME="77022"></A></I>    the box model, and all attributes that are recognized on the
<I>XBL attribute inheritance</I>    bound element are applied to the box.</p>
<PRE> &lt;xul:box class="insideBox" xbl:inherits="orient, flex, align"</TD>&gt;    <h3><a name="77062"></a> Attribute Inheritance</h3>
     <p>Also known as "attribute forwarding," <i>attribute
     inheritance</i> is a way for anonymous content to link to the
     attributes from the <!--INDEX inheritance:XBL:attributes --> 
     <!--INDEX XBL (eXtensible Binding Language):inheritance:attributes -->
     bound element. When the bound element attribute is changed,
     this modification filters down to the binding attribute list.
     The code in <a href="#77022">Example 7-8</a> shows anonymous
     content where multiple attributes are picked up by the
     <tt>xbl:inherits</tt> attribute, with each one separated by a
     comma.</p>
     <p><i>Example 7-8: <a name="77022"></a></i> <i>XBL attribute
     inheritance</i></p>
 <pre>
  &lt;xul:box class="insideBox" xbl:inherits="orient, flex, align"&lt;/td&gt;&gt;
    &lt;xul:description value="Top" /&gt;     &lt;xul:description value="Top" /&gt;
      &lt;xul:box&gt;       &lt;xul:box&gt;
        &lt;children includes="image" /&gt;         &lt;children includes="image" /&gt;
      &lt;/xul:box&gt;       &lt;/xul:box&gt;
      &lt;xul:description value="Bottom" /&gt;       &lt;xul:description value="Bottom" /&gt;
    &lt;/xul:box&gt;     &lt;/xul:box&gt;
 &lt;/xul:box&gt;</PRE> &lt;/xul:box&gt;
</pre>
<P>The element that inherits the attributes can be anywhere in the chain of anonymous content. In this case, it is on the top-level box. It assumes the value given to these attributes in the bound element. Here is the XUL that uses the binding content from <A HREF="#77022">Example 7-8</A>:    <p>The element that inherits the attributes can be anywhere in
<PRE>&lt;mywidget orient="vertical" flex="1" align="center" /&gt;</PRE>    the chain of anonymous content. In this case, it is on the
<P>The <TT>xul:box</TT> element inherits the attribute values <TT>vertical</TT>, <TT>1</TT>, and <TT>middle</TT>, respectively, from the bound element (<TT>mywidget</TT>). The box in the anonymous content contains three children: two text (description) elements and an image contained in another box. The default orientation for a box is horizontal, but these child elements are now positioned vertically.    top-level box. It assumes the value given to these attributes
<BLOCKQUOTE><CENTER><B>NOTE</B></CENTER>    in the bound element. Here is the XUL that uses the binding
<P>You may notice that the <TT>inherits</TT> attribute is preceded with the <TT>xbl</TT>: prefix, unlike other attributes in the XBL element set. Why is this unique? It guarantees that the effect is on the binding and not directly on the element that uses it. This ensures that the element can have an <TT>inherits</TT> attribute of its own if needed. This scenerio is unlikely and you might wonder why this rule does not apply to other attributes used on XBL elements. To achieve correct binding, the XBL namespace must be declared on an element at a higher level than the element using it, most commonly the <TT>&lt;bindings&gt;</TT> container, as explained earlier. Here is what the code will look like:<P></BLOCKQUOTE>    content from <a href="#77022">Example 7-8</a>:</p>
&lt;binding id="my-bindings"    xmlns="<A HREF="http://www.mozilla.org/xbl">http://www.mozilla.org/xbl</A>"    xmlns:html="<A HREF="http://www.w3.org/1999/xhtsml">http://www.w3.org/1999/xhtsml</A>"    xmlns:xbl="<A HREF="http://www.mozilla.org/xbl">http://www.mozilla.org/xbl</A>"&gt;<pre>
<H3><A NAME="77063"></A> Implementation Inheritance</H3>&lt;mywidget orient="vertical" flex="1" align="center" /&gt;
<P>The third type of inheritance, inheritance  <!--INDEX inheritance:XBL:implementation inheritance;implementation, XBL inheritance;XBL (eXtensible Binding Language):inheritance:implementation inheritance --> of behavior, is also achieved by using the <TT>extends</TT> attribute and is useful when you want to use methods or properties in another binding. <A HREF="#77024">Example 7-9</A> shows how one binding inherits implementation from another in the same file.</pre>
    <p>The <tt>xul:box</tt> element inherits the attribute values
<P><I>Example 7-9: <A NAME="77024"></A></I>    <tt>vertical</tt>, <tt>1</tt>, and <tt>middle</tt>,
<I>Inheritance of behavior between bindings</I>    respectively, from the bound element (<tt>mywidget</tt>). The
<PRE> &lt;binding id="Widget1" extends="test.xml#Widget2"</TD>&gt;    box in the anonymous content contains three children: two text
     (description) elements and an image contained in another box.
     The default orientation for a box is horizontal, but these
     child elements are now positioned vertically.</p>
     <blockquote>
       <div class="c19">
         NOTE
       </div>
       <p>You may notice that the <tt>inherits</tt> attribute is
       preceded with the <tt>xbl</tt>: prefix, unlike other
       attributes in the XBL element set. Why is this unique? It
       guarantees that the effect is on the binding and not directly
       on the element that uses it. This ensures that the element
       can have an <tt>inherits</tt> attribute of its own if needed.
       This scenerio is unlikely and you might wonder why this rule
       does not apply to other attributes used on XBL elements. To
       achieve correct binding, the XBL namespace must be declared
       on an element at a higher level than the element using it,
       most commonly the <tt>&lt;bindings&gt;</tt> container, as
       explained earlier. Here is what the code will look like:</p>
     </blockquote>
     &lt;binding id="my-bindings" xmlns="<a href=
     "http://www.mozilla.org/xbl">http://www.mozilla.org/xbl</a>"
     xmlns:html="<a href=
     "http://www.w3.org/1999/xhtsml">http://www.w3.org/1999/xhtsml</a>"
     xmlns:xbl="<a href=
     "http://www.mozilla.org/xbl">http://www.mozilla.org/xbl</a>"&gt;
     
     <h3><a name="77063"></a> Implementation Inheritance</h3>
     <p>The third type of inheritance, inheritance 
     <!--INDEX inheritance:XBL:implementation inheritance;implementation, XBL inheritance;XBL (eXtensible Binding Language):inheritance:implementation inheritance -->
     of behavior, is also achieved by using the <tt>extends</tt>
     attribute and is useful when you want to use methods or
     properties in another binding. <a href="#77024">Example 7-9</a>
     shows how one binding inherits implementation from another in
     the same file.</p>
     <p><i>Example 7-9: <a name="77024"></a></i> <i>Inheritance of
     behavior between bindings</i></p>
 <pre>
  &lt;binding id="Widget1" extends="test.xml#Widget2"&lt;/td&gt;&gt;
    &lt;content&gt;     &lt;content&gt;
      &lt;xul:box class="insideBox"&gt;       &lt;xul:box class="insideBox"&gt;
        &lt;xul:description value="Top" /&gt;         &lt;xul:description value="Top" /&gt;
Line 567  return list.selectedItem.getAttribute('l Line 1508  return list.selectedItem.getAttribute('l
  &lt;/binding&gt;   &lt;/binding&gt;
  &lt;binding id="Widget2"&gt;   &lt;binding id="Widget2"&gt;
    &lt;implementation&gt;     &lt;implementation&gt;
     </TD>&lt;constructor&gt;     &lt;/td&gt;&lt;constructor&gt;
        this.init( );         this.init( );
      &lt;/constructor&gt;       &lt;/constructor&gt;
      &lt;method name="init"&gt;       &lt;method name="init"&gt;
        &lt;body&gt;         &lt;body&gt;
       &lt;!</TD>[CDATA[ dump("This is Widget2");]]&gt;       &lt;!&lt;/td&gt;[CDATA[ dump("This is Widget2");]]&gt;
        &lt;/body&gt;         &lt;/body&gt;
      &lt;/method&gt;       &lt;/method&gt;
    &lt;/implementation&gt;     &lt;/implementation&gt;
 &lt;/binding&gt;</PRE> &lt;/binding&gt;
</pre>
<P>The <TT>Widget1</TT> binding in <A HREF="#77024">Example 7-9</A> pulls in <TT>Widget2</TT> using <TT>extends</TT>. <TT>Widget2</TT> has implemented a constructor that dumps some text to output. When <TT>Widget1</TT> is bound and it does not find any implementation to initiate, it looks to the inherited binding and, in this case, dumps "This is Widget2" to output.    <p>The <tt>Widget1</tt> binding in <a href="#77024">Example
<P>In a bindings inheritance tree, more than one implementation could have a method with the same name. In this case, the most derived binding-the one nested deepest in the inheritance chain-is the one used. It is even possible for some common DOM functions used on the bound element outside of the anonymous content to find imitators when implementing the attached bindings.    7-9</a> pulls in <tt>Widget2</tt> using <tt>extends</tt>.
<PRE>&lt;method name="getElementById"&gt;    <tt>Widget2</tt> has implemented a constructor that dumps some
     text to output. When <tt>Widget1</tt> is bound and it does not
     find any implementation to initiate, it looks to the inherited
     binding and, in this case, dumps "This is Widget2" to
     output.</p>
     <p>In a bindings inheritance tree, more than one implementation
     could have a method with the same name. In this case, the most
     derived binding-the one nested deepest in the inheritance
     chain-is the one used. It is even possible for some common DOM
     functions used on the bound element outside of the anonymous
     content to find imitators when implementing the attached
     bindings.</p>
 <pre>
 &lt;method name="getElementById"&gt;
 &lt;parameter name="id" /&gt;  &lt;parameter name="id" /&gt;
 &lt;body&gt;  &lt;body&gt;
 &lt;!-- implementation here --&gt;  &lt;!-- implementation here --&gt;
 &lt;/body&gt;  &lt;/body&gt;
&lt;/method&gt;</PRE>&lt;/method&gt;
<P>If you glance through the source code for the Mozilla chrome, you may notice that many of the standard XUL widgets used were extended by using XBL. The button is a good example.</pre>
<P>On its own, the button can display text with the <TT>value</TT> attribute and an image with the <TT>src</TT> attribute. Usually, this is sufficient, and you can color the button and change the text font with CSS. But you may want to take advantage of inherent behaviors in other elements or inherit from other bindings. Mozilla buttons are a mix of <TT>&lt;box&gt;</TT>, <TT>&lt;text&gt;</TT>, and <TT>&lt;image&gt;</TT> elements, and they take on the characteristics of each.    <p>If you glance through the source code for the Mozilla
<H2><A NAME="77064"></A> Event Handling</H2>    chrome, you may notice that many of the standard XUL widgets
<P><I>Event handlers</I> are attributes that listen  <!--INDEX event handling:XBL;XBL (eXtensible Binding Language):event handling --> for events. They intercept events raised by certain user actions, such as button clicks. When intercepted, control is given to the application to carry out some functionality.    used were extended by using XBL. The button is a good
<P>Mouse and keyboard actions are included in these events. XBL uses all events that are available on an element in XUL and calls them by their     example.</p>
name, minus the <TT>on</TT> prefix. Thus, for example, the <TT>onmouseclick</TT> event handler becomes <TT>mouseclick</TT> in XBL. Refer to <A HREF="appc.html#77003">Appendix C</A> for a full list of these events, which also describes the difference between XUL and XBL event handling.    <p>On its own, the button can display text with the
<P>The <TT> <!--INDEX handler element, XBL --> &lt;handler&gt;</TT> element contains a single event. Sets of individual <TT>&lt;handler&gt;</TT> elements need to be included in a <TT>&lt;handlers&gt;</TT> element. The event that sets off the action is contained in the <TT>event</TT> attribute.    <tt>value</tt> attribute and an image with the <tt>src</tt>
<PRE>&lt;handlers&gt;    attribute. Usually, this is sufficient, and you can color the
     button and change the text font with CSS. But you may want to
     take advantage of inherent behaviors in other elements or
     inherit from other bindings. Mozilla buttons are a mix of
     <tt>&lt;box&gt;</tt>, <tt>&lt;text&gt;</tt>, and
     <tt>&lt;image&gt;</tt> elements, and they take on the
     characteristics of each.</p>
     <h2><a name="77064"></a> Event Handling</h2>
     <p><i>Event handlers</i> are attributes that listen 
     <!--INDEX event handling:XBL;XBL (eXtensible Binding Language):event handling -->
     for events. They intercept events raised by certain user
     actions, such as button clicks. When intercepted, control is
     given to the application to carry out some functionality.</p>
     <p>Mouse and keyboard actions are included in these events. XBL
     uses all events that are available on an element in XUL and
     calls them by their name, minus the <tt>on</tt> prefix. Thus,
     for example, the <tt>onmouseclick</tt> event handler becomes
     <tt>mouseclick</tt> in XBL. Refer to <a href=
     "appc.html#77003">Appendix C</a> for a full list of these
     events, which also describes the difference between XUL and XBL
     event handling.</p>
     <p>The <tt><!--INDEX handler element, XBL -->
     &lt;handler&gt;</tt> element contains a single event. Sets of
     individual <tt>&lt;handler&gt;</tt> elements need to be
     included in a <tt>&lt;handlers&gt;</tt> element. The event that
     sets off the action is contained in the <tt>event</tt>
     attribute.</p>
 <pre>
 &lt;handlers&gt;
 &lt;handler event="mousedown" action="dumpString('hello', 'there!')" /&gt;  &lt;handler event="mousedown" action="dumpString('hello', 'there!')" /&gt;
&lt;/handlers&gt;</PRE>&lt;/handlers&gt;
<P>This code uses the <TT>action</TT> attribute to point to script that is executed when the event is triggered. The alternative way to set up the actions is to put the executable script between the handler tags, like you can with the XUL <TT>&lt;script&gt;</TT> element. If you use this "embedded" syntax, wrap your script in a <TT>CDATA</TT> section so it gets interpreted and executed properly:</pre>
<PRE>&lt;handlers&gt;    <p>This code uses the <tt>action</tt> attribute to point to
     script that is executed when the event is triggered. The
     alternative way to set up the actions is to put the executable
     script between the handler tags, like you can with the XUL
     <tt>&lt;script&gt;</tt> element. If you use this "embedded"
     syntax, wrap your script in a <tt>CDATA</tt> section so it gets
     interpreted and executed properly:</p>
 <pre>
 &lt;handlers&gt;
 &lt;handler event="mousedown"&gt;  &lt;handler event="mousedown"&gt;
 &lt;![CDATA[  &lt;![CDATA[
 var list = document.getElementById('someElement');  var list = document.getElementById('someElement');
 list.setAttribute('style', 'display:block;');  list.setAttribute('style', 'display:block;');
 ]]&gt;  ]]&gt;
 &lt;/handler&gt;  &lt;/handler&gt;
&lt;/handlers&gt;</PRE>&lt;/handlers&gt;
<P>You cannot use both inline and external scripts in an XBL event handler. If this instance does occur, the <TT>action</TT> attribute is used. Like code decisions in other contexts, which one you use depends on whether you want to reuse the code. In our experience, using inline scripts is best in most circumstances unless useful code libraries can be accessed in external scripts.</pre>
<H3><A NAME="77065"></A> The Time and Venue</H3>    <p>You cannot use both inline and external scripts in an XBL
<P>Event handlers in XBL allow for fine-tuning, using built-in attributes that control when, where, and how they are executed. Events are not limited to bindings. They can be registered with other UI elements that pre-empt behavior when, for example, a <TT>create</TT> or <TT>load</TT> event occurs. This registration occurs when using the <TT>attachto</TT> attribute.    event handler. If this instance does occur, the <tt>action</tt>
<PRE>&lt;handler event="create" attachto="window" action="returnNode( )"&gt;</PRE>    attribute is used. Like code decisions in other contexts, which
<P>The handler is designed to update the list in the binding when the application is loaded up and the window shows. Other possible values for <TT>attachto</TT> are <TT>document</TT> and <TT>element</TT>.    one you use depends on whether you want to reuse the code. In
<BLOCKQUOTE><CENTER><B>WARNING</B></CENTER>    our experience, using inline scripts is best in most
<P>The <TT>attachto</TT> feature is disabled for Mozilla 1.0, but it is included here for completeness and to highlight XBL's full capabilities.<P></BLOCKQUOTE>    circumstances unless useful code libraries can be accessed in
<P>Another nice feature of event handlers in XBL is the existence of extra modifiers on mouse and key events using the <TT>modifiers</TT> and the <TT>key</TT> or <TT>keycode</TT> attributes. The value is a list of one or more modifier keys separated by a comma. The most common combination is the use of the <TT>alt</TT>, <TT>control</TT>, or <TT>shift</TT> modifiers. The key codes have special identifiers like <TT>VK_INSERT</TT> and <TT>VK_UP</TT>.    external scripts.</p>
<PRE>&lt;handler event="keypress" modifiers="control, alt" keycode="VK_UP" action="goUp( )"&gt;</PRE>    <h3><a name="77065"></a> The Time and Venue</h3>
<P>Finally, when talking about event handlers, the <TT>phase</TT> attribute allows you to control the point in the event's lifecycle when the code is to be executed.    <p>Event handlers in XBL allow for fine-tuning, using built-in
<PRE>&lt;handler event="mouseup" phase="capturing" action="goUp( )"&gt;</PRE>    attributes that control when, where, and how they are executed.
<P>The possible values are <TT>bubbling</TT> (the default), <TT>targeting</TT>, and <TT>capturing</TT>.    Events are not limited to bindings. They can be registered with
<P>Here is an example of a handler implementation that fills a tooltip when the <TT>popup</TT> element displaying it is shown:    other UI elements that pre-empt behavior when, for example, a
<PRE>&lt;handler event="popupshowing"&gt;    <tt>create</tt> or <tt>load</tt> event occurs. This
     registration occurs when using the <tt>attachto</tt>
     attribute.</p>
 <pre>
 &lt;handler event="create" attachto="window" action="returnNode( )"&gt;
 </pre>
     <p>The handler is designed to update the list in the binding
     when the application is loaded up and the window shows. Other
     possible values for <tt>attachto</tt> are <tt>document</tt> and
     <tt>element</tt>.</p>
     <blockquote>
       <div class="c19">
         WARNING
       </div>
       <p>The <tt>attachto</tt> feature is disabled for Mozilla 1.0,
       but it is included here for completeness and to highlight
       XBL's full capabilities.</p>
     </blockquote>
     <p>Another nice feature of event handlers in XBL is the
     existence of extra modifiers on mouse and key events using the
     <tt>modifiers</tt> and the <tt>key</tt> or <tt>keycode</tt>
     attributes. The value is a list of one or more modifier keys
     separated by a comma. The most common combination is the use of
     the <tt>alt</tt>, <tt>control</tt>, or <tt>shift</tt>
     modifiers. The key codes have special identifiers like
     <tt>VK_INSERT</tt> and <tt>VK_UP</tt>.</p>
 <pre>
 &lt;handler event="keypress" modifiers="control, alt" keycode="VK_UP" action="goUp( )"&gt;
 </pre>
     <p>Finally, when talking about event handlers, the
     <tt>phase</tt> attribute allows you to control the point in the
     event's lifecycle when the code is to be executed.</p>
 <pre>
 &lt;handler event="mouseup" phase="capturing" action="goUp( )"&gt;
 </pre>
     <p>The possible values are <tt>bubbling</tt> (the default),
     <tt>targeting</tt>, and <tt>capturing</tt>.</p>
     <p>Here is an example of a handler implementation that fills a
     tooltip when the <tt>popup</tt> element displaying it is
     shown:</p>
 <pre>
 &lt;handler event="popupshowing"&gt;
 &lt;![CDATA[  &lt;![CDATA[
 var label = "";  var label = "";
 var tipNode = document.tooltipNode;  var tipNode = document.tooltipNode;
 if (tipNode &amp;&amp; tipNode.hasAttribute("tooltiptext"))  if (tipNode &amp;&amp; tipNode.hasAttribute("tooltiptext"))
 this.label = tipNode.getAttribute("tooltiptext");  this.label = tipNode.getAttribute("tooltiptext");
 ]]&gt;  ]]&gt;
&lt;/handler&gt;</PRE>&lt;/handler&gt;
<P>This event handler first checks that the current <TT>popup</TT> is in fact a tooltip via the document's <TT>tooltipNode</TT> property and then extracts the text from it. This text is assigned to the binding's label, which will propagate via inheritance to the text display content widget used in the binding, which could be a <TT>label</TT> or <TT>description</TT> element.</pre>
<H2><A NAME="77066"></A> Resources for Bindings</H2>    <p>This event handler first checks that the current
<P>This chapter stresses that  <!--INDEX bindings:XBL:resources;XBL (eXtensible Binding Language):bindings:resources;resources:bindings, XBL --> 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.    <tt>popup</tt> is in fact a tooltip via the document's
<H3><A NAME="77067"></A> Stylesheets in XBL</H3>    <tt>tooltipNode</tt> property and then extracts the text from
<P>You can include stylesheets  <!--INDEX XBL (eXtensible Binding Language):stylesheets;stylesheets:XBL --> in an XBL document by using the XBL-specific element <TT> <!--INDEX stylesheet element, XBL --> &lt;stylesheet&gt;</TT>. The example below shows the color-picker stylesheet as it would be included in a <TT>&lt;resources&gt;</TT>-containing element, allowing styles contained therein to be used by the bindings that referenced it.    it. This text is assigned to the binding's label, which will
<PRE>&lt;stylesheet src="chrome://xfly/skin/color-picker.css" /&gt;</PRE>    propagate via inheritance to the text display content widget
<P>The <TT>&lt;stylesheet&gt;</TT> 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.    used in the binding, which could be a <tt>label</tt> or
<PRE>&lt;binding id="popup-base"&gt;    <tt>description</tt> element.</p>
     <h2><a name="77066"></a> Resources for Bindings</h2>
     <p>This chapter stresses that 
     <!--INDEX bindings:XBL:resources;XBL (eXtensible Binding Language):bindings:resources;resources:bindings, XBL -->
     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.</p>
     <h3><a name="77067"></a> Stylesheets in XBL</h3>
     <p>You can include stylesheets 
     <!--INDEX XBL (eXtensible Binding Language):stylesheets;stylesheets:XBL -->
     in an XBL document by using the XBL-specific element <tt>
     <!--INDEX stylesheet element, XBL --> &lt;stylesheet&gt;</tt>.
     The example below shows the color-picker stylesheet as it would
     be included in a <tt>&lt;resources&gt;</tt>-containing element,
     allowing styles contained therein to be used by the bindings
     that referenced it.</p>
 <pre>
 &lt;stylesheet src="chrome://xfly/skin/color-picker.css" /&gt;
 </pre>
     <p>The <tt>&lt;stylesheet&gt;</tt> 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.</p>
 <pre>
 &lt;binding id="popup-base"&gt;
 &lt;resources&gt;  &lt;resources&gt;
 &lt;stylesheet src="chrome://global/skin/popup.css" /&gt;  &lt;stylesheet src="chrome://global/skin/popup.css" /&gt;
 &lt;/resources&gt;  &lt;/resources&gt;
&lt;/binding&gt;</PRE>&lt;/binding&gt;
<P>Then you can access the stylesheet in your binding by using the <TT>extends</TT> attribute:</pre>
<PRE>&lt;binding id="popup" extends="chrome://global/content/bindings/popup.xml#popup-base"&gt;</PRE>    <p>Then you can access the stylesheet in your binding by using
<P>Beyond this static usage of stylesheets, two attributes, <TT>applyauthorstyles</TT> and <TT>styleexplicitcontent</TT>, 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 <TT> <!--INDEX binding element, XBL:attributes;attributes:binding element --> &lt;binding&gt;</TT> element.    the <tt>extends</tt> attribute:</p>
<DL><DT>applyauthorstyles<pre>
<DD>A Boolean value that determines the use of stylesheets from the document that contains the bound element. The default is false.<P>&lt;binding id="popup" extends="chrome://global/content/bindings/popup.xml#popup-base"&gt;
<DT>styleexplicitcontent</pre>
<DD>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.<P></DL>    <p>Beyond this static usage of stylesheets, two attributes,
<P>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.    <tt>applyauthorstyles</tt> and <tt>styleexplicitcontent</tt>,
<P>The <TT>&lt;image&gt;</TT> XBL element works much like a XUL element and pulls in the image by using the <TT>src</TT> attribute.    can affect the appearance of a binding element if a stylesheet
<PRE>&lt;binding id="images"&gt;    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 <tt>
     <!--INDEX binding element, XBL:attributes;attributes:binding element -->
     &lt;binding&gt;</tt> element.</p>
     <dl>
       <dt>applyauthorstyles</dt>
       <dd>A Boolean value that determines the use of stylesheets
       from the document that contains the bound element. The
       default is false.</dd>
       <dt>styleexplicitcontent</dt>
       <dd>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.</dd>
     </dl>
     <p>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.</p>
     <p>The <tt>&lt;image&gt;</tt> XBL element works much like a XUL
     element and pulls in the image by using the <tt>src</tt>
     attribute.</p>
 <pre>
 &lt;binding id="images"&gt;
 &lt;resources&gt;  &lt;resources&gt;
 &lt;image src="plane.png"/&gt;  &lt;image src="plane.png"/&gt;
 &lt;image src="boat.png"/&gt;  &lt;image src="boat.png"/&gt;
 &lt;image src="bicycle.png"/&gt;  &lt;image src="bicycle.png"/&gt;
 &lt;/resources&gt;  &lt;/resources&gt;
&lt;/binding&gt;</PRE>&lt;/binding&gt;
<P>If an element calls this binding, the pictures would lay out side-by-side horizontally in the bound document.</pre>
<HR>    <p>If an element calls this binding, the pictures would lay out
<HR><A NAME="253"></A><A HREF="#b253">[Back]</A>    side-by-side horizontally in the bound document.</p>
<A NAME="77025"></A>    <hr>
This example is modified code taken from    <hr>
<I><A HREF="http://www.segment7.net/mozilla/GoogleAPI/GoogleAPI.html">http://www.segment7.net/mozilla/GoogleAPI/GoogleAPI.html</A></I>    <a name="253"></a><a href="#b253">[Back]</a> <a name=
, and is    "77025"></a> This example is modified code taken from <i><a
covered by a three-clause BSD license. More on SOAP and the SOAP    href=
API in Mozilla can be found at    "http://www.segment7.net/mozilla/GoogleAPI/GoogleAPI.html">http://www.segment7.net/mozilla/GoogleAPI/GoogleAPI.html</a></i>
<I><A HREF="http://lxr.mozilla.org/mozilla/source/extensions/xmlextras/docs/Soap_">http://lxr.mozilla.org/mozilla/source/extensions/xmlextras/docs/Soap_</A></I>    , and is covered by a three-clause BSD license. More on SOAP
Scripts_in_Mozilla.html    and the SOAP API in Mozilla can be found at <i><a href=
.    "http://lxr.mozilla.org/mozilla/source/extensions/xmlextras/docs/Soap_">
<HR><A NAME="254"></A><A HREF="#b254">[Back]</A>    http://lxr.mozilla.org/mozilla/source/extensions/xmlextras/docs/Soap_</a></i>
<A NAME="77026"></A>    Scripts_in_Mozilla.html 
The Google API requires a Google Key, and more    <hr>
information can be found at    <a name="254"></a><a href="#b254">[Back]</a> <a name=
<I><A HREF="http://www.google.com/apis/">http://www.google.com/apis/</A></I>    "77026"></a> The Google API requires a Google Key, and more
.    information can be found at <i><a href=
<HR><BR><BR>    "http://www.google.com/apis/">http://www.google.com/apis/</a></i>
File a <a href="http://mozdev.org/bugs/enter_bug.cgi?product=books">Bug</a> for chapter 7.    . 
<!-- ?php require(NOTES); ? -->    <hr>
<?php $post_to_list=NO; $author='reviewers@mozdev.org'; $target_page='ch07'; require(NOTES); ?>    <br>
</BODY>    <br>
</HTML>    File a <a href=
     "http://mozdev.org/bugs/enter_bug.cgi?product=books">Bug</a>
     for chapter 7. <!-- ?php require(NOTES); ? -->
     <?php $post_to_list=NO; $author='reviewers@mozdev.org'; $target_page='ch07'; require(NOTES); ?>

Removed from v.1.7  
changed lines
  Added in v.1.11


FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>