1: <HTML>
2: <HEAD><TITLE>Chapter 7</TITLE></HEAD><BODY BGCOLOR=WHITE><H2>Chapter 7</H2>
3: <H1><A NAME="77027"></A> Extending the UI with XBL</H1>
4: <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.
5: <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
6: 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.
7: <H2><A NAME="77028"></A> What Is XBL?</H2>
8: <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.
9: <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.
10: <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.
11: <P><CENTER><IMG SRC="foo.gif"></CENTER>
12: <P><I>Figure 7-1: <A NAME="77002"></A></I>
13: <I>Mozilla XBL binding structure</I>
14: 15: <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.
16: <H3><A NAME="77029"></A> XBL Terminology</H3>
17: <P>The following terms are used to describe XBL and its use in the XPFE:
18: <DL><DT>XBL
19: <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>
20: <DT>Binding
21: <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>
22: <DT>Binding document
23: <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>
24: <DT>Bound document
25: <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>
26: <DT>Bound element
27: <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>
28: <DT>Anonymous content
29: <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>
30: <DT>Attachment and detachment
31: <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>
32: <DT>Insertion point
33: <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>
34: <DT>Inheritance
35: <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>
36: <H3><A NAME="77030"></A> An XBL Document</H3>
37: <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.
38: <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.
39: <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:
40: <PRE>&lt;?xml version="1.0"?&gt;
41: &lt;bindings id="dataBindings" ...&gt;
42: &lt;binding /&gt;
43: &lt;binding /&gt;
44: &lt;/bindings&gt;</PRE>
45: <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).
46: <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.
47: <H3><A NAME="77031"></A> Namespaces and XBL</H3>
48: <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>.
49: <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:
50: <PRE>&lt;bindings id="dataBindings"
51: xmlns=<A HREF="http://www.mozilla.org/xbl">http://www.mozilla.org/xbl</A>
52: xmlns:xul=
53: <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>
54: <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>).
55: <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:
56: <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>
57: <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.
58: <H3><A NAME="77032"></A> XBL and HTML</H3>
59: <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.
60: <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:
61: <PRE>&lt;binding id="browser"&gt;
62: &lt;content&gt;
63: &lt;html:div&gt;Mozilla 1.0&lt;/html:div&gt;
64: &lt;children /&gt;
65: &lt;/content&gt;
66: &lt;/binding&gt;</PRE>
67: <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.
68: <PRE>&lt;head&gt;
69: &lt;title&gt;Browser Information&lt;/title&gt;
70: &lt;style&gt;
71: browser_name {
72: -moz-binding: url("brand.xml#browser");
73: }
74: &lt;/style&gt;
75: &lt;/head&gt;
76: &lt;body&gt;
77: &lt;h1&gt;&lt;browser_name /&gt; Guide&lt;/h1&gt;
78: ...</PRE>
79: <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.
80: <H2><A NAME="77033"></A> Anatomy of a Binding</H2>
81: <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.
82: <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.
83: <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>.
84: <H3><A NAME="77034"></A> CSS Attachment</H3>
85: <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:
86: <PRE>&lt;inputfield/&gt;</PRE>
87: <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:
88: <PRE>inputfield {
89: -moz-binding: url("inputfield.xml#inputfield");
90: }</PRE>
91: <P>It also can be from an inline style:
92: <PRE>&lt;inputfield
93: id="ifd"
94: style="-moz-binding: url("inputfield.xml#inputfield")"/&gt;</PRE>
95: <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>.
96: <PRE>&lt;binding id="inputfield"&gt;
97: &lt;!-- binding content / behavior / handlers --&gt;
98: &lt;/binding&gt;</PRE>
99: <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.
100: <P><CENTER><IMG SRC="foo.gif"></CENTER>
101: <P><I>Figure 7-2: <A NAME="77004"></A></I>
102: <I>CSS binding attachment components</I>
103: 104: <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:
105: <PRE>&lt;box id="inputfield" flex="1"/&gt;</PRE>
106: <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.
107: <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.
108: <BLOCKQUOTE><CENTER><B>NOTE</B></CENTER>
109: <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>
110: <H3><A NAME="77035"></A> The XBL Content Element</H3>
111: <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.
112: <P><CENTER><IMG SRC="foo.gif"></CENTER>
113: <P><I>Figure 7-3: <A NAME="77006"></A></I>
114: <I>The inputfield alone in the XUL document</I>
115: 116: <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:
117: <PRE>&lt;content&gt;
118: &lt;children/&gt;
119: &lt;xul:label xbl:inherits="value=label"/&gt;
120: &lt;xul:textbox anonid="input" flex="1"/&gt;
121: &lt;/content&gt;</PRE>
122: <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.
123: <PRE>&lt;inputfield id="ifd" label="Input Field"&gt;
124: &lt;label value="Eric's"/&gt;
125: &lt;/inputfield&gt;</PRE>
126: <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.
127: <BLOCKQUOTE><CENTER><B>NOTE</B></CENTER>
128: <P>You can limit which tags are displayed as child content by using something like:<P></BLOCKQUOTE>
129: &lt;children includes="treehead|treechildren"/&gt;
130: <BLOCKQUOTE><P>These filtering capabilities open the possibility of multiple <TT>&lt;children/&gt;</TT> in your binding.<P></BLOCKQUOTE>
131: <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.
132: <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:
133: <PRE>&lt;inputfield id="ifd" label="Input Field"&gt;</PRE>
134: <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.
135: <H3><A NAME="77036"></A> The Implementation Element</H3>
136: <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.
137: <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.
138: <H4><A NAME="77037"></A> Constructor</H4>
139: <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>:
140: <PRE>&lt;constructor&gt;&lt;![CDATA[
141: this.input=document.getAnonymousElementByAttribute
142: (this,"anonid","input");
143: // Initialize color and backgroundColor to something besides a "" value
144: this.input.inputField.style.backgroundColor="white";
145: this.input.inputField.style.color="black";
146: this.input.inputField.setAttribute("onchange","");
147: ]]&gt;&lt;/constructor&gt;</PRE>
148: <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.
149: <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.
150: <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.
151: <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.
152: <H4><A NAME="77038"></A> Destructor</H4>
153: <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:
154: <PRE>&lt;destructor&gt;
155: this.input=null;
156: &lt;/destructor&gt;</PRE>
157: <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.
158: <H4><A NAME="77039"></A> Properties</H4>
159: <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:
160: <PRE>&lt;property name="value" readonly="true"&gt;
161: &lt;getter&gt;
162: return this.input.value;
163: &lt;/getter&gt;
164: &lt;/property&gt;
165: &lt;property name="uppercase" readonly="true"
166: onget="return this.value.toUpperCase( );"/&gt;
167: &lt;property name="backgroundColor"&gt;
168: &lt;getter&gt;
169: return this.input.inputField.style.backgroundColor;
170: &lt;/getter&gt;
171: &lt;setter&gt;
172: this.input.inputField.style.backgroundColor=val;
173: return val;
174: &lt;/setter&gt;
175: &lt;/property&gt;</PRE>
176: <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.
177: <H4><A NAME="77040"></A> Methods</H4>
178: <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.
179: <PRE>&lt;method name="clear"&gt;
180: &lt;body&gt;
181: this.input.value='';
182: &lt;/body&gt;
183: &lt;/method&gt;
184: &lt;method name="setValue"&gt;
185: &lt;parameter name="newValue"/&gt;
186: &lt;body&gt;
187: this.input.value=newValue;
188: &lt;/body&gt;
189: &lt;/method&gt;</PRE>
190: <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.
191: <H3><A NAME="77041"></A> Handlers</H3>
192: <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.
193: <PRE>&lt;handlers&gt;
194: &lt;handler event="mouseover"&gt;
195: this.input.focus( );
196: &lt;/handler&gt;
197: &lt;/handlers&gt;</PRE>
198: <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.
199: <H3><A NAME="77042"></A> Style</H3>
200: <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:
201: <PRE>&lt;resources&gt;
202: &lt;stylesheet src="inputfield.css"/&gt;
203: &lt;/resources&gt;</PRE>
204: <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>."
205: <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.
206: <H2><A NAME="77043"></A> Adding Behavior to Bindings</H2>
207: <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.
208: <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.
209: 210: <P><I>Example 7-1: <A NAME="77008"></A></I>
211: <I>XBL implementation element</I>
212: <PRE> &lt;implementation&gt;
213: &lt;constructor /&gt;
214: &lt;destructor /&gt;
215: &lt;method name=""&gt;
216: &lt;parameter name="" /&gt;
217: &lt;body /&gt;
218: &lt;/method&gt;
219: &lt;property&gt;
220: &lt;getter /&gt;
221: &lt;setter /&gt;
222: &lt;/property&gt;
223: &lt;field /&gt;
224: &lt;/implementation&gt;</PRE>
225: 226: <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.
227: <H3><A NAME="77044"></A> Binding Methods</H3>
228: <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.
229: <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.
230: <PRE>&lt;method name="dumpString"&gt;
231: &lt;parameter name="aString1"/&gt;
232: &lt;parameter name="aString2"/&gt;
233: &lt;body&gt;
234: &lt;![CDATA[
235: if (!aString1 &amp;&amp; aString2)
236: return;
237: return dump(aString1+" "+aString2+"\n");
238: ]]&gt;
239: &lt;/body&gt;
240: &lt;/method&gt;</PRE>
241: <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:
242: <PRE>&lt;mybinding id="myNewWidget"&gt;
243: &lt;image src="<A HREF="http://www.mozdev.org/sharedimages/header.gif">http://www.mozdev.org/sharedimages/header.gif</A>" /&gt;
244: &lt;/mybinding&gt;
245: &lt;button label="test method"
246: oncommand="document.getElementById('myNewWidget')
247: .dumpString('hello', 'there!');"/&gt;</PRE>
248: <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.
249: <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.
250: <H4><A NAME="77045"></A> Attachment and detachment</H4>
251: <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.
252: <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.
253: <PRE>&lt;implementation&gt;
254: &lt;constructor&gt;
255: &lt;![CDATA[ dump("\n********\nCreate\n********\n");]]&gt;
256: &lt;/constructor&gt;
257: &lt;destructor&gt;
258: &lt;![CDATA[ dump("\n********\nDestroy\n********\n");]]&gt;
259: &lt;/destructor&gt;
260: &lt;/implementation&gt;</PRE>
261: <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.
262: <H3><A NAME="77046"></A> Binding Properties</H3>
263: <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.
264: <PRE>&lt;property name="someAttribute"&gt;
265: false;
266: &lt;/property&gt;</PRE>
267: <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.
268: <PRE>&lt;field name="someAttribute"&gt;
269: false;
270: &lt;/field&gt;</PRE>
271: <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:
272: <PRE>&lt;xul:box align="left" flex="1"&gt;
273: &lt;xul:label xbl:inherits="value=title"/&gt;
274: &lt;xul:spacer flex="1"/&gt;
275: &lt;/xul:box&gt;</PRE>
276: <P>This content simply shows some text on the screen. The bound element that uses this content looks like this:
277: <PRE>&lt;mybinding id="my-binding" title="For Those Who Love to Use XBL" /&gt;</PRE>
278: <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.
279: 280: <P><I>Example 7-2: <A NAME="77010"></A></I>
281: <I>An XBL property setting and getting a value</I>
282: <PRE> &lt;property name="title"&gt;
283: &lt;setter&gt;
284: &lt;!</TD>[CDATA[
285: this.setAttribute('title',val); return val</TD>;
286: ]]&gt;
287: &lt;/setter&gt;
288: &lt;getter&gt;
289: &lt;!</TD>[CDATA[
290: return this.getAttribute('title');
291: ]]&gt;
292: &lt;/getter&gt;
293: &lt;/property&gt;</PRE>
294: 295: <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:
296: <PRE>var titleElement = document.getElementById("my-binding");
297: titleElement.title = "The Adventures of an XBL hacker";</PRE>
298: <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.
299: <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>
300: 301: <P><I>Example 7-3: <A NAME="77012"></A></I>
302: <I>Performing a Google search when setting a property</I>
303: <PRE> &lt;property name="searchString"&gt;
304: &lt;setter&gt;
305: &lt;!</TD>[CDATA[
306: var s = new SOAPCall( );
307: </TD>var q = val;
308: if (!s)
309: return "Error creating SOAPCall object";
310: var soapversion = 0;
311: var method = "doGoogleSearch";
312: var object = "urn:GoogleSearch";
313: var headers = </TD>[ ];
314: var params = </TD>[
315: new SOAPParameter(this.googleKey, "key"),
316: new SOAPParameter(q, "q"),
317: new SOAPParameter(this.start, "start"),
318: new SOAPParameter(this.maxResults, "maxResults"),
319: new SOAPParameter(this.filter, "filter"),
320: new SOAPParameter(this.restrict, "restrict"),
321: new SOAPParameter(this.safeSearch, "safeSearch"),
322: new SOAPParameter(this.lr, "lr"),
323: new SOAPParameter("utf8", "ie"),
324: new SOAPParameter("utf8", "oe")
325: ];
326: s.encode(soapversion, method, object, headers.length, headers,
327: params.length, params);
328: s.transportURI = "<A HREF="http://api.google.com/search/beta2">http://api.google.com/search/beta2</A>"
329: var response = s.invoke( );
330: if (response.fault)
331: return { msg : "SOAP call error", fault : response.fault };
332: // At this point you would pass the results back to the UI
333: return response.message;
334: ]]&gt;
335: &lt;/setter&gt;
336: &lt;/property&gt;</PRE>
337: 338: <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>).
339: <H2><A NAME="77047"></A> XBL and the DOM</H2>
340: <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.
341: <H3><A NAME="77048"></A> The XBL DOM Interfaces</H3>
342: <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.
343: <H4><A NAME="77049"></A> DocumentXBL methods</H4>
344: <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:
345: <DL><DT>loadBindingDocument(URL)
346: <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>
347: document.loadBindingDocument('chrome://package/content/myBindings.xml');
348: <DL><DT>getBindingParent(element)
349: <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>
350: var listbox = document.getBindingParent(this);
351: var cellValue = listbox.childNodes[3].firstChild.label;
352: <DL><DT>getAnonymousNodes(element)
353: <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>
354: <DT>getAnonymousElementByAttribute(element, attribute, value)
355: <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>
356: <H4><A NAME="77050"></A> ElementXBL methods</H4>
357: <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:
358: <DL><DT>addBinding(element, URL)
359: <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>
360: <DT>removeBinding(element, URL)
361: <DD>Dynamically removes the <!--INDEX removeBinding( ) method, ElementXBL interface --> given binding. Refer to the following sections for more details.<P></DL>
362: <H4><A NAME="77051"></A> Dynamically adding a binding</H4>
363: <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.
364: <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.
365: <PRE>&lt;mybinding id="myNewWidget" class="attached" /&gt;</PRE>
366: <P>To load a binding, add these two lines in your script.
367: <PRE>var binding = document.getElementById("myNewWidget");
368: document.addBinding(binding, "chrome://mypackage/content/myBindings.xml#super");</PRE>
369: <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>.
370: <BLOCKQUOTE><CENTER><B>NOTE</B></CENTER>
371: <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>
372: <H4><A NAME="77052"></A> Removing bindings</H4>
373: <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.
374: <P>This example shows how to remove a reference to a binding by resetting it to an empty reference:
375: <PRE>mybinding.attached {
376: -moz-binding : url("mybindings.xml#my-binding");
377: }
378: mybinding.unattached {
379: -moz-binding : url("");
380: }</PRE>
381: <P>When you want to detach the binding from an element, you can do this:
382: <PRE>var mywidget = document.getElementById("binding1");
383: mywidget.setAttribute("class","unattached");</PRE>
384: <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.
385: <BLOCKQUOTE><CENTER><B>NOTE</B></CENTER>
386: <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>
387: <P>The other method used to detach a binding, which is more intuitive from a DOM perspective, uses the <TT>removeBinding</TT> method:
388: <PRE>var binding = document.getElementById("myNewWidget");
389: document.removeBinding(binding, "chrome://mypackage/content/myBindings.xml#super");</PRE>
390: <P>This method ensures that other style information is not lost if you have it attached to a particular class.
391: <P>When a binding is removed, the anonymous content is destroyed and the methods, properties, and event handlers no longer apply.
392: <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.
393: <H3><A NAME="77053"></A> Binding Parents</H3>
394: <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.
395: <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:
396: <DL><DT><TT>parentNode</TT>
397: <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>
398: <DT><TT>ownerDocument</TT>
399: <DD>For all elements in the anonymous content, this is the document the bound element resides in.<P></DL>
400: <BLOCKQUOTE><CENTER><B>NOTE</B></CENTER>
401: <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>
402: <P><A HREF="#77014">Example 7-4</A> illustrates both properties in use.
403: 404: <P><I>Example 7-4: <A NAME="77014"></A></I>
405: <I>Accessing a bound document from a binding</I>
406: <PRE> &lt;binding id="my-binding"&gt;
407: &lt;content&gt;
408: &lt;xul:vbox&gt;
409: &lt;xul:button label="A" id="button1"
410: oncommand="alert(this.parentNode.parentNode.nodeName)"</TD>/&gt;
411: &lt;xul:button label="B" id="button2"
412: oncommand="alert(this.ownerDocument.firstChild.nodeName)"</TD>/&gt;
413: &lt;/xul:vbox&gt;
414: &lt;/content&gt;
415: &lt;/binding&gt;</PRE>
416: 417: <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.
418: <H3><A NAME="77054"></A> Accessing Anonymous Nodes</H3>
419: <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.
420: <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.
421: <H4><A NAME="77055"></A> getAnonymousNodes</H4>
422: <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.
423: <PRE>&lt;getter&gt;
424: &lt;![CDATA[
425: var list = document.getAnonymousNodes(this)[0];
426: return list.selectedItem.getAttribute('label');
427: ]]&gt;
428: &lt;/getter&gt;</PRE>
429: <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.
430: <H4><A NAME="77056"></A> getAnonymousElementByAttribute</H4>
431: <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.
432: <PRE>&lt;property name="emailID" onget="return document.getAnonymousElementByAttribute(this, 'id', 'emailAddressNode');" readonly="true"/&gt;</PRE>
433: <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.
434: <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.
435: <H3><A NAME="77057"></A> Extra Binding Content and Insertion Points</H3>
436: <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
437: <H4><A NAME="77058"></A> Working with children of the bound element</H4>
438: <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.
439: <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.
440: <PRE>&lt;binding id="my-binding"&gt;
441: &lt;content&gt;
442: &lt;xul:vbox&gt;
443: &lt;children /&gt;
444: &lt;/xul:vbox&gt;
445: &lt;/content&gt;
446: &lt;/binding&gt;</PRE>
447: <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:
448: <PRE>&lt;mybinding id="myNewWidget" flex="1" class="attached"&gt;
449: &lt;label value="this is child 1" /&gt;
450: &lt;label value="this is child 2" /&gt;
451: &lt;/mybinding&gt;</PRE>
452: <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.
453: <H4><A NAME="77059"></A> Selective inclusion</H4>
454: <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.
455: 456: <P><I>Example 7-5: <A NAME="77016"></A></I>
457: <I>Selective inclusion of child content in a binding</I>
458: <PRE> &lt;binding id="my-binding"&gt;
459: &lt;content&gt;
460: &lt;xul:vbox class="insideBox"&gt;
461: &lt;xul:description value="Top" /&gt;
462: &lt;xul:box&gt;
463: </TD>&lt;children includes="image" /&gt;
464: &lt;/xul:box&gt;
465: &lt;xul:description value="Bottom" /&gt;
466: &lt;/xul:vbox&gt;
467: &lt;/content&gt;
468: &lt;/binding&gt;</PRE>
469: 470: <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:
471: <PRE>&lt;mybinding id="myNewWidget" flex="1"&gt;
472: &lt;image src="<A HREF="http://www.mozdev.org/sharedimages/header.gif">http://www.mozdev.org/sharedimages/header.gif</A>" /&gt;
473: &lt;label value="a non includes element" /&gt;
474: &lt;/mybinding&gt;</PRE>
475: <P>The image is the only child taken from the XUL content and the label is ignored.
476: <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.
477: <PRE>&lt;mybinding id="myNewWidget" flex="1"&gt;
478: &lt;image src="<A HREF="http://www.mozdev.org/sharedimages/header.gif">http://www.mozdev.org/sharedimages/header.gif</A>" /&gt;
479: &lt;label value="an element" /&gt;
480: &lt;/mybinding&gt;</PRE>
481: <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.
482: <H2><A NAME="77060"></A> Inheritance</H2>
483: <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.
484: <H3><A NAME="77061"></A> Binding Inheritance</H3>
485: <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.
486: <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.
487: <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.
488: 489: <P><I>Example 7-6: <A NAME="77018"></A></I>
490: <I>Binding inheritance</I>
491: <PRE> &lt;binding id="listbox-base"</TD>&gt;
492: &lt;resources&gt;
493: &lt;stylesheet src="chrome://global/skin/listbox.css"/&gt;
494: &lt;/resources&gt;
495: &lt;/binding&gt;
496: &lt;binding id="listcell"
497: extends="chrome://global/content/bindings/listbox.xml#listbox-base"</TD>&gt;
498: &lt;content&gt;
499: &lt;children&gt;
500: &lt;xul:label class="listcell-label"
501: xbl:inherits="value=label,flex=flexlabel,crop,disabled"
502: flex="1" crop="right"/&gt;
503: &lt;/children&gt;
504: &lt;/content&gt;
505: &lt;/binding&gt;
506: &lt;binding id="listcell-iconic"
507: extends="chrome://global/content/bindings/listbox.xml#listcell"</TD>&gt;
508: &lt;content&gt;
509: &lt;children&gt;
510: &lt;xul:image class="listcell-icon" xbl:inherits="src=image"/&gt;
511: &lt;xul:label class="listcell-label"
512: xbl:inherits="value=label,flex=flexlabel,crop,disabled"
513: flex="1" crop="right"/&gt;
514: &lt;/children&gt;
515: &lt;/content&gt;
516: &lt;/binding&gt;</PRE>
517: 518: <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.
519: <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>.
520: 521: <P><I>Example 7-7: <A NAME="77020"></A></I>
522: <I>Inheriting XUL widget characteristics using extends</I>
523: <PRE> &lt;binding id="Widget1" extends="xul:vbox"</TD>&gt;
524: &lt;content&gt;
525: &lt;xul:description value="Top" /&gt;
526: &lt;children includes="image" /&gt;
527: &lt;xul:description value="Bottom" /&gt;
528: &lt;/content&gt;
529: &lt;/binding&gt;</PRE>
530: 531: <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.
532: <H3><A NAME="77062"></A> Attribute Inheritance</H3>
533: <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.
534: 535: <P><I>Example 7-8: <A NAME="77022"></A></I>
536: <I>XBL attribute inheritance</I>
537: <PRE> &lt;xul:box class="insideBox" xbl:inherits="orient, flex, align"</TD>&gt;
538: &lt;xul:description value="Top" /&gt;
539: &lt;xul:box&gt;
540: &lt;children includes="image" /&gt;
541: &lt;/xul:box&gt;
542: &lt;xul:description value="Bottom" /&gt;
543: &lt;/xul:box&gt;
544: &lt;/xul:box&gt;</PRE>
545: 546: <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>:
547: <PRE>&lt;mywidget orient="vertical" flex="1" align="center" /&gt;</PRE>
548: <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.
549: <BLOCKQUOTE><CENTER><B>NOTE</B></CENTER>
550: <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>
551: &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;
552: <H3><A NAME="77063"></A> Implementation Inheritance</H3>
553: <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.
554: 555: <P><I>Example 7-9: <A NAME="77024"></A></I>
556: <I>Inheritance of behavior between bindings</I>
557: <PRE> &lt;binding id="Widget1" extends="test.xml#Widget2"</TD>&gt;
558: &lt;content&gt;
559: &lt;xul:box class="insideBox"&gt;
560: &lt;xul:description value="Top" /&gt;
561: &lt;xul:box&gt;
562: &lt;children includes="image" /&gt;
563: &lt;/xul:box&gt;
564: &lt;xul:description value="Bottom" /&gt;
565: &lt;/xul:box&gt;
566: &lt;/content&gt;
567: &lt;/binding&gt;
568: &lt;binding id="Widget2"&gt;
569: &lt;implementation&gt;
570: </TD>&lt;constructor&gt;
571: this.init( );
572: &lt;/constructor&gt;
573: &lt;method name="init"&gt;
574: &lt;body&gt;
575: &lt;!</TD>[CDATA[ dump("This is Widget2");]]&gt;
576: &lt;/body&gt;
577: &lt;/method&gt;
578: &lt;/implementation&gt;
579: &lt;/binding&gt;</PRE>
580: 581: <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.
582: <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.
583: <PRE>&lt;method name="getElementById"&gt;
584: &lt;parameter name="id" /&gt;
585: &lt;body&gt;
586: &lt;!-- implementation here --&gt;
587: &lt;/body&gt;
588: &lt;/method&gt;</PRE>
589: <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.
590: <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.
591: <H2><A NAME="77064"></A> Event Handling</H2>
592: <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.
593: <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
594: 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.
595: <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.
596: <PRE>&lt;handlers&gt;
597: &lt;handler event="mousedown" action="dumpString('hello', 'there!')" /&gt;
598: &lt;/handlers&gt;</PRE>
599: <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:
600: <PRE>&lt;handlers&gt;
601: &lt;handler event="mousedown"&gt;
602: &lt;![CDATA[
603: var list = document.getElementById('someElement');
604: list.setAttribute('style', 'display:block;');
605: ]]&gt;
606: &lt;/handler&gt;
607: &lt;/handlers&gt;</PRE>
608: <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.
609: <H3><A NAME="77065"></A> The Time and Venue</H3>
610: <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.
611: <PRE>&lt;handler event="create" attachto="window" action="returnNode( )"&gt;</PRE>
612: <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>.
613: <BLOCKQUOTE><CENTER><B>WARNING</B></CENTER>
614: <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>
615: <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>.
616: <PRE>&lt;handler event="keypress" modifiers="control, alt" keycode="VK_UP" action="goUp( )"&gt;</PRE>
617: <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.
618: <PRE>&lt;handler event="mouseup" phase="capturing" action="goUp( )"&gt;</PRE>
619: <P>The possible values are <TT>bubbling</TT> (the default), <TT>targeting</TT>, and <TT>capturing</TT>.
620: <P>Here is an example of a handler implementation that fills a tooltip when the <TT>popup</TT> element displaying it is shown:
621: <PRE>&lt;handler event="popupshowing"&gt;
622: &lt;![CDATA[
623: var label = "";
624: var tipNode = document.tooltipNode;
625: if (tipNode &amp;&amp; tipNode.hasAttribute("tooltiptext"))
626: this.label = tipNode.getAttribute("tooltiptext");
627: ]]&gt;
628: &lt;/handler&gt;</PRE>
629: <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.
630: <H2><A NAME="77066"></A> Resources for Bindings</H2>
631: <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.
632: <H3><A NAME="77067"></A> Stylesheets in XBL</H3>
633: <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.
634: <PRE>&lt;stylesheet src="chrome://xfly/skin/color-picker.css" /&gt;</PRE>
635: <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.
636: <PRE>&lt;binding id="popup-base"&gt;
637: &lt;resources&gt;
638: &lt;stylesheet src="chrome://global/skin/popup.css" /&gt;
639: &lt;/resources&gt;
640: &lt;/binding&gt;</PRE>
641: <P>Then you can access the stylesheet in your binding by using the <TT>extends</TT> attribute:
642: <PRE>&lt;binding id="popup" extends="chrome://global/content/bindings/popup.xml#popup-base"&gt;</PRE>
643: <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.
644: <DL><DT>applyauthorstyles
645: <DD>A Boolean value that determines the use of stylesheets from the document that contains the bound element. The default is false.<P>
646: <DT>styleexplicitcontent
647: <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>
648: <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.
649: <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.
650: <PRE>&lt;binding id="images"&gt;
651: &lt;resources&gt;
652: &lt;image src="plane.png"/&gt;
653: &lt;image src="boat.png"/&gt;
654: &lt;image src="bicycle.png"/&gt;
655: &lt;/resources&gt;
656: &lt;/binding&gt;</PRE>
657: <P>If an element calls this binding, the pictures would lay out side-by-side horizontally in the bound document.
658: <HR>
659: <HR><A NAME="253"></A><A HREF="#b253">[Back]</A>
660: <A NAME="77025"></A>
661: This example is modified code taken from
662: <I><A HREF="http://www.segment7.net/mozilla/GoogleAPI/GoogleAPI.html">http://www.segment7.net/mozilla/GoogleAPI/GoogleAPI.html</A></I>
663: , and is
664: covered by a three-clause BSD license. More on SOAP and the SOAP
665: API in Mozilla can be found at
666: <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>
667: Scripts_in_Mozilla.html
668: .
669: <HR><A NAME="254"></A><A HREF="#b254">[Back]</A>
670: <A NAME="77026"></A>
671: The Google API requires a Google Key, and more
672: information can be found at
673: <I><A HREF="http://www.google.com/apis/">http://www.google.com/apis/</A></I>
674: .
675: <HR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
676: <!-- ?php require(NOTES); ? -->
677: <?php $post_to_list=NO; $author='reviewers@mozdev.org'; $target_page='ch07'; require(NOTES); ?>
678: </BODY>
679: </HTML>