Tài liệu Creating Applications with Mozilla-Chapter 7. Extending the UI with XBL- P3 docx

Chapter 7. Extending the UI with XBL- P3
Although it is most commonly used just for getting and setting values on the
property, nothing stops you from putting more code in the <properties>
element that carries out other actions on the binding. One scenario shown in
Example 7-3
is if you have a property that holds a search value, you can
send that text to the Google [1]
API, and fill another widget in the UI with
the results every time the value is updated. [2]

Example 7-3. Performing a Google search when setting a property
<property name="searchString">
<setter>
<![CDATA[
var s = new SOAPCall( );
var q = val;
if (!s)
return "Error creating SOAPCall object";
var soapversion = 0;
var method = "doGoogleSearch";
var object = "urn:GoogleSearch";
var headers = [ ];
var params = [
new SOAPParameter(this.googleKey, "key"),
new SOAPParameter(q, "q"),
new SOAPParameter(this.start, "start"),
new SOAPParameter(this.maxResults,
"maxResults"),
new SOAPParameter(this.filter, "filter"),
new SOAPParameter(this.restrict,
"restrict"),

new SOAPParameter(this.safeSearch,
"safeSearch"),
new SOAPParameter(this.lr, "lr"),
new SOAPParameter("utf8", "ie"),
new SOAPParameter("utf8", "oe")
];
s.encode(soapversion, method, object,
headers.length, headers,
params.length, params);
s.transportURI =
"
var response = s.invoke( );
if (response.fault)
return { msg : "SOAP call error", fault :
response.fault };
// At this point you would pass the results
back to the UI
return response.message;
]]>
</setter>
</property>
The value of the search string is set to the value that has been given to the
property: var q = val. This value is then added to the parameter list
(SOAPParameter) for the SOAP call, along with other parameters that are
obtained from other properties in the binding (e.g., this.maxResults).
Notes
[1]
This example is modified code taken from
and is covered by a three-
clause BSD license. More on SOAP and the SOAP API in Mozilla can be found at

/>.
[2] The Google API requires a Google Key, and more information can be found at

7.4. XBL and the DOM
This section introduces 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.
7.4.1. The XBL DOM Interfaces
XBL has two core DOM interfaces, DocumentXBL and ElementXBL.
These extensions to the Document and Element 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.
7.4.1.1. DocumentXBL methods
The DocumentXBL interface gains access to and interacts with an XBL
document. The methods of this interface are as follows:
loadBindingDocument(URL)
XBL documents are loaded 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.
document.loadBindingDocument('chrome://package/cont
ent/myBindings.xml');
getBindingParent(element)
For use only within a binding, this method returns the bound element -
- i.e., the top-level node of the binding, when passed an element
within a binding.
var listbox = document.getBindingParent(this);
var cellValue =

listbox.childNodes[3].firstChild.label;
getAnonymousNodes(element)
Returns an array with the input binding's top-level content nodes.
Refer to the section Section 7.4.3
, later in this chapter, for more
details.
getAnonymousElementByAttribute(element, attribute, value)
Returns a single anonymous element when passed an element, an
attribute from that element, and its value. Refer to the section Section
7.4.3 for more details.
7.4.1.2. ElementXBL methods
The ElementXBL interface adds and removes bindings from a bound
element. The methods of this interface are as follows:
addBinding(element, URL)
Dynamically attaches a binding, given as a parameter, to an element.
Refer to the following sections for more details.
removeBinding(element, URL)
Dynamically removes the given binding. Refer to the following
sections for more details.
7.4.1.3. Dynamically adding a binding
The section Section 7.2
covered the attachment of a binding to a bound
element using CSS. This technique is the most common method, but you can
also attach bindings with the addBinding method.
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