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

Chapter 7. Extending the UI with XBL- P4
7.4.4. Extra Binding Content and Insertion Points
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 <children> element
7.4.4.1. Working with children of the bound element
Zero or more children can be contained in anonymous content. These
children are marked up with the XBL-specific <children> tag. They can
be either the content of the element using the binding or anonymous content
generated by the base binding. If the <children> 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.
The location of the <children> 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.
<binding id="my-binding">
<content>
<xul:vbox>
<children />
</xul:vbox>
</content>
</binding>
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
<children> element. Here is the XUL content that uses the binding:
<mybinding id="myNewWidget" flex="1"
class="attached">
<label value="this is child 1" />

<label value="this is child 2" />
</mybinding>
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.
7.4.4.2. Selective inclusion
Sometimes multiple siblings are located 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. Example 7-5
shows how to use the includes attribute on the
<children> element.
Example 7-5. Selective inclusion of child content in a binding
<binding id="my-binding">
<content>
<xul:vbox class="insideBox">
<xul:description value="Top" />
<xul:box>
<children includes="image" />
</xul:box>
<xul:description value="Bottom" />
</xul:vbox>
</content>
</binding>
The children element in Example 7-5
essentially tells, "Of all the content
contained in the bound element, insert only the image element at this

particular insertion point." Here is the XUL code that goes with this
example:
<mybinding id="myNewWidget" flex="1">
<image
src="
/>
<label value="a non includes element" />
</mybinding>
The image is the only child taken from the XUL content and the label is
ignored.
If you have children that are not defined in the includes 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.
<mybinding id="myNewWidget" flex="1">
<image
src="
/>
<label value="an element" />
</mybinding>
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.
7.5. Inheritance
In XBL, inheritance is the process in 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.
7.5.1. Binding Inheritance
Binding inheritance occurs when one binding is 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.
Linkage or inheritance is enabled by the extends attribute on the
<binding> 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 # symbol), and the id of the specific binding
being used. In this way, it is similar to the access method used in CSS
attachment.
Although it is in the XBL 1.0 specification, Mozilla hasn't fully
implemented type="inherits" on the children tag yet, so the best way
to work with binding inheritance is to use the extends attribute. Example
7-6 shows a few bindings used in the implementation of the listbox cell
in the Mozilla tree. It illustrates how extends is used to inherit from
another binding.
Example 7-6. Binding inheritance
<binding id="listbox-base">
<resources>
<stylesheet
src="chrome://global/skin/listbox.css"/>

</resources>
</binding>
<binding id="listcell"

extends="chrome://global/content/bindings/listbox.x
ml#listbox-base">
<content>
<children>
<xul:label class="listcell-label"

xbl:inherits="value=label,flex=flexlabel,crop,disab
led"
flex="1" crop="right"/>
</children>
</content>
</binding>
<binding id="listcell-iconic"

extends="chrome://global/content/bindings/listbox.x
ml#listcell">
<content>
<children>
<xul:image class="listcell-icon"
xbl:inherits="src=image"/>
<xul:label class="listcell-label"

xbl:inherits="value=label,flex=flexlabel,crop,disab
led"
flex="1" crop="right"/>
</children>

</content>
</binding>
In Example 7-6
, listcell-iconic inherits listcell. In turn,
listcell inherits list-box-base, which holds resources. The
listcell binding is a cell with text only and the listcell-iconic
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 listcell-
iconic is used, the duplicate xul:label 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.
With binding extensions that use the extends 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