Creating Applications with Mozilla-Chapter 3. XUL Elements and Features- P3

Chapter 3. XUL Elements and Features- P3

Figure 3-5. Multilevel tree hierarchy

3.4.2.4. Using trees in XUL templates
XUL templates are special built-in structures that allow dynamic updating of
XUL elements and that are often used with trees and list boxes. Templates
harness the power of the Resource Description Framework (RDF) to pull
data from external datasources and dynamically create or update content in
the UI. The following code extract shows the basic structure of a XUL
template for displaying the browser history in Mozilla:
<template>
<rule>
<treechildren>
<treeitem uri="rdf:*"
rdf:type="rdf: />syntax-
ns#type">
<treerow>
<treecell
label="rdf:
<treecell
label="rdf:
<treecell
label="rdf:
<!-- further cells -->
</treerow>
</treeitem>
</treechildren>
</rule>
</template>
For each entry or row in the browser history, the template extracts

information from the datasource and renders it in a treecell. It then
updates it each time a page is visited. For a more detailed discussion, refer to
Chapter 9
.
3.4.2.5. Custom tree views
Custom views extend upon the static presentation of data in a tree with more
flexibility, different ways to present the same data, and interfaces for
defining behavior related to content. The functions include intercepting a
treeitem selection and carrying out some functionality, populating or
getting values from the tree, and returning the number of rows currently in
the tree.
The first thing you have to do to build a custom view is instantiate your
tree and then associate a view object with it, commonly known as a view.
document.getElementById('main-
tree').treeBoxObject.view=mainView;
In this example, the view that is exposed in the nsITreeView XPCOM
object is essentially the lifeline for the tree, supplying the data that populates
the view. The view is assigned to the code object that contains all the
functions available to it and your implementation of what you need to do
when they are activated.
Here is a large subset of the functions available to the view object:
setTree(tree)
Called during initialization and used to connect the tree view to the front
end. This connection ensures that the correct tree is associated with the view.
getCellText (row,column)
Returns the text of a particular cell, or an empty string if there's just an
image in it.
rowCount
Set up the number of rows that you anticipate for your tree.
cycleHeader(index)

Called when you click on the header of a particular column.
toggleOpenState
Put code in here to be carried out when the view is expanded and
collapsed.
setCellText (row, colID, value)
Called when the contents of the cell have been edited.
performAction (action)
An event from a set of commands can be invoked when you carry out
a certain action on the outliner. The tree invokes this method when
certain keys are pressed. For example, when the ENTER key is
pressed, performAction calls with the "enter" string.
There are more local conveniences in the form of PerformActionOnRow
and performActionOnCell.
selectionChanged
Should be hooked up to the onselect handler of the <tree>
element in the XUL content.
3.4.3. Grid
A <grid> is another XUL table structure, designed to be more flexible
with the content it can hold than the other tabular widgets. Example 3-12

shows a two-column grid that holds text input boxes and labels for them.
Example 3-12. XUL grid
<grid>
<columns><column flex="1"/><column
flex="2"/></columns>
<rows>
<row align="center">
<label value="Title"/>
<textbox id="title-text"
oninput="TextboxInput(this.id)"/>

</row>
<row align="center">
<label value="Author"/>
<textbox id="author-text" oninput="
TextboxInput(this.id)"/>
</row>
<row align="center">
<label value="About"/>
<textbox id="about-text" oninput="
TextboxInput(this.id)"/>
</row>
</rows>
</grid>
In a grid, the number of columns needs to be defined and placed in a
<columns> set. In Example 3-12
, the first column holds the labels and the
second contains the text boxes. These two columns are horizontal to each