Tài liệu Creating Applications with Mozilla-Chapter 7. Extending the UI with XBL- P2 pptx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (27.25 KB, 11 trang )
Chapter 7. Extending the UI with XBL- P2
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.
7.2.3.3. Properties
Like Java properties, an XBL <property> 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:
<property name="value" readonly="true">
<getter>
return this.input.value;
</getter>
</property>
<property name="uppercase" readonly="true"
onget="return this.value.toUpperCase(
);"/>
<property name="backgroundColor">
<getter>
return
this.input.inputField.style.backgroundColor;
</getter>
<setter>
this.input.inputField.style.backgroundColor=val;
return val;
</setter>
</property>
At this point, the characteristics of properties to watch out for include the
readonly attribute, the getter and setter elements, and the existence of a
val 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.
7.2.3.4. Methods
Methods in XBL are self-contained functions represented by the <method>
tag and encapsulated within the <implementation> 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.
<method name="clear">
<body>
this.input.value='';
</body>
</method>
<method name="setValue">
<parameter name="newValue"/>
<body>
this.input.value=newValue;
</body>
</method>
The method code is contained in a <body> tag, and each method can have 0
or more parameters, which gather the values passed into the method when
called.
7.2.4. Handlers
Handlers in XBL mimic regular document events like onclick and
onmousedown, and provide a means for trapping them within your binding
and carrying out tasks associated with them.
<handlers>
<handler event="mouseover">
this.input.focus( );
</handler>
</handlers>
Each handler is contained in a <handler> tag and the event name is
placed in the event attribute -- minus the "on" prefix. The handler in the
code shown above places the focus in the inputfield when the mouse
goes over it. See the section "Event Handling," later in this chapter, for more
details.
7.2.5. Style
The sample binding's last piece 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:
<resources>
<stylesheet src="inputfield.css"/>
</resources>
Notice the <resources> 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 Section 7.7
.
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.
7.3. Adding Behavior to Bindings
Like XUL widgets, XBL uses JavaScript 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.
The <implementation> element is the container for all other elements
that make up a binding's behavioral portion. Example 7-1
shows an empty
implementation shell that highlights the element's contained hierarchy.
Example 7-1. XBL implementation element
<implementation>
<constructor />
<destructor />
<method name="">
<parameter name="" />
<body />
</method>
<property>
<getter />
<setter />
</property>
<field />
</implementation>
The code in Example 7-1
shows the <implementation> 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.
