The following describes how to use a template with an outliner.
Like the tree, you can generate the content of the outliner from an RDF datasource using a template. In this case, you do not need to have a view object created within a script, as the data will be supplied by the datasource.
Using a template with an outliner uses very much the same syntax as a tree. You need to add a datasources and a ref attribute to the outlinerbody element, which specify the datasource and root node to display. Note that these attributes do not go on the outliner element.
The following example uses the history datasource:
<outlinerbody datasources="rdf:history" ref="NC:HistoryByDate"> |
You can use a template and rules using the same method as with trees. Multiple rules can be used to indicate different content for different types of data. You can use either the simple rule syntax or the full rule syntax, although there is a slight difference when using the full syntax which will be described later.
Two additional elements are used when using template-built outliners. The first, outlinerrow defines a row. It is used as a placeholder and should have the uri attribute. The second element is the outlinercell, which defines a cell.
There will be one outlinercell for each column in the outliner. The cells should have a label attribute to set the label for the cell. This would normally be set to an RDF property so that the label is pulled from the datasource. The cell should also have a ref attribute which should be set to the id of the outlinercol that it corresponds to.
The following example demonstrates a template-built outliner, in this case for the file system.
Example 9.3.1
<outliner id="my-outliner" flex="1">
<outlinercol id="Name" label="Name" flex="1"/>
<splitter/>
<outlinercol id="Date" label="Date" flex="1"/>
<outlinerbody datasources="rdf:files" ref="file:///" flex="1">
<template>
<rule>
<outlinerrow uri="rdf:*">
<outlinercell label="rdf:http://home.netscape.com/NC-rdf#Name" ref="Name"/>
<outlinercell label="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate" ref="Date"/>
</outlinerrow>
</rule>
</template>
</outlinerbody>
</outliner>
|
Here, an outliner is created with two columns, for the name and date of a file. The outliner should display a list of the files in the root directory. Here, only one rule is used, but you may add others if needed. Like with tree-based templates, the uri attribute on an element indicates where to start generating content.
The two cells grab the name and date from the datasource and place the values in the cell labels. The ref attributes on the cells correspond the ids of the columns. This is needed so that you can rearrange the order of the columns, or hide some of them, and the data will know which column to go in without having to rely on the column index.
If you look in the image, you might notice a number of things which don't look quite right. The first is that the directories do not have twisties to the left of them so that one can expand and collapse them to see the files in the each directory. The user can double-click the row to expand it, but it won't render indented. The second issue is that the items are not sorted alphabetically. Fixing both of these issues will make the file view more usable.
The outliner assumes by default that it will not contain nested rows. You can change this behavior by setting the primary attribute on the first column to true. By doing so, twisties will appear to the left of the first column to indicate the indentation level and that a row contains child elements.
Actually, you can use the primary attribute on any column, or on more than one column, but it doesn't look very conventional if you do so.
Outliners which generate their data from a datasource have the optional ability to sort their data. You can sort either ascending or descending on any column. The user may change the sort column and direction by clicking the column headers. Sorting involves three attributes, which should be placed on the columns.
The first attribute, sort, should be set to an RDF property that is used as the sort key. Usually, this would be the same as that used in the label of the cell in that column. If you set this on a column, the data will be sorted in that column. The user can change the sort direction by clicking the column header. If you do not set the sort attribute on a column, the data cannot be sorted by that column.
The sortDirection attribute (note the mixed case) is used to set the direction in which the column will be sorted by default. Three values are possible:
The final attribute, sortActive should be set to true for one column, the one that you would like to be sorted by default.
Although the sorting will function correctly with only those attributes, you may also use the style class sortDirectionIndicator on a column that can be sorted. This will cause a small triangle to appear on the column header that indicates the direction of the sort.
The following example changes the columns in the earlier example to incorporate the extra features:
Example 9.3.2
<outliner id="my-outliner" flex="1">
<outlinercol id="Name" label="Name" flex="1" primary="true"
class="sortDirectionIndicator" sortActive="true"
sort="rdf:http://home.netscape.com/NC-rdf#Name"/>
<splitter/>
<outlinercol id="Date" label="Date" flex="1" class="sortDirectionIndicator"
sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/>
|
One additional thing you can do with columns is to persist which column is currently sorted, along with the widths of each column and which ones are currently hidden. To do this, we use the persist attribute on each outlinercol element.
There are four attributes of columns that need to be persisted, to save the column width, whether the column is visible, the sort direction and which column is currently sorted. The following example shows a sample column:
<outlinercol id="Date" label="Date" flex="1"
class="sortDirectionIndicator"
persist="hidden width sortActive sortDirection"
sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/>
|
Script-built outliners let you use the getCellProperties and related functions to define cell, row and column properties. You can use this to style the cells individually. You can also do this with template-built outliners, by placing a properties attribute on the cell, row or column. Its value should be either the property name to use, or a list of properties separated by commas.
For example, the following will make the name red, and give the rows a thin border along each bottom edge.
XUL:
<outlinerrow uri="rdf:*" properties="bordered">
<outlinercell label="rdf:http://home.netscape.com/NC-rdf#Name"
properties="makeItRed" ref="Name"/>
<outlinercell label="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"
ref="Date"/>
</outlinerrow>
CSS:
outlinerbody:-moz-outliner-row(bordered)
{
border-bottom: 1px solid black;
}
outlinerbody:-moz-outliner-cell(makeItRed)
{
color: red;
}
|
You can also use the full rule syntax with outliners also. The syntax is the same with one exception. Instead of using the content tag to indicate the template node, use the outlinerrow element. This difference is because content is not being generated (remember that the outlinerbody contains all of the content).
Here is an example, using the animals datasource:
Example 9.3.3
<outliner id="my-outliner" flex="1">
<outlinercol id="Name" label="Name" flex="1" primary="true"/>
<splitter/>
<outlinercol id="Species" label="Species" flex="1"/>
<outlinerbody flex="1" datasources="animals.rdf" ref="urn:animals:data">
<template>
<rule>
<conditions>
<outlinerrow uri="?list"/>
<member container="?list" child="?child"/>
<triple subject="?child"
predicate="http://www.some-ficticious-zoo.com/rdf#name"
object="?name"/>
</conditions>
<bindings>
<binding subject="?child"
predicate="http://www.some-ficticious-zoo.com/rdf#species"
object="?species"/>
</bindings>
<action>
<outlinerrow uri="?child">
<outlinercell label="?name" ref="Name"/>
<outlinercell label="?species" ref="Species"/>
</outlinerrow>
</action>
</rule>
</template>
</outlinerbody>
</outliner>
|
Here, we display an outliner with two columns, for the name and species. A triple pulls the name from the datasource and stores it in the variable '?name', which is later used in the first outlinercell. The species is placed in a binding instead of the conditions because it is optional.
(Next) Next, we'll look at using style sheets with XUL files.